/* ===================================================================
   Bayilik — yenilenmiş içerik section'ları (bnx-)
   İstatistik sonrası: whitelabel hediye + avantajlar + kimler için + nasıl
   Tutarlı, sade dil. Mevcut section'lara dokunmaz.
   =================================================================== */
.bnx { padding: 92px 0; }
.bnx .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* .bnx-head / .bnx-eyebrow / .bnx-store h2 & p → merkezi .sec-head-center / .sec-eyebrow / .sec-title / .sec-desc (bkz. css/home.css) */

/* ---------- 1) WHITELABEL SATIŞ SİTENİZ HEDİYE ---------- */
.bnx-store { background: var(--c-bg-2); position: relative; overflow: hidden; }
.bnx-store-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
.bnx-gift-badge { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(120deg, var(--c-amber), #F0A93A); color: #5A3D00; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; padding: 8px 16px; border-radius: 999px; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(255,184,69,.32); }
.bnx-gift-badge svg { width: 16px; height: 16px; }
.bnx-store-feats { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.bnx-store-feats li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; color: var(--c-ink); }
.bnx-store-feats .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--c-mint-soft); color: var(--c-mint-deep); display: grid; place-items: center; margin-top: 1px; }
.bnx-store-feats .ck svg { width: 14px; height: 14px; }
.bnx-store-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--c-mint); color: #fff; font-size: 15.5px; font-weight: 800; padding: 15px 30px; border-radius: 12px; box-shadow: 0 10px 24px rgba(var(--c-accent-rgb),.3); transition: transform .18s, background .18s, box-shadow .18s; }
.bnx-store-cta:hover { transform: translateY(-2px); background: var(--c-mint-deep); box-shadow: 0 14px 32px rgba(var(--c-accent-rgb),.38); }
.bnx-store-cta svg { width: 18px; height: 18px; }

