@charset "UTF-8";
/* ==========================================================================
   VegaPOS — Kurumsal Widget Stilleri
   Sürüm : 3.60.0
   Konum : /wp-content/themes/[child-tema]/assets/css/vgp-widgets.css
   Not   : HTML widget'ların içinde stil bulunmaz. Tüm görsel kararlar buradadır.

   BLOK DİZİNİ
   00 — Token tanımları
   01 — Font tanımları
   02 — Ortak temel (kapsayıcı, tipografi sıfırlama, ikonlar)
   03 — Ortak bileşen: üst etiket (eyebrow)
   04 — Ortak bileşen: butonlar
   05 — Blok: Sayfa başlığı (hero)
   06 — Blok: Kart ızgarası
   07 — Blok: Sayı şeridi
   08 — Blok: CTA şeridi
   09 — Blok: İndirme kartı
   10 — Blok: Metin bloğu
   11 — Blok: Zaman çizelgesi
   12 — Blok: Gerekçe listesi
   13 — Blok: Hazırlık şeridi
   14 — Blok: Süreç adımları
   15 — Blok: SSS akordiyonu
   16 — Blok: Çözüm paketi
   17 — Blok: Ölçek kademeleri
   18 — Etiket listesi (yardımcı)
   19 — Blok: Genel panel
   20 — Blok: Sekmeli geçiş ve döşeme ızgarası
   21 — Blok: Bilgi tablosu
   22 — Blok: İletişim kanalları
   23 — Blok: Kazanım listesi
   24 — Blok: Referans logoları
   25 — Blok: Ödeme ve güvenlik rozetleri
   26 — Blok: Üst şerit (topbar)
   27 — Blok: Hesap durum kartı
   28 — Blok: Kargo yöntemi etiketi
   29 — Tema düzeltmesi: Mağaza kenar çubuğu filtreleri
   30 — Duyarlı düzen
   31 — Tema düzeltmesi: "Tüm Kategoriler" menüsü boşluk sıklaştırma
   32 — Blok: Ödeme yönlendirme kartı
   99 — Erişilebilirlik
   ========================================================================== */


/* ==========================================================================
   00 — TOKEN TANIMLARI
   Çok müşterili kullanımda yalnızca bu blok değişir.
   ========================================================================== */

:root {
  /* Marka */
  --vgp-brand:        #0239B8;
  --vgp-brand-dark:   #022E96;
  --vgp-deep:         #031975;
  --vgp-deep-dark:    #02115A;

  /* Metin */
  --vgp-ink:          #0B1220;
  --vgp-muted:        #5A6478;
  --vgp-on-dark:      #FFFFFF;
  --vgp-on-dark-soft: #C3CDEC;

  /* Yüzey */
  --vgp-white:        #FFFFFF;
  --vgp-soft:         #F4F7FD;
  --vgp-line:         #E3E8F2;
  --vgp-line-strong:  #CBD5EA;

  /* Koyu zemin üzeri cam yüzey */
  --vgp-glass-bg:     rgba(255, 255, 255, .06);
  --vgp-glass-line:   rgba(255, 255, 255, .18);

  /* Durum renkleri — yalnızca rozet ve uyarıda, butonda asla */
  --vgp-ok:           #0E8A5F;
  --vgp-warn:         #B26A00;
  --vgp-err:          #C0342B;

  /* Gölge — yalnızca kartlarda, marka rengine boyalı */
  --vgp-shadow:       0 18px 44px rgba(2, 57, 184, .13);

  /* Geometri */
  --vgp-r-card:       14px;
  --vgp-r-btn:        10px;
  --vgp-r-badge:      8px;
  --vgp-r-block:      20px;

  /* Ölçü */
  --vgp-container:    1500px;
  --vgp-gap:          24px;
  --vgp-block-space:  40px;

  /* Mobilde yapışkan sekme çubuğunun üstten mesafesi.
     Temanın sabit mobil başlığı varsa bu değeri onun yüksekliği kadar artırın. */
  --vgp-sticky-top:   8px;
  --vgp-pad-y:        80px;

  /* Tipografi */
  --vgp-font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vgp-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}


/* ==========================================================================
   01 — FONT TANIMLARI
   Başlık: Sora (700, 800) — Gövde: Inter (400, 600)
   latin + latin-ext alt kümeleriyle indirilip /assets/fonts/ altına konur.
   Dosyalar yüklenmeden de site çalışır; sistem fontuna düşer.
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   02 — ORTAK TEMEL
   .vgp-block her widget'ın kök sınıfıdır. Tema stillerinin sızmasını
   engellemek için tipografi burada sıfırlanır.
   ========================================================================== */

.vgp-block {
  box-sizing: border-box;
  margin: 0 0 var(--vgp-block-space);
  font-family: var(--vgp-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--vgp-ink);
  -webkit-font-smoothing: antialiased;
}

.vgp-block *,
.vgp-block *::before,
.vgp-block *::after {
  box-sizing: inherit;
}

.vgp-block :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--vgp-font-display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: inherit;
}

.vgp-block :where(p) {
  margin: 0;
  color: inherit;
}

.vgp-block :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vgp-block :where(a) {
  color: var(--vgp-brand);
  text-decoration: none;
}

.vgp-block :where(a:hover) {
  text-decoration: underline;
}

.vgp-block :where(svg) {
  display: block;
  flex: none;
}

/* İkonlar — çizgi stili, tek renk, dolgusuz. Boyut ve çizgi kalınlığı
   HTML'de değil burada tanımlanır. */
.vgp-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vgp-icon--sm { width: 16px; height: 16px; }

/* Kapsayıcı */
.vgp-wrap {
  width: 100%;
  max-width: var(--vgp-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Bölüm başlığı */
.vgp-head {
  max-width: 720px;
  margin-bottom: 40px;
}

.vgp-head__title { font-size: 30px; }

.vgp-head__text {
  margin-top: 14px !important;
  color: var(--vgp-muted);
}

/* Bir formun ya da başka bir bileşenin hemen üstünde duran başlıklar için.
   Varsayılan blok boşluğu bu durumda araya fazla mesafe koyuyor. */
.vgp-block--tight { margin-bottom: 18px; }

.vgp-block--tight .vgp-head { margin-bottom: 0; }


/* ==========================================================================
   03 — ORTAK BİLEŞEN: ÜST ETİKET (EYEBROW)
   ========================================================================== */

.vgp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--vgp-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vgp-brand);
}

.vgp-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.vgp-hero .vgp-eyebrow,
.vgp-cta .vgp-eyebrow { color: var(--vgp-on-dark-soft); }

.vgp-hero--soft .vgp-eyebrow { color: var(--vgp-brand); }


/* ==========================================================================
   04 — ORTAK BİLEŞEN: BUTONLAR
   ========================================================================== */

.vgp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--vgp-r-btn);
  font-family: var(--vgp-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.vgp-btn--primary {
  background: var(--vgp-brand);
  border-color: var(--vgp-brand);
  color: var(--vgp-white) !important;
}

.vgp-btn--primary:hover {
  background: var(--vgp-brand-dark);
  border-color: var(--vgp-brand-dark);
}

.vgp-btn--ghost {
  background: transparent;
  border-color: var(--vgp-line-strong);
  color: var(--vgp-brand) !important;
}

.vgp-btn--ghost:hover {
  border-color: var(--vgp-brand);
  background: var(--vgp-soft);
}

.vgp-btn--light {
  background: var(--vgp-white);
  border-color: var(--vgp-white);
  color: var(--vgp-deep) !important;
}

.vgp-btn--light:hover {
  background: var(--vgp-on-dark-soft);
  border-color: var(--vgp-on-dark-soft);
}

.vgp-btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--vgp-on-dark) !important;
}

.vgp-btn--outline-light:hover {
  border-color: var(--vgp-white);
  background: rgba(255, 255, 255, .10);
}

.vgp-btn--block { width: 100%; }

/* Yalnızca geniş ekranda görünen buton. Başlık çubuğunda ikiden fazla
   buton dar ekrana sığmıyor; ikincil olan bu sınıfla gizlenir. */
@media (max-width: 1024px) {
  .vgp-btn--desktop { display: none !important; }
}

/* Buton içinde ekran genişliğine göre değişen metin.
   Uzun buton yazıları dar ekranda iki satıra kırılıyor. İki metin birlikte
   yazılır, hangisinin görüneceğini kırılım belirler; ikisi de silinmemeli. */
.vgp-btn__short { display: none; }

@media (max-width: 1024px) {
  .vgp-btn__full  { display: none; }
  .vgp-btn__short { display: inline; }
}

/* Küçük boy — başlık çubuğu gibi dar alanlar için */
.vgp-btn--sm {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 9px;
}

.vgp-btn--sm .vgp-icon { width: 16px; height: 16px; }

/* Başlık çubuğu buton grubu.
   .vgp-block kullanılmaz: o sınıfın alt boşluğu başlık düzenini bozar. */
.vgp-navbtns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vgp-font-body);
}

/* Mobil menü içinde alt alta ve tam genişlikte */
.vgp-navbtns--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.vgp-navbtns--stack .vgp-btn { width: 100%; }

/* Başlık çubuğu bilgi öğeleri.
   Buton değil, iki satırlı bilgi öğeleridir: üstte ne olduğu, altta değer.
   Yanındaki butonlarla yarışmamaları için dolgusuzdurlar.

   .vgp-navtel  → telefon
   .vgp-navitem → aynı görünümde diğer bağlantılar (sürücü klasörü gibi)
   İkisi tüm stilleri paylaşır; ayrı sınıf yalnızca okunabilirlik içindir. */
.vgp-navtel,
.vgp-navitem {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 4px;
  font-family: var(--vgp-font-body);
  text-decoration: none !important;
  color: var(--vgp-ink) !important;
}

.vgp-navtel__icon,
.vgp-navitem__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(2, 57, 184, .10);
  color: var(--vgp-brand);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.vgp-navtel__icon .vgp-icon { width: 17px; height: 17px; }

.vgp-navtel:hover .vgp-navtel__icon,
.vgp-navitem:hover .vgp-navitem__icon {
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
  transform: scale(1.06);
}

.vgp-navtel__body,
.vgp-navitem__body { display: flex; flex-direction: column; }

.vgp-navtel__label,
.vgp-navitem__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--vgp-muted);
}

/* Değer satırı gövde fontuyla (Inter 600) yazılır. Başlık fontu Sora 700
   bu ölçekte menü öğelerinin yanında fazla ağır kalıyor ve başlık çubuğunda
   iki farklı yazı ağırlığı yarışıyordu. */
.vgp-navtel__value,
.vgp-navitem__value {
  font-family: var(--vgp-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--vgp-ink);
  transition: color .2s ease;
}

.vgp-navtel:hover .vgp-navtel__value,
.vgp-navitem:hover .vgp-navitem__value { color: var(--vgp-brand) !important; }


/* --- İkonlar CSS'ten basılır ---
   Woodmart'ın başlık HTML alanı wp_kses ile temizleniyor ve <svg>
   etiketlerini siliyor. Bu yüzden başlık öğelerinin ikonları HTML'e
   yazılmaz; maske yöntemiyle buradan gelir.

   Yeni bir ikon eklemek için: .vgp-navitem--[ad] varyantı tanımlayın ve
   mask-image değerini değiştirin. Renk currentColor'dan miras alınır. */
.vgp-navtel__icon::before,
.vgp-navitem__icon::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.vgp-navtel__icon::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/></svg>");
}

.vgp-navitem--download .vgp-navitem__icon::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

/* İkon HTML'den geliyorsa (SVG korunan alanlarda) maske basılmasın */
.vgp-navtel__icon:has(svg)::before,
.vgp-navitem__icon:has(svg)::before { content: none; }

/* Misafirde sepeti gizler.
   Bu sitede misafir alışverişi yok: fiyatlar giriş yapmadan görünmüyor ve
   sepete ekleme kapalı. Sürekli sıfır gösteren bir sepet ikonu başlıkta
   yer ve dikkat tüketiyor.

   .vgp-misafir sınıfı functions.php içindeki body_class filtresinden gelir;
   o kod eklenmezse bu kural hiç çalışmaz.

   Woodmart'ın sepet öğesi sınıfı tema sürümüne göre değişebiliyor; birkaç
   olası seçici birlikte hedeflenmiştir. Sepet gizlenmiyorsa DevTools'tan
   gerçek sınıf adını alıp buraya ekleyin.

   MİSAFİR ALIŞVERİŞİ AÇILIRSA BU KURALI KALDIRIN. Sepete ürün ekleyip
   sepetini göremeyen kullanıcı, ürünün kaybolduğunu düşünür. */
