/* ===================================================================
   Bayilik Sayfası — sayfa-özel stiller
   =================================================================== */

/* ----- HERO (bayilik versiyonu) ----- */
/* ===== HERO v2 — aydınlık, premium, yaratıcı ===== */
.bhv2 {
  position: relative; overflow: hidden;
  /* Anasayfa (home.css .bhv2) ile ORTAK arka plan — primary'ye bağlı soft tint, panelle dinamik */
  background:
    radial-gradient(ellipse 60% 55% at 22% 42%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 55% 45% at 88% 12%, color-mix(in srgb, var(--wsell-primary, #E88E3A) 16%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, color-mix(in srgb, var(--wsell-primary, #E88E3A) 6%, #FFFFFF) 55%, color-mix(in srgb, var(--wsell-primary, #E88E3A) 3%, #FFFFFF) 100%);
  padding: 24px 0;
}
/* BG-1 dalgaları — YEREL görsel MASKE, iç renk dinamik primary (anasayfa ile birebir).
   Eski hal uzak bir URL'den (edublink) texture çekiyordu; yerele + dinamiğe alındı. */
.bhv2::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wsell-primary, #E88E3A);
  opacity: .45;
  -webkit-mask: url(../BG-1.webp) center center / cover no-repeat;
          mask: url(../BG-1.webp) center center / cover no-repeat;
}
/* SOL ÜST DEKOR (2026-08-12) — hero gradient'inin sol üstü #FFFFFF; menü şeridiyle (#FBFBFA)
   aynı tona düşüp header'ın bittiği yer kayboluyordu. demos-detay'daki `.detail-shapes`
   bloğunun BİREBİR aynısı: token renkleri (--c-mint-soft / --c-coral) + merkezî fx-shape
   motoru (mouse parallax + otonom yüzme). Sabit hex YOK, tema rengi değişince uyum bozulmaz. */
.bhv2-shapes {
  position: absolute; left: 0; right: 0; top: 0;
  height: 460px; z-index: 0;
  pointer-events: none; overflow: hidden;
}

/* dekoratif ışıklı halkalar */
.bhv2-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bhv2-glow::before, .bhv2-glow::after {
  content: ''; position: absolute; border-radius: 50%; border: 1.5px dashed rgba(224,152,46,.3);
}
.bhv2-glow::before { width: 340px; height: 340px; top: -80px; right: 6%; animation: bhv2Spin 40s linear infinite; }
.bhv2-glow::after { width: 200px; height: 200px; bottom: -60px; right: 22%; border-color: rgba(110,124,242,.22); animation: bhv2Spin 30s linear infinite reverse; }
@keyframes bhv2Spin { to { transform: rotate(360deg); } }

.bhv2-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
  min-height: 600px;
}
.bhv2-left { color: var(--c-ink); }
.bhv2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--c-line);
  color: var(--c-ink); padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em; margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(224,152,46,.14);
}
.bhv2-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: #E0982E; box-shadow: 0 0 0 0 rgba(224,152,46,.55); animation: bhv2Pulse 2s infinite; }
@keyframes bhv2Pulse { 70% { box-shadow: 0 0 0 8px rgba(224,152,46,0); } 100% { box-shadow: 0 0 0 0 rgba(224,152,46,0); } }
.bhv2-title {
  font-size: 47px; line-height: 1.08; letter-spacing: -.03em; font-weight: 800;
  margin: 0 0 20px; text-wrap: balance; color: #23262F;
}
/* vurgu kelimenin gradyan yazı + çizilen alt çizgisi artık merkezî: css/accent-word.css (.acc-word) */
.bhv2-title .amber { color: var(--c-mint, #C2410C); } /* gradyanın koyu ucuyla eşleşir (primary) */
.bhv2-lead { font-size: 16.5px; line-height: 1.65; color: var(--c-ink-soft); margin: 0 0 28px; max-width: 520px; text-wrap: pretty; }
.bhv2-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.bhv2-cta .btn-amber { background: linear-gradient(135deg, #F0A93B, #E0982E); border: none; box-shadow: 0 12px 26px rgba(224,152,46,.32); }
.bhv2-trust { display: flex; align-items: center; gap: 14px; }
.bhv2-avatars { display: flex; }
.bhv2-avatars span {
  width: 40px; height: 40px; border-radius: 50%; margin-left: -12px;
  background: linear-gradient(135deg, #F0A93B, #C2410C); color: #fff;
  border: 3px solid #FFFDF8; display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.bhv2-avatars span:first-child { margin-left: 0; }
.bhv2-trust-tx b { display: block; font-size: 14px; color: var(--c-ink); }
.bhv2-trust-tx span { font-size: 12.5px; color: var(--c-muted); }

/* sağ görsel — beyaz premium kazanç kartı, katmanlı */
.bhv2-right { position: relative; min-height: 600px; display: grid; place-items: center; }
.bhv2-card {
  position: relative; z-index: 1; width: 100%; max-width: 360px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 24px;
  padding: 26px; box-shadow: 0 40px 90px rgba(80,50,10,.16);
}
/* Slider sağ sütun animasyonlu kartı — anasayfa ile eşit oranda büyütüldü (kullanıcı isteği).
   Merkez ölçek konumu korur; chip'ler kardeş olduğundan yerinde kalır. */
.bhv2-card { transform: scale(1.18); transform-origin: center; }
.bhv2-earn-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bhv2-earn-lbl { font-size: 13px; color: var(--c-ink-soft); font-weight: 700; }
.bhv2-earn-badge { font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F0A93B, #E0982E); padding: 5px 11px; border-radius: 999px; }
.bhv2-earn-val { font-size: 42px; font-weight: 800; color: var(--c-ink); letter-spacing: -.03em; margin-bottom: 20px; }
.bhv2-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin-bottom: 16px; }
.bhv2-bars i {
  flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #F0A93B, #FBE0B0);
  transform-origin: bottom; animation: bhv2Bar .9s cubic-bezier(.2,.8,.3,1) both;
}
.bhv2-bars i:last-child { background: linear-gradient(180deg, #C2410C, #F0A93B); box-shadow: 0 6px 16px rgba(194,65,12,.3); }
.bhv2-bars i:nth-child(1){animation-delay:.05s}.bhv2-bars i:nth-child(2){animation-delay:.12s}.bhv2-bars i:nth-child(3){animation-delay:.19s}.bhv2-bars i:nth-child(4){animation-delay:.26s}.bhv2-bars i:nth-child(5){animation-delay:.33s}.bhv2-bars i:nth-child(6){animation-delay:.40s}.bhv2-bars i:nth-child(7){animation-delay:.47s}
@keyframes bhv2Bar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.bhv2-earn-foot { font-size: 13px; color: var(--c-ink-soft); display: flex; align-items: center; gap: 7px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.bhv2-earn-foot .up { color: #1F9D6B; font-weight: 800; }
/* dönen premium bayi rozeti */
.bhv2-seal {
  position: absolute; z-index: 3; top: -22px; left: -22px;
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(135deg, #23262F, #3B3450); color: #fff;
  display: grid; place-items: center; text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); border: 3px solid #fff;
}
.bhv2-seal b { font-size: 22px; font-weight: 800; line-height: 1; }
.bhv2-seal span { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; color: var(--c-amber); display: block; margin-top: 3px; }
.bhv2-seal::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1.5px dashed rgba(224,152,46,.6); animation: bhv2Spin 14s linear infinite;
}
.bhv2-chip {
  position: absolute; display: flex; align-items: center; gap: 11px;
  background: #fff; border-radius: 15px; padding: 12px 16px; box-shadow: 0 20px 44px rgba(80,50,10,.2);
  z-index: 2; border: 1px solid var(--c-line);
}
/* Dalgalanan chip'ler kartla eşit oranda büyütüldü (tüm slaytlar). transform, bhv2Float
   animasyonuyla çakışacağı için zoom kullanıldı; mobilde sıfırlanır. */
.bhv2-chip { zoom: 1.18; }
/* Zoom sonrası sağ üst chip süzülünce .bhv2-slide overflow:hidden üst kenarında kırpılıyordu. */
.bhv2 .bhv2-chip-1 { top: 22px; }
.bhv2-chip b { display: block; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.bhv2-chip span { font-size: 11.5px; color: var(--c-ink-soft); }
.bhv2-chip-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.bhv2-chip-ic svg { width: 17px; height: 17px; }
.bhv2-chip-ic.mint { background: var(--c-mint-deep); }
.bhv2-chip-ic.amber { background: #E0982E; }
.bhv2-chip-1 { top: 4px; right: -26px; animation: bhv2Float 4s ease-in-out infinite; }
.bhv2-chip-2 { bottom: 6px; left: -30px; animation: bhv2Float 4s ease-in-out infinite 1.5s; }
@keyframes bhv2Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 900px) {
  .bhv2 { padding: 26px 0 54px; }
  /* Mobil hero: sol sütun (.bhv2-left) display:contents ile eritilir; çocukları order ile dizilir.
     Kart (.bhv2-right) açıklamayla CTA butonları ARASINA girer — Anasayfa bhv2 slider'ı ile birebir. */
  .bhv2-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .bhv2-left { display: contents; }
  .bhv2-eyebrow { order: 1; align-self: center; margin: 0; }
  .bhv2-title { order: 2; font-size: 40px; margin: 0; text-align: center; }
  .bhv2-lead { order: 3; margin: 0 auto; max-width: none; text-align: center; }
  .bhv2-right { order: 5; max-width: 100%; min-height: 0; margin: 4px 0; }
  .bhv2-card { transform: none; } /* mobilde tam genişlik — ölçek yatay taşma yapardı */
  .bhv2-chip { zoom: 1; } /* mobilde chip'ler eski boyutunda */
  .bhv2-cta { order: 6; margin: 0; flex-wrap: nowrap; }
  .bhv2-cta .btn, .bhv2-cta a { flex: 1; justify-content: center; white-space: nowrap; }
  .bhv2-trust { order: 7; }
  .bhv2-chip-1 { right: 0; } .bhv2-chip-2 { left: 0; }
  /* mobilde dekoratif dönen halkalar + bg overlay kapalı (Anasayfa'da .bhv2-glow gizli) */
  .bhv2::after { display: none; }
  .bhv2-glow { display: none; }
}
@media (max-width: 560px) {
  .bhv2-title { font-size: 34px; line-height: 1.12; }
  .bhv2-lead { font-size: 15px; }
  .bhv2-chip { display: none; }
  .bhv2-cta { gap: 9px; }
  .bhv2-cta .btn, .bhv2-cta a { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}

/* bayilik: bayi satış sitesi kartı + kredi vurgusu */
.bstore { max-width: 380px; padding: 0; overflow: hidden; }
.bstore-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--c-line); }
.bstore-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #F0A93B, #C2410C); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.bstore-id { flex: 1; min-width: 0; }
.bstore-id b { display: block; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.bstore-id span { font-size: 11.5px; color: var(--c-muted); }
.bstore-free { font-size: 10.5px; font-weight: 800; color: var(--c-mint-deep); background: var(--c-mint-soft); padding: 5px 10px; border-radius: 999px; flex-shrink: 0; }
.bstore-list { padding: 12px 17px; display: flex; flex-direction: column; gap: 10px; }
.bstore-item { display: flex; align-items: center; gap: 11px; }
.bstore-item .bi-th { width: 42px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.bstore-item .bi-th.th1 { background: linear-gradient(135deg, #7C86F5, #4F5BD5); }
.bstore-item .bi-th.th2 { background: linear-gradient(135deg, #4DD4AC, #2FB58D); }
.bstore-item .bi-tx { flex: 1; min-width: 0; }
.bstore-item .bi-tx b { display: block; font-size: 13px; font-weight: 800; color: var(--c-ink); }
.bstore-item .bi-tx span { font-size: 11px; color: var(--c-muted); }
.bstore-item .bi-price { font-size: 14px; font-weight: 800; color: var(--c-ink); }
.bstore-credit { display: flex; align-items: center; gap: 12px; margin: 4px 14px 14px; padding: 13px 15px; border-radius: 14px; background: linear-gradient(135deg, rgba(240,169,59,.14), rgba(194,65,12,.10)); border: 1px solid rgba(224,152,46,.28); }
.bstore-credit .bc-ic { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #F0A93B, #E0982E); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bstore-credit .bc-ic svg { width: 19px; height: 19px; }
.bstore-credit .bc-tx b { display: block; font-size: 13px; font-weight: 800; color: #8A4B14; }
.bstore-credit .bc-tx span { font-size: 11.5px; color: #A9691F; }
.bstore-credit .bc-amt { color: #C2410C; font-weight: 800; }

/* ===== bhv2 SLIDER mekanigi (anasayfa slider mantığı) ===== */
.bhv2-slider { position: relative; }
.bhv2-slider.hh-grab { cursor: grabbing; user-select: none; }
.bhv2-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; display: flex; align-items: center; overflow: hidden; }
.bhv2-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.bhv2-slider .bhv2-glow { z-index: 0; }
.bhv2-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5; display: flex; justify-content: center; gap: 9px; }
.bhv2-dots button { width: 28px; height: 5px; border-radius: 999px; background: rgba(120,110,90,.28); transition: all .25s; }
.bhv2-dots button.is-active { background: #E0982E; width: 44px; }
.bhv2-arrows button {
  position: absolute; top: 50%; z-index: 6;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-ink);
  box-shadow: 0 10px 26px rgba(80,50,10,.16);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, background .15s, color .15s, border-color .15s;
}
.bhv2-arrows button.prev { left: 16px; transform: translateY(-50%) translateX(-8px); }
.bhv2-arrows button.next { right: 16px; transform: translateY(-50%) translateX(8px); }
.bhv2-slider:hover .bhv2-arrows button { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.bhv2-arrows button:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.bhv2-arrows button svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .bhv2-arrows button { display: none; } }
.bhv2-chip-ic.gift { background: linear-gradient(135deg, #FF7886, #E5566A); }

/* slayt 2: whitelabel satış sitesi vitrini */
.bstore-win { position: relative; z-index: 1; width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--c-line); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px rgba(80,50,10,.18); }
.bstore-win-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); }
.bstore-win-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-2); }
.bstore-win-bar > i:nth-child(1) { background: #FF7886; }
.bstore-win-bar > i:nth-child(2) { background: #FFB845; }
.bstore-win-bar > i:nth-child(3) { background: #4DD4AC; }
.bstore-win-url { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--c-ink-soft); background: #fff; border: 1px solid var(--c-line); padding: 4px 11px; border-radius: 999px; }
.bstore-win-url svg { width: 12px; height: 12px; color: var(--c-mint-deep); }
.bstore-win-free { margin-left: auto; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F0A93B, #C2410C); padding: 4px 10px; border-radius: 999px; letter-spacing: .04em; }
.bstore-win-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 12px; }
.bstore-win-logo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.bstore-win-logo span { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #F0A93B, #C2410C); color: #fff; display: grid; place-items: center; font-size: 13px; }
.bstore-win-nav { display: flex; gap: 7px; }
.bstore-win-nav span { width: 20px; height: 5px; border-radius: 3px; background: var(--c-line-2); }
.bstore-win-hero { margin: 0 16px 14px; padding: 16px; border-radius: 13px; background: linear-gradient(120deg, #23262F, #3B3450); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bstore-win-hero .bwh-tx b { display: block; font-size: 14px; font-weight: 800; }
.bstore-win-hero .bwh-tx span { font-size: 11.5px; opacity: .78; }
.bstore-win-hero .bwh-btn { font-size: 11px; font-weight: 800; background: var(--c-amber); color: #1A1F2E; padding: 7px 13px; border-radius: 999px; flex-shrink: 0; }
.bstore-win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.bwp { border: 1px solid var(--c-line); border-radius: 11px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.bwp:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bwp-img { height: 54px; }
.bwp-img.i1 { background: linear-gradient(135deg, #7C86F5, #4F5BD5); }
.bwp-img.i2 { background: linear-gradient(135deg, #4DD4AC, #2FB58D); }
.bwp-img.i3 { background: linear-gradient(135deg, #FFB845, #F0A93B); }
.bwp-img.i4 { background: linear-gradient(135deg, #FF7886, #E5566A); }
.bwp-b { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 11px; }
.bwp-n { font-size: 11px; font-weight: 700; color: var(--c-ink); }
.bwp-p { font-size: 11.5px; font-weight: 800; color: var(--c-mint-deep); }

/* NOT: buradaki eski ≤900 bhv2 hero override'ı (grid 1fr / gap 54px / title 34px / right 420px)
   kaldırıldı — mobil hero düzeni artık yukarıdaki tek blokta (display:contents + order, Anasayfa gibi).
   İki blok aynı media query'de olduğu için bu blok cascade'de kazanıp yeni düzeni bozuyordu. */

.bayi-hero {
  position: relative;
  padding: 70px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 184, 69, .18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(110, 124, 242, .12) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(var(--c-accent-rgb), .12) 0%, transparent 60%),
    #FBFBFA;
}
.bayi-hero .shapes {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.bayi-hero .dot-grid {
  position: absolute; width: 200px; height: 140px;
  background-image: radial-gradient(var(--c-line-2) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}
.bayi-hero .dot-grid.tl { top: 50px; left: 20px; opacity: .9; }
.bayi-hero .dot-grid.br { bottom: 40px; right: 60px; opacity: .7; }
.bayi-hero .ring {
  position: absolute;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: .35;
}
.bayi-hero .ring.amber {
  top: 90px; right: 18%;
  width: 70px; height: 70px;
  color: var(--c-amber);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-25deg);
}
.bayi-hero .ring.coral {
  bottom: 60px; left: 8%;
  width: 50px; height: 50px;
  color: var(--c-coral);
  border-left-color: transparent;
  transform: rotate(35deg);
}
.bayi-hero .float-card {
  position: absolute;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  font-weight: 700;
  animation: floatY 5s ease-in-out infinite;
}
.bayi-hero .float-card .pin {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: #fff;
}
.bayi-hero .float-card.a {
  top: 80px; right: 40px;
  animation-delay: -1s;
}
.bayi-hero .float-card.a .pin { background: var(--c-mint); }
.bayi-hero .float-card.b {
  bottom: 90px; left: 50px;
  animation-delay: -3s;
}
.bayi-hero .float-card.b .pin { background: var(--c-coral); }
.bayi-hero .float-card .pin svg { width: 16px; height: 16px; }
.bayi-hero .float-card b { display: block; font-size: 13px; }
.bayi-hero .float-card span { color: var(--c-muted); font-weight: 500; font-size: 11px; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.bayi-hero-inner {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.bayi-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-surface);
  padding: 8px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--c-amber);
  text-transform: uppercase;
  border: 1px solid #F4DBA8;
  box-shadow: var(--shadow-sm);
}
.bayi-hero .eyebrow .pulse {
  width: 7px; height: 7px; background: var(--c-amber); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 184, 69, .22);
}
.bayi-hero h1 {
  font-size: 52px; line-height: 1.06; letter-spacing: -.025em;
  margin: 22px 0 18px;
  font-weight: 800;
  text-wrap: balance;
  min-height: 1.06em;
  transition: opacity .35s ease;
}
.bayi-hero h1 em {
  font-style: normal;
  color: var(--c-amber);
  background: linear-gradient(180deg, transparent 65%, var(--c-amber-soft) 65%);
  padding: 0 6px;
}
.bayi-hero h1 .coral { color: var(--c-coral); font-style: normal; }
.bayi-hero[data-changing="1"] h1,
.bayi-hero[data-changing="1"] p.lead { opacity: 0; }
.bayi-hero p.lead {
  font-size: 17px; color: var(--c-ink-soft);
  margin: 0 auto 22px; max-width: 600px;
  text-wrap: pretty;
  transition: opacity .35s ease;
  min-height: 3.4em;
}
.hero-slide-dots {
  display: flex; gap: 8px; justify-content: center;
  margin-bottom: 28px;
}
.hero-slide-dots button {
  width: 28px; height: 4px; border-radius: 2px;
  background: var(--c-line-2);
  transition: all .2s;
}
.hero-slide-dots button.is-active {
  background: var(--c-amber); width: 44px;
}
.bayi-hero .cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 38px;
}
.bayi-hero .cta-row .btn { padding: 16px 28px; font-size: 15px; }

/* hero kpi strip */
.bayi-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
}
.bayi-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bayi-kpi b {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-ink);
  background: linear-gradient(135deg, var(--c-amber), var(--c-coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bayi-kpi span {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===================================================================
   SLIDER: Hangi sitelerden satarsınız?
   =================================================================== */
.bayi-slider {
  padding: 80px 0;
  background: linear-gradient(180deg, #fff 0%, #FAFAF8 100%);
  position: relative;
  overflow: hidden;
}
.bayi-slider::before {
  content: ''; position: absolute; top: 60px; right: 30px;
  width: 140px; height: 100px;
  background-image: radial-gradient(var(--c-amber-soft) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: .9;
}

.bs-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}

.bs-info .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bs-info .eyebrow::before {
  content: ''; width: 20px; height: 1px; background: var(--c-line-2);
}
.bs-info h2 {
  font-size: 34px; line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 14px;
  font-weight: 800;
  text-wrap: balance;
}
.bs-info h2 .swap { color: var(--c-amber); transition: opacity .28s ease; }
.bs-info p { font-size: 15px; color: var(--c-ink-soft); margin: 0 0 22px; line-height: 1.65; text-wrap: pretty; }
.bs-info p .swap { transition: opacity .28s ease; }

.bs-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.bs-features .swap { transition: opacity .28s ease; }
.bs-features li {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--c-ink-soft);
}
.bs-features li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-mint-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232FB58D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
}

.bs-slider-dots {
  display: flex; gap: 8px;
}
.bs-slider-dots button {
  width: 28px; height: 4px; border-radius: 2px;
  background: var(--c-line-2);
  transition: all .2s;
}
.bs-slider-dots button.is-active {
  background: var(--c-amber); width: 44px;
}

/* slider visual */
.bs-visual {
  position: relative;
  height: 460px;
}
.bs-tile-stack {
  position: absolute; inset: 0;
}
.bs-tile {
  position: absolute;
  background: var(--c-surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.bs-tile.main {
  width: 78%;
  height: 80%;
  top: 6%; left: 8%;
  z-index: 2;
}
.bs-tile.peek {
  width: 64%;
  height: 60%;
  bottom: 6%; right: 4%;
  z-index: 1;
  opacity: .65;
  transform: rotate(3deg);
}
.bs-tile-bar {
  display: flex; gap: 5px;
  padding: 9px 12px;
  background: #FAFAFA;
  border-bottom: 1px solid var(--c-line);
}
.bs-tile-bar i {
  width: 8px; height: 8px; border-radius: 50%; display: block;
}
.bs-tile-bar i:nth-child(1) { background: #FF5F57; }
.bs-tile-bar i:nth-child(2) { background: #FEBC2E; }
.bs-tile-bar i:nth-child(3) { background: #28C840; }
.bs-tile-bar .url-pill {
  flex: 1;
  background: var(--c-surface);
  border-radius: 6px;
  font-size: 9.5px;
  padding: 3px 8px;
  color: var(--c-muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-tile-screen {
  width: 100%; height: calc(100% - 28px);
  background: var(--c-surface);
}
.bs-tile-screen svg { width: 100%; height: 100%; display: block; }

/* fade between slides */
.bayi-slider[data-changing="1"] .bs-info .swap,
.bayi-slider[data-changing="1"] .bs-tile-screen,
.bayi-slider[data-changing="1"] .bs-tile-bar .url-pill { opacity: 0; }

/* ===================================================================
   "Kimler için uygun?" — persona cards
   =================================================================== */
.bayi-personas {
  padding: 90px 0;
  position: relative;
}
.bayi-personas::before {
  content: ''; position: absolute; top: 60px; left: 20px;
  width: 160px; height: 120px;
  background-image: radial-gradient(var(--c-mint-soft) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: .8; pointer-events: none;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.persona {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all .25s;
}
.persona:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.persona .ic-circle {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 28px;
}
.persona.a .ic-circle { background: linear-gradient(135deg, var(--c-mint-soft), #D7F5E9); color: var(--c-mint-deep); }
.persona.b .ic-circle { background: linear-gradient(135deg, var(--c-amber-soft), #FFE5C2); color: #B47F25; }
.persona.c .ic-circle { background: linear-gradient(135deg, var(--c-coral-soft), #FFD5DA); color: var(--c-coral); }
.persona.d .ic-circle { background: linear-gradient(135deg, var(--c-indigo-soft), #DCDFFF); color: var(--c-indigo); }
.persona.e .ic-circle { background: linear-gradient(135deg, var(--c-violet-soft), #E5D7FA); color: var(--c-violet); }
.persona.f .ic-circle { background: linear-gradient(135deg, #E0F2FE, #BAE6FD); color: #0284C7; }
.persona .ic-circle svg { width: 24px; height: 24px; }
.persona h3 {
  font-size: 17px; line-height: 1.3;
  margin: 2px 0 6px;
  font-weight: 800;
  letter-spacing: -.005em;
}
.persona p {
  font-size: 13.5px;
  color: var(--c-ink-soft);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
.persona.g .ic-circle { background: linear-gradient(135deg, var(--c-indigo-soft), #D7DCFA); color: var(--c-indigo); }
.persona { display: flex; align-items: flex-start; gap: 18px; }
.persona-tx { flex: 1; min-width: 0; }

/* ===================================================================
   Avantajlar — büyük grid 6 kart
   =================================================================== */
.bayi-advantages {
  padding: 90px 0;
  background: linear-gradient(180deg, #FAFAF8 0%, #fff 100%);
  position: relative;
}
.bayi-advantages::after {
  content: ''; position: absolute; bottom: 60px; right: 30px;
  width: 140px; height: 100px;
  background-image: radial-gradient(var(--c-coral-soft) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: .9; pointer-events: none;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.adv-card {
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--ws-shadow);
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.adv-card:hover { transform: translateY(var(--ws-lift)); box-shadow: var(--ws-shadow-hover); }
.adv-card::after {
  content: ''; position: absolute;
  width: 90px; height: 90px; border-radius: 50%;
  top: -40px; right: -30px;
  opacity: .08;
}
.adv-card.amber::after { background: var(--c-amber); }
.adv-card.coral::after { background: var(--c-coral); }
.adv-card.mint::after  { background: var(--c-mint); }
.adv-card.indigo::after { background: var(--c-indigo); }
.adv-card.violet::after { background: var(--c-violet); }

.adv-card .num {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--c-muted);
  font-family: 'JetBrains Mono', monospace;
}
.adv-card .ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
}
.adv-card.amber .ic  { background: var(--c-amber-soft);  color: #B47F25; }
.adv-card.coral .ic  { background: var(--c-coral-soft);  color: var(--c-coral); }
.adv-card.mint  .ic  { background: var(--c-mint-soft);   color: var(--c-mint-deep); }
.adv-card.indigo .ic { background: var(--c-indigo-soft); color: var(--c-indigo); }
.adv-card.violet .ic { background: var(--c-violet-soft); color: var(--c-violet); }
.adv-card .ic svg { width: 24px; height: 24px; }

.adv-card h3 {
  font-size: 17px;
  margin: 0; font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.adv-card p {
  font-size: 13.5px;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ===================================================================
   How it works steps
   =================================================================== */
.bayi-how {
  padding: 90px 0;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.how-grid::before {
  content: '';
  position: absolute;
  top: 30px; left: 8%; right: 8%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--c-line-2) 50%, transparent 50%);
  background-size: 10px 2px;
  z-index: 0;
}
.how-step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.how-step .num-circle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  margin: 0 auto 16px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--c-ink);
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.how-step.is-1 .num-circle { background: var(--c-amber); color: #fff; border-color: var(--c-amber); }
.how-step.is-2 .num-circle { background: var(--c-mint); color: #fff; border-color: var(--c-mint); }
.how-step.is-3 .num-circle { background: var(--c-coral); color: #fff; border-color: var(--c-coral); }
.how-step.is-4 .num-circle { background: var(--c-indigo); color: #fff; border-color: var(--c-indigo); }
.how-step h4 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 800;
}
.how-step p {
  font-size: 12.5px;
  color: var(--c-ink-soft);
  margin: 0; line-height: 1.5;
}

/* ===================================================================
   Pricing — bayilik paketleri
   =================================================================== */
.bayi-pricing {
  padding: 100px 0;
  background: linear-gradient(180deg, #fff 0%, #FAFAF8 100%);
  position: relative;
}
.bayi-pricing::before, .bayi-pricing::after {
  content: ''; position: absolute;
  width: 140px; height: 100px;
  background-image: radial-gradient(var(--c-line-2) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: .8; pointer-events: none;
}
.bayi-pricing::before { top: 70px; left: 20px; }
.bayi-pricing::after { bottom: 70px; right: 20px; }

/* Noktacık dekorları (::before/::after, shapes-motion ile animasyonlu, will-change:translate →
   kendi stacking context'i) position'suz içeriğin ÜSTÜNE boyanıyordu — mobilde padding küçülünce
   başlık ve kartlara biniyordu. İçeriği (başlık + kartlar) dekorların üstüne al. */
.bayi-pricing > .container,
.bayi-personas > .container,
.reviews > .container,
.reviews > .rv-wrap { position: relative; z-index: 1; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pricing-card {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: 22px;
  padding: 30px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--ws-shadow);
  position: relative;
  transition: all .25s;
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ws-shadow-hover);
}
.pricing-card.popular {
  border-color: var(--c-amber);
  background: linear-gradient(180deg, #fff 0%, #FFFCF5 100%);
  transform: translateY(-12px);
}
.pricing-card.popular:hover { transform: translateY(-16px); }
.pricing-card .popular-tag {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-amber);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(255, 184, 69, .35);
}
/* Paket başlığı: harf badge SOLDA, isim + tagline SAĞDA istiflenmiş (Bayilik Avantajları
   .bnx-adv kartlarıyla aynı desen). Önceden 3 blok alt alta olduğu için harf tek satırı kaplıyordu. */
.pricing-card .pack-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pricing-card .pack-head-tx { flex: 1; min-width: 0; }
.pricing-card .pack-head-tx h3 { margin: 0 0 3px; }
.pricing-card .pack-head-tx .tag-tag { margin: 0; }
.pricing-card .tag-circle {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.pricing-card[data-pack="silver"]   .tag-circle { background: linear-gradient(135deg, #A8B3C2, #6B7686); }
.pricing-card[data-pack="gold"]     .tag-circle { background: linear-gradient(135deg, #FFB845, #E89211); }
.pricing-card[data-pack="platinum"] .tag-circle { background: linear-gradient(135deg, #6E7CF2, #4C5BE0); }
/* Rozet ikonu (harf yerine dinamik SVG) — stats section gibi otomatik çizilir.
   currentColor beyaz (.tag-circle color:#fff) → beyaz çizgi. */
.pricing-card .tag-circle svg { width: 30px; height: 30px; }
.pricing-card .tag-circle svg * { stroke-dasharray: 120; stroke-dashoffset: 0; }
.pricing-card:hover .tag-circle svg *,
.bayi-pricing.auto-draw .tag-circle svg * { animation: tagDraw 2.2s ease forwards; }
@keyframes tagDraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pricing-card:hover .tag-circle svg *,
  .bayi-pricing.auto-draw .tag-circle svg * { animation: none; }
}

.pricing-card h3 {
  font-size: 20px; margin: 0 0 4px;
  font-weight: 800;
}
.pricing-card .tag-tag {
  font-size: 13px; color: var(--c-ink-soft);
  margin: 0 0 16px;
}
/* (kullanıcı isteği) Müşterinin zaten sahip olduğu paket — soft, rozet değil düz metin */
.pricing-card .pack-owned-note {
  display: inline-flex; align-items: center; gap: 5px;
  margin: -10px 0 14px;
  font-size: 11.5px; font-weight: 700;
  color: var(--c-mint-deep);
}
.pricing-card .pack-owned-note svg { width: 12px; height: 12px; flex-shrink: 0; }
.pricing-card .fee {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 6px;
}
.pricing-card .fee b {
  font-size: 36px; line-height: 1;
  letter-spacing: -.02em;
  font-weight: 800;
}
.pricing-card .fee span {
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 600;
}
.pricing-card .credit-back {
  font-size: 12px;
  background: var(--c-mint-soft);
  color: var(--c-mint-deep);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 22px;
}

.pricing-gift {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--c-mint-soft) 0%, #fff 100%);
  border: 1px solid #B8E6D4;
  border-radius: 14px;
  margin-bottom: 22px;
  position: relative;
}
.pricing-gift::before {
  content: 'HEDİYE';
  position: absolute;
  top: -10px; right: 12px;
  background: var(--c-mint);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(var(--c-accent-rgb), .18);
}
.pricing-gift.indigo {
  background: linear-gradient(135deg, var(--c-indigo-soft) 0%, #fff 100%);
  border-color: #C5CAFA;
}
.pricing-gift.indigo::before {
  background: var(--c-indigo);
  box-shadow: 0 4px 10px rgba(110, 124, 242, .35);
  content: 'YALNIZCA PLATİN';
}
.pricing-gift .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-mint);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pricing-gift.indigo .ic { background: var(--c-indigo); }
.pricing-gift .ic svg { width: 20px; height: 20px; }
.pricing-gift b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.005em; }
.pricing-gift span { font-size: 11.5px; color: var(--c-ink-soft); }

.pricing-card .feat-list {
  list-style: none; padding: 0; margin: 0 0 24px;
  flex: 1;
}
.pricing-card .feat-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--c-ink);
}
.pricing-card .feat-list li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-mint-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232FB58D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-card .feat-list li b { font-weight: 700; }
.pricing-card .pick-btn {
  width: 100%;
  padding: 14px;
  background: var(--c-ink);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .18s;
}
.pricing-card .pick-btn:hover { background: #000; transform: translateY(-2px); }
.pricing-card.popular .pick-btn { background: var(--c-amber); }
.pricing-card.popular .pick-btn:hover { background: #E89211; }
/* (kullanıcı isteği) Buton rengi paket rengiyle eşleşsin — tag-circle'daki AYNI paletler
   (:805-807). Eşit specificity'de sonradan gelen kazanır → .popular'ın amber'ini bilerek ezer:
   kartın kendi paket rengi, "en popüler" etiketinden önceliklidir. */
.pricing-card[data-pack="silver"]   .pick-btn { background: linear-gradient(135deg, #A8B3C2, #6B7686); }
.pricing-card[data-pack="silver"]   .pick-btn:hover { background: #6B7686; }
.pricing-card[data-pack="gold"]     .pick-btn { background: linear-gradient(135deg, #FFB845, #E89211); }
.pricing-card[data-pack="gold"]     .pick-btn:hover { background: #E89211; }
.pricing-card[data-pack="platinum"] .pick-btn { background: linear-gradient(135deg, #6E7CF2, #4C5BE0); }
.pricing-card[data-pack="platinum"] .pick-btn:hover { background: #4C5BE0; }
.pricing-card .pick-btn svg { width: 14px; height: 14px; }

/* ===================================================================
   Alt Bayi Panel (Platinum)
   =================================================================== */
.bayi-subpanel {
  padding: 80px 0;
  background: linear-gradient(180deg, #fff 0%, #F8F8FE 100%);
  position: relative;
}
.subpanel-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: 50px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.subpanel-card::before {
  content: ''; position: absolute;
  top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--c-indigo-soft) 0%, transparent 70%);
  pointer-events: none;
}
.subpanel-info { position: relative; }
.subpanel-info .ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--c-indigo) 0%, #4C5BE0 100%);
  color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(110, 124, 242, .35);
}
.subpanel-info h2 {
  font-size: 32px; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 14px;
  font-weight: 800;
  text-wrap: balance;
}
.subpanel-info h2 .indigo { color: var(--c-indigo); }
.subpanel-info p {
  font-size: 15px; color: var(--c-ink-soft);
  margin: 0 0 24px;
  line-height: 1.65;
  text-wrap: pretty;
}

.subpanel-feats {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin: 0 0 28px;
}
.subpanel-feats li {
  display: flex; align-items: flex-start; gap: 12px;
}
.subpanel-feats .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--c-indigo-soft);
  color: var(--c-indigo);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.subpanel-feats .ic svg { width: 18px; height: 18px; }
.subpanel-feats b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.005em; }
.subpanel-feats span { font-size: 12px; color: var(--c-ink-soft); line-height: 1.5; }

/* visual mockup */
.subpanel-visual { position: relative; }
.sp-mock {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(-1deg);
}
.sp-mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #F4F6FA;
  border-bottom: 1px solid var(--c-line);
}
.sp-mock-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #DBE3EB;
}
.sp-mock-bar i:nth-child(1) { background: #FF5F57; }
.sp-mock-bar i:nth-child(2) { background: #FEBC2E; }
.sp-mock-bar i:nth-child(3) { background: #28C840; }
.sp-mock-bar span {
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--c-ink-soft);
  margin-left: auto;
}
.sp-mock-body { padding: 20px; }
.sp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.logo-mini {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800;
  font-size: 14px;
}
.logo-mini span {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--c-indigo), var(--c-violet));
  border-radius: 7px;
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
}
.sp-header .badge {
  background: var(--c-indigo-soft); color: var(--c-indigo);
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px;
}
.sp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.sp-stat {
  background: #F4F6FA;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.sp-stat b {
  display: block; font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, var(--c-indigo), var(--c-violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
}
.sp-stat span { font-size: 10.5px; color: var(--c-muted); font-weight: 600; }

.sp-rows {
  display: flex; flex-direction: column; gap: 6px;
}
.sp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: #FAFBFE;
  border-radius: 8px;
  font-size: 12px;
}
.sp-row-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sp-row-name .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.sp-row-name .dot.mint { background: var(--c-mint); }
.sp-row-name .dot.amber { background: var(--c-amber); }
.sp-row-name .dot.coral { background: var(--c-coral); }
.sp-row-name .dot.indigo { background: var(--c-indigo); }
.sp-row-val { font-weight: 800; color: var(--c-ink); }

@media (max-width: 980px) {
  .subpanel-card { grid-template-columns: 1fr; padding: 36px; gap: 32px; }
  .subpanel-info h2 { font-size: 26px; }
  .subpanel-feats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bayi-subpanel { padding: 50px 0; }
  .subpanel-card { padding: 24px; }
}
.bayi-intro-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 19, 28, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 240;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.bayi-intro-backdrop.is-open { display: flex; animation: wzFade .25s ease; }

.bayi-intro {
  width: 100%;
  max-width: 560px;
  background: var(--c-surface);
  border-radius: 24px;
  box-shadow: 0 50px 120px rgba(0,0,0,.4);
  overflow: hidden;
  padding: 48px 40px 40px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse at top, var(--c-amber-soft) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, var(--c-mint-soft) 0%, transparent 55%),
    #fff;
  animation: wzPop .35s cubic-bezier(.2,.8,.2,1);
}
.bayi-intro::before {
  content: ''; position: absolute; top: 24px; left: 24px;
  width: 80px; height: 60px;
  background-image: radial-gradient(var(--c-line-2) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: .9;
}
.bayi-intro::after {
  content: ''; position: absolute; bottom: 24px; right: 30px;
  width: 80px; height: 60px;
  background-image: radial-gradient(var(--c-amber) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: .35;
}

.bayi-intro-ic {
  width: 96px; height: 96px;
  margin: 0 auto 22px;
  background: linear-gradient(135deg, var(--c-amber) 0%, #E89211 100%);
  border-radius: 28px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 20px 50px rgba(255, 184, 69, .5), 0 0 0 8px rgba(255, 184, 69, .12);
  position: relative;
  animation: wzFloat 4s ease-in-out infinite;
}
.bayi-intro-ic svg { width: 44px; height: 44px; }
.bayi-intro-ic .spark {
  position: absolute;
  font-size: 22px;
  animation: wzSpark 2.5s ease-in-out infinite;
}
.bayi-intro-ic .spark.a { top: -8px; right: -8px; }
.bayi-intro-ic .spark.b { bottom: -4px; left: -10px; animation-delay: 1.2s; }

.bayi-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-surface);
  border: 1px solid #F4DBA8;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--c-amber);
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.bayi-intro .eyebrow .pulse {
  width: 7px; height: 7px; background: var(--c-amber); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 184, 69, .25);
}
.bayi-intro h2 {
  font-size: 28px; line-height: 1.15; letter-spacing: -.02em;
  margin: 0 0 12px;
  font-weight: 800;
  text-wrap: balance;
  position: relative;
}
.bayi-intro h2 .amber { color: var(--c-amber); }
.bayi-intro h2 .coral { color: var(--c-coral); }
.bayi-intro p.sub {
  font-size: 14.5px; color: var(--c-ink-soft);
  margin: 0 auto 26px; max-width: 440px;
  text-wrap: pretty;
  position: relative;
}

.bayi-intro .stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
}
.bayi-intro .stats-row > div {
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 14px 8px;
  font-size: 11px; font-weight: 600;
  color: var(--c-ink-soft);
}
.bayi-intro .stats-row b {
  display: block;
  font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--c-amber), var(--c-coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
  letter-spacing: -.01em;
}

.bayi-intro .start-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  background: var(--c-ink);
  color: #fff;
  border-radius: 999px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(26, 31, 46, .3);
  position: relative;
  transition: transform .18s, box-shadow .18s;
}
.bayi-intro .start-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(26, 31, 46, .4); }
.bayi-intro .start-btn .ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-amber);
  display: grid; place-items: center;
}
.bayi-intro .start-btn .ico svg { width: 12px; height: 12px; }

.bayi-intro .secondary {
  margin-top: 14px;
  font-size: 13px; color: var(--c-muted);
}
.bayi-intro .secondary a { color: var(--c-amber); font-weight: 700; }

.bayi-intro .close-x {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.06);
  display: grid; place-items: center;
  color: var(--c-ink-soft);
  transition: all .15s;
  z-index: 5;
}
.bayi-intro .close-x:hover { background: var(--c-coral); color: #fff; transform: rotate(90deg); }
.bayi-intro .close-x svg { width: 14px; height: 14px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .bayi-hero { padding: 50px 0 60px; }
  .bayi-hero h1 { font-size: 38px; }
  .bayi-hero .float-card { display: none; }
  .bayi-kpis { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .bayi-kpi b { font-size: 22px; }

  .bs-shell { grid-template-columns: 1fr; gap: 28px; }
  .bs-visual { height: 340px; }

  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }

  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .how-grid::before { display: none; }

  .pricing-grid { grid-template-columns: 1fr; gap: 30px; max-width: 440px; margin: 0 auto; }
  .pricing-card.popular { transform: none; }
}

@media (max-width: 640px) {
  .bayi-hero h1 { font-size: 28px; }
  .bayi-hero p.lead { font-size: 14.5px; }
  .bayi-kpis { grid-template-columns: 1fr 1fr; }
  .bayi-slider { padding: 50px 0; }
  .bs-info h2 { font-size: 24px; }
  .bs-features { grid-template-columns: 1fr; }
  .bs-visual { height: 280px; }
  .bayi-personas, .bayi-advantages, .bayi-how, .bayi-pricing { padding: 60px 0; }
  .persona-grid, .adv-grid { grid-template-columns: 1fr; }
  .persona { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .how-grid { grid-template-columns: 1fr; gap: 20px; }
  /* adım kartları tek kolona düşünce başlık/açıklama çok küçük kalıyordu — mobilde büyüt */
  .how-step h4 { font-size: 19px; margin-bottom: 8px; }
  .how-step p { font-size: 15px; line-height: 1.55; }
  .sp-stats, .bayi-intro .stats-row { grid-template-columns: 1fr; }
  .persona, .adv-card { padding: 22px 20px; }
  /* bayi-intro: tek blok modal → mobilde kaydırılabilir + kompakt (welcome reçetesi) */
  .bayi-intro-backdrop { align-items: flex-start; padding: 14px; }
  .bayi-intro { margin: auto; padding: 26px 20px 22px; }
  .bayi-intro::before, .bayi-intro::after { display: none; }
  .bayi-intro-ic { width: 68px; height: 68px; margin-bottom: 14px; }
  .bayi-intro-ic svg { width: 34px; height: 34px; }
  .bayi-intro h2 { font-size: 22px; }
  .bayi-intro .stats-row { grid-template-columns: 1fr; }
}


/* bayilik kart güncellemeleri: ikon thumb + ek kredi + hediye çipleri */
.bstore-item .bi-th { display: grid; place-items: center; color: #fff; }
.bstore-item .bi-th svg { width: 20px; height: 20px; }
.bstore-credit .bc-extra { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4DD4AC, #2FB58D); padding: 4px 11px; border-radius: 999px; }
.bstore-credit .bc-extra { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4DD4AC, #2FB58D); padding: 4px 11px; border-radius: 999px; }
.bhv2-chip-ic.gift { background: linear-gradient(135deg, #FF7886, #E5566A); }
.bstore { max-width: 360px; }
.bhv2-chip-ic.gift { background: linear-gradient(135deg, #FF7886, #E5566A); }


/* bayilik: perks satırı + kredi toplam */
.bstore-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 17px 14px; }
.bperk { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px; background: var(--c-bg-2); }
.bperk .bp-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.bperk .bp-ic svg { width: 16px; height: 16px; }
.bperk .bp-ic.gift { background: linear-gradient(135deg, #FF7886, #E5566A); }
.bperk .bp-ic.mint { background: linear-gradient(135deg, #4DD4AC, #2FB58D); }
.bperk b { display: block; font-size: 12px; font-weight: 800; color: var(--c-ink); line-height: 1.2; }
.bperk span { font-size: 10.5px; color: var(--c-muted); }
.bstore-credit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; }
.bstore-credit .bc-total { text-align: right; }
.bstore-credit .bc-total span { display: block; font-size: 10.5px; font-weight: 700; color: #A9691F; }
.bstore-credit .bc-total b { font-size: 22px; font-weight: 800; color: #C2410C; letter-spacing: -.02em; }


/* ===== [ANASAYFA TASARIMI PORT] FAQ 2-sutun + CTA home-cta (home.css kaynak; Bayilik home.css yuklemez) WSELL-PLAN 25 ===== */
.faq { position: relative; overflow: hidden; background: var(--c-bg-2); }
.faq .faq-list {
  display: flex; flex-direction: row; gap: 26px; align-items: flex-start;
  max-width: 1040px; margin: 0 auto;
}
.faq .faq-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.faq .faq-item {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow .2s;
}
.faq .faq-item.is-open { box-shadow: var(--shadow-md); border-color: transparent; overflow: hidden; }
.faq .faq-q {
  padding: 22px 24px; font-size: 17px; font-weight: 700; color: var(--c-ink);
  gap: 16px; transition: background .2s, color .2s; border-radius: 0;
}
.faq .faq-item.is-open .faq-q { background: var(--c-mint); color: #fff; }
.faq .faq-q .chev {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; background: transparent; color: var(--c-ink-soft);
  transition: transform .25s, color .2s, background .2s;
}
.faq .faq-item.is-open .faq-q .chev { background: transparent; color: #fff; transform: rotate(180deg); }
.faq .faq-item.is-open .faq-a { margin-top: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.faq .faq-a-inner { padding: 22px 24px 24px; font-size: 15px; line-height: 1.75; color: var(--c-ink-soft); }
.faq .faq-list::before {
  content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 100%; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--c-line-2) 1.5px, transparent 1.5px);
  background-size: 14px 14px; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
@media (max-width: 760px) {
  .faq .faq-list { flex-direction: column; }
  .faq .faq-list::before { display: none; }
}

.home-cta {
  padding: 96px 24px; margin: 0; max-width: none;
  border-radius: 0; position: relative; overflow: hidden;
  background:
    radial-gradient(circle 620px at 50% 40%, var(--c-bg) 0%, var(--c-bg-2) 100%);
}
.home-cta::before, .home-cta::after { content: none; }
.home-cta h2 { font-size: 34px; color: var(--c-ink); margin: 0 0 30px; }
.home-cta h2 .mint { color: var(--c-coral); }
.home-cta .cta-deco { position: absolute; pointer-events: none; z-index: 0; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; transform: translate(var(--tx,0px), var(--ty,0px)); }
.cta-deco-tl { top: -60px; left: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(77,212,172,.12), transparent 68%); }
.cta-deco-wave { left: 13%; bottom: 20%; width: 120px; height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='52'%3E%3Cpath d='M2 14 Q17 3 32 14 T62 14 T92 14 T120 14 M2 34 Q17 23 32 34 T62 34 T92 34 T120 34' fill='none' stroke='%234DD4AC' stroke-width='4'/%3E%3C/svg%3E") no-repeat; }
.cta-deco-dots { left: 16%; bottom: 30%; width: 120px; height: 100px; background-image: radial-gradient(#FF7A8A 2.4px, transparent 2.4px); background-size: 16px 16px; opacity: .55; }
.cta-deco-ring { top: 16%; right: 7%; width: 110px; height: 110px; border: 6px solid var(--c-coral); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; transform: translate(var(--tx,0px), var(--ty,0px)) rotate(-28deg); opacity: .8; filter: drop-shadow(6px 10px 14px rgba(255,122,138,.22)); }
.cta-deco-ring::after { content: ''; position: absolute; top: -14px; left: -150px; width: 130px; height: 105px; background-image: radial-gradient(#4DD4AC 2px, transparent 2px); background-size: 16px 16px; opacity: .5; transform: rotate(28deg); }
.home-cta .container { position: relative; z-index: 2; }
.home-cta .btn-mint { box-shadow: none; }
@media (max-width: 900px) {
  .home-cta { padding: 64px 20px; margin: 0; }
  .home-cta h2 { font-size: 25px; }
  .home-cta .cta-deco-tl, .home-cta .cta-deco-wave { display: none; }
}

/* ===================================================================
   Anasayfa hero paritesi (home.css'ten port) — bhv2 bayi slaytı
   1) sağ-alt yüzen fotoğraf  2) bstore kartı odak animasyonu (is-focus)
   Stats ikon-çizim CSS'i style.css'te (.stats.auto-draw) zaten ortak.
   =================================================================== */
.bhv2-photo { position: absolute; right: -46%; bottom: -60px; width: 400px; max-width: 62%; z-index: 0; opacity: .8; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(40,55,90,.18)); }
@media (max-width: 900px) { .bhv2-photo { display: none; } }

.bstore-head, .bstore-item, .bstore-credit {
  transition: transform .45s cubic-bezier(.25,1.4,.4,1), box-shadow .3s, background-color .3s;
  transform-origin: center;
}
.bstore-head.is-focus, .bstore-item.is-focus, .bstore-credit.is-focus {
  transform: scale(1.045); position: relative; z-index: 2;
  box-shadow: 0 0 0 2px var(--c-mint-light, #E0982E), 0 8px 18px rgba(20,30,50,.16);
}
.bstore-item.is-focus { background: var(--c-bg-2, #EEF2F6); border-radius: 12px; margin: -6px -8px; padding: 6px 8px; }
.bstore-head.is-focus .bstore-logo { box-shadow: 0 0 0 4px rgba(224,152,46,.28); }

/* ===================================================================
   Hakkımızda-tarzı sekmeli anlatım (home.css about-tabs'tan port) —
   bnx-store bölümünün sol kolonunda kullanılır (bayilik içeriği).
   =================================================================== */
.about-tabs { display: flex; align-items: center; gap: 14px; margin: 28px 0 18px; flex-wrap: wrap; }
.about-tab { font-size: 17px; font-weight: 700; color: var(--c-ink); position: relative; padding: 0 0 4px; background: none; border: 0; cursor: pointer; transition: color .15s; }
.about-tab.is-active { color: var(--c-coral); }
.about-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-coral); }
.about-tabs .sep { color: var(--c-line-2, #d9dee6); }
.about-panes { margin-bottom: 24px; min-height: 96px; }
.about-pane { display: none; }
.about-pane.is-active { display: block; animation: aboutFade .3s ease; }
@keyframes aboutFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.about-pane p { font-size: 20px; line-height: 1.7; color: var(--c-ink-soft); margin: 0; }
.about-checks { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 14px 0 30px; padding: 0; }
.about-checks li { display: flex; align-items: center; gap: 13px; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.about-checks .ck { width: 28px; height: 28px; border-radius: 50%; background: var(--c-mint-soft); color: var(--c-mint-deep); display: grid; place-items: center; flex-shrink: 0; }
.about-checks .ck svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  .about-pane p { font-size: 17px; }
}

/* ===================================================================
   HERO 2. slayt — Bayilik kredisi kartı (ödediğin ücret → hesap kredisi)
   .bstore ile aynı framed dil; mint/yeşil kredi teması + akış animasyonu.
   =================================================================== */
.bcredit { max-width: 380px; padding: 0; overflow: hidden; }
.bcredit-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--c-line); }
.bcredit-ic { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #4DD4AC, #2FB58D); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bcredit-ic svg { width: 19px; height: 19px; }
.bcredit-id { flex: 1; min-width: 0; }
.bcredit-id b { display: block; font-size: 13.5px; font-weight: 800; color: var(--c-ink); }
.bcredit-id span { font-size: 11px; color: var(--c-muted); }
.bcredit-live { font-size: 10.5px; font-weight: 800; color: var(--c-mint-deep); background: var(--c-mint-soft); padding: 5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.bcredit-live i { width: 6px; height: 6px; border-radius: 50%; background: #2FB58D; animation: bcredPulse 1.4s ease-in-out infinite; }
@keyframes bcredPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.bcredit-flow { padding: 16px 17px 4px; }
.bcredit-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; background: var(--c-bg-2, #F4F7FA); transition: transform .4s cubic-bezier(.25,1.4,.4,1), box-shadow .3s, background-color .3s; }
.bcr-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.bcr-ic svg { width: 17px; height: 17px; }
.bcr-ic.out { background: linear-gradient(135deg, #FF9AA2, #FF7886); }
.bcr-ic.in { background: linear-gradient(135deg, #4DD4AC, #2FB58D); }
.bcr-tx { flex: 1; min-width: 0; }
.bcr-tx b { display: block; font-size: 13px; font-weight: 800; color: var(--c-ink); }
.bcr-tx span { font-size: 11px; color: var(--c-muted); }
.bcr-amt { font-size: 14px; font-weight: 800; flex-shrink: 0; }
.bcr-amt.out { color: var(--c-ink-soft); text-decoration: line-through; text-decoration-color: rgba(255,120,134,.6); }
.bcr-amt.in { color: #1F9D6B; }
.bcredit-arrow { display: grid; place-items: center; height: 24px; color: #2FB58D; }
.bcredit-arrow svg { width: 20px; height: 20px; animation: bcredArrow 1.5s ease-in-out infinite; }
@keyframes bcredArrow { 0%,100% { transform: translateY(-2px); opacity: .45; } 50% { transform: translateY(2px); opacity: 1; } }
.bcredit-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 14px 0; padding: 14px 15px; border-radius: 15px; background: linear-gradient(135deg, rgba(77,212,172,.16), rgba(47,181,141,.10)); border: 1px solid rgba(77,212,172,.3); transition: transform .4s cubic-bezier(.25,1.4,.4,1), box-shadow .3s; }
.bcredit-balance .bcb-lbl { display: block; font-size: 11.5px; font-weight: 700; color: #2F7D68; }
.bcredit-balance .bcb-num { display: block; font-size: 26px; font-weight: 800; color: #1F9D6B; letter-spacing: -.02em; line-height: 1.15; }
.bcredit-balance .bcb-badge { font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #4DD4AC, #2FB58D); padding: 6px 11px; border-radius: 999px; flex-shrink: 0; }
.bcredit-foot { font-size: 12px; color: var(--c-ink-soft); display: flex; align-items: center; gap: 7px; margin: 14px 17px; padding-top: 13px; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.bcredit-foot .up { color: #1F9D6B; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.bcredit-foot .up svg { width: 14px; height: 14px; }
/* JS bhv2CreditPlayer odak vurgusu */
.bcredit-row.is-focus, .bcredit-balance.is-focus { transform: scale(1.035); box-shadow: 0 8px 20px rgba(31,157,107,.18); position: relative; z-index: 2; }

/* ===================================================================
   HERO 3. slayt — İlk 100 bayiye %50 indirim (coral aciliyet teması)
   Kontenjan progress bar'ı dolar + sayaçlar (JS bhv2DiscountPlayer).
   =================================================================== */
.bhv2-chip-ic.coral { background: linear-gradient(135deg, #FF7886, #E5566A); }
.bdiscount { max-width: 380px; padding: 22px; overflow: hidden; }
.bdiscount-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bdiscount-tag { display: flex; align-items: center; gap: 10px; }
.bdt-off { font-size: 32px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #FF7886, #E5566A); padding: 6px 13px; border-radius: 14px; letter-spacing: -.02em; line-height: 1; box-shadow: 0 10px 24px rgba(255,120,134,.4); }
.bdt-lbl { font-size: 11.5px; font-weight: 800; color: #E5566A; line-height: 1.2; letter-spacing: .06em; }
.bdiscount-live { font-size: 10.5px; font-weight: 800; color: #C2410C; background: #FFF0E6; padding: 5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; }
.bdiscount-live i { width: 6px; height: 6px; border-radius: 50%; background: #FF7886; animation: bcredPulse 1.2s ease-in-out infinite; }
.bdiscount-price { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; padding: 13px 15px; border-radius: 15px; background: var(--c-bg-2, #F4F7FA); margin-bottom: 18px; }
.bdp-old { font-size: 15px; font-weight: 700; color: var(--c-ink-soft); text-decoration: line-through; text-decoration-color: rgba(255,120,134,.75); }
.bdp-new { font-size: 30px; font-weight: 800; color: var(--c-ink); letter-spacing: -.03em; line-height: 1; }
.bdp-save { font-size: 11px; font-weight: 800; color: #1F9D6B; background: rgba(31,157,107,.12); padding: 4px 9px; border-radius: 999px; margin-left: auto; }
.bdq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bdq-lbl { font-size: 12px; font-weight: 700; color: var(--c-ink-soft); }
.bdq-num { font-size: 14px; font-weight: 800; color: var(--c-ink); flex-shrink: 0; }
.bdq-bar { height: 10px; border-radius: 999px; background: #FFE3E6; overflow: hidden; }
.bdq-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FF9AA2, #FF7886, #E5566A); box-shadow: 0 2px 8px rgba(229,86,106,.4); }
.bdq-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--c-ink-soft); }
.bdq-foot .bdq-left b { color: #E5566A; font-weight: 800; }
.bdq-foot .up { color: #E5566A; font-weight: 800; }
.bdiscount-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 12px; color: var(--c-ink-soft); }
.bdiscount-note svg { width: 15px; height: 15px; color: #E5566A; flex-shrink: 0; }

/* ── wsell yerleşimi: "Mobilde gizle" (wsell_mod.gizle_mobil) ────────────────────
   home.css'teki kuralın bayilik sayfası karşılığı — bayilik.php home.css yüklemez.
   Bkz. WSELL-YERLESIM.md §7. 2026-08-01. */
.wsell-mobil-gizli { display: contents; }
@media (max-width: 860px) {
  .wsell-mobil-gizli { display: none !important; }
}

/* =====================================================================
   bhv2 HERO — RTL (bayilik sayfası)
   ---------------------------------------------------------------------
   css/home.css'teki aynı blokla eşleştirilmiştir; bayilik.php de aynı
   hero'yu (site-parts/body-parts/wsell/hero.php) render ettiği için iki
   dosyada da yön kuralları bulunmak zorunda. (2026-08-01)
   ===================================================================== */
[dir="rtl"] .bhv2-grid { direction: rtl; }
[dir="rtl"] .bhv2-left { text-align: right; }

[dir="rtl"] .bhv2-glow::before { right: auto; left: 6%; }
[dir="rtl"] .bhv2-glow::after  { right: auto; left: 22%; }

[dir="rtl"] .bhv2-avatars span:first-child { margin-left: initial; margin-right: 0; }

[dir="rtl"] .bhv2-chip-1 { right: auto; left: -26px; }
[dir="rtl"] .bhv2-chip-2 { left: auto; right: -30px; }

[dir="rtl"] .bhv2-photo { right: auto; left: -46%; }

[dir="rtl"] .bhv2-arrows button.prev { left: auto; right: 16px; transform: translateY(-50%) translateX(8px); }
[dir="rtl"] .bhv2-arrows button.next { right: auto; left: 16px; transform: translateY(-50%) translateX(-8px); }
[dir="rtl"] .bhv2-slider:hover .bhv2-arrows button { transform: translateY(-50%) translateX(0); }
[dir="rtl"] .bhv2-arrows button svg { transform: scaleX(-1); }

[dir="rtl"] .bhv2-cta .btn svg { transform: scaleX(-1); }

@media (max-width: 860px) {
  [dir="rtl"] .bhv2-chip-1 { left: 0; right: auto; }
  [dir="rtl"] .bhv2-chip-2 { right: 0; left: auto; }
}

/* =====================================================================
   bhv2 HERO — PANELDEN EKLENEN SLAYT (.bhv2-gorsel)
   ---------------------------------------------------------------------
   Panelden eklenen her yeni slaytın sağ tarafı `sag_tip='resim'` olur (K6) ve
   hero.php `<div class="bhv2-card bhv2-gorsel"><img …></div>` basar. Bu sınıfın
   HİÇBİR kuralı yoktu: görsel, .bhv2-card'ın 26px beyaz padding'i içinde, boyut
   kuralı olmadan kalıyordu — migration'la gelen hazır kartlar tasarımlıyken
   kullanıcının eklediği slayt kırık görünüyordu. (2026-08-01)
   ===================================================================== */
.bhv2-gorsel { padding: 0; overflow: hidden; background: var(--c-line); border-radius: 24px; }
.bhv2-gorsel img {
  display: block; width: 100%; height: 100%; max-height: 420px;
  object-fit: cover; object-position: center; border-radius: 24px;
}
@media (max-width: 860px) {
  .bhv2-gorsel img { max-height: 260px; }
}