/* storefront browser mock */
.bnx-shop { position: relative; }
.bnx-shop-win { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.bnx-shop-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); }
.bnx-shop-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.bnx-shop-bar i:nth-child(1) { background: #FF5F57; } .bnx-shop-bar i:nth-child(2) { background: #FEBC2E; } .bnx-shop-bar i:nth-child(3) { background: #28C840; }
.bnx-shop-url { flex: 1; margin-left: 8px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; font-size: 12px; color: var(--c-muted); padding: 6px 14px; display: flex; align-items: center; gap: 7px; }
.bnx-shop-url svg { width: 12px; height: 12px; color: var(--c-mint-deep); }
.bnx-shop-url b { color: var(--c-ink); font-weight: 800; }
.bnx-shop-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--c-line); }
.bnx-shop-logo { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; color: var(--c-ink); }
.bnx-shop-logo .m { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--c-indigo), var(--c-violet)); color: #fff; display: grid; place-items: center; font-size: 15px; }
.bnx-shop-nav { display: flex; gap: 16px; }
.bnx-shop-nav span { width: 42px; height: 8px; border-radius: 4px; background: var(--c-line-2); }
.bnx-shop-hero { padding: 22px 20px; background: linear-gradient(120deg, var(--c-indigo-soft), var(--c-violet-soft)); }
.bnx-shop-hero .t1 { height: 12px; width: 60%; border-radius: 5px; background: var(--c-indigo); opacity: .55; margin-bottom: 9px; }
.bnx-shop-hero .t2 { height: 9px; width: 80%; border-radius: 5px; background: var(--c-ink); opacity: .18; margin-bottom: 6px; }
.bnx-shop-hero .t3 { height: 9px; width: 45%; border-radius: 5px; background: var(--c-ink); opacity: .12; }
.bnx-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 20px 22px; }
.bnx-shop-card { border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.bnx-shop-card .img { height: 60px; background: linear-gradient(135deg, var(--c-mint-soft), var(--c-bg-2)); }
.bnx-shop-card:nth-child(2) .img { background: linear-gradient(135deg, var(--c-coral-soft), var(--c-bg-2)); }
.bnx-shop-card:nth-child(3) .img { background: linear-gradient(135deg, var(--c-amber-soft), var(--c-bg-2)); }
.bnx-shop-card:nth-child(4) .img { background: linear-gradient(135deg, var(--c-violet-soft), var(--c-bg-2)); }
.bnx-shop-card:nth-child(5) .img { background: linear-gradient(135deg, var(--c-indigo-soft), var(--c-bg-2)); }
.bnx-shop-card:nth-child(6) .img { background: linear-gradient(135deg, var(--c-mint-soft), var(--c-bg-2)); }
.bnx-shop-card .b { padding: 9px 10px; }
.bnx-shop-card .b .l1 { height: 7px; width: 85%; border-radius: 4px; background: var(--c-ink); opacity: .2; margin-bottom: 6px; }
.bnx-shop-card .b .l2 { height: 9px; width: 45%; border-radius: 4px; background: var(--c-mint-deep); }
/* floating price chip */
.bnx-shop-chip { position: absolute; display: flex; align-items: center; gap: 9px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 13px; padding: 11px 15px; box-shadow: var(--shadow-md); }
.bnx-shop-chip .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.bnx-shop-chip .ico svg { width: 18px; height: 18px; }
.bnx-shop-chip b { display: block; font-size: 14px; font-weight: 800; color: var(--c-ink); line-height: 1.1; }
.bnx-shop-chip span { font-size: 11.5px; color: var(--c-ink-soft); font-weight: 600; }
.bnx-shop-chip.c1 { top: -18px; right: -14px; animation: bnxFloat 5s ease-in-out infinite; }
.bnx-shop-chip.c1 .ico { background: var(--c-mint-soft); color: var(--c-mint-deep); }
.bnx-shop-chip.c2 { bottom: -18px; left: -16px; animation: bnxFloat 6s ease-in-out infinite reverse; }
.bnx-shop-chip.c2 .ico { background: var(--c-amber-soft); color: #C98A1E; }
@keyframes bnxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .bnx-shop-chip { animation: none !important; } }

/* ---------- 2) AVANTAJLAR ---------- */
.bnx-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bnx-adv { display: flex; align-items: flex-start; gap: 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.bnx-adv:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.bnx-adv .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.bnx-adv .ico svg { width: 24px; height: 24px; }
.bnx-adv-tx { flex: 1; min-width: 0; }
.bnx-adv.mint .ico { background: var(--c-mint-soft); color: var(--c-mint-deep); }
.bnx-adv.coral .ico { background: var(--c-coral-soft); color: #E5566A; }
.bnx-adv.amber .ico { background: var(--c-amber-soft); color: #C98A1E; }
.bnx-adv.indigo .ico { background: var(--c-indigo-soft); color: var(--c-indigo); }
.bnx-adv.violet .ico { background: var(--c-violet-soft); color: var(--c-violet); }
.bnx-adv h3 { font-size: 17.5px; font-weight: 800; color: var(--c-ink); margin: 2px 0 6px; }
.bnx-adv p { font-size: 14.5px; color: var(--c-ink-soft); margin: 0; line-height: 1.6; }

/* ---------- 3) KİMLER İÇİN UYGUN ---------- */
.bnx-who { background: var(--c-bg-2); }
.bnx-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bnx-who-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.bnx-who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bnx-who-card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--c-mint-soft); color: var(--c-mint-deep); display: grid; place-items: center; margin-bottom: 14px; }
.bnx-who-card .ico svg { width: 23px; height: 23px; }
.bnx-who-card h3 { font-size: 16.5px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; }
.bnx-who-card p { font-size: 14px; color: var(--c-ink-soft); margin: 0 0 16px; line-height: 1.6; flex: 1; }
.bnx-who-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--c-mint-deep); align-self: flex-start; transition: gap .18s; }
.bnx-who-link:hover { gap: 11px; }
.bnx-who-link svg { width: 15px; height: 15px; }