body.vgp-misafir .wd-header-cart,
body.vgp-misafir .whb-column .wd-header-cart,
body.vgp-misafir .wd-tools-element.wd-header-cart { display: none !important; }


/* İki bilgi öğesi yan yana geldiğinde aralarına ince ayraç koyar */
.vgp-navgroup {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

/* Ayraç çizgisi kenarlıkla değil sözde öğeyle çiziliyor: kenarlık öğenin
   tam yüksekliğini kaplıyor ve iki satırlık metinden taşıyordu. Burada
   yüksekliği elle veriliyor ve dikeyde ortalanıyor. */
.vgp-navgroup > * + * {
  position: relative;
  padding-left: 20px;
}

.vgp-navgroup > * + *::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 26px;
  margin-top: -13px;
  background: var(--vgp-line);
}

@media (max-width: 1200px) {
  .vgp-navgroup { gap: 10px; }
  .vgp-navgroup > * + * { padding-left: 10px; }
  .vgp-navgroup > * + *::before { height: 20px; margin-top: -10px; }
}

/* Dolu varyant — koyu zeminli başlık çubuğu kullanıyorsanız */
.vgp-navtel--solid .vgp-navtel__label { color: var(--vgp-on-dark-soft); }
.vgp-navtel--solid .vgp-navtel__value { color: var(--vgp-on-dark); }

.vgp-navtel--solid .vgp-navtel__icon {
  background: rgba(255, 255, 255, .14);
  color: var(--vgp-on-dark);
}

@media (max-width: 1200px) {
  .vgp-navbtns { gap: 8px; }

  /* Başlık butonu dar ekranda tek satırda kalmalı; kırılma yerine
     yazı küçülür ve iç boşluk daralır. */
  .vgp-navbtns .vgp-btn--sm {
    padding: 9px 14px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  /* Dar ekranda yalnızca ikon kalır — bu kural BAŞLIK ÇUBUĞU içindir,
     orada yer sınırlıdır. */
  .vgp-navtel__body,
  .vgp-navitem__body { display: none; }

  .vgp-navtel,
  .vgp-navitem { gap: 0; }

  /* --wide varyantı: mobil menü, kenar çubuğu gibi geniş alanlarda
     kullanılır. Yazılar görünür kalır ve öğe satırı tam kaplar.
     Başlık çubuğunda KULLANMAYIN, orada taşma yapar. */
  .vgp-navtel--wide,
  .vgp-navitem--wide {
    display: flex;
    width: 100%;
    gap: 12px;
    padding: 10px 0;
  }

  .vgp-navtel--wide .vgp-navtel__body,
  .vgp-navitem--wide .vgp-navitem__body { display: flex; }
}

.vgp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}


/* ==========================================================================
   05 — BLOK: SAYFA BAŞLIĞI (HERO)
   İki sütun: solda mesaj, sağda özet paneli.
   İmza öğesi: alt kenardaki barkod dokusu — otomatik tanımlama sektöründen
   gelen bir motif, görsel dosyası kullanılmadan saf CSS ile üretilir.
   ========================================================================== */

.vgp-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--vgp-r-block);
  background-color: var(--vgp-deep);
  background-image:
    radial-gradient(120% 90% at 82% 18%, rgba(255, 255, 255, .10) 0%, transparent 58%),
    linear-gradient(140deg, var(--vgp-deep) 0%, var(--vgp-deep-dark) 100%);
  color: var(--vgp-on-dark);
}

/* Barkod dokusu — üç farklı periyotta çizgi katmanı üst üste bindirilir.
   Maske hem yukarı hem yanlara doğru söner; köşelerde kesik izlenimi kalmaz. */
.vgp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 5px, transparent 5px 23px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 14px);
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
}

.vgp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 60px;
  align-items: center;
  padding-block: var(--vgp-pad-y);
}

.vgp-hero__title { font-size: 42px; }

.vgp-hero__lead {
  margin-top: 22px !important;
  max-width: 540px;
  font-size: 17px;
  color: var(--vgp-on-dark-soft);
}

/* Sağdaki özet paneli */
.vgp-hero__panel {
  padding: 30px;
  border: 1px solid var(--vgp-glass-line);
  border-radius: var(--vgp-r-card);
  background-image: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .28);
}

.vgp-hero__panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vgp-hero__panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--vgp-r-badge);
  border: 1px solid var(--vgp-glass-line);
  background: rgba(255, 255, 255, .09);
  color: var(--vgp-on-dark);
}

.vgp-hero__panel-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-hero__panel-text {
  margin-top: 14px !important;
  font-size: 14px;
  line-height: 1.65;
  color: var(--vgp-on-dark-soft);
}

.vgp-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--vgp-glass-line);
}

.vgp-hero__fact {
  padding-left: 16px;
  border-left: 1px solid var(--vgp-glass-line);
}

.vgp-hero__fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.vgp-hero__fact-value {
  font-family: var(--vgp-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vgp-hero__fact-label {
  margin-top: 5px !important;
  font-size: 12px;
  line-height: 1.45;
  color: var(--vgp-on-dark-soft);
}

.vgp-hero__panel-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.vgp-hero__panel-actions .vgp-btn { padding-block: 13px; }

/* Panelin ikincil eylemi buton değil, bağlantıdır — iki dolu buton
   üst üste geldiğinde hangisinin öncelikli olduğu kaybolur. */
.vgp-hero__panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vgp-on-dark) !important;
}

.vgp-hero__panel-link svg { transition: transform .2s ease; }
.vgp-hero__panel-link:hover svg { transform: translateX(4px); }

/* Açık varyant — alt kurumsal sayfalarda koyu blok tekrarını önlemek için */
.vgp-hero--soft {
  background-color: var(--vgp-soft);
  background-image: none;
  color: var(--vgp-ink);
}

/* Açık zeminde barkod dokusu koyu zemindekinden daha baskın çıkıyor:
   beyaz üzerinde mavi çizgiler yüksek kontrast veriyor ve gürültüye
   dönüşüyor. Bu yüzden opaklıklar burada bilinçli olarak düşürülmüştür. */
.vgp-hero--soft::after {
  height: 96px;
  background-image:
    repeating-linear-gradient(90deg, rgba(2,57,184,.055) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(2,57,184,.035) 0 5px, transparent 5px 23px),
    repeating-linear-gradient(90deg, rgba(2,57,184,.025) 0 3px, transparent 3px 14px);
}

.vgp-hero--soft .vgp-hero__lead { color: var(--vgp-muted); }

/* --- Sonuç varyantı (vgp-hero--result) ---
   Başvuru alındı, teşekkür ve benzeri tek mesajlık sayfalar için.
   İçerik ortalanır, onay işareti başlığın üstünde durur.
   Bu varyantın kullanıldığı sayfada başka koyu blok bulunmamalıdır. */

.vgp-hero--result .vgp-hero__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 760px;
  margin-inline: auto;
  padding-block: 88px;
  text-align: center;
}

.vgp-hero--result .vgp-hero__lead {
  max-width: 560px;
  margin-inline: auto;
}

/* Onay işareti — halkalı daire, dıştaki halka zeminden ayırır */
.vgp-hero__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--vgp-white);
  color: var(--vgp-deep);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .10);
}

.vgp-hero__mark .vgp-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.5;
}

/* Alt bilgi şeridi — hero'nun içinde, ayraç çizgisinin altında */
.vgp-hero__notice {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 620px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--vgp-glass-line);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: var(--vgp-on-dark-soft);
}

.vgp-hero__notice svg {
  margin-top: 3px;
  color: var(--vgp-on-dark);
}

/* Kısa varyant — tek sütun, panel yok */
.vgp-hero--compact .vgp-hero__grid {
  grid-template-columns: 1fr;
  max-width: 760px;
  padding-block: 56px;
}

.vgp-hero--compact .vgp-hero__title { font-size: 34px; }


/* ==========================================================================
   06 — BLOK: KART IZGARASI
   İkon başlığın yanında.
   Hover: kenarlık marka rengine döner, üst kenarda kalın vurgu çizgisi
   soldan sağa açılır, ikon dolar, ok belirir, kart yükselir.

   Not: Çerçeve gerçek `border` ile yapılır. Konumlandırılmış katmanlar
   (dikdörtgen div veya SVG kontur) köşe yarıçapını takip etmekte
   sorun çıkardığı için o yollar terk edildi.
   ========================================================================== */

.vgp-cards__grid {
  display: grid;
  gap: var(--vgp-gap);
}

.vgp-cards--2 .vgp-cards__grid { grid-template-columns: repeat(2, 1fr); }
.vgp-cards--3 .vgp-cards__grid { grid-template-columns: repeat(3, 1fr); }
.vgp-cards--4 .vgp-cards__grid { grid-template-columns: repeat(4, 1fr); }

/* 3+2 düzeni — beş kart için. İlk satır üç eşit, ikinci satır iki geniş kart.
   Altı sütunluk ızgara üzerinde 2+2+2 ve 3+3 olarak bölünür; satır sonunda
   boşluk kalmaz. */
.vgp-cards--3-2 .vgp-cards__grid { grid-template-columns: repeat(6, 1fr); }
.vgp-cards--3-2 .vgp-card { grid-column: span 2; }
.vgp-cards--3-2 .vgp-card:nth-last-child(-n+2) { grid-column: span 3; }

.vgp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 24px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              box-shadow .28s cubic-bezier(.4, 0, .2, 1),
              border-color .28s ease;
}

/* Bağlantı içeren kartın tamamı tıklanabilir alandır; imleç de bunu
   söylemelidir. Bağlantısız kartlarda imleç değişmez. */
.vgp-card:has(.vgp-card__link) { cursor: pointer; }

.vgp-card:hover {
  transform: translateY(-6px);
  border-color: var(--vgp-brand);
  box-shadow: var(--vgp-shadow);
}

/* Üst vurgu çizgisi — soldan sağa açılır */
.vgp-card__frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vgp-brand);
  border-radius: var(--vgp-r-card) var(--vgp-r-card) 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.vgp-card:hover .vgp-card__frame { transform: scaleX(1); }

/* Işık lekesi — sağ üst köşede yumuşak marka rengi bulutu */
.vgp-card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--vgp-brand);
  filter: blur(42px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.vgp-card:hover::before { opacity: .10; }

/* --- İçerik --- */
.vgp-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vgp-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--vgp-r-card);
  background: rgba(2, 57, 184, .09);
  color: var(--vgp-brand);
  transition: background-color .28s ease, color .28s ease, transform .28s ease;
}

.vgp-card:hover .vgp-card__icon {
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
  transform: scale(1.08);
}

.vgp-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.vgp-card__text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vgp-muted);
}

/* DİKKAT: Bu kurala transform EKLEMEYİN.
   Transform uygulanan öğe, içindeki mutlak konumlu öğeler için yeni bir
   kapsayıcı blok oluşturur; aşağıdaki ::after o zaman kartın tamamını
   değil yalnızca bağlantının kendi alanını kaplar ve kart tıklanamaz hâle
   gelir. Kayma animasyonu bu yüzden ok işaretine taşınmıştır. */
.vgp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--vgp-brand);
  text-decoration: none !important;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Bağlantıyı kartın tamamına yayar — kart <div>, bağlantı içeride.
   Sarmalayıcıyı <a> yapmak WordPress editöründe bozuluyor. */
.vgp-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vgp-card__link svg {
  transform: translateX(-5px);
  transition: transform .25s ease;
}

.vgp-card:hover .vgp-card__link { opacity: 1; }

.vgp-card:hover .vgp-card__link svg { transform: translateX(0); }

/* Dokunmatik cihazda hover yok — bağlantı ve çizgi her zaman görünür */
@media (hover: none) {
  .vgp-card__link { opacity: 1; }
  .vgp-card__link svg { transform: none; }
  .vgp-cards:not(.vgp-cards--static) .vgp-card__frame { transform: scaleX(1); }
}

