/* Balıkçısın — Kurulum/YeniWebSitesi/Balıkçısın.dc.html'in <style> bloğunun BİREBİR portu (mockup'ın
   kendi <head><style> içeriği, satır 14-179) + Mesajlar.dc.html'in mz-* bloğu. Renk/aralık değerleri
   :root değişkenleriyle DRY tutuluyor (mockup'ta değişken yok, her yerde literal hex tekrarlanıyor) ama
   ÇIKTI birebir aynı — bu bir "yeniden tasarım" değil, aynı literal değerlerin bir kere tanımlanmasıdır. */

:root {
  --ink: #0A2540;
  --bg: #F2F7FC;
  --blue: #0C6EE6;
  --blue-dark: #0A3F8F;
  --coral: #FF5A3C;
  --purple: #7C5CFF;
  --green: #16B894;
  --cyan: #5FD3FF;
  --muted: #52677A;
  --muted-2: #9AAAB8;
  --border: #E4EDF5;
}

* { box-sizing: border-box; }
::selection { background: #0C6EE6; color: #fff; }

@keyframes bsPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes bsUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bsBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(255,90,60,.5); } 50% { box-shadow: 0 0 0 8px rgba(255,90,60,0); } }
@keyframes bsFloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-26px); } }
@keyframes bsFloatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,18px); } }
/* Mezat "Teklif Akışı" — yeni teklif satırının canlı giriş animasyonu (kullanıcı talebi 2026-07-29). */
@keyframes bsBidIn { 0% { opacity:0; transform:translateY(-12px) scale(.97); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bsBidFlash { 0% { background-color:#FFE29A; border-color:#FFC864; } 100% { background-color:#FFF9EE; border-color:#FFE9C2; } }
[data-anim="reveal"] { opacity:1; transform:translateY(28px); transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
[data-anim="reveal"][data-shown] { opacity:1; transform:none; }
[data-anim="draw"] { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1); }
[data-anim="draw"][data-shown] { stroke-dashoffset:0; }
[data-anim="countup"] { font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { [data-anim="reveal"]{opacity:1;transform:none;transition:none;} [data-anim="draw"]{stroke-dashoffset:0;transition:none;} }
@keyframes bsGlow { 0%,100% { box-shadow:0 0 0 1px rgba(255,90,60,.55), 0 0 26px rgba(255,90,60,.28), 0 22px 50px rgba(10,37,64,.16); } 50% { box-shadow:0 0 0 1px rgba(255,90,60,.9), 0 0 40px rgba(255,90,60,.5), 0 22px 50px rgba(10,37,64,.16); } }
@keyframes bsSweep { from { transform:translateX(-130%) skewX(-18deg); } to { transform:translateX(330%) skewX(-18deg); } }
@keyframes bsRing { 0% { transform:scale(.7); opacity:.6; } 100% { transform:scale(2.1); opacity:0; } }

@media (max-width: 880px) {
  .bs-about-grid { grid-template-columns: 1fr !important; }
  .bs-adetail { grid-template-columns: 1fr !important; }
  .bs-adetail > div:last-child { position: static !important; }
  .bs-legal-aside { position: static !important; flex: 1 1 100% !important; }
  .bs-legal-toc { display: none !important; }
  .bs-legal-sec { grid-template-columns: 36px minmax(0,1fr) !important; gap: 16px !important; }
  .bs-cf-link { display: none !important; }
}
.bs-nav .bs-underline { transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s; }
.bs-nav:hover .bs-underline { transform:scaleX(1)!important; opacity:.45; }
.bs-cta { transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s; }
.bs-cta:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(12,110,230,.4); }
.bs-cta:active { transform:translateY(0); }
.bs-icbtn { transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s; }
.bs-icbtn:hover { transform:translateY(-2px) rotate(-4deg); background:#FFE9E6; color:#FF5A3C; }
/* header arama çubuğu (Track B — header yeniden tasarımı, menü logonun altına indi) */
.bs-searchbar { transition:background .25s, border-color .25s, box-shadow .25s; }
.bs-searchbar:focus-within { background:#fff; border-color:#0C6EE6; box-shadow:0 0 0 4px rgba(12,110,230,.12); }
.bs-searchbar input::placeholder { color:#9AAAB8; }
.bs-searchbar button[type="submit"] { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.bs-searchbar button[type="submit"]:hover { transform:scale(1.08); }
@media (max-width: 860px) {
  header[data-header="1"] > div:first-child { flex-wrap:wrap; padding-bottom:12px; }
  .bs-searchbar { order:3; flex:1 1 100%; max-width:none!important; margin:6px 0 0!important; }
}
/* "Kategoriler" mega-menü (header ikinci satır — kullanıcı talebi) */
#bs-cat-trigger { transition:background .25s, transform .2s; }
#bs-cat-trigger:hover { background:#123A63; transform:translateY(-1px); }

/* Kategori mega-menüsü — 2026-07-21: iki bölmeli (sol ray + sağ panel) düzen, bkz. _CategoryMegaGrid.cshtml.
   Kapsayıcı sayfalar (header + Adverts/List "Tüm Kategoriler" popup'ı) sabit bir height veriyor, iç kayan
   alanları (ray/panel) burada yönetiliyor — çok kategori + çok alt kategori olsa da düzenli kalır. */
.bs-catmega { display:flex; height:100%; min-height:0; gap:24px; }
.bs-catmega-rail { flex:0 0 232px; overflow-y:auto; padding-right:14px; border-right:1px solid var(--border); }
.bs-catmega-item { position:relative; display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; text-align:left; cursor:pointer; text-decoration:none; background:none; border:none; padding:10px 12px; border-radius:12px; margin-bottom:2px; transition:background .15s; }
.bs-catmega-item:hover { background:#F4F8FC; }
.bs-catmega-item.is-active { background:#EAF3FE; }
.bs-catmega-icon { flex-shrink:0; width:30px; height:30px; border-radius:9px 9px 9px 3px; background:#fff; border:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; color:#0C6EE6; transition:background .15s, border-color .15s, color .15s; }
.bs-catmega-item.is-active .bs-catmega-icon { background:#0C6EE6; border-color:#0C6EE6; color:#fff; }
.bs-catmega-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Hanken Grotesk'; font-weight:700; font-size:13.5px; color:#0A2540; }
.bs-catmega-count { flex-shrink:0; font-family:'Space Mono',monospace; font-weight:700; font-size:10.5px; color:var(--muted-2); }
.bs-catmega-chevron { flex-shrink:0; opacity:0; transform:translateX(-3px); color:#0C6EE6; transition:opacity .18s, transform .18s; }
.bs-catmega-item.is-active .bs-catmega-chevron { opacity:1; transform:none; }

.bs-catmega-panels { flex:1; min-width:0; overflow-y:auto; padding-right:6px; }
.bs-catmega-panel { display:none; }
.bs-catmega-panel.is-active { display:block; animation:bsCatFade .2s ease; }
@keyframes bsCatFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.bs-catmega-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.bs-catmega-panel-title { font-family:'Bricolage Grotesque'; font-weight:700; font-size:19px; color:#0A2540; }
.bs-catmega-viewall { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-family:'Hanken Grotesk'; font-weight:700; font-size:12.5px; color:#0C6EE6; transition:gap .2s; }
.bs-catmega-viewall:hover { gap:9px; }

.bs-catmega-groups { columns:2; column-gap:28px; }
.bs-catmega-group { break-inside:avoid; margin-bottom:20px; }
.bs-catmega-group-title { display:inline-block; text-decoration:none; font-family:'Hanken Grotesk'; font-weight:700; font-size:13.5px; color:#0A2540; margin-bottom:9px; transition:color .15s; }
.bs-catmega-group-title:hover { color:#0C6EE6; }
.bs-catmega-sublist { display:flex; flex-direction:column; gap:7px; }
.bs-catmega-sublist a { text-decoration:none; font-family:'Hanken Grotesk'; font-weight:500; font-size:13px; color:#7C8DA0; transition:color .15s, transform .15s; }
.bs-catmega-sublist a:hover { color:#0C6EE6; transform:translateX(2px); }

.bs-catmega-rail::-webkit-scrollbar, .bs-catmega-panels::-webkit-scrollbar { width:7px; }
.bs-catmega-rail::-webkit-scrollbar-thumb, .bs-catmega-panels::-webkit-scrollbar-thumb { background:#D3E0EC; border-radius:8px; }

@media (max-width:760px) {
  .bs-catmega { flex-direction:column; height:auto; max-height:70vh; }
  .bs-catmega-rail { flex:none; width:100%; display:flex; overflow-x:auto; overflow-y:visible; gap:6px; border-right:none; border-bottom:1px solid var(--border); padding:0 0 12px; }
  .bs-catmega-item { flex:0 0 auto; white-space:nowrap; }
  .bs-catmega-panels { padding-top:16px; padding-right:0; }
  .bs-catmega-groups { columns:1; }
}

/* Derin kategori ağacı (filtre popup'ı + kategori kenar çubuğu — bkz. _CategoryTree.cshtml). Kenar
   çubuğunda bu sınıf artık doğrudan <a>'ya uygulanıyor (eskiden _CategoryTree'de sarmalayıcı bir <div>'e
   uygulanırdı, gerçek <a> kendi text-decoration:none'ını inline taşıyordu) — text-decoration burada
   eksikti, TEK PARÇA/İKİ PARÇA gibi satırlar altı çizili görünüyordu (kullanıcı raporu 2026-07-21). */
.bs-cattree-row { display:flex; text-decoration:none; transition:background .15s; }
.bs-cattree-row:hover { background:#F2F7FC; }
.bs-cattree-row.is-active { background:#EAF3FE; }
.bs-cattree-caret { transition:transform .18s, color .15s; }
.bs-cattree-caret.is-open { transform:rotate(90deg); color:#0C6EE6; }
.bs-cattree-caret:hover { color:#0C6EE6; }

/* Kategori kenar çubuğu (Ürünler listesi — 2026-07-21, üstteki yatay "Tümü" çip şeridinin yerine geçti,
   kullanıcı talebi: "sol sticky panel şekilde ... hangi kategori seçildiyse o ve altındaki kategoriler
   açılsın, diğerleri gözükmesin"). _CategoryTree.cshtml'in var olan "seçili yolu otomatik aç, gerisini
   kapalı bırak" mantığı burada birebir kullanılıyor — yalnızca konteyner artık her zaman görünen, yapışkan
   bir kart. Sabit header yüksekliği (~120px) + boşluk kadar top ofseti — kasıtlı olarak sabit piksel:
   önceki tur bir CSS custom property + calc() zincirine (--bs-sticky-top) bağlıydı ve tarayıcıda sessizce
   hiç yapışmıyordu (kullanıcı: "scrolla girince sticky olmadı") — kök neden kesin doğrulanamadı (muhtemelen
   var() içinde calc() zincirinin computed-value aşamasında geçersiz sayılması), bu yüzden güvenilirlik için
   basit sabit değerlere dönüldü. */
/* Üst sticky header (banner + logo satırı + menü) yüksekliği sabit değil — doğrulama/askıya alma
   banner'ları koşullu render edildiğinden sayfadan sayfaya (hatta aynı sayfada kullanıcı durumuna göre)
   değişir. --bs-header-h, _Layout.cshtml'deki bir ResizeObserver ile #bs-sticky-header'ın gerçek
   yüksekliğine göre canlı ayarlanır (kullanıcı raporu: sabit px offset banner yokken/varken kenar
   çubuğunu menünün altında bırakıyordu) — 132px yalnızca JS henüz çalışmadan önceki ilk boyama için fallback. */
.bs-catsidebar { position:sticky; top:calc(var(--bs-header-h, 132px) + 14px); display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:0 26px 54px -36px rgba(10,37,64,.35); max-height:calc(100vh - var(--bs-header-h, 132px) - 38px); overflow:hidden; }
.bs-catsidebar-head { flex-shrink:0; padding:20px 12px 6px; }
.bs-catsidebar-eyebrow { font-family:'Space Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.16em; color:var(--muted-2); margin-bottom:14px; padding-left:2px; }
.bs-catsidebar-search { display:flex; align-items:center; gap:9px; background:#F4F8FC; border:1.5px solid #EAF0F6; border-radius:12px; padding:0 12px; transition:border-color .2s, box-shadow .2s, background .2s; }
.bs-catsidebar-search:focus-within { border-color:#0C6EE6; box-shadow:0 0 0 4px rgba(12,110,230,.12); background:#fff; }
.bs-catsidebar-search input { flex:1; min-width:0; border:none; background:transparent; outline:none; padding:11px 0; font:500 13.5px/1 'Hanken Grotesk',sans-serif; color:#0A2540; }
.bs-catsidebar-tree { flex:1; min-height:0; overflow-y:auto; padding:6px 12px 16px; }
.bs-catsidebar-tree::-webkit-scrollbar { width:7px; }

/* Ata zinciri kırıntıları + kardeş/çocuk listesi TEK kesintisiz kademeli-girintili listede (bkz.
   Adverts/List/Index.cshtml "Kategori kenar çubuğu" notu, kullanıcı raporu 2026-07-21: "tekli iğne seçili
   aşağıda kategoriler var aşağıda olmasın onlar yukarıda seçilenin altında olsun"). "Tüm Kategoriler" kök
   girişi (bs-catsidebar-root) artık bu listenin GERÇEK ilk satırı — hiçbir renk/kalınlık farkı yok
   (kullanıcı: "ajing üzerine al sanki kategoriymiş gibi aynı tasarımda, ayrı ve farklı olmasın"); yalnızca
   position:sticky top:0 ile liste kayarken üstte asılı kalıyor. */
/* Kullanıcı raporu 2026-07-21: "tüm kategoriler font, css vs tamamen kategori gibi gözüksün" — ata
   zincirinin (ve "Tüm Kategoriler" kök girişinin) tipografisi artık gerçek kategori satırlarıyla (bkz.
   #bs-catsidebar-level'daki aktif/kardeş satırlar, font:600 14px 'Hanken Grotesk' #28374A) BİREBİR AYNI;
   önceki daha küçük/soluk "kırıntı" görünümü (12.5px, #8C9DAD) kaldırıldı — artık hiçbiri "farklı" durmuyor,
   yalnızca aktif olan (.is-current / satır listesindeki .is-active) kalın+mavi. */
.bs-catsidebar-crumb { display:flex; align-items:center; gap:8px; text-decoration:none; padding:9px 10px; border-radius:10px; font:600 14px/1.3 'Hanken Grotesk',sans-serif; color:#28374A; transition:background .15s, color .15s; }
.bs-catsidebar-root { position:sticky; top:0; z-index:2; background:#fff; }
.bs-catsidebar-crumb:hover { background:#F2F7FC; color:#0C6EE6; }
.bs-catsidebar-crumb.is-current { color:#0C6EE6; font-weight:700; background:#EAF3FE; }

/* Sahibinden benzeri hızlı filtreler (Fiyat/Durum) — kullanıcı talebi: "sahibinden olduğu gibi bazı
   filtreleri sol sticky panele ekle". "Detaylı Filtrele" popup'ındaki tam küme hâlâ duruyor, bu yalnızca
   en sık kullanılan ikisinin panelden çıkmadan hızlı erişimi. */
.bs-catsidebar-filters { flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:16px 18px 18px; border-top:1px solid var(--border); }
.bs-catsidebar-filter-block .bs-catsidebar-eyebrow { margin-bottom:10px; }
.bs-catsidebar-num { width:0; flex:1; min-width:0; background:#F4F8FC; border:1.5px solid #EAF0F6; border-radius:9px; padding:9px 10px; font:600 13px/1 'Hanken Grotesk',sans-serif; color:#0A2540; outline:none; transition:border-color .15s; }
.bs-catsidebar-num:focus { border-color:#0C6EE6; }
.bs-catsidebar-apply { margin-top:10px; width:100%; cursor:pointer; background:#0A2540; color:#fff; border:none; font:700 12.5px/1 'Hanken Grotesk',sans-serif; padding:10px; border-radius:10px 10px 10px 4px; transition:background .15s, transform .15s; }
.bs-catsidebar-apply:hover { background:#0C6EE6; transform:translateY(-1px); }
.bs-catsidebar-radio { display:flex; align-items:center; gap:9px; text-decoration:none; padding:7px 8px; border-radius:9px; font:600 13px/1.3 'Hanken Grotesk',sans-serif; color:#3A566F; transition:background .15s, color .15s; }
.bs-catsidebar-radio:hover { background:#F4F8FC; }
.bs-catsidebar-radio-dot { flex-shrink:0; width:15px; height:15px; border-radius:50%; border:1.5px solid #C7D6E4; box-sizing:border-box; transition:border-color .15s, background .15s, box-shadow .15s; }
.bs-catsidebar-radio.is-active { color:#0C6EE6; }
.bs-catsidebar-radio.is-active .bs-catsidebar-radio-dot { border-color:#0C6EE6; background:#0C6EE6; box-shadow:inset 0 0 0 3px #fff; }

/* İlan detay breadcrumb (2026-07-21) — eski tekli "kategori çipi"nin yerine geçti, kullanıcı talebi:
   "sadece bağlı kategorisini değil yukarı doğru komple ağaç sırasını getir ... daha modern ui bazlı". */
.bs-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:22px; }
.bs-breadcrumb-link { display:inline-flex; align-items:center; text-decoration:none; font:600 13px/1 'Hanken Grotesk',sans-serif; color:#8C9DAD; padding:6px 3px; border-radius:8px; transition:color .15s; white-space:nowrap; }
.bs-breadcrumb-link:hover { color:#0C6EE6; }
.bs-breadcrumb-link.is-current { color:#0A2540; font-weight:700; }
.bs-breadcrumb-sep { flex-shrink:0; color:#C7D6E4; display:flex; }
.bs-catsidebar-tree::-webkit-scrollbar-thumb { background:#D3E0EC; border-radius:8px; }

/* Filtre popup'ı (bkz. Adverts/List/Index.cshtml #bs-filter-overlay) */
.bs-filter-chip { transition:background .15s, color .15s, border-color .15s; cursor:pointer; }
.bs-filter-chip:hover { border-color:rgba(12,110,230,.4)!important; }
@media (max-width: 760px) {
  .bs-catpanel-grid { grid-template-columns:1fr!important; }
}
.bs-av { transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.bs-av:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 8px 20px rgba(12,110,230,.36); }
/* category bento */
.bs-tile { transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; }
.bs-tile:hover { transform:translateY(-5px); box-shadow:0 26px 52px rgba(10,37,64,.13); border-color:rgba(12,110,230,.35); }
.bs-tile .bs-ill { transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .4s; }
.bs-tile:hover .bs-ill { transform:scale(1.08) rotate(-3deg); opacity:.9; }
.bs-tile .bs-num { transition:transform .42s cubic-bezier(.34,1.56,.64,1), color .4s; }
.bs-tile:hover .bs-num { transform:scale(1.16); color:#0C6EE6; }
.bs-tile .bs-arrow { transition:transform .4s, opacity .35s; }
.bs-tile:hover .bs-arrow { transform:translateX(5px); opacity:1; }
/* auction + product cards */
.bs-lift { transition:transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s; }
.bs-lift:hover { transform:translateY(-5px); box-shadow:0 26px 50px rgba(10,37,64,.16); }
.bs-fav { opacity:0; transform:translateY(-6px); transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s, background .3s, color .3s, box-shadow .3s; }
.bs-prod:hover .bs-fav { opacity:1; transform:translateY(0); }
.bs-fav:hover { background:#fff!important; color:#FF5A3C!important; box-shadow:0 6px 16px rgba(255,90,60,.3); }
.bs-fav.bs-fav-on { opacity:1; transform:none; }
.bs-prod .bs-ill { transition:transform .6s cubic-bezier(.22,1,.36,1); }
.bs-prod:hover .bs-ill { transform:scale(1.07) translateY(-4px); }
.bs-prod:hover .bs-arrow { transform:translateX(5px); }
.bs-arrow { transition:transform .35s; }
/* ===== contact: channels ===== */
.bs-ch { transition:transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s, border-color .42s; }
.bs-ch:hover { transform:translateY(-3px); box-shadow:0 24px 46px rgba(10,37,64,.13); }
.bs-ch .bs-ch-ul { transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.bs-ch:hover .bs-ch-ul { transform:scaleX(1); }
.bs-ch .bs-ch-copy { opacity:0; transform:translateY(-3px); transition:opacity .3s, transform .32s cubic-bezier(.34,1.56,.64,1); }
.bs-ch:hover .bs-ch-copy, .bs-ch .bs-ch-copy.bs-ch-on { opacity:1; transform:translateY(0); }
/* ===== contact: form ===== */
.bs-cf-input { width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(255,255,255,.20); color:#fff; font:500 16px/1.4 'Hanken Grotesk'; padding:23px 0 9px; outline:none; transition:border-color .3s; }
.bs-cf-input::placeholder { color:transparent; }
.bs-cf-input:focus { border-bottom-color:#5FD3FF; }
.bs-cf-label { position:absolute; left:0; top:22px; font:500 16px/1 'Hanken Grotesk'; color:rgba(255,255,255,.46); pointer-events:none; transition:top .26s cubic-bezier(.22,1,.36,1), font-size .26s, color .26s, letter-spacing .26s; }
.bs-cf-input:focus + .bs-cf-label,
.bs-cf-input:not(:placeholder-shown) + .bs-cf-label { top:-2px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#5FD3FF; }
.bs-cf-msg { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px 18px 16px; transition:border-color .3s, background .3s; }
.bs-cf-msg:focus-within { border-color:rgba(95,211,255,.55); background:rgba(255,255,255,.08); }
.bs-cf-area { width:100%; background:transparent; border:none; color:#fff; font:500 17px/1.65 'Hanken Grotesk'; outline:none; resize:none; }
.bs-cf-area::placeholder { color:rgba(255,255,255,.34); }
.bs-cf-send { position:relative; overflow:hidden; isolation:isolate; cursor:pointer; transition:color .35s; }
.bs-cf-send::before { content:''; position:absolute; inset:0; background:#5FD3FF; transform:translateX(-101%); transition:transform .45s cubic-bezier(.22,1,.36,1); z-index:-1; }
.bs-cf-send:hover::before { transform:translateX(0); }
.bs-cf-send:hover { color:#0A2540; }
.bs-cf-send .bs-arrow2 { transition:transform .42s cubic-bezier(.22,1,.36,1); }
.bs-cf-send:hover .bs-arrow2 { transform:translateX(6px); }
@media (max-width: 880px) { .bs-cf-row { grid-template-columns: 1fr !important; } }
/* ===== shop ===== */
@keyframes bsPop { 0%{transform:scale(0);} 60%{transform:scale(1.22);} 100%{transform:scale(1);} }
@keyframes bsUrg { 0%,100%{box-shadow:0 0 0 1px rgba(255,90,60,.6), 0 6px 18px rgba(255,90,60,.32);} 50%{box-shadow:0 0 0 1px rgba(255,90,60,1), 0 6px 26px rgba(255,90,60,.55);} }
@keyframes bsSheet { from{transform:translateY(100%);} to{transform:translateY(0);} }
@keyframes bsFade { from{opacity:0;} to{opacity:1;} }
@keyframes bsZoomIn { from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }
@keyframes bsStagePop { from{transform:scale(.94);} to{transform:scale(1);} }
.bs-card { transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; }
.bs-card:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(10,37,64,.16); border-color:rgba(12,110,230,.3); }
.bs-card .bs-cardill { transition:transform .65s cubic-bezier(.22,1,.36,1); }
.bs-card:hover .bs-cardill { transform:scale(1.12) rotate(-3deg); }
.bs-card .bs-cardgo { transition:transform .4s, opacity .35s; opacity:0; }
.bs-card:hover .bs-cardgo { transform:translateX(4px); opacity:1; }
.bs-heart { cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.bs-heart:hover { transform:scale(1.12); }
/* kariyer satırı (careerRoles, style-hover="border-color:#0C6EE6; transform:translateX(4px);") */
.bs-role-row { transition:border-color .15s, transform .15s; color:inherit; }
.bs-role-row:hover { border-color:#0C6EE6 !important; transform:translateX(4px); }
/* basın bülteni satırı (style-hover="border-color:#7C5CFF;") */
.bs-press-release:hover { border-color:#7C5CFF !important; }
.bs-heart:active { transform:scale(.86); }
.bs-heart-fill { transform-origin:center; transition:transform .42s cubic-bezier(.34,1.7,.5,1); }
.bs-urg { animation:bsUrg 2.4s ease-in-out infinite; }
.bs-chip-x { transition:background .2s, transform .2s; }
.bs-chip-x:hover { background:rgba(255,255,255,.28)!important; transform:rotate(90deg); }
.bs-filtoggle { transition:transform .3s, box-shadow .3s, background .3s; }
.bs-filtoggle:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,37,64,.16); }
.bs-actchip { animation:bsZoomIn .35s cubic-bezier(.34,1.56,.64,1) both; }
/* dual range slider */
.bs-range { position:relative; height:34px; }
.bs-range-track { position:absolute; top:14px; left:0; right:0; height:6px; border-radius:6px; background:#E4EDF5; }
.bs-range-fill { position:absolute; top:14px; height:6px; border-radius:6px; background:linear-gradient(90deg,#0C6EE6,#16B894); }
.bs-range-input { position:absolute; top:8px; left:0; width:100%; height:18px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none; }
.bs-range-input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #0C6EE6; box-shadow:0 4px 12px rgba(10,37,64,.22); cursor:grab; }
.bs-range-input::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); }
.bs-range-input::-moz-range-thumb { pointer-events:auto; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid #0C6EE6; box-shadow:0 4px 12px rgba(10,37,64,.22); cursor:grab; }
/* gallery */
.bs-galmain { cursor:zoom-in; overflow:hidden; }
.bs-galmain .bs-galimg { transition:transform .6s cubic-bezier(.22,1,.36,1); }
.bs-galmain:hover .bs-galimg { transform:scale(1.14); }
.bs-thumb { transition:border-color .3s, transform .3s; cursor:pointer; }
.bs-thumb:hover { transform:translateY(-3px); }
/* lightbox */
.bs-lb { background:rgba(6,18,32,.86); }
.bs-lb-stage { animation:bsStagePop .3s cubic-bezier(.22,1,.36,1) both; }
.bs-lb-nav { transition:background .25s, transform .25s; }
.bs-lb-nav:hover { background:#fff!important; transform:scale(1.08); }
/* contact-cta button on product */
.bs-contact { position:relative; overflow:hidden; isolation:isolate; cursor:pointer; transition:color .35s; }
.bs-contact::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#16B894,#0C6EE6); transform:translateX(-101%); transition:transform .5s cubic-bezier(.22,1,.36,1); z-index:-1; }
.bs-contact:hover::before { transform:translateX(0); }
.bs-contact .bs-arrow3 { transition:transform .45s cubic-bezier(.22,1,.36,1); }
.bs-contact:hover .bs-arrow3 { transform:translateX(7px); }
.bs-specrow { transition:transform .3s, box-shadow .3s, border-color .3s; }
.bs-specrow:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,37,64,.1); border-color:rgba(12,110,230,.3); }
@media (max-width: 980px) { .bs-shop-grid { grid-template-columns:1fr !important; } .bs-pd-grid { grid-template-columns:1fr !important; } }
@media (max-width: 760px) {
  .bs-filterpanel { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; z-index:1200; max-height:86vh; overflow-y:auto; border-radius:22px 22px 0 0 !important; animation:bsSheet .34s cubic-bezier(.22,1,.36,1) both; box-shadow:0 -20px 50px rgba(10,37,64,.24) !important; }
  .bs-sheet-grab { display:block !important; }
}
@keyframes bs-cp-ov-in { from{opacity:0} to{opacity:1} }
@keyframes bs-cp-ov-out { from{opacity:1} to{opacity:0} }
@keyframes bs-cp-pn-in { from{opacity:0; transform:translateY(30px) scale(.965)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes bs-cp-pn-out { from{opacity:1; transform:translateY(0) scale(1)} to{opacity:0; transform:translateY(20px) scale(.985)} }
.bs-cp-overlay { animation:bs-cp-ov-in .3s ease forwards; }
.bs-cp-overlay.bs-out { animation:bs-cp-ov-out .26s ease forwards; }
.bs-cp-panel { animation:bs-cp-pn-in .46s cubic-bezier(.22,1,.36,1) forwards; }
.bs-cp-panel.bs-out { animation:bs-cp-pn-out .26s cubic-bezier(.4,0,1,1) forwards; }
.bs-cp-all { transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.bs-cp-all:hover { transform:translateY(-3px); box-shadow:0 26px 54px rgba(12,110,230,.34); }
.bs-cp-all:hover .bs-cp-allarrow { transform:translateX(4px); }
.bs-cp-allarrow { transition:transform .3s; }
.bs-cp-skip { transition:color .2s, gap .2s; }
.bs-cp-skip:hover { color:#0C6EE6; }

/* Kategori seçim kartları (2026-07-21) — eski asimetrik 6-sütun span ızgarası (bs-cp-c3/c2), her kartın
   yalnızca 🎣 emojisi taşıdığı düzensiz görünümün yerine geçti (kullanıcı talebi: "çok daha modern ve
   düzenli ui hale getir"). Artık eşit boyutlu, ikon rozeti + ürün sayısı taşıyan gerçek kartlar. */
.bs-cp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bs-cp-cat { display:flex; align-items:center; gap:14px; text-decoration:none; background:#fff; border:1px solid #E4EDF5; border-radius:18px; padding:16px; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
.bs-cp-cat:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(10,37,64,.13); border-color:transparent; }
.bs-cp-cat-icon { flex-shrink:0; width:44px; height:44px; border-radius:13px 13px 13px 5px; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 8px 18px -8px rgba(10,37,64,.4); }
.bs-cp-cat-body { flex:1; min-width:0; }
.bs-cp-cat-name { font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:14.5px; line-height:1.25; color:#0A2540; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.bs-cp-cat-count { margin-top:4px; font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:12px; color:#9AAAB8; }
.bs-cp-cat-arrow { flex-shrink:0; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:16px; color:#C7D6E4; transition:transform .3s, color .3s; }
.bs-cp-cat:hover .bs-cp-cat-arrow { transform:translateX(3px); color:#0C6EE6; }
@media (max-width: 720px) {
  .bs-cp-overlay { align-items:flex-end !important; padding:0 !important; }
  .bs-cp-panel { max-width:100% !important; width:100% !important; border-radius:26px 26px 0 0 !important; max-height:92vh; overflow-y:auto; padding:26px 22px 30px !important; }
  .bs-cp-grid { grid-template-columns:repeat(2,1fr) !important; }
}

body.bs {
  margin: 0;
  font-family: 'Hanken Grotesk', sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.bs-display { font-family: 'Bricolage Grotesque', sans-serif; }
.bs-heading { font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.bs-mono { font-family: 'Space Mono', monospace; }

.bs-wrap { width: 1280px; margin: 0 auto; padding: 0 28px; }

.bs-icbtn {
  position: relative; cursor: pointer; width: 40px; height: 40px; border-radius: 13px 13px 13px 5px;
  background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none;
}
.bs-cta {
  position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 20px; border-radius: 13px 13px 13px 5px; box-shadow: 0 8px 20px rgba(12,110,230,.3);
  text-decoration: none; border: none;
}
.bs-cta:hover { color: #fff; }
.bs-av {
  cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(140deg, var(--green), var(--ink)); color: #fff; font-weight: 700; font-size: 15px;
  line-height: 40px; text-align: center; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(22,184,148,.35);
  text-decoration: none; display: inline-block;
}

/* buttons */
.bs-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 16px;
  padding: 17px 30px; border-radius: 13px; text-decoration: none; border: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.bs-btn:hover { transform: translateY(-2px); }
.bs-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(12,110,230,.28); }
.bs-btn-primary:hover { color: #fff; }
.bs-btn-outline { background: #fff; border: 1px solid var(--border); color: var(--ink); }
.bs-btn-outline:hover { color: var(--ink); }
.bs-btn-coral { background: var(--coral); color: #fff; box-shadow: 0 12px 26px rgba(255,90,60,.4); }
.bs-btn-coral:hover { color: #fff; }

/* hero */
.bs-hero { position: relative; z-index: 0; overflow: hidden; }
.bs-hero-doodles img { position: absolute; opacity: .45; }
.bs-hero-banner {
  border-radius: 24px; padding: 30px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 26px 56px rgba(10,37,64,.30);
}
.bs-live-pill {
  display: inline-flex; align-items: center; gap: 9px; background: #E7F1FF; color: var(--blue);
  font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 100px; margin-bottom: 24px;
}
.bs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: bsPulse 1.4s infinite; display: inline-block; }

/* section headers */
.bs-eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.bs-eyebrow .bs-rule { width: 30px; height: 1px; background: var(--blue); display: inline-block; }
.bs-eyebrow.coral .bs-rule { background: var(--coral); }
.bs-eyebrow span.bs-label { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .22em; color: var(--blue); }
.bs-eyebrow.coral span.bs-label { color: var(--coral); }
.bs-section-title {
  margin: 0; font-weight: 600; font-size: clamp(36px,4.6vw,58px); line-height: .92; letter-spacing: -1px;
  text-transform: uppercase; color: var(--ink); font-family: 'Oswald', sans-serif;
}
.bs-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.bs-see-all { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--blue); text-decoration: none; }

/* category bento */
.bs-bento { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 118px; gap: 16px; }
.bs-tile {
  position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--border); border-radius: 22px;
  padding: 18px 20px; text-decoration: none; color: inherit; display: block;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.bs-tile:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(10,37,64,.13); color: inherit; }
.bs-tile-name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: -.3px; color: var(--ink); }
.bs-tile-count { font-family: 'Bricolage Grotesque'; font-weight: 700; font-size: 28px; color: var(--ink); }

/* live auction / product cards */
.bs-lift { transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s; text-decoration: none; color: inherit; display: block; }
.bs-lift:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(10,37,64,.16); color: inherit; }
.bs-card-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: minmax(150px,1fr); gap: 18px; }
.bs-auction-featured {
  grid-column: 1/8; grid-row: 1/3; position: relative; overflow: hidden; border-radius: 24px; padding: 34px; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, var(--blue) 0%, var(--ink) 58%, #06182B 100%);
}
.bs-auction-small {
  grid-column: 8/13; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between;
}
/* Mezat listesi (Adverts/List, Track B Faz 6) — _AuctionCard.cshtml Home'un "1 büyük + 2 küçük" bento düzeninden
   (.bs-auction-small grid-column:8/13 sabiti) çıkarıldığı için genel bir liste bağlamında (n kart) yeniden kullanılamaz;
   bu konteyner kendi auto-fill grid'ini kurar ve içindeki .bs-auction-small'ı grid-column:auto'ya resetler. */
.bs-auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.bs-auction-grid .bs-auction-small { grid-column: auto; height: 100%; }
.bs-prod {
  position: relative; overflow: hidden; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: 22px;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s;
}
.bs-prod:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(10,37,64,.16); color: inherit; }
.bs-prod-media { position: relative; flex: 1; min-height: 160px; overflow: hidden; }
.bs-prod-body { padding: 20px 22px 22px; }
.bs-urgent-badge {
  position: absolute; top: 16px; left: 16px; background: var(--coral); color: #fff; font-weight: 700; font-size: 11px;
  letter-spacing: .1em; padding: 8px 14px; border-radius: 4px; box-shadow: 0 6px 16px rgba(255,90,60,.32);
}
.bs-fav {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.86); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink); border: none; cursor: pointer;
}

/* Öne çıkan / acil ilan kartı çerçevesi (kullanıcı talebi, 2026-07-29) — ürün kartında (.bs-card, Adverts/List)
   ve _AdvertCard'ın .bs-prod'unda ortak. Öne çıkan: kullanıcı geri bildirimi ("dönmesi değil, üst köşeden
   başlayarak çizgi gibi border kayar gibi") üzerine conic-gradient rotasyonundan (bütün halkanın merkez
   etrafında dönmesi izlenimi veriyordu) SVG <rect pathLength="100"> + stroke-dashoffset animasyonuna geçildi —
   kısa parlak bir çizgi gerçekten dikdörtgenin kenarını (üst-sol köşeden başlayıp saat yönünde) izleyerek
   kayar. pathLength="100" normalize edildiği için dasharray/offset kart boyutundan bağımsız çalışır.
   Acil: kullanıcı talebiyle (2026-07-30) aynı beam animasyonunun kırmızı (--coral) renkli varyantına
   geçirildi (önceki ayrı ::after yanıp-sönme kaldırıldı — süre/keyframe artık öne çıkanla birebir aynı,
   yalnızca renk farklı: .bs-featured-beam--urgent). */
.bs-card--featured, .bs-prod.bs-card--featured,
.bs-card--urgent, .bs-prod.bs-card--urgent { position: relative; }
.bs-featured-beam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.bs-featured-beam rect {
  x: 1.25px; y: 1.25px; width: calc(100% - 2.5px); height: calc(100% - 2.5px);
  fill: none; stroke: #3FA0FF; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 8 1000; filter: drop-shadow(0 0 3px rgba(63,160,255,.85));
  opacity: 0; animation: bs-featured-beam-run 8s linear infinite;
}
.bs-featured-beam--urgent rect {
  stroke: var(--coral); filter: drop-shadow(0 0 3px rgba(255,90,60,.85));
}
.bs-card--featured .bs-featured-beam rect, .bs-card--urgent .bs-featured-beam rect { rx: 18px; ry: 18px; }
.bs-prod.bs-card--featured .bs-featured-beam rect, .bs-prod.bs-card--urgent .bs-featured-beam rect { rx: 20px; ry: 20px; }
/* pathLength="100" ve sabit büyük boşluk (1000) sayesinde her zaman tek bir kısa çizgi görünür.
   "Solucan" hareketi (kullanıcı talebi — başlangıçta köşeden büyüyerek çıksın, bitişte tam tersi
   şekilde köşede küçülerek yutulsun): 3 alt-faz, ikisi de aynı matematiği ters yönde kullanır —
   ilgili aralıkta stroke-dashoffset ile çizgi uzunluğu (stroke-dasharray'in ilk değeri) AYNI ANDA
   ve DOĞRUSAL değiştiği için sabit kalan uç (büyümede kuyruk köşede sabit/baş uzar, küçülmede baş
   köşede sabit/kuyruk yetişir) matematiksel olarak gerçekten sabit kalır:
   8%→12%   büyüme:  dashoffset 0 sabit,      uzunluk 0→8  (baş köşeden dışarı doğru uzuyor)
   12%→58%  seyahat: dashoffset 0→-92,        uzunluk 8 sabit (sabit uzunlukta kenar boyunca kayma)
   58%→61%  yutulma: dashoffset -92→-100,     uzunluk 8→0  (kuyruk köşeye yetişip çizgiyi tüketiyor) */
@keyframes bs-featured-beam-run {
  0% { opacity: 0; stroke-dashoffset: 0; stroke-dasharray: 0 1000; }
  8% { opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 0 1000; }
  12% { opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 8 1000; }
  58% { opacity: 1; stroke-dashoffset: -92; stroke-dasharray: 8 1000; }
  61% { opacity: 1; stroke-dashoffset: -100; stroke-dasharray: 0 1000; }
  63% { opacity: 0; stroke-dashoffset: -100; stroke-dasharray: 0 1000; }
  100% { opacity: 0; stroke-dashoffset: 0; stroke-dasharray: 0 1000; }
}

/* rating stars (_RatingStars partial) */
.bs-rating { display: inline-flex; align-items: center; gap: 9px; }
.bs-rating-stars { font-size: 16px; letter-spacing: 2px; line-height: 1; }
.bs-star-filled { color: var(--coral); }
.bs-star-empty { color: var(--border); }
.bs-rating-text { font-size: 13px; font-weight: 500; color: var(--muted); }

/* banner carousel (_BannerCarousel partial — Faz 2'de Home'a bağlanacak) */
.bs-banner-carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
.bs-banner-slide {
  flex: 0 0 auto; width: min(640px, 88vw); scroll-snap-align: start; border-radius: 20px;
  overflow: hidden; display: block; border: 1px solid var(--border);
}
.bs-banner-slide img { width: 100%; height: auto; display: block; }

/* editorial band */
.bs-band { border-radius: 24px; padding: 34px; overflow: hidden; text-decoration: none; display: block; }
.bs-steps { display: grid; gap: 64px; padding: 40px 0; }
.bs-step-no { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: .05em; }
.bs-step-label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .24em; color: var(--muted-2); }
.bs-step-title { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(34px,5vw,72px); line-height: .92; letter-spacing: -1.2px; text-transform: uppercase; color: var(--ink); }
.bs-step-desc { margin: 20px 0 0; max-width: 440px; font-weight: 300; font-size: 18px; line-height: 1.75; color: var(--muted); }

/* Home — Öne Çıkan Satıcılar (Faz 2): 1 büyük (grid-row:span 2) + 3 kompakt kart, auto-placement. */
.bs-seller-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }

/* footer (yalnızca mobil breakpoint için sınıf kaldı — kalan tüm görünüm _Layout.cshtml'de inline, mockup'ın kendi deseniyle birebir) */
.bs-footer-cols { display: grid; }

@media (max-width: 900px) {
  .bs-bento, .bs-card-grid { grid-template-columns: repeat(6,1fr); }
  .bs-auction-featured, .bs-auction-small { grid-column: 1/7; }
  .bs-footer-cols { grid-template-columns: repeat(2,1fr); }
  .bs-about-grid { grid-template-columns: 1fr !important; }
  .bs-acc-quick-grid > a { grid-column: span 6 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   auth (Giriş/Kayıt) — normal site şablonu (header+footer görünür) içinde, gövdede tek
   merkezi kart (2026-07-23, iki tur yeniden tasarım: 1. tur tam-ekran "vitrin+form" admin
   paneli hissi verdiği için kaldırıldı, 2. tur "çok sade kalmış" geri bildirimiyle bu blok
   zenginleştirildi). Sayfa arka planında site genelindeki bsFloatA/B ile yumuşak, açık
   tonlu glow'lar (dramatik koyu vitrin DEĞİL — sadece derinlik); kart kendi asimetrik
   köşesiyle (28px…8px, marka motifi) + köşede çok düşük opasiteli özel çizgi illüstrasyonla
   .bs-acc-panel/.bs-prod'un düz beyaz kart dilinden bir adım öne çıkar. Gönder butonu
   .bs-cta'nın ışık-geçişi (bsSweep) motifini ödünç alır. bkz. _AuthScript.cshtml. */
@keyframes bsSpin { to { transform: rotate(360deg); } }

.bs-authx-page { position: relative; max-width: 1280px; margin: 0 auto; padding: 76px 28px 120px; display: flex; justify-content: center; }
.bs-authx-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.bs-authx-glow-a { width: 420px; height: 420px; background: var(--blue); opacity: .14; top: -70px; left: 10%; animation: bsFloatA 10s ease-in-out infinite; }
.bs-authx-glow-b { width: 360px; height: 360px; background: var(--coral); opacity: .12; bottom: -50px; right: 9%; animation: bsFloatB 12s ease-in-out infinite; }

.bs-authx-card {
  position: relative; z-index: 1; overflow: hidden; width: 100%; max-width: 460px; background: #fff;
  border: 1px solid var(--border); border-radius: 28px 28px 28px 8px; padding: 48px 44px;
  box-shadow: 0 40px 80px -36px rgba(10,37,64,.32);
}
.bs-authx-watermark { position: absolute; top: -14px; right: -20px; opacity: .07; pointer-events: none; }
.bs-authx-eyebrow-x { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.bs-authx-eyebrow-x .bs-rule { width: 24px; height: 1px; background: var(--coral); display: inline-block; }
.bs-authx-eyebrow-x span { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .2em; color: var(--coral); }
.bs-authx-title { position: relative; font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 34px; letter-spacing: -.7px; color: var(--ink); margin: 0 0 8px; }
.bs-authx-sub { position: relative; font-family: 'Hanken Grotesk'; font-size: 15px; color: var(--muted); margin: 0 0 32px; }

@media (max-width: 500px) {
  .bs-authx-page { padding: 40px 18px 72px; }
  .bs-authx-card { padding: 34px 26px; border-radius: 22px 22px 22px 8px; }
}

.bs-authx-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 13px 15px; border-radius: 13px 13px 13px 5px; font: 500 13.5px/1.5 'Hanken Grotesk'; }
.bs-authx-alert-error { background: rgba(255,90,60,.08); border: 1px solid rgba(255,90,60,.24); color: #C23A22; }
.bs-authx-alert-info { background: rgba(12,110,230,.08); border: 1px solid rgba(12,110,230,.22); color: #0A3F8F; }

.bs-authx-field { position: relative; margin-bottom: 16px; }
.bs-authx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bs-authx-input-shell {
  position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--border);
  border-radius: 13px; transition: border-color .2s, box-shadow .2s;
}
.bs-authx-input-shell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(12,110,230,.12); }
.bs-authx-input-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 42px; color: var(--muted-2); transition: color .2s; }
.bs-authx-input-shell:focus-within .bs-authx-input-icon { color: var(--blue); }
.bs-authx-input-shell input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 19px 14px 9px 0;
  font: 600 15px/1 'Hanken Grotesk'; color: var(--ink);
}
.bs-authx-input-shell label {
  position: absolute; left: 42px; top: 17px; font: 500 15px/1 'Hanken Grotesk'; color: var(--muted-2); pointer-events: none;
  transition: top .22s cubic-bezier(.22,1,.36,1), font-size .22s, color .22s, letter-spacing .22s;
}
.bs-authx-input-shell input::placeholder { color: transparent; }
.bs-authx-input-shell input:focus + label,
.bs-authx-input-shell input:not(:placeholder-shown) + label {
  top: 7px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
/* Tarayıcı otomatik doldurma (Chrome/Edge) etikette :not(:placeholder-shown)'ı tetiklemiyor —
   otomatik dolan alanda etiket ortada kalıp değerin üstüne biniyordu (kullanıcı raporu). Etiketi
   :-webkit-autofill'de de yukarı taşı + Chrome'un sarı otomatik-doldurma arka planını sıfırla. */
.bs-authx-input-shell input:-webkit-autofill + label { top: 7px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.bs-authx-input-shell input:-webkit-autofill,
.bs-authx-input-shell input:-webkit-autofill:hover,
.bs-authx-input-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}
.bs-authx-input-shell input:autofill + label { top: 7px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.bs-authx-pwd-toggle { flex-shrink: 0; width: 42px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted-2); background: none; border: none; transition: color .2s; }
.bs-authx-pwd-toggle:hover { color: var(--blue); }
.bs-authx-pwd-toggle .bs-authx-eye-on { display: none; }
.bs-authx-pwd-toggle.is-visible .bs-authx-eye-off { display: none; }
.bs-authx-pwd-toggle.is-visible .bs-authx-eye-on { display: block; }

.bs-authx-submit { width: 100%; justify-content: center; margin-top: 6px; position: relative; overflow: hidden; isolation: isolate; }
.bs-authx-submit-shine { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation: bsSweep 3.2s ease-in-out infinite; pointer-events: none; }
.bs-authx-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: bsSpin .7s linear infinite; }
.bs-authx-submit.is-loading { opacity: .8; }
.bs-authx-submit.is-loading .bs-authx-spinner { display: inline-block; }

.bs-authx-otp-row { display: flex; gap: 10px; margin: 4px 0 24px; }
.bs-authx-otp-box {
  width: 100%; aspect-ratio: 1/1; text-align: center; font: 700 22px/1 'Bricolage Grotesque'; color: var(--ink);
  background: #fff; border: 1.5px solid var(--border); border-radius: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.bs-authx-otp-box:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(12,110,230,.12); transform: translateY(-2px); }
.bs-authx-otp-box.is-filled { border-color: var(--coral); }

.bs-authx-resend { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 4px; font: 500 13px/1 'Hanken Grotesk'; color: var(--muted); }
.bs-authx-resend-btn { background: none; border: none; padding: 0; cursor: pointer; font: 700 13px/1 'Hanken Grotesk'; color: var(--blue); }
.bs-authx-resend-btn:disabled { color: var(--muted-2); cursor: default; }

.bs-authx-foot { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; font: 500 14px/1 'Hanken Grotesk'; color: var(--muted); }
.bs-authx-foot a { color: var(--coral); text-decoration: none; font-weight: 700; }

@media (max-width: 400px) {
  .bs-authx-field-row { grid-template-columns: 1fr; }
}

/* ── Hukuki Belgeler (Track B Faz 10) — sol belge dizini + alt CTA (style-hover portu) ── */
.bs-legal-nav-item:hover { background: #F7FAFD; }
.bs-legal-cta { transition: background .25s, transform .25s; }
.bs-legal-cta:hover { background: #2A82F0; transform: translateY(-1px); }

/* ── Hesap Paneli (Track B Faz 3) ── */
.bs-acc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.bs-acc-nav a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--muted);
  background: #fff; border: 1px solid var(--border); padding: 10px 16px; border-radius: 11px; text-decoration: none;
}
.bs-acc-nav a:hover { color: var(--ink); }
.bs-acc-nav a.active { color: #fff; background: var(--blue); border-color: var(--blue); }

.bs-acc-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 26px 30px; margin-bottom: 32px;
}
.bs-acc-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(140deg, var(--green), var(--ink)); color: #fff; font-weight: 700; font-size: 24px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--border);
}

.bs-acc-tile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; margin-bottom: 36px; }
.bs-acc-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 24px; text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.bs-acc-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(10,37,64,.13); color: inherit; }
.bs-acc-tile-count { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 34px; color: var(--ink); line-height: 1; }
.bs-acc-tile-label { font-weight: 600; font-size: 15px; color: var(--muted); }

.bs-acc-panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px; }

/* Ayarlar — Gizlilik Ayarları toggle'ları (Track B modernizasyonu). */
.bs-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.bs-toggle-row + .bs-toggle-row { border-top: 1px solid var(--border); }
.bs-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.bs-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bs-toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .18s; }
.bs-toggle-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,37,64,.3); transition: transform .18s; }
.bs-toggle input:checked + .bs-toggle-track { background: var(--blue); }
.bs-toggle input:checked + .bs-toggle-track::before { transform: translateX(18px); }

@media (max-width: 900px) {
  .bs-settings-grid, .bs-settings-grid > form { grid-template-columns: 1fr !important; }
  .bs-settings-grid > form > *, .bs-settings-grid > .bs-acc-panel { grid-column: 1 !important; }
}

/* durum rozetleri (ilanlarım listesi) */
.bs-badge { display: inline-flex; align-items: center; font-weight: 700; font-size: 11px; letter-spacing: .05em; padding: 6px 12px; border-radius: 100px; text-transform: uppercase; }
.bs-badge-draft { background: rgba(154,170,184,.16); color: var(--muted); }
.bs-badge-published { background: rgba(22,184,148,.14); color: var(--green); }
.bs-badge-paused { background: rgba(255,193,7,.16); color: #B7791F; }
.bs-badge-sold { background: rgba(12,110,230,.14); color: var(--blue); }
.bs-badge-rejected { background: rgba(255,90,60,.14); color: var(--coral); }

/* basit tablo (ilanlarım) */
.bs-acc-table { width: 100%; border-collapse: collapse; }
.bs-acc-table th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 0 14px 12px; }
.bs-acc-table td { padding: 16px 14px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink); vertical-align: middle; }
.bs-acc-table tr:hover td { background: var(--bg); }

/* mesajlar */
.bs-msg-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; text-decoration: none;
  color: inherit; border: 1px solid transparent;
}
.bs-msg-row:hover { background: var(--bg); color: inherit; }
.bs-msg-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(140deg, var(--blue), var(--ink));
  color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.bs-msg-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.bs-msg-preview { font-size: 13px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.bs-msg-time { font-size: 12px; color: var(--muted-2); flex-shrink: 0; }

.bs-thread { display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; padding: 8px 4px; margin-bottom: 20px; }
.bs-bubble { max-width: 70%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.bs-bubble-mine { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bs-bubble-theirs { align-self: flex-start; background: var(--bg); color: var(--ink); border-bottom-left-radius: 4px; }
.bs-bubble-time { display: block; margin-top: 6px; font-size: 11px; opacity: .7; }

@media (max-width: 700px) {
  .bs-acc-banner { flex-direction: column; align-items: flex-start; }
}