/* ---------- 4) NASIL ÇALIŞIR ---------- */
.bnx-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.bnx-step { position: relative; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 28px 22px; box-shadow: var(--shadow-sm); text-align: center; }
.bnx-step .n { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #fff; background: var(--c-mint); box-shadow: 0 8px 18px rgba(var(--c-accent-rgb),.3); }
.bnx-step:nth-child(2) .n { background: var(--c-amber); box-shadow: 0 8px 18px rgba(255,184,69,.32); }
.bnx-step:nth-child(3) .n { background: var(--c-indigo); box-shadow: 0 8px 18px rgba(110,124,242,.3); }
.bnx-step:nth-child(4) .n { background: #E5566A; box-shadow: 0 8px 18px rgba(255,120,134,.32); }
.bnx-step h4 { font-size: 16.5px; font-weight: 800; color: var(--c-ink); margin: 0 0 8px; }
.bnx-step p { font-size: 14px; color: var(--c-ink-soft); margin: 0; line-height: 1.55; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .bnx { padding: 64px 0; }
  .bnx-store-grid { grid-template-columns: 1fr; gap: 40px; }
  .bnx-shop { max-width: 520px; margin: 0 auto; }
  .bnx-adv-grid, .bnx-who-grid { grid-template-columns: 1fr 1fr; }
  .bnx-how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .bnx-store .sec-title { font-size: 27px; }
  .bnx-store-feats { grid-template-columns: 1fr; }
  .bnx-adv-grid, .bnx-who-grid, .bnx-how-grid { grid-template-columns: 1fr; }
  .bnx-adv { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .bnx-shop-chip { display: none; }
}

/* ── bnx-store "resim" modu (2026-08-01) ──────────────────────────────────────────
   Bayi Satış Sitesi bölümünün sağ sütunu panelden `kartlar` yerine `resim` seçilince
   anasayfadaki `about` düzeninin AYNISI basılır. Kurallar home.css'teki .about-media
   bloğunun eşidir — bayilik sayfası home.css yüklemediği için burada tekrarlanır
   (CLAUDE.md: CSS parçaya kopyalanmaz, ilgili sayfa dosyasında durur). */
.bnx-store .about-media { position: relative; min-height: 480px; }
.bnx-store .about-img { position: absolute; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg, 0 18px 40px rgba(16,24,40,.14)); }
.bnx-store .about-img-main { top: 0; left: 6%; width: 74%; height: 400px; z-index: 1; }
.bnx-store .about-img-sub { bottom: 0; right: 0; width: 46%; height: 260px; z-index: 2; border: 6px solid var(--c-bg, #fff); }
.bnx-store .about-img img, .bnx-store .about-img image-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.bnx-store .about-img image-slot { background: linear-gradient(135deg, var(--c-mint-soft, #e8f7f1) 0%, var(--c-bg-2, #f6f8fb) 100%); }
.bnx-store .about-badge { position: absolute; top: 30px; right: 4%; z-index: 3;
  background: var(--c-ink, #101828); color: #fff; border-radius: 14px; padding: 12px 16px; text-align: center;
  box-shadow: 0 14px 30px rgba(16,24,40,.22); }
.bnx-store .about-badge .ab-num { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.bnx-store .about-badge .ab-lbl { display: block; font-size: 11.5px; font-weight: 600; margin-top: 4px; opacity: .92; }

@media (max-width: 860px) {
  .bnx-store .about-media { max-width: 460px; margin: 0 auto; min-height: 420px; width: 100%; }
  .bnx-store .about-img-main { height: 400px !important; }
}
@media (max-width: 560px) {
  .bnx-store .about-media { min-height: 360px; }
  .bnx-store .about-img-main { height: 300px !important; }
  .bnx-store .about-img-sub { height: 190px; }
}