/* Bağlantısız kart grupları.
   Kenarlık, üst çizgi, ikon ve ışık hover'da çalışmaya devam eder; yalnızca
   kartın yükselmesi ve gölgesi kapanır. Tıklanamayan bir kartın tıklanabilir
   gibi durması ziyaretçiyi yanıltır. */
.vgp-cards--static .vgp-card:hover {
  transform: none;
  box-shadow: none;
}


/* ==========================================================================
   07 — BLOK: SAYI ŞERİDİ
   Hero panelinde zaten üç rakam var. Bu bloğu aynı sayfada kullanacaksanız
   rakamları tekrar etmeyin; farklı veriler seçin.
   ========================================================================== */

.vgp-stats {
  border-radius: var(--vgp-r-block);
  background: var(--vgp-soft);
}

.vgp-stats__inner { padding-block: 56px; }

.vgp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vgp-gap);
}

.vgp-stats--3 .vgp-stats__grid { grid-template-columns: repeat(3, 1fr); }

.vgp-stats__item {
  padding-left: 22px;
  border-left: 2px solid var(--vgp-brand);
}

.vgp-stats__value {
  font-family: var(--vgp-font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--vgp-deep);
}

.vgp-stats__label {
  margin-top: 8px !important;
  font-size: 14px;
  color: var(--vgp-muted);
}


/* ==========================================================================
   08 — BLOK: CTA ŞERİDİ
   Üstte mesaj ve başvuru paneli, altta ayraç çizgisiyle ayrılmış süreç
   şeridi. Adım numaraları süs değil, gerçek bir sırayı bildirir.
   Sütun ayraçları hero panelindeki rakam ayraçlarıyla aynı dili konuşur.
   ========================================================================== */

.vgp-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--vgp-r-block);
  background-color: var(--vgp-deep);
  background-image:
    radial-gradient(110% 80% at 78% 15%, rgba(255, 255, 255, .09) 0%, transparent 58%),
    linear-gradient(140deg, var(--vgp-deep) 0%, var(--vgp-deep-dark) 100%);
  color: var(--vgp-on-dark);
}

.vgp-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 5px, transparent 5px 23px);
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-composite: intersect;
  pointer-events: none;
}

.vgp-cta__inner {
  position: relative;
  z-index: 1;
  padding-block: 60px;
}

/* --- Üst bölüm --- */
.vgp-cta__top {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}

.vgp-cta__title { font-size: 30px; }

.vgp-cta__text {
  margin-top: 14px !important;
  max-width: 520px;
  color: var(--vgp-on-dark-soft);
}

/* Başvuru paneli */
.vgp-cta__panel {
  padding: 30px;
  border: 1px solid var(--vgp-glass-line);
  border-radius: var(--vgp-r-card);
  background-image: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .28);
}

.vgp-cta__panel-title {
  font-size: 16px;
  font-weight: 700;
}

.vgp-cta__reqs {
  display: grid;
  gap: 10px;
  margin-top: 18px !important;
}

.vgp-cta__req {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vgp-on-dark-soft);
}

.vgp-cta__req svg {
  margin-top: 3px;
  color: var(--vgp-on-dark);
}

/* Izgara olarak kuruldu: panelde birden fazla buton alt alta gelebiliyor
   ve aralarında boşluk gerekiyor. Blok akışında bırakılınca butonlar
   birbirine yapışıyordu. */
.vgp-cta__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--vgp-glass-line);
}

.vgp-cta__actions .vgp-btn { padding-block: 13px; }

/* Panel bağlantısı butonlardan biraz daha uzakta dursun; ızgara boşluğu
   ona yetmiyor, üçüncül eylem olduğu belli olmalı. */
.vgp-cta__actions .vgp-cta__panel-link { margin-top: 4px; }

.vgp-cta__panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vgp-on-dark) !important;
}

.vgp-cta__panel-link svg { transition: transform .2s ease; }
.vgp-cta__panel-link:hover svg { transform: translateX(4px); }

/* --- Süreç şeridi --- */
.vgp-cta__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--vgp-glass-line);
}

.vgp-cta__step {
  padding-left: 28px;
  border-left: 1px solid var(--vgp-glass-line);
}

.vgp-cta__step:first-child {
  padding-left: 0;
  border-left: 0;
}

.vgp-cta__step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border: 1px solid var(--vgp-glass-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-family: var(--vgp-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--vgp-on-dark);
}

.vgp-cta__step-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-cta__step-text {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vgp-on-dark-soft);
}


/* ==========================================================================
   09 — BLOK: İNDİRME KARTI
   İki sütunlu panel. Solda ne olduğu ve hangi dosya türlerinin bulunduğu,
   dikey ayracın sağında klasör hakkındaki bilgiler ve eylem.
   Üst kenardaki ince renk şeridi bloğu sayfadan ayırır.
   ========================================================================== */

.vgp-download {
  position: relative;
  overflow: hidden;
  padding: 44px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-block);
  background-image: linear-gradient(135deg, #F8FAFE 0%, #ECF1FC 58%, #F8FAFE 100%);
}

.vgp-download::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--vgp-deep) 0%, #3C6BE8 48%, var(--vgp-brand) 100%);
}

.vgp-download__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: center;
}

/* --- Sol sütun --- */
.vgp-download__title {
  font-size: 32px;
  font-weight: 800;
}

/* İkinci satır marka renginde: başlığı iki tonlu okutur */
.vgp-download__title-accent {
  display: block;
  color: var(--vgp-brand);
}

.vgp-download__text {
  margin-top: 18px !important;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--vgp-muted);
}

.vgp-download__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
}

.vgp-download__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--vgp-muted);
}

/* Marka listesi — klasörde bulunan markaları saymak için. Çip yapılmadı:
   dosya biçimi çipleriyle aynı satırda iki farklı çip ailesi görsel gürültü
   yaratıyor. Düz metin hem sakin durur hem arama motoru için yeterlidir. */
.vgp-download__brands {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--vgp-line-strong);
  max-width: 620px;
}

.vgp-download__brands-label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-download__brands-list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--vgp-ink);
}

.vgp-download__chip-badge {
  padding: 5px 10px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-white);
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--vgp-brand);
}

/* --- Sağ sütun --- */
.vgp-download__aside {
  padding-left: 44px;
  border-left: 1px solid var(--vgp-line-strong);
}

.vgp-download__aside-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-download__facts {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.vgp-download__fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.vgp-download__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-white);
  color: var(--vgp-brand);
}

.vgp-download__fact-body { min-width: 0; }

.vgp-download__fact-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-download__fact-value {
  margin-top: 4px !important;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vgp-ink);
}

.vgp-download__aside .vgp-btn { margin-top: 26px; }

.vgp-download__note {
  margin-top: 14px !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vgp-muted);
}


/* ==========================================================================
   10 — BLOK: METİN BLOĞU
   Uzun kurumsal metinler için. Satır uzunluğu bilinçli olarak sınırlıdır:
   geniş kapsayıcıda metin kenardan kenara akarsa okunmaz.
   ========================================================================== */

.vgp-prose__body {
  max-width: 760px;
}

.vgp-prose__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--vgp-ink);
}

.vgp-prose__body p + p {
  margin-top: 20px !important;
}

.vgp-prose__body p:not(.vgp-prose__lead) {
  color: var(--vgp-muted);
}


/* ==========================================================================
   11 — BLOK: ZAMAN ÇİZELGESİ
   Üç sütun: yıl | ray | kart. Ray dikey çizgi ve nokta taşır.
   Mobilde yıl kartın üstüne geçer, ray solda kalır.
   ========================================================================== */

.vgp-timeline__list {
  display: grid;
  gap: 0;
}

.vgp-timeline__item {
  display: grid;
  grid-template-columns: 92px 26px 1fr;
  grid-template-areas: "year rail card";
  gap: 0 26px;
  padding-bottom: 28px;
}

.vgp-timeline__item:last-child { padding-bottom: 0; }

/* Yıl */
.vgp-timeline__year {
  grid-area: year;
  padding-top: 20px;
  font-family: var(--vgp-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--vgp-brand);
}

/* Ray */
.vgp-timeline__rail {
  grid-area: rail;
  position: relative;
}

.vgp-timeline__rail::before {      /* dikey çizgi */
  content: "";
  position: absolute;
  top: 22px;
  bottom: -28px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--vgp-line);
}

.vgp-timeline__item:last-child .vgp-timeline__rail::before { display: none; }

.vgp-timeline__rail::after {       /* nokta */
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 3px solid var(--vgp-white);
  border-radius: 50%;
  background: var(--vgp-line-strong);
  box-shadow: 0 0 0 1px var(--vgp-line-strong);
}

/* Kart */
.vgp-timeline__card {
  grid-area: card;
  padding: 22px 24px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-timeline__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-timeline__text {
  margin-top: 10px !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vgp-muted);
}

/* Güncel dönem — son kilometre taşı vurgulanır */
.vgp-timeline__item--current .vgp-timeline__rail::after {
  background: var(--vgp-brand);
  box-shadow: 0 0 0 1px var(--vgp-brand);
}

.vgp-timeline__item--current .vgp-timeline__card {
  border-color: var(--vgp-brand);
  background: var(--vgp-soft);
}

/* Kapanış paneli */
.vgp-timeline__end {
  margin-top: 32px;
  padding: 32px 36px;
  border: 1px solid var(--vgp-line);
  border-left: 3px solid var(--vgp-brand);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-soft);
}

.vgp-timeline__end-title {
  font-size: 20px;
  font-weight: 800;
}

.vgp-timeline__end-text {
  margin-top: 12px !important;
  max-width: 760px;
  font-size: 15px;
  color: var(--vgp-muted);
}

.vgp-timeline__end-text + .vgp-timeline__end-text {
  margin-top: 14px !important;
}


/* ==========================================================================
   12 — BLOK: GEREKÇE LİSTESİ
   Numaralı satırlar. Kart ızgarasına benzer içerik taşır ama biçimi
   bilinçli olarak farklıdır: aynı sayfada iki kart ızgarası görmek
   içeriğin tekrar ettiği izlenimi verir.
   İki sütunlu metin yapısı uzun açıklamalar için kart ızgarasından uygundur.
   ========================================================================== */

.vgp-reasons__item {
  display: grid;
  grid-template-columns: 56px 290px minmax(0, 720px);
  justify-content: start;
  gap: 40px;
  padding: 30px 24px;
  border-top: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  transition: background-color .22s ease;
}

.vgp-reasons__item:first-child { border-top: 0; }

.vgp-reasons__item:hover { background: var(--vgp-soft); }

.vgp-reasons__no {
  font-family: var(--vgp-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: rgba(2, 57, 184, .34);
  transition: color .22s ease;
}

.vgp-reasons__item:hover .vgp-reasons__no { color: var(--vgp-brand); }

.vgp-reasons__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-reasons__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--vgp-ink);
}

.vgp-reasons__text {
  margin-top: 12px !important;
  font-size: 15px;
  line-height: 1.75;
  color: var(--vgp-muted);
}


/* ==========================================================================
   13 — BLOK: HAZIRLIK ŞERİDİ
   Form doldurulmadan önce ne gerektiğini söyler. Eksik evrakla gelen
   başvuruyu azaltmak için formun HEMEN ÜSTÜNDE kullanılmalıdır.
   ========================================================================== */

.vgp-checklist {
  padding: 28px 32px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-block);
  background: var(--vgp-soft);
}

.vgp-checklist__title {
  font-size: 18px;
  font-weight: 700;
}

.vgp-checklist__text {
  margin-top: 8px !important;
  max-width: 720px;
  font-size: 14.5px;
  color: var(--vgp-muted);
}

.vgp-checklist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.vgp-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-checklist__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
}

.vgp-checklist__body { min-width: 0; }

.vgp-checklist__name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

.vgp-checklist__hint {
  margin-top: 5px !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vgp-muted);
}

/* Grid 3 sütuna sabit (repeat(3, 1fr)); form dışında kalan belgeler
   (ör. imza sirküleri) buraya 4. kart olarak eklenmez — düzeni bozar ve
   kullanıcı o belgeyi formda arar. Bunun yerine grid'in altına, formda
   istenmeyen ama sonradan istenebilecek belgeleri açıklayan bir not
   düşülür. "Başvurunuz alındı" sayfasındaki belge talebi widget'ına
   köprü kurar. */
.vgp-checklist__note {
  margin-top: 18px !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vgp-muted);
}


/* ==========================================================================
   14 — BLOK: SÜREÇ ADIMLARI
   CTA içindeki adım şeridinin açık zeminli, bağımsız sürümü.
   Sütun ayraçları hero panelindeki rakam ayraçlarıyla aynı dili konuşur.
   ========================================================================== */

.vgp-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.vgp-steps__item {
  padding-left: 34px;
  border-left: 1px solid var(--vgp-line);
}

.vgp-steps__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.vgp-steps__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: 50%;
  font-family: var(--vgp-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--vgp-brand);
}

.vgp-steps__title {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-steps__text {
  margin-top: 10px !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vgp-muted);
}

/* Izgaranın altına düşen, tüm adımları ilgilendiren genel not
   (ör. "tutar TL cinsindendir" gibi tek seferlik bir uyarı). Steps
   bloğu bunu varsayılan olarak içermiyordu; ilk kullanım tahsilat
   sayfasındaki para birimi notu. */
.vgp-steps__note {
  margin-top: 28px !important;
  padding-top: 20px;
  border-top: 1px solid var(--vgp-line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vgp-muted);
}

.vgp-steps__note strong { color: var(--vgp-ink); }


/* ==========================================================================
   15 — BLOK: SSS AKORDİYONU
   <details>/<summary> üzerine kuruludur; JavaScript gerektirmez.
   WP Rocket'ın "JavaScript Yürütmeyi Geciktir" ayarı bu bloğu etkilemez.

   Tekil açılım: <details> etiketlerine aynı name değeri verilir, tarayıcı
   birini açarken diğerini kendisi kapatır. Eski tarayıcılar için
   vgp-global.js içinde yedek çözüm bulunur.
   ========================================================================== */

.vgp-faq__list {
  display: grid;
  gap: 12px;
  max-width: 900px;
}

/* İki sütunlu varyant. Bir madde açıldığında satır yükseldiği için
   yanındaki sütunda boşluk oluşabilir; bu beklenen davranıştır. */
.vgp-faq__list--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  align-items: start;
  max-width: none;
}

.vgp-faq__item {
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  transition: border-color .2s ease;
}

.vgp-faq__item[open] { border-color: var(--vgp-brand); }

.vgp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

/* Tarayıcıların varsayılan üçgen işaretini kaldırır */
.vgp-faq__q::-webkit-details-marker { display: none; }
.vgp-faq__q::marker { content: ""; }

/* Soru metni h3'tür: arama motoru başlık hiyerarşisini böyle okur.
   Görsel olarak başlık gibi davranmaması için ölçüsü elle verilir. */
.vgp-faq__q-text {
  font-family: var(--vgp-font-body) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0 !important;
  color: var(--vgp-ink);
  transition: color .2s ease;
}

.vgp-faq__q:hover .vgp-faq__q-text { color: var(--vgp-brand); }

.vgp-faq__q svg {
  flex: none;
  color: var(--vgp-brand);
  transition: transform .22s ease;
}

.vgp-faq__item[open] .vgp-faq__q svg { transform: rotate(180deg); }

.vgp-faq__a {
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--vgp-muted);
}

.vgp-faq__a p + p { margin-top: 12px !important; }


/* ==========================================================================
   16 — BLOK: ÇÖZÜM PAKETİ
   Solda işletmenin ihtiyacı, sağda o ihtiyacı karşılayan ürün kategorileri.
   Çipler kategori sayfalarına bağlanır; sektör sayfası ürün satmaz,
   kategoriye yönlendirir.
   ========================================================================== */

.vgp-solution__list {
  display: grid;
  gap: 14px;
}

.vgp-solution__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  padding: 24px 26px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  transition: border-color .22s ease;
}

.vgp-solution__item:hover { border-color: var(--vgp-line-strong); }

.vgp-solution__need {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.vgp-solution__need-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--vgp-r-badge);
  background: rgba(2, 57, 184, .09);
  color: var(--vgp-brand);
}

.vgp-solution__need-body { min-width: 0; }

.vgp-solution__need-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-solution__need-text {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.65;
  color: var(--vgp-muted);
}

/* Ürün kartları — çip yerine iki satırlı küçük kart. Alt satır, ziyaretçinin
   kategoriye tıklamadan ne bulacağını bilmesini sağlar. */
.vgp-solution__gear {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 10px;
}

.vgp-solution__gear-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--vgp-line);
  border-radius: 12px;
  background: var(--vgp-soft);
  text-decoration: none !important;
  transition: border-color .2s ease, background-color .2s ease;
}

a.vgp-solution__gear-item:hover {
  border-color: var(--vgp-brand);
  background: var(--vgp-white);
}

.vgp-solution__gear-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vgp-ink);
}

a.vgp-solution__gear-item:hover .vgp-solution__gear-name { color: var(--vgp-brand); }

.vgp-solution__gear-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--vgp-muted);
}

.vgp-solution__gear-item svg {
  flex: none;
  color: var(--vgp-line-strong);
  transition: color .2s ease, transform .2s ease;
}

a.vgp-solution__gear-item:hover svg {
  color: var(--vgp-brand);
  transform: translateX(3px);
}


/* ==========================================================================
   17 — BLOK: ÖLÇEK KADEMELERİ
   İşletme büyüklüğüne göre üç kademe. Ortadaki kademe vurgulanır;
   bu bir fiyat tablosu değildir, ürün adı ve tutar yazılmaz.
   ========================================================================== */

.vgp-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.vgp-tier {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-tier--featured {
  border-color: var(--vgp-brand);
  background: var(--vgp-soft);
}

.vgp-tier__badge {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 4px 12px;
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-brand);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vgp-on-dark);
}

.vgp-tier__scale {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-tier__title {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 800;
}

.vgp-tier__text {
  margin-top: 10px !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vgp-muted);
}

.vgp-tier__list {
  display: grid;
  gap: 10px;
  margin-top: 20px !important;
  padding-top: 18px;
  border-top: 1px solid var(--vgp-line);
}

.vgp-tier__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.vgp-tier__list svg {
  margin-top: 3px;
  color: var(--vgp-brand);
}


/* Yoğun varyant — çok sayıda maddenin listelendiği yerler için.
   Referans isim listesi gibi yüzün üzerinde öğe taşıyan bloklarda normal
   ölçü sayfayı gereksiz uzatıyor. */
.vgp-taglist--dense { gap: 8px; }

.vgp-taglist--dense span {
  padding: 7px 13px;
  font-size: 13px;
  color: var(--vgp-ink);
  transition: border-color .18s ease;
}

/* Üzerine gelindiğinde yalnızca kenarlık koyulaşır. Zemin veya yazı rengi
   değiştirilmedi: bu etiketler bağlantı değil, tıklanabilir bir şey
   sanılmamalı. */
.vgp-taglist--dense span:hover {
  border-color: var(--vgp-brand);
}


/* ==========================================================================
   18 — ETİKET LİSTESİ (yardımcı)
   Sayfa açılmayacak kadar küçük alanları saymak için. Bağlantı içermez.
   ========================================================================== */

.vgp-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.vgp-taglist span {
  padding: 8px 15px;
  border: 1px solid var(--vgp-line);
  border-radius: 999px;
  background: var(--vgp-soft);
  font-size: 13.5px;
  color: var(--vgp-muted);
}


/* ==========================================================================
   19 — BLOK: GENEL PANEL
   İndirme kartıyla aynı görsel dili paylaşan, içeriği serbest panel.
   Solda anlatım, dikey ayracın sağında ikincil bilgi ve eylem.
   Kurumsal sayfalarda vurgulanmak istenen bölümler için kullanılır.
   ========================================================================== */

.vgp-panel {
  position: relative;
  overflow: hidden;
  padding: 44px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-block);
  background-image: linear-gradient(135deg, #F8FAFE 0%, #ECF1FC 58%, #F8FAFE 100%);
}

.vgp-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--vgp-deep) 0%, #3C6BE8 48%, var(--vgp-brand) 100%);
}

.vgp-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: center;
}

.vgp-panel__title {
  font-size: 32px;
  font-weight: 800;
}

.vgp-panel__title-accent {
  display: block;
  color: var(--vgp-brand);
}

.vgp-panel__text {
  margin-top: 18px !important;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--vgp-muted);
}

.vgp-panel__aside {
  padding-left: 44px;
  border-left: 1px solid var(--vgp-line-strong);
}

.vgp-panel__aside-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-panel__aside-text {
  margin-top: 12px !important;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vgp-ink);
}

.vgp-panel__aside .vgp-btn { margin-top: 22px; }

.vgp-panel__note {
  margin-top: 14px !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vgp-muted);
}

/* Panel içindeki etiket listesi biraz daha sıkı durur */
.vgp-panel .vgp-taglist { margin-top: 26px; }

.vgp-panel .vgp-taglist span {
  border-color: var(--vgp-line-strong);
  background: var(--vgp-white);
  color: var(--vgp-ink);
}

/* Panel içine gömülü bilgi tablosu ve eylem grubu (ör. belge talebi widget'ı) */
.vgp-panel .vgp-infotable { margin-top: 24px; }
.vgp-panel .vgp-actions { margin-top: 24px; }


/* ==========================================================================
   20 — BLOK: SEKMELİ GEÇİŞ VE DÖŞEME IZGARASI
   Aynı içeriğe iki yoldan giriş: sektöre göre ve ürün grubuna göre.

   Sekme göstergesi (slider) CSS değişkeniyle kayar; --vgp-tab-i değerini
   vgp-global.js günceller. Sekmeler eşit genişlikte olduğu için gösterge
   hesabı font yüküne bağlı değildir.

   Panel gizleme [hidden] ile yapılır; JavaScript hiç çalışmazsa ilk panel
   görünür kalır ve sayfa bozulmaz.

   KART YAPISI: Döşeme bir <a> etiketidir ve İÇİNDE YALNIZCA <span> BULUNUR.
   <a> içine <div> veya <h3> konursa WordPress editörü etiketi parçalar ve
   ızgara dağılır.
   ========================================================================== */

/* --- Sekme çubuğu --- */
.vgp-switch__nav {
  --vgp-tab-i: 0;
  --vgp-tab-count: 2;
  --vgp-tab-pad: 5px;

  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  width: fit-content;
  padding: var(--vgp-tab-pad);
  margin: 0 0 30px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: 50px;
  background: #E9EFFA;
}

.vgp-switch__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 0;
  border-radius: 50px;
  background: none;
  font-family: var(--vgp-font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--vgp-ink);
  cursor: pointer;
  transition: color .25s ease;
}

.vgp-switch__btn svg { width: 15px; height: 15px; }

.vgp-switch__btn[aria-selected="true"] { color: var(--vgp-on-dark) !important; }

/* Tema buton stillerinin sızmasını engeller. Woodmart <button> öğelerine
   kendi zeminini ve gölgesini uygulayabiliyor. */
.vgp-switch__nav .vgp-switch__btn,
.vgp-switch__nav .vgp-switch__btn:hover,
.vgp-switch__nav .vgp-switch__btn:focus {
  background: none !important;
  box-shadow: none !important;
  text-transform: none;
}

/* Kayan gösterge */
.vgp-switch__slider {
  position: absolute;
  z-index: 0;
  top: var(--vgp-tab-pad);
  left: var(--vgp-tab-pad);
  bottom: var(--vgp-tab-pad);
  width: calc((100% - (var(--vgp-tab-pad) * 2)) / var(--vgp-tab-count));
  border-radius: 50px;
  /* Düz renk önce yazılır: gradyan herhangi bir sebeple uygulanmazsa
     gösterge yine dolu mavi kalır ve beyaz yazı okunur olur. */
  background-color: var(--vgp-brand) !important;
  background-image: linear-gradient(135deg, var(--vgp-deep), var(--vgp-brand)) !important;
  box-shadow: 0 4px 14px rgba(2, 57, 184, .32);
  transform: translateX(calc(var(--vgp-tab-i) * 100%));
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

/* --- Panel --- */
.vgp-switch__panel[hidden] { display: none !important; }

.vgp-switch__panel { animation: vgp-panel-in .32s ease both; }

.vgp-switch__panel:focus { outline: none; }

@keyframes vgp-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Izgara --- */
.vgp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.vgp-tiles--compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* --- Döşeme --- */
.vgp-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  border: 1.5px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Üst vurgu çizgisi — soldan sağa açılır */
.vgp-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-image: linear-gradient(90deg, var(--vgp-deep), var(--vgp-brand));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}

.vgp-tile:hover,
.vgp-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--vgp-brand);
  box-shadow: var(--vgp-shadow);
}

.vgp-tile:hover::before,
.vgp-tile:focus-visible::before { transform: scaleX(1); }

.vgp-tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(2, 57, 184, .09);
  color: var(--vgp-brand);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.vgp-tile__icon svg { width: 21px; height: 21px; }

.vgp-tile:hover .vgp-tile__icon,
.vgp-tile:focus-visible .vgp-tile__icon {
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
  transform: scale(1.06) rotate(-4deg);
}

.vgp-tile__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vgp-tile__name {
  font-family: var(--vgp-font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--vgp-ink);
}

.vgp-tile__meta {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vgp-muted);
}

.vgp-tile__arrow {
  display: grid;
  place-items: center;
  color: var(--vgp-brand);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
}

.vgp-tile__arrow svg { width: 17px; height: 17px; }

.vgp-tile:hover .vgp-tile__arrow,
.vgp-tile:focus-visible .vgp-tile__arrow {
  opacity: 1;
  transform: none;
}

/* Kompakt varyant — alt satır yok */
.vgp-tile--compact { gap: 12px; }
.vgp-tile--compact .vgp-tile__icon { width: 40px; height: 40px; border-radius: 11px; }
.vgp-tile--compact .vgp-tile__icon svg { width: 19px; height: 19px; }
.vgp-tile--compact .vgp-tile__name { font-size: 13.5px; }

/* Kapanış döşemesi — bölümü toplayan dolgulu kart */
.vgp-tile--all {
  border-color: transparent;
  background-image: linear-gradient(120deg, var(--vgp-deep), var(--vgp-brand) 60%, #3C6BE8);
}

.vgp-tile--all::before { display: none; }

.vgp-tile--all .vgp-tile__icon {
  background: rgba(255, 255, 255, .18);
  color: var(--vgp-on-dark);
}

.vgp-tile--all .vgp-tile__name { color: var(--vgp-on-dark); }
.vgp-tile--all .vgp-tile__meta { color: rgba(255, 255, 255, .76); }

.vgp-tile--all:hover,
.vgp-tile--all:focus-visible {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(2, 57, 184, .34);
}

.vgp-tile--all:hover .vgp-tile__icon,
.vgp-tile--all:focus-visible .vgp-tile__icon {
  background: var(--vgp-white);
  color: var(--vgp-brand);
  transform: translateX(3px) rotate(0);
}


/* ==========================================================================
   21 — BLOK: BİLGİ TABLOSU
   Kurumsal künye, teknik künye ve benzeri etiket–değer listeleri için.
   Gerçek <table> kullanılmaz: mobilde satırların alt alta düşmesi
   gerekiyor ve tablo bunu temiz yapmıyor.
   ========================================================================== */

.vgp-infotable {
  overflow: hidden;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-infotable__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  padding: 18px 24px;
  border-top: 1px solid var(--vgp-line);
}

.vgp-infotable__row:first-child { border-top: 0; }

.vgp-infotable__row:nth-child(even) { background: var(--vgp-soft); }

.vgp-infotable__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vgp-muted);
}

.vgp-infotable__value {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vgp-ink);
}

.vgp-infotable__value a { font-weight: 600; }

.vgp-infotable__note {
  margin-top: 16px !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vgp-muted);
}


/* ==========================================================================
   22 — BLOK: İLETİŞİM KANALLARI
   Her kart tek bir kanaldır ve tamamı tıklanabilir olmalıdır.
   Bağlantı ::after ile karta yayılır; bu kurala transform eklemeyin.
   ========================================================================== */

.vgp-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

/* Sabit sütunlu varyantlar. Kanal sayısı sütun sayısının katıysa bunları
   kullanın; otomatik sığdırma altı kartı 4+2 olarak bölüyor ve son satır
   yarım kalıyor. */
.vgp-contact__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgp-contact__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vgp-contact__item {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1),
              border-color .24s ease,
              box-shadow .24s cubic-bezier(.4, 0, .2, 1);
}

.vgp-contact__item:has(.vgp-contact__link) { cursor: pointer; }

.vgp-contact__item:hover {
  transform: translateY(-4px);
  border-color: var(--vgp-brand);
  box-shadow: var(--vgp-shadow);
}

/* İkon, etiket ve değer aynı satırda; açıklama altta tam genişlikte. */
.vgp-contact__head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.vgp-contact__body { min-width: 0; }

.vgp-contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--vgp-r-badge);
  background: rgba(2, 57, 184, .09);
  color: var(--vgp-brand);
  transition: background-color .24s ease, color .24s ease;
}

.vgp-contact__item:hover .vgp-contact__icon {
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
}

.vgp-contact__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vgp-muted);
}

.vgp-contact__value {
  margin-top: 5px !important;
  font-family: var(--vgp-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--vgp-ink);
}

/* DİKKAT: Bu kurala transform EKLEMEYİN. Transform, ::after için yeni bir
   kapsayıcı blok oluşturur ve kartın tamamı tıklanamaz hâle gelir. */
.vgp-contact__link {
  color: inherit !important;
  text-decoration: none !important;
}

.vgp-contact__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--vgp-r-card);
}

.vgp-contact__item:hover .vgp-contact__link { color: var(--vgp-brand) !important; }

.vgp-contact__note {
  margin-top: 18px !important;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vgp-muted);
}


/* ==========================================================================
   23 — BLOK: KAZANIM LİSTESİ
   Giriş ekranı, başvuru formu yanı gibi dar alanlar için kompakt liste.
   Etkileşim bilinçli olarak hafif tutulmuştur: bu blok sayfanın yıldızı
   değil, formun yanındaki destek öğesidir.
   ========================================================================== */

.vgp-perks {
  padding: 24px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-perks__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.vgp-perks__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

/* Tek sütun — çok dar kenar alanlarında */
.vgp-perks--narrow .vgp-perks__grid { grid-template-columns: 1fr; }

.vgp-perks__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background-color .2s ease, border-color .2s ease;
}

.vgp-perks__item:hover {
  border-color: var(--vgp-line);
  background: var(--vgp-soft);
}

.vgp-perks__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(2, 57, 184, .10);
  color: var(--vgp-brand);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.vgp-perks__icon .vgp-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

.vgp-perks__item:hover .vgp-perks__icon {
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
  transform: scale(1.08);
}

.vgp-perks__text {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vgp-ink);
}

.vgp-perks__foot {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--vgp-line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vgp-muted);
}

.vgp-perks__foot a { font-weight: 600; }


/* ==========================================================================
   YARDIMCI: ADRES ETİKETİ, KOMPAKT EYLEM KUTUSU VE BANKA BİLGİSİ
   ========================================================================== */

/* Adres etiketi — ziyaretçinin gideceği alan adını olduğu gibi göstermek
   için. Ödeme gibi güven gerektiren yönlendirmelerde adresi önden
   göstermek, oltalama tereddüdünü azaltır. */
.vgp-code {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-white);
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--vgp-ink);
  word-break: break-all;
}


/* Kutu içi madde listesi — kısa fayda sıralaması için. */
.vgp-callout__list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.vgp-callout__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vgp-ink);
}

.vgp-callout__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--vgp-brand);
}

/* Kutular arası boşluk — panelde alt alta gelen callout'lar için */
.vgp-callout + .vgp-callout { margin-top: 16px; }

/* Kompakt eylem kutusu — bayi paneli, kenar çubuğu gibi dar alanlarda
   tek bir işe yönlendirmek için. Sayfa bloğu değildir; .vgp-block sınıfı
   kullanılmaz, kendi alt boşluğu yoktur. */
.vgp-callout {
  padding: 22px;
  border: 1px solid var(--vgp-line);
  border-left: 3px solid var(--vgp-brand);
  border-radius: var(--vgp-r-card);
  background-image: linear-gradient(135deg, #F8FAFE 0%, #ECF1FC 100%);
  font-family: var(--vgp-font-body);
}

.vgp-callout__head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.vgp-callout__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-brand);
  color: var(--vgp-on-dark);
}

.vgp-callout__icon .vgp-icon { width: 18px; height: 18px; }

.vgp-callout__title {
  font-family: var(--vgp-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--vgp-ink);
}

.vgp-callout__text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--vgp-muted);
}

.vgp-callout__text .vgp-code { margin-top: 8px; }

.vgp-callout .vgp-btn { margin-top: 16px; }

.vgp-callout__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vgp-muted);
}


/* Hesabım panelindeki Tahsilat ikonu.
   Woodmart, tanımadığı uç noktalara varsayılan dişli ikonu veriyor ve bu
   ikon "Föy Ayarlarım" ile aynı görünüyor. Aşağıdaki kural ikonu maske
   yöntemiyle değiştirir; renk temadan miras alınır.

   Hedefleme adres üzerinden yapılır: bağlantıda ayırt edici bir sınıf yok
   ve tema güncellemesinde sınıf adları değişebilir. Her iki adres de
   kapsanır (eski 'tahsilat', yeni 'cari-odeme').

   ÖNEMLİ: Span'e ölçü verilmelidir. Woodmart bu span'e kendi genişlik ve
   yüksekliğini vermez; boyut, yazı tipi ikonunun kendisinden gelir. O ikon
   kaldırıldığında span sıfır boyuta düşer ve maske hiç görünmez.

   Ölçü (60x55) Woodmart'ın pano ikonlarıyla eşleşecek şekilde sahada
   belirlendi; tema ikon boyutunu değiştirirse buradaki değerler de
   güncellenmelidir. */
.woocommerce a[href*="/cari-odeme"] .wd-nav-icon,
.woocommerce a[href*="/hesabim/tahsilat"] .wd-nav-icon {
  display: inline-block;
  width: 60px;
  height: 55px;
  vertical-align: middle;
  background-image: none !important;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/><line x1='6' y1='15' x2='10' y2='15'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/><line x1='6' y1='15' x2='10' y2='15'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.woocommerce a[href*="/cari-odeme"] .wd-nav-icon::before,
.woocommerce a[href*="/cari-odeme"] .wd-nav-icon::after,
.woocommerce a[href*="/hesabim/tahsilat"] .wd-nav-icon::before,
.woocommerce a[href*="/hesabim/tahsilat"] .wd-nav-icon::after {
  content: none !important;
}


/* Banka hesap satırları — havale/EFT bilgisi için. Kompakt eylem kutusunun
   içinde kullanılır. Sade varyant: dolgusuz, ince ayraçlı.

   IBAN tek satırda ve kopyalanabilir kalmalıdır; kırılırsa bayi elle
   yazarken hata yapar. Bu yüzden user-select serbest, sözcük kırma kapalı,
   ve dar ekranda yatay kaydırmaya izin verilir. */
.vgp-bank {
  display: grid;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--vgp-line);
}

.vgp-bank__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--vgp-line);
}

.vgp-bank__label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--vgp-muted);
}

.vgp-bank__value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--vgp-ink);
}

.vgp-bank__iban {
  display: block;
  overflow-x: auto;
  padding: 8px 11px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: var(--vgp-r-badge);
  background: var(--vgp-white);
  font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  font-size: 13.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--vgp-ink);
}

@media (max-width: 560px) {
  .vgp-bank__row { grid-template-columns: 1fr; gap: 5px; }
}


/* ==========================================================================
   24 — BLOK: REFERANS LOGOLARI
   Sektöre göre gruplanmış logo ızgarası. Her grup kendi başlığını taşır;
   gruplama hem kalabalığı düzenler hem sektör sayfalarını doğrular.

   Logolar gri tonlanmaz. Yaygın bir yöntem olmasına rağmen logoları
   soluklaştırıyor ve markaların kimliğini siliyor; düzeni renk değil
   kutular sağlar.
   ========================================================================== */

.vgp-refs__group + .vgp-refs__group { margin-top: 44px; }

/* Grup başlığı: başlık üstte, açıklama altta. Açıklama iki satıra kadar
   uzayabilir ve içinde ilgili çözüm sayfasına bağlantı taşır. Bu satır
   hem okuyucuya yol gösterir hem sayfaya metin kazandırır; logo ızgarası
   tek başına arama motoru için zayıf kalıyor. */
.vgp-refs__group-head {
  max-width: 760px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vgp-line);
}

.vgp-refs__group-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.vgp-refs__group-text {
  margin-top: 8px !important;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vgp-muted);
}

.vgp-refs__group-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vgp-brand) !important;
  text-decoration: none !important;
}

.vgp-refs__group-link svg { transition: transform .2s ease; }
.vgp-refs__group-link:hover svg { transform: translateX(4px); }

.vgp-refs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Kutu kare: logo dosyaları 150x150 kare olarak hazırlandı. Kare tuvale
   yerleştirilmiş logo, kare kutuda kendi oranında ortalanır ve hepsi aynı
   görsel ağırlıkta durur.

   NOT: Kare dosya yatay logolar için verimsizdir. Yatay bir logo 150x150
   tuvale sığdırıldığında gerçek genişliği 150px'te kalır, üstünde ve
   altında boşluk oluşur; bu yüzden kare logolara göre küçük görünür.
   Sorun kutuda değil dosyadadır. Yatay logoları 300x150 gibi geniş bir
   tuvalde yeniden çıkarırsanız denge belirgin biçimde düzelir. */
.vgp-refs__item {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 18px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.vgp-refs__item:hover {
  transform: translateY(-3px);
  border-color: var(--vgp-brand);
  box-shadow: var(--vgp-shadow);
}

/* Logo kutuya sığdırılır, kırpılmaz. object-fit: contain sayesinde
   yatay ve kare logolar aynı kutuda dengeli durur. */
/* !important: Woodmart img etiketlerine kendi ölçü kurallarını uyguluyor
   ve daha yüksek özgüllükte geliyor. */
.vgp-refs__item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  transition: transform .22s ease;
}

.vgp-refs__item:hover img { transform: scale(1.05); }

/* Marka hakları notu */
.vgp-refs__legal {
  margin-top: 40px !important;
  padding: 18px 22px;
  border: 1px solid var(--vgp-line);
  border-left: 3px solid var(--vgp-line-strong);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--vgp-muted);
}


/* ==========================================================================
   25 — BLOK: ÖDEME VE GÜVENLİK ROZETLERİ
   Kart ve güvenlik logolarından oluşan ince şerit.

   YERLEŞİM: Bu rozetler kart kabul edilen yerde durmalıdır. Site üzerinden
   kartla ödeme alınmıyorsa footer'da göstermek yanlış beklenti yaratır.

   Logolar gri tonlanmaz; marka kimlikleri korunur. Ayrım kutularla değil
   boşlukla sağlanır, şerit bu sayede sakin kalır.
   ========================================================================== */

.vgp-badges {
  padding: 22px 0;
  border-top: 1px solid var(--vgp-line);
}

.vgp-badges--boxed {
  padding: 22px 24px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-badges__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--vgp-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  color: var(--vgp-muted);
}

.vgp-badges__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
}

/* !important bilinçlidir: Woodmart ve WooCommerce, img etiketlerine kendi
   genişlik/yükseklik kurallarını uyguluyor ve bunlar daha yüksek
   özgüllükte geliyor. Onlar ezildiğinde logolar konteyner genişliğine
   yayılıyor. */
/* !important bilinçlidir: Woodmart ve WooCommerce, img etiketlerine kendi
   genişlik/yükseklik kurallarını uyguluyor ve bunlar daha yüksek
   özgüllükte geliyor. Onlar ezildiğinde logolar konteyner genişliğine
   yayılıyor.

   Yükseklik 36px: logoların en-boy oranları çok farklı. Visa geniş ve
   yatay, Mastercard neredeyse kare. Tek yükseklik verildiğinde kare
   olanlar optik olarak küçük kalıyor; 26px'te Mastercard ve American
   Express okunmuyordu. */
.vgp-badges__row img {
  display: block !important;
  flex: none;
  width: auto !important;
  height: 36px !important;
  max-width: 140px !important;
  object-fit: contain;
}

.vgp-badges__note {
  margin-top: 14px !important;
  font-family: var(--vgp-font-body);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--vgp-muted);
}

/* Sola hizalı varyant — panel içinde veya dar sütunda */
.vgp-badges--start .vgp-badges__label,
.vgp-badges--start .vgp-badges__note { text-align: left; }

.vgp-badges--start .vgp-badges__row { justify-content: flex-start; }


/* --- Mobil alt panel (Woodmart sticky mobile panel) ---
   Panelde koşullu öğe seçeneği yok: seçilen bütün butonlar herkese
   görünüyor. Ayrım burada hedef adres üzerinden yapılıyor; Woodmart'ın
   özel butonlarına sınıf verilemediği için href tutamak olarak kullanılır.

   PANELDE OLMASI GEREKENLER:
     Mobile categories menu · Button[1] telefon · Button[2] başvuru
     Sepet · Hesabım

   Mağaza sayfasını panele EKLEMEYİN: ürün listelerinde Woodmart otomatik
   olarak "Filtreler" öğesi ekliyor ve panel altı öğeye çıkıp sıkışıyor. */

/* Öğeler alanı eşit paylaşır.
   Woodmart bu paneli grid ile kuruyor ve sütun sayısını sabitliyor. Bir öğe
   gizlendiğinde sütunu duruyor ve yerinde boşluk kalıyor; grid içinde
   flex:1 de bir işe yaramıyor. Bu yüzden kapsayıcı flex'e çevriliyor ve
   sütun tanımı iptal ediliyor.

   Seçici doğrudan alt div'leri hedefler: sepet ve hesap öğeleri
   wd-toolbar-item sınıfını taşımıyor, yalnızca wd-tools-element taşıyor. */
/* DİKKAT — display KURALI KIRILIM İÇİNDE OLMALI.
   Woodmart bu paneli masaüstünde display:none ile gizliyor. Kural kırılım
   dışında yazılırsa !important o gizlemeyi ezer ve panel masaüstünde de
   görünür. Aşağıdaki blok yalnızca panelin zaten görünür olduğu genişlikte
   çalışır. */
@media (max-width: 1024px) {
  .wd-toolbar {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
  }
}

.wd-toolbar > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Başvuru butonu yalnızca misafire görünür.

   DİKKAT — KAPSAYICI GİZLENİR, BAĞLANTI DEĞİL: Woodmart her öğeyi bir
   <div> içine sarıyor. Yalnızca <a> gizlenirse o div yerinde kalır ve
   flex:1 aldığı için panelde boşluk bırakır. Bu yüzden :has() ile üst
   div hedeflenir.

   :has() desteklemeyen eski tarayıcılar için Woodmart'ın kendi sıra
   numaralı sınıfı yedek olarak eklenmiştir. Panelde özel butonların
   sırasını değiştirirseniz o numarayı da güncelleyin:
   Button[1] → wd-toolbar-link-1, Button[2] → wd-toolbar-link-2 ... */
body:not(.vgp-misafir) .wd-toolbar > div:has(a[href*="b2b-uyelik-basvurusu"]),
body:not(.vgp-misafir) .wd-toolbar .wd-toolbar-link-2 {
  display: none !important;
}

/* Sepet yalnızca girişli bayiye görünür.
   Bu sitede misafir alışverişi yok; sürekli sıfır gösteren sepet yer
   tüketiyor. Misafir alışverişi açılırsa BU KURALI KALDIRIN. */
body.vgp-misafir .wd-toolbar .wd-header-cart,
body.vgp-misafir .wd-toolbar .wd-tools-element.wd-header-cart {
  display: none !important;
}


/* ==========================================================================
   26 — BLOK: ÜST ŞERİT (TOPBAR)
   Başlığın üstünde duran ince bilgi şeridi. Solda duyuru ve çalışma
   saatleri, sağda ikincil bağlantılar.

   ZEMİN RENGİ BURADAN GELMİYOR. Satırın arka planı Woodmart Header
   Builder'dan ayarlanır; koyu zemin için #031975 (--vgp-deep) kullanın.
   Açık zeminli bir şerit tercih ederseniz CSS'e dokunmayın, yalnızca
   aşağıdaki iki değişkeni kendi bloğunuzda ezin:
     --vgp-topbar-fg         normal metin
     --vgp-topbar-fg-strong  vurgulu metin ve hover

   Şeritte fiyat, kampanya tutarı gibi değişken bilgi tutuyorsanız
   güncelliğini takip edin; üst şerit güncellenmesi en çok unutulan yerdir.
   ========================================================================== */

.vgp-topbar {
  --vgp-topbar-fg:        #C8D4F2;
  --vgp-topbar-fg-strong: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font-family: var(--vgp-font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--vgp-topbar-fg);
}

.vgp-topbar__info,
.vgp-topbar__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* .vgp-topbar__nav'ı her zaman sağa sabitler. .vgp-topbar'daki
   justify-content:space-between iki dolu çocuk gerektirir; .info boş ya
   da hiç yoksa (ör. yalnızca kur göstergesinin kullanıldığı bağımsız
   blok) space-between etkisiz kalır ve nav sola yapışır. margin-left:auto
   bu duruma bağımlı olmadan nav'ı her koşulda sağda tutar. */
.vgp-topbar__nav { margin-left: auto; }

.vgp-topbar__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--vgp-topbar-fg-strong);
}

.vgp-topbar__hours { white-space: nowrap; }

/* Kur göstergesi — [vgp_usd_kuru] shortcode'unun çıktısı.
   __badge'den daha sade: arkaplan kutusu yok, sadece vurgulu renk.
   Kur alınamazsa shortcode boş dize döner, bu kural hiç devreye girmez. */
.vgp-topbar__kur {
  white-space: nowrap;
  font-weight: 600;
  color: var(--vgp-topbar-fg-strong);
}

.vgp-topbar__link {
  white-space: nowrap;
  text-decoration: none !important;
  color: var(--vgp-topbar-fg) !important;
  transition: color .18s ease;
}

.vgp-topbar__link:hover,
.vgp-topbar__link:focus-visible {
  color: var(--vgp-topbar-fg-strong) !important;
}

.vgp-topbar__link:focus-visible {
  outline: 2px solid var(--vgp-topbar-fg-strong);
  outline-offset: 3px;
}


/* ==========================================================================
   27 — BLOK: HESAP DURUM KARTI
   Bayi panelinin en üstünde, kullanıcının hesap türünü ve fiyat durumunu
   bildirir. Üç durumu vardır: onaylı bayi, onaylı ana dağıtıcı, ve rolü
   henüz tanımlanmamış kullanıcı.

   Durum renkleri token'lardan gelir (--vgp-ok, --vgp-warn). Bunlar marka
   rengi değildir ve yalnızca durum bildirmek için kullanılır; butonlarda
   asla kullanılmaz.

   Bekleme durumu bilinçli olarak amber, kırmızı değil: başvuru
   reddedilmedi, sırada. Kırmızı hata bildirir ve kullanıcıyı gereksiz
   telaşlandırır.
   ========================================================================== */

.vgp-acct {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
  font-family: var(--vgp-font-body);
}

/* --- Üst satır: hesap türü --- */
.vgp-acct__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-soft);
}

.vgp-acct__label {
  font-size: 13px;
  color: var(--vgp-muted);
}

.vgp-acct__badge {
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.vgp-acct__badge--ok {
  background: rgba(14, 138, 95, .12);
  color: var(--vgp-ok);
}

.vgp-acct__badge--wait {
  background: rgba(178, 106, 0, .14);
  color: var(--vgp-warn);
}

/* --- Alt kutu: durum açıklaması --- */
.vgp-acct__note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid var(--vgp-line);
  border-radius: var(--vgp-r-card);
  background: var(--vgp-white);
}

.vgp-acct__note--ok {
  border-color: rgba(14, 138, 95, .28);
  background: #F3FAF6;
}

.vgp-acct__note--wait {
  border-color: rgba(178, 106, 0, .28);
  background: #FDF9F0;
}

.vgp-acct__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--vgp-white);
}

.vgp-acct__note--ok .vgp-acct__icon { background: var(--vgp-ok); }
.vgp-acct__note--wait .vgp-acct__icon { background: var(--vgp-warn); }

.vgp-acct__icon .vgp-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.vgp-acct__body { min-width: 0; }

.vgp-acct__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vgp-ink);
}

.vgp-acct__text {
  margin: 4px 0 0 !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--vgp-muted);
}

/* --- Başlık çubuğu rozeti ---
   Yalnızca onay bekleyen kullanıcıya basılır. Amber tonu bilinçlidir:
   durum bir hata değil, sıradaki bir işlem. Kırmızı gereksiz telaş yaratır.

   .vgp-block sınıfı kullanılmaz; başlık çubuğunda kendi boşluğunu
   yaratmaması gerekir. */
.vgp-navbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(178, 106, 0, .3);
  border-radius: 999px;
  background: rgba(178, 106, 0, .10);
  font-family: var(--vgp-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--vgp-warn) !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease;
}

.vgp-navbadge:hover {
  border-color: var(--vgp-warn);
  background: rgba(178, 106, 0, .16);
}

.vgp-navbadge__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vgp-warn);
}


/* --- Kısayollar --- */
.vgp-acct__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.vgp-acct__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--vgp-line-strong);
  border-radius: 999px;
  background: var(--vgp-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vgp-brand) !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.vgp-acct__link:hover {
  border-color: var(--vgp-brand);
  background: var(--vgp-brand);
  color: var(--vgp-on-dark) !important;
}

.vgp-acct__link .vgp-icon { width: 15px; height: 15px; }


/* ==========================================================================
   28 — BLOK: KARGO YÖNTEMİ ETİKETİ
   Sepet/ödemede kargo satırında "Kargo: alıcı öder" / "Ücretsiz kargo"
   metnini biçimlendirir. Çıktısı kargo-bilgilendirme.php'deki
   woocommerce_cart_shipping_method_full_label filtresinden gelir.

   Bu blokta önceden görsel bir ilerleme kartı da vardı (.vgp-kargo ve alt
   sınıfları). Woodmart'ın kendi ücretsiz kargo çubuğuyla checkout'ta üst
   üste bindiği için kart kaldırıldı; görsel taraf Woodmart'ın kendi
   ayarına bırakıldı. Bu sınıf (.vgp-kargo-etiket) hâlâ kullanımda —
   Woodmart'ın çubuğu "kim ödüyor" ayrımını yapmıyor, bu etiket yapıyor.
   ========================================================================== */

/* Kargo yöntemi satırındaki etiket */
.vgp-kargo-etiket {
  font-size: 14px;
  white-space: nowrap;
}

.vgp-kargo-etiket strong { font-weight: 600; }


/* ==========================================================================
   29 — TEMA DÜZELTMESİ: MAĞAZA KENAR ÇUBUĞU FİLTRELERİ

   Woodmart'ın filtre widget'ları arasındaki boşluk üç kaynaktan gelir:
   widget'ın alt dış boşluğu, açılır başlığın dikey iç boşluğu ve açılan
   içeriğin üst boşluğu. Üçü birlikte daraltılmazsa fark edilmez.

   Bu blok kütüphanenin kendi bileşenlerine ait DEĞİLDİR; temanın çıktısını
   düzeltir. Bu yüzden değişkenler :root yerine burada tanımlıdır —
   :root'taki token'lar marka sistemine aittir, tema yamaları oraya
   karışmamalıdır.

   SEÇİCİ DOĞRULAMASI: Woodmart sürümüne göre kenar çubuğu sarmalayıcısı
   .sidebar-container, .wd-sidebar veya .filters-area olabiliyor; üçü
   birden hedeflendi. Başlıklar ek bir sınıf taşıyorsa (.wd-heading gibi)
   DevTools'tan bakıp buraya eklenmeli.

   WP ROCKET: Bu kurallar .vgp- öneki taşımadığı için "Kullanılmayan CSS'i
   Kaldır" bunları silebilir. Güvenli listeye şunları ekleyin:
   .widget-title  .widget-inner  .sidebar-container  .wd-sidebar
   ========================================================================== */

.sidebar-container,
.wd-sidebar,
.filters-area {
  --vgp-filter-gap:      14px;  /* widget'lar arası dış boşluk */
  --vgp-filter-pad:      10px;  /* başlık dikey iç boşluğu */
  --vgp-filter-list-gap: 6px;   /* liste öğeleri arası */
}

/* Widget'lar arası dış boşluk.
   Bu değer 4px iken kategori listesinin altındaki widget başlığı listeye
   yapışıyordu: liste öğeleri ile widget başlıkları farklı görsel ağırlıkta
   ve aralarında nefes gerekiyor. Widget'lar arası boşluk, widget içindeki
   boşluktan belirgin biçimde büyük olmalı. */
.sidebar-container .widget,
.wd-sidebar .widget,
.filters-area .widget {
  margin-bottom: var(--vgp-filter-gap);
  padding-bottom: 0;
}

/* Açılır başlık */
.sidebar-container .widget > .widget-title,
.wd-sidebar .widget > .widget-title,
.filters-area .widget > .widget-title {
  margin-bottom: 0;
  padding-top: var(--vgp-filter-pad);
  padding-bottom: var(--vgp-filter-pad);
  font-size: 14px;
  line-height: 1.3;
}

/* Açık durumdaki içerik */
.sidebar-container .widget .widget-inner,
.wd-sidebar .widget .widget-inner,
.filters-area .widget .widget-inner {
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Liste biten yerde alt boşluk: son öğe ile sonraki widget başlığı
   arasında ayrım kalsın. */
.sidebar-container .widget ul,
.wd-sidebar .widget ul,
.filters-area .widget ul {
  margin-bottom: 0;
  padding-bottom: 4px;
}

/* --- Kategori bloğu ile filtre blokları arasındaki ayraç ---

   Kategoriler ve filtreler farklı iki işi yapıyor: biri ürünü
   sınıflandırıyor, diğeri özelliğe göre daraltıyor. Aralarındaki ayraç
   bilgi veriyor, süs değil.

   Çizgi kalınlığı ve rengi diğer filtre ayraçlarıyla AYNI tutuldu. Daha
   kalın veya koyu bir çizgi, başlıkların kendi ince ayraçlarıyla yarışıyor
   ve göz hangisinin daha önemli olduğuna karar veremiyor.

   SEÇİCİ: Ürün kategorileri widget'ı WooCommerce'in kendi sınıfını taşır
   (.woocommerce-widget-layered-nav değil, product_categories). Tema
   sürümüne göre değişebiliyor; ayraç görünmezse DevTools'tan kategori
   widget'ının sınıfını alıp buraya ekleyin. */
.sidebar-container .widget_product_categories,
.wd-sidebar .widget_product_categories,
.filters-area .widget_product_categories,
.sidebar-container .woocommerce-widget-layered-nav-dropdown + .widget,
.sidebar-container .widget_product_categories + .widget,
.wd-sidebar .widget_product_categories + .widget,
.filters-area .widget_product_categories + .widget {
  position: relative;
}

.sidebar-container .widget_product_categories,
.wd-sidebar .widget_product_categories,
.filters-area .widget_product_categories {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--vgp-line);
}

/* Filtre listesi öğeleri */
.sidebar-container .widget ul li,
.wd-sidebar .widget ul li,
.filters-area .widget ul li {
  margin-bottom: var(--vgp-filter-list-gap);
  padding-top: 0;
  padding-bottom: 0;
}

.sidebar-container .widget ul li:last-child,
.wd-sidebar .widget ul li:last-child,
.filters-area .widget ul li:last-child {
  margin-bottom: 0;
}

/* Kategori listesindeki <a> etiketinin kendi iç boşluğu.
   <li> üzerindeki padding'i sıfırlamak yetmiyordu — asıl boşluk <a>'nın
   kendi line-height'ından/padding'inden geliyor (cat-item > a, sınıfsız).
   Kategori menüsünde yaşadığımız min-height sorunuyla aynı aile; burada
   da hem line-height hem olası min-height geçersiz kılınıyor. */
.sidebar-container .widget_product_categories li a,
.wd-sidebar .widget_product_categories li a,
.filters-area .widget_product_categories li a,
.sidebar-container .widget ul.product-categories li a,
.wd-sidebar .widget ul.product-categories li a,
.filters-area .widget ul.product-categories li a {
  display: inline-block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 !important;
  line-height: 1.5 !important;
}


/* ==========================================================================
   30 — DUYARLI DÜZEN
   ========================================================================== */

@media (max-width: 1280px) {
  :root { --vgp-container: 1160px; }
}

@media (max-width: 1024px) {
  :root { --vgp-pad-y: 64px; }

  .vgp-hero__grid,
  .vgp-cta__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vgp-cta__steps {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 40px;
    padding-top: 30px;
  }

  .vgp-cta__step {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid var(--vgp-glass-line);
  }

  .vgp-cta__step:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .vgp-hero__lead { max-width: none; }
  .vgp-hero__title { font-size: 36px; }

  .vgp-cards--4 .vgp-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .vgp-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }

  /* Çalışma saatleri dar ekranda gizlenir; şeritte önce duyuru kalmalı */
  .vgp-topbar__hours { display: none; }

  /* Kur göstergesi de aynı gerekçeyle gizlenir — dar ekranda şeritte yer
     için rekabet ediyor, duyuru/aksiyon öncelikli. */
  .vgp-topbar__kur { display: none; }

  /* 3+2 düzeni tablette ikiye iner; tek kalan son kart satırı doldurur */
  .vgp-cards--3-2 .vgp-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .vgp-cards--3-2 .vgp-card,
  .vgp-cards--3-2 .vgp-card:nth-last-child(-n+2) { grid-column: span 1; }
  .vgp-cards--3-2 .vgp-card:last-child:nth-child(odd) { grid-column: span 2; }

  .vgp-reasons__item {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-content: stretch;
    gap: 10px 20px;
  }

  .vgp-reasons__title { grid-column: 2; }
  .vgp-reasons__body { grid-column: 2; }

  .vgp-checklist__grid { grid-template-columns: 1fr; }

  .vgp-infotable__row { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }


  .vgp-contact__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }



  .vgp-solution__item { grid-template-columns: 1fr; gap: 20px; }
  .vgp-solution__gear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgp-tiers__grid { grid-template-columns: 1fr; gap: 26px; }

  .vgp-faq__list--2 { grid-template-columns: 1fr; gap: 12px; }

  .vgp-steps__grid { grid-template-columns: 1fr; gap: 28px; }

  .vgp-steps__item {
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--vgp-line);
  }

  .vgp-steps__item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .vgp-download__grid,
  .vgp-panel__grid { grid-template-columns: 1fr; gap: 32px; }

  .vgp-panel__aside {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--vgp-line-strong);
  }

  .vgp-download__aside {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--vgp-line-strong);
  }
}

@media (max-width: 782px) {
  :root {
    --vgp-pad-y: 48px;
    --vgp-block-space: 28px;
    --vgp-gap: 16px;
  }

  /* Mobilde kendi yan boşluğumuzu kaldırıyoruz: Woodmart'ın konteyneri
     zaten boşluk veriyor ve ikisi üst üste binince bloklar arama çubuğuna
     göre belirgin biçimde içeride kalıyordu.

     Zeminli bloklar istisnadır: hero, CTA ve sayı şeridi kendi kutusuna
     sahip; iç boşluk kaldırılırsa metin kutunun kenarına yapışır. Panel ve
     indirme kartı gibi bloklar kendi iç boşluğunu taşıdığı için buraya
     eklenmez.

     Bloklar ekran kenarına yapışıyorsa temanın konteyner boşluğu
     kaldırılmış demektir; o durumda buradaki değeri 20px yapın. */
  .vgp-wrap { padding-inline: 0; }

  .vgp-hero .vgp-wrap,
  .vgp-cta .vgp-wrap,
  .vgp-stats .vgp-wrap { padding-inline: 20px; }

  .vgp-cards--2 .vgp-cards__grid,
  .vgp-cards--3 .vgp-cards__grid,
  .vgp-cards--4 .vgp-cards__grid,
  .vgp-cards--3-2 .vgp-cards__grid { grid-template-columns: 1fr; }

  .vgp-cards--3-2 .vgp-card,
  .vgp-cards--3-2 .vgp-card:nth-last-child(-n+2),
  .vgp-cards--3-2 .vgp-card:last-child:nth-child(odd) { grid-column: span 1; }

  .vgp-card { padding: 22px 20px 20px; gap: 14px; }
  .vgp-card__icon { width: 46px; height: 46px; }
  .vgp-card__head { gap: 12px; }

  .vgp-hero__title { font-size: 30px; }
  .vgp-hero--compact .vgp-hero__title { font-size: 27px; }
  .vgp-hero--result .vgp-hero__grid { padding-block: 56px; }
  .vgp-hero__mark { width: 56px; height: 56px; margin-bottom: 22px; }
  .vgp-hero__notice { margin-top: 28px; padding-top: 22px; font-size: 13.5px; }
  .vgp-hero__lead { font-size: 16px; }
  .vgp-hero__panel,
  .vgp-cta__panel { padding: 24px; }
  .vgp-hero__facts { gap: 12px; }
  .vgp-hero__fact-value { font-size: 19px; }

  .vgp-head { margin-bottom: 28px; }
  .vgp-head__title { font-size: 24px; }

  .vgp-stats__inner { padding-block: 40px; }
  .vgp-stats__value { font-size: 32px; }

  .vgp-cta__inner { padding-block: 44px; }
  .vgp-cta__title { font-size: 25px; }
  .vgp-cta__steps { margin-top: 32px; padding-top: 26px; gap: 22px; }
  .vgp-cta__step { padding-top: 22px; }

  .vgp-timeline__item {
    grid-template-columns: 26px 1fr;
    grid-template-areas: "rail year" "rail card";
    gap: 0 18px;
  }

  .vgp-timeline__year {
    padding-top: 14px;
    margin-bottom: 10px;
    text-align: left;
    font-size: 18px;
  }

  .vgp-timeline__rail::before { top: 18px; }
  .vgp-timeline__rail::after { top: 14px; }
  .vgp-timeline__card { padding: 18px 20px; }

  .vgp-timeline__end { padding: 24px; }
  .vgp-timeline__end-title { font-size: 18px; }

  .vgp-prose__lead { font-size: 17px; }

  .vgp-solution__item { padding: 20px; }
  .vgp-solution__gear { grid-template-columns: 1fr; }
  .vgp-tier { padding: 24px 20px; }
  .vgp-tier__title { font-size: 18px; }

  /* Sekme çubuğu mobilde ekranda sabit kalır; ziyaretçi kaydırırken
     diğer sekmeye geçme imkânını kaybetmez.
     Kayan gösterge burada devre dışı: akışkan genişlikte hesap şaşıyor,
     yerine aktif sekmenin kendisi dolduruluyor. */
  /* position: sticky, üst öğelerden herhangi birinde overflow: hidden
     varsa çalışmaz. Woodmart sayfa sarmalayıcılarında bu sık görülür;
     çalışmıyorsa CSS'i değil o kuralı arayın. */
  .vgp-switch { overflow: visible; }

  .vgp-switch__nav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--vgp-sticky-top);
    z-index: 30;
    display: flex;
    width: calc(100% + 40px);
    margin: 0 -20px 22px;
    padding: 7px 12px;
    border: 0;
    border-bottom: 1px solid var(--vgp-line);
    border-radius: 0;
    background: var(--vgp-white);
    box-shadow: 0 2px 12px rgba(11, 18, 32, .07);
  }

  .vgp-switch__btn {
    flex: 1 1 0;
    padding: 11px 10px;
    font-size: 12.5px;
    gap: 6px;
  }

  .vgp-switch__nav .vgp-switch__btn[aria-selected="true"] {
    background-color: var(--vgp-brand) !important;
    background-image: linear-gradient(135deg, var(--vgp-deep), var(--vgp-brand)) !important;
  }

  .vgp-switch__slider { display: none; }

  .vgp-tiles,
  .vgp-tiles--compact { grid-template-columns: 1fr; }

  /* Dokunmatikte hover yok — ok her zaman görünür */
  .vgp-tile__arrow { opacity: 1; transform: none; }

  .vgp-infotable__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 18px;
  }

  .vgp-infotable__value { font-size: 15px; }

  .vgp-contact__grid--3,
  .vgp-contact__grid--2 { grid-template-columns: 1fr; }

  .vgp-contact__item { padding: 22px 20px; }

  .vgp-refs__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .vgp-refs__item { padding: 14px; }
  .vgp-refs__group + .vgp-refs__group { margin-top: 34px; }
  .vgp-refs__group-title { font-size: 18px; }
  .vgp-refs__group-text { font-size: 14px; }
  .vgp-refs__group-link { white-space: normal; }

  /* Mobilde ikincil bağlantılar gizlenir, duyuru ortalanır.
     Kaldırılan bağlantılar menüde ve alt bilgide zaten bulunuyor. */
  .vgp-topbar { justify-content: center; }
  .vgp-topbar__nav { display: none; }

  .vgp-acct__row { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Dar ekranda yalnızca nokta kalır; metin başlıkta yer bulamıyor */
  .vgp-navbadge { padding: 7px; gap: 0; font-size: 0; }
  .vgp-navbadge__dot { width: 9px; height: 9px; }
  .vgp-acct__note { padding: 16px; gap: 12px; }

  .vgp-badges__row { gap: 12px 18px; }
  .vgp-badges__row img { height: 28px !important; max-width: 104px !important; }

  .vgp-perks { padding: 20px; }
  .vgp-perks__grid { grid-template-columns: 1fr; }

  .vgp-checklist { padding: 22px; }
  .vgp-checklist__grid { margin-top: 18px; }

  .vgp-faq__q { padding: 17px 18px; }
  .vgp-faq__q-text { font-size: 15px; }
  .vgp-faq__a { padding: 0 18px 18px; font-size: 14.5px; }

  .vgp-reasons__item { padding: 26px 16px; gap: 8px 16px; }
  .vgp-reasons__title { font-size: 18px; }
  .vgp-reasons__lead { font-size: 15px; }

  .vgp-panel { padding: 26px 22px; }
  .vgp-panel__title { font-size: 24px; }
  .vgp-panel__text { font-size: 15px; }

  .vgp-download { padding: 26px 22px; }
  .vgp-download__title { font-size: 24px; }
  .vgp-download__text { font-size: 15px; }
  .vgp-download__chips { gap: 10px 16px; margin-top: 22px; }

  .vgp-actions .vgp-btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .vgp-stats__grid { grid-template-columns: 1fr; }
  .vgp-hero__facts { grid-template-columns: 1fr; gap: 14px; }
}


/* ==========================================================================
   31 — TEMA DÜZELTMESİ: "TÜM KATEGORİLER" MENÜSÜ BOŞLUK SIKLAŞTIRMA

   Woodmart'ın header kategori menüsü (.wd-header-cats > .wd-dropdown-cats)
   varsayılan olarak her öğe arasında geniş boşluk bırakıyor; uzun kategori
   listesinde bu paneli gereksiz uzatıyor.

   Kapsayıcı DevTools'tan doğrulandı:
     .wd-header-cats .wd-dropdown-cats
       ul#menu-mobil-category-menu.menu.wd-nav.wd-nav-vertical
         li.item-level-0 > a.woodmart-nav-link          (üst seviye — Kiosk, Dokunmatik POS vb.)
         li.item-level-0 > div.wd-dropdown-menu
           ul.wd-sub-menu
             li.item-level-1 > a.woodmart-nav-link       (alt kategori — Çağrı Butonları vb.)

   Seçiciler .wd-header-cats .wd-dropdown-cats ile kapsam sınırlandı; bu sayede
   aynı .woodmart-nav-link sınıfını taşıyan header'daki ana menü etkilenmiyor.

   ASIL KISITLAYICI PADDING DEĞİL: DevTools'ta doğrulandı, Woodmart bu
   öğeye min-height: 60px sabitliyor. Padding'i azaltmak tek başına hiçbir
   şey değiştirmiyordu çünkü kutu yine de 60px'in altına inmiyordu. Bu
   yüzden min-height/height de burada geçersiz kılınıyor.

   Değerler tek noktadan (--vgp-catmenu-*) ayarlanır.
   ========================================================================== */

:root {
  --vgp-catmenu-height: 40px;   /* üst seviye öğe toplam yüksekliği (varsayılan 60px) */
  --vgp-catmenu-pad-x: 18px;    /* üst seviye öğe sağ-sol iç boşluk */
  --vgp-catmenu-sub-height: 34px; /* alt kategori (item-level-1) toplam yüksekliği */
}

.wd-header-cats .wd-dropdown-cats > ul.wd-nav-vertical > li.item-level-0 > a.woodmart-nav-link {
  min-height: var(--vgp-catmenu-height) !important;
  height: var(--vgp-catmenu-height) !important;
  padding-left: var(--vgp-catmenu-pad-x) !important;
  padding-right: var(--vgp-catmenu-pad-x) !important;
}

.wd-header-cats .wd-dropdown-cats .wd-sub-menu > li.item-level-1 > a.woodmart-nav-link {
  min-height: var(--vgp-catmenu-sub-height) !important;
  height: var(--vgp-catmenu-sub-height) !important;
}


/* ==========================================================================
   32 — BLOK: ÖDEME YÖNLENDİRME KARTI

   Sipariş alındı (thank you) sayfasında, ödemesi henüz alınmamış siparişler
   için basılır. VEGAPOS kredi kartı sistemi kullanmıyor; ödeme
   tahsilat.vegapos.com.tr üzerinden AYRI ve MANUEL olarak tamamlanıyor —
   bu sayfa/site ile arasında API veya webhook yok. Bayi sipariş no ve
   tutarı kendisi görüp tahsilat sayfasına kendisi giriyor.

   Çıktısı odeme-yonlendirme.php'deki woocommerce_thankyou kancasından
   gelir; Whols'un "Teşekkür mesajını değiştir" alanındaki metinden
   BAĞIMSIZDIR — sipariş no/tutar orada garanti edilemeyen merge tag'lere
   değil, gerçek $order nesnesine dayanır.

   Renk amber (--vgp-warn): hesap durum kartındaki "onay bekleniyor"
   durumuyla aynı anlamı taşır — hata değil, sırada bekleyen bir adım.
   Buton yine de marka mavisi; amber yalnızca durum bildirir, aksiyon
   rengi değildir (27 numaralı bloktaki kuralla aynı).
   ========================================================================== */

.vgp-pay-cta {
  display: grid;
  gap: 18px;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0;
  padding: 22px 24px;
  border: 1px solid rgba(178, 106, 0, .28);
  border-radius: var(--vgp-r-card);
  background: #FDF9F0;
  font-family: var(--vgp-font-body);
}

.vgp-pay-cta__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.vgp-pay-cta__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vgp-warn);
  color: var(--vgp-white);
}

.vgp-pay-cta__icon .vgp-icon { width: 19px; height: 19px; stroke-width: 2.1; }

.vgp-pay-cta__body { min-width: 0; }

.vgp-pay-cta__title {
  font-family: var(--vgp-font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--vgp-ink);
}

.vgp-pay-cta__text {
  margin: 6px 0 0 !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vgp-muted);
}

/* --- Sipariş no / tutar --- */
.vgp-pay-cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding: 16px 18px;
  border: 1px solid rgba(178, 106, 0, .2);
  border-radius: calc(var(--vgp-r-card) - 4px);
  background: var(--vgp-white);
}

.vgp-pay-cta__meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vgp-pay-cta__meta-label {
  font-size: 11px;
  color: var(--vgp-muted);
}

.vgp-pay-cta__meta-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--vgp-ink);
}

.vgp-pay-cta__note {
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vgp-muted);
}


/* ==========================================================================
   99 — ERİŞİLEBİLİRLİK
   ========================================================================== */

.vgp-block :where(a, button):focus-visible {
  outline: 3px solid var(--vgp-brand);
  outline-offset: 3px;
  border-radius: var(--vgp-r-btn);
}

.vgp-hero :where(a, button):focus-visible,
.vgp-cta :where(a, button):focus-visible {
  outline-color: var(--vgp-white);
}

.vgp-card:has(.vgp-card__link:focus-visible) {
  outline: 3px solid var(--vgp-brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .vgp-tile:hover { transform: none; }
  .vgp-tile:hover .vgp-tile__icon { transform: none; }
  .vgp-tile__arrow { opacity: 1; transform: none; }

  .vgp-block *,
  .vgp-block *::before,
  .vgp-block *::after {
    transition: none !important;
    animation: none !important;
  }

  .vgp-card:hover { transform: none; }
  .vgp-card:hover .vgp-card__icon { transform: none; }
  .vgp-card__link { opacity: 1; }
  .vgp-card__link svg { transform: none; }
  .vgp-card__frame { transform: scaleX(1); }
}