/* ==========================================================================
   Mezzat - Sayfaya özel bölümler
   ========================================================================== */

/* ==========================================================================
   1. Ana sayfa - Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-16) var(--sp-20);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--color-primary-50) 0%, transparent 62%),
    radial-gradient(700px 380px at 88% 0%, rgba(114, 87, 232, 0.1) 0%, transparent 60%);
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(47, 99, 233, 0.12) 0%, transparent 62%),
    radial-gradient(700px 380px at 88% 0%, rgba(114, 87, 232, 0.09) 0%, transparent 60%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding-inline: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
}

.hero__eyebrow .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: pulse-dot 1.6s var(--ease) infinite;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-top: var(--sp-5);
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--color-primary-500), var(--color-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  font-size: var(--fs-lg);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-4);
  max-width: 460px;
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}

.hero__stats {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.hero__stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

/* ---- Hero görsel kompozisyonu -------------------------------------------
   Sonradan özel grafik/animasyonla değiştirilebilecek katmanlı yapı.
   Boş bir dikdörtgen placeholder değil; müşteriye gösterilebilir bir sahne.
   -------------------------------------------------------------------------- */

.hero__visual {
  position: relative;
  min-height: 460px;
}

.hero-stage {
  position: relative;
  height: 100%;
  min-height: 460px;
}

.hero-stage__glow {
  position: absolute;
  inset: 8% 6% 12% 4%;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-purple));
  opacity: 0.16;
  filter: blur(40px);
  animation: hero-float 9s var(--ease) infinite alternate;
}

@keyframes hero-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, -18px, 0) scale(1.05); }
}

.hero-stage__dots {
  position: absolute;
  top: 4%;
  right: 2%;
  width: 96px;
  height: 72px;
  --dot-color: var(--color-purple);
}

/* Ana ürün kartı */
.hero-stage__card {
  position: absolute;
  top: 6%;
  left: 4%;
  width: min(310px, 72%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 2;
}

.hero-stage__card-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.hero-stage__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-stage__card-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Canlı teklif kartı - cam efekti (kontrollü kullanım) */
.hero-stage__bid {
  position: absolute;
  right: 0;
  top: 38%;
  width: min(258px, 66%);
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-lg);
  z-index: 3;
  animation: hero-rise 8s var(--ease) infinite alternate;
}

@keyframes hero-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

[data-theme="dark"] .hero-stage__bid {
  background: rgba(31, 35, 43, 0.78);
}

.hero-stage__bid-label {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.hero-stage__bid-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.hero-stage__bid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

/* Alt sayaç kartı */
.hero-stage__timer {
  position: absolute;
  left: 0;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-navy-700);
  color: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 4;
}

.hero-stage__timer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
}
.hero-stage__timer-icon .icon { width: 17px; height: 17px; }

.hero-stage__timer-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.hero-stage__timer-label {
  font-size: var(--fs-micro);
  opacity: 0.7;
}

/* Sağ altta izleyici avatarları */
.hero-stage__watchers {
  position: absolute;
  right: 6%;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 4;
}

.hero-stage__watchers-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
  white-space: nowrap;
}

/* ==========================================================================
   2. Kategori kısayolları
   ========================================================================== */

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 158px;
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease-out);
}

.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-300);
}

.cat-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary-500);
}
.cat-tile__icon .icon { width: 19px; height: 19px; }

.cat-tile__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.3;
}

.cat-tile__count {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
}

/* Renk varyantları - anlamlı ayrım için */
.cat-tile:nth-child(6n + 2) .cat-tile__icon { background: var(--color-purple-soft); color: var(--color-purple); }
.cat-tile:nth-child(6n + 3) .cat-tile__icon { background: var(--color-success-soft); color: var(--color-success); }
.cat-tile:nth-child(6n + 4) .cat-tile__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.cat-tile:nth-child(6n + 5) .cat-tile__icon { background: var(--color-info-soft); color: var(--color-info); }
.cat-tile:nth-child(6n + 6) .cat-tile__icon { background: var(--color-danger-soft); color: var(--color-danger); }

/* ==========================================================================
   3. Haftanın mezatları / kampanya bandı
   ========================================================================== */

.campaign {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8);
  border-radius: var(--radius-2xl);
  background: linear-gradient(125deg, var(--color-navy-800), var(--color-navy-700) 55%, var(--color-navy-600));
  color: #fff;
  overflow: hidden;
}

.campaign::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 87, 232, 0.4), transparent 68%);
  pointer-events: none;
}

.campaign__dots {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-5);
  width: 84px;
  height: 40px;
  --dot-color: rgba(255, 255, 255, 0.24);
}

.campaign__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding-inline: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-yellow);
  color: #3a2b00;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.campaign__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: var(--sp-4);
  position: relative;
  z-index: 1;
}

.campaign__text {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-3);
  max-width: 500px;
  position: relative;
  z-index: 1;
}

.campaign__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.campaign__actions .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: none;
}
.campaign__actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.campaign__panel {
  position: relative;
  z-index: 1;
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.campaign__panel-label {
  font-size: var(--fs-micro);
  color: rgba(255, 255, 255, 0.66);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--fw-medium);
}

.campaign__panel-value {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.campaign__panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.campaign__panel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}
.campaign__panel-row .icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent-yellow);
  flex-shrink: 0;
}

/* ==========================================================================
   4. Nasıl çalışır?
   ========================================================================== */

.how-step {
  position: relative;
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.how-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.how-step__num {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  color: var(--color-border);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}

.how-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-navy-700);
  color: #fff;
  margin-bottom: var(--sp-4);
}
.how-step__icon .icon { width: 22px; height: 22px; }

.how-step__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.how-step__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   5. Güven şeridi
   ========================================================================== */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  padding: var(--sp-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}

.trust-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
  color: var(--color-success);
  margin-bottom: var(--sp-3);
}
.trust-item__icon .icon { width: 19px; height: 19px; }

.trust-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.trust-item__text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   6. Mezat detay - galeri
   ========================================================================== */

.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-glass-border);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease);
}
.gallery__nav .icon { width: 19px; height: 19px; }
.gallery__nav:hover { background: var(--color-surface); }
.gallery__nav--prev { left: var(--sp-4); }
.gallery__nav--next { right: var(--sp-4); }

.gallery__counter {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 28, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.gallery__thumbs {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-1);
}
.gallery__thumbs::-webkit-scrollbar { display: none; }

.gallery__thumb {
  position: relative;
  width: 92px;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--color-surface-sunken);
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity: 0.68;
  padding: 0;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] {
  border-color: var(--color-primary-500);
  opacity: 1;
}

/* Kusur fotoğrafı işareti */
.gallery__thumb--defect::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--color-warning);
}

/* ==========================================================================
   7. Mezat detay - teklif paneli
   ========================================================================== */

.bid-panel {
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.bid-panel__current {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.bid-panel__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.bid-panel__amount {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
  transition: color var(--dur) var(--ease);
}

.bid-panel__amount.is-bumped {
  animation: amount-bump 600ms var(--ease-out);
}

@keyframes amount-bump {
  0% { transform: scale(1); color: var(--color-success); }
  40% { transform: scale(1.06); color: var(--color-success); }
  100% { transform: scale(1); }
}

.bid-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.bid-panel__stat {
  text-align: center;
}

.bid-panel__stat-value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.bid-panel__stat-label {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.bid-panel__form {
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.bid-quick {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.bid-quick__btn {
  flex: 1;
  min-width: 78px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast) var(--ease);
}
.bid-quick__btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

/* Hemen Al bloğu */
.buynow-box {
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-success-soft);
  border: 1px solid transparent;
}

.buynow-box__price {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-success);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.buynow-box.is-closed {
  background: var(--color-surface-sunken);
}

/* Proxy (maksimum) teklif alanı */
.proxy-box {
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
}

[data-theme="dark"] .proxy-box { background: var(--color-primary-50); }

/* Rezerv durumu */
.reserve-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.reserve-row .icon { width: 16px; height: 16px; }
.reserve-row.is-met { color: var(--color-success); }
.reserve-row.is-unmet { color: var(--color-warning); }

/* Satıcı kutusu */
.seller-box {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.seller-box__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.seller-box__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* ==========================================================================
   8. Mezat oluştur
   ========================================================================== */

.create-step {
  display: none;
}
.create-step.is-active {
  display: block;
  animation: step-in var(--dur-slow) var(--ease-out);
}

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

.mobile-step {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.mobile-step__ring {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  background: conic-gradient(var(--color-primary-500) var(--ring, 20%), var(--color-surface-sunken) 0);
}
.mobile-step__ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-surface);
}
.mobile-step__ring span { position: relative; z-index: 1; }

.create-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.create-actions__spacer { flex: 1; }

/* Ön izleme özet satırı */
.preview-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.preview-row:last-child { border-bottom: 0; }

.preview-row__key { color: var(--color-text-muted); flex-shrink: 0; }
.preview-row__val {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* ==========================================================================
   9. Hesabım - panel
   ========================================================================== */

.profile-card {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary-500), var(--color-purple));
}

.profile-card__name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.profile-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.profile-card__badges {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
}

/* Kullanım göstergesi (ücretsiz paket limitleri) */
.usage-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}

.usage-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.usage-row__value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Teklif / mezat listesi satırı - moodboard'daki proje satırı ritmi */
.list-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--dur-fast) var(--ease);
}

.list-row:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.list-row__media {
  width: 76px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-sunken);
  flex-shrink: 0;
}
.list-row__media img { width: 100%; height: 100%; object-fit: cover; }

.list-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.4;
}
.list-row__title a { color: inherit; }
.list-row__title a:hover { color: var(--color-primary-500); }

.list-row__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.list-row__meta span { display: inline-flex; align-items: center; gap: 4px; }
.list-row__meta .icon { width: 13px; height: 13px; }

.list-row__side {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

.list-row__amount {
  text-align: right;
  line-height: 1.25;
}
.list-row__amount strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* İletişim odası */
.contact-room {
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-success-soft), var(--color-surface));
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .contact-room {
  background: linear-gradient(135deg, var(--color-success-soft), var(--color-surface));
}

.contact-room__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.contact-room__timer .icon { width: 15px; height: 15px; color: var(--color-success); }

.contact-room__parties {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.contact-room__party {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.contact-room__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success);
  flex-shrink: 0;
}
.contact-room__link .icon { width: 16px; height: 16px; }

/* Mesajlaşma - moodboard Messages ekranı dili */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.chat__bubble {
  max-width: 78%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.chat__bubble--in {
  align-self: flex-start;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-xs);
}

.chat__bubble--out {
  align-self: flex-end;
  background: var(--color-primary-500);
  color: #fff;
  border-bottom-right-radius: var(--radius-xs);
}

.chat__time {
  font-size: 10px;
  opacity: 0.65;
  margin-top: var(--sp-1);
  display: block;
}

.chat__composer {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
}

/* Bildirim satırı */
.notif-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-fast) var(--ease);
  position: relative;
}
.notif-row:hover { background: var(--color-surface-sunken); }

.notif-row.is-unread { background: var(--color-primary-50); }
.notif-row.is-unread::after {
  content: "";
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-500);
}

.notif-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.notif-row__icon .icon { width: 18px; height: 18px; }

.notif-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.4;
  padding-right: var(--sp-4);
}

.notif-row__text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.notif-row__time {
  font-size: var(--fs-micro);
  color: var(--color-text-faint);
  margin-top: var(--sp-2);
}

/* Fatura tablosu */
.table-wrap {
  /* position: relative olmadan .visually-hidden gibi mutlak konumlu alt ogeler
     bu kutunun overflow'u tarafindan kirpilmaz ve sayfayi yatayda tasirir. */
  position: relative;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.data-table {
  width: 100%;
  min-width: 560px;
  font-size: var(--fs-sm);
}

.data-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-2);
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--color-surface-soft); }

/* ==========================================================================
   10. Hesap akışı (giriş, kayıt, şifre sıfırlama)
   Bölünmüş ekran: solda lacivert marka paneli, sağda form.
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-12);
  background: linear-gradient(150deg, var(--color-navy-800), var(--color-navy-700) 55%, var(--color-navy-600));
  color: #fff;
  overflow: hidden;
}

.auth__brand::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 87, 232, 0.42), transparent 68%);
  pointer-events: none;
}

.auth__brand-dots {
  position: absolute;
  top: var(--sp-12);
  right: var(--sp-10);
  width: 96px;
  height: 64px;
  --dot-color: rgba(255, 255, 255, 0.28);
}

.auth__headline {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1.12;
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.auth__sub {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-4);
  max-width: 420px;
  position: relative;
  z-index: 1;
}

.auth__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
}

.auth__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
}

.auth__point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.auth__point-icon .icon { width: 16px; height: 16px; }

/* Marka panelindeki sosyal kanıt kartı */
.auth__proof {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  z-index: 1;
}

.auth__proof .avatar-group .avatar,
.auth__proof .avatar-group__more {
  border-color: transparent;
}

/* Form tarafı */
.auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-6);
  background: var(--color-bg);
}

.auth__form {
  width: 100%;
  max-width: 420px;
}

.auth__form-head {
  margin-bottom: var(--sp-8);
}

.auth__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.auth__desc {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
  line-height: var(--lh-normal);
}

.auth__mobile-brand {
  display: none;
  margin-bottom: var(--sp-8);
}

/* Ayraç: "veya" */
.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-6);
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth__social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.auth__foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.auth__legal {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  line-height: 1.6;
  margin-top: var(--sp-5);
  text-align: center;
}

/* Şifre görünürlük düğmesi */
.pass-field { position: relative; }
.pass-field .input { padding-right: 46px; }

.pass-toggle {
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.pass-toggle:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.pass-toggle .icon { width: 17px; height: 17px; }

/* Şifre gücü göstergesi */
.pass-strength {
  display: flex;
  gap: 4px;
  margin-top: var(--sp-2);
}

.pass-strength span {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background-color var(--dur) var(--ease);
}

.pass-strength[data-level="1"] span:nth-child(1) { background: var(--color-danger); }
.pass-strength[data-level="2"] span:nth-child(-n+2) { background: var(--color-warning); }
.pass-strength[data-level="3"] span:nth-child(-n+3) { background: var(--color-info); }
.pass-strength[data-level="4"] span { background: var(--color-success); }

/* ==========================================================================
   11. Kimlik doğrulama (KYC)
   ========================================================================== */

.kyc-status {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  background: var(--color-warning-soft);
  border: 1px solid transparent;
}

.kyc-status--done { background: var(--color-success-soft); }
.kyc-status--review { background: var(--color-primary-50); }

.kyc-status__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  flex-shrink: 0;
  color: var(--color-warning);
}
.kyc-status--done .kyc-status__icon { color: var(--color-success); }
.kyc-status--review .kyc-status__icon { color: var(--color-primary-500); }
.kyc-status__icon .icon { width: 22px; height: 22px; }

/* Belge yükleme kutusu */
.doc-upload {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  align-items: center;
  min-height: 190px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.doc-upload:hover,
.doc-upload.is-dragover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}

.doc-upload.has-file {
  border-style: solid;
  border-color: var(--color-success);
  padding: 0;
}

.doc-upload__preview {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - 2px);
}

.doc-upload__badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
}

/* ==========================================================================
   12. Paket / fiyatlandırma
   ========================================================================== */

.plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.plan-toggle__btn {
  height: 36px;
  padding-inline: var(--sp-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.plan-toggle__btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.plan-card--highlight {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-md);
}

.plan-card--highlight::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-2xl);
  padding: 1px;
  background: linear-gradient(140deg, var(--color-primary-500), var(--color-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.plan-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.plan-card__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.plan-card__tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--sp-2);
  min-height: 3em;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.plan-card__amount {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-card__period {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.plan-card__note {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
  margin-top: var(--sp-2);
  min-height: 1.4em;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: 1.45;
}

.plan-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--color-success-soft);
  color: var(--color-success);
}
.plan-feature__icon .icon { width: 12px; height: 12px; }

.plan-feature--off { color: var(--color-text-faint); }
.plan-feature--off .plan-feature__icon {
  background: var(--color-surface-sunken);
  color: var(--color-text-faint);
}

/* Karşılaştırma tablosu */
.compare-table th:first-child { width: 40%; }
.compare-table td { text-align: center; }
.compare-table td:first-child { text-align: left; }

.compare-table__group td {
  background: var(--color-surface-soft);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: left;
}

.compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.compare-mark .icon { width: 14px; height: 14px; }
.compare-mark--yes { background: var(--color-success-soft); color: var(--color-success); }
.compare-mark--no { background: var(--color-surface-sunken); color: var(--color-text-faint); }

/* ==========================================================================
   13. Mesajlaşma sayfası
   ========================================================================== */

.msg-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  /* Sayfa başlığı ve güven notu için pay bırakılır; panel sayfayı taşırmaz. */
  height: calc(100vh - 320px);
  min-height: 520px;
  max-height: 780px;
}

.msg-list {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.msg-list__head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.msg-list__filters {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.msg-list__filters::-webkit-scrollbar { display: none; }

.msg-list__body {
  flex: 1;
  overflow-y: auto;
}

.msg-item {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--dur-fast) var(--ease);
  position: relative;
}

.msg-item:hover { background: var(--color-surface-soft); }

.msg-item.is-active {
  background: var(--color-primary-50);
}
.msg-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary-500);
}

.msg-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.msg-item__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.msg-item__time {
  font-size: 10px;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.msg-item__product {
  font-size: var(--fs-micro);
  color: var(--color-primary-500);
  margin-top: 2px;
}

.msg-item__preview {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
  line-height: 1.45;
}

.msg-item__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-500);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

/* Sohbet paneli */
.msg-chat {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.msg-chat__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.msg-chat__product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.msg-chat__product-img {
  width: 44px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.msg-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
}

.msg-chat__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.msg-chat__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-back {
  display: none;
}

/* ==========================================================================
   14. Satıcı profili
   ========================================================================== */

.seller-hero {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: linear-gradient(140deg, var(--color-navy-800), var(--color-navy-700) 60%, var(--color-navy-600));
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  color: #fff;
}

.seller-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 87, 232, 0.38), transparent 70%);
  pointer-events: none;
}

.seller-hero__dots {
  position: absolute;
  left: var(--sp-8);
  bottom: var(--sp-5);
  width: 84px;
  height: 40px;
  --dot-color: rgba(255, 255, 255, 0.24);
}

.seller-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.seller-hero__avatar {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-2xl);
  border: 4px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  position: relative;
}
.seller-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 4px);
}

.seller-hero__name {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.seller-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.seller-hero__badges {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.seller-hero__badges .badge {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.seller-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.seller-stats__item {
  padding: var(--sp-5);
  background: var(--color-surface);
  text-align: center;
}

.seller-stats__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.seller-stats__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

/* Değerlendirme kartı */
.review-card {
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.review-card__stars {
  display: flex;
  gap: 2px;
  margin-top: var(--sp-1);
}
.review-card__stars .icon {
  width: 14px;
  height: 14px;
  color: var(--color-accent-yellow);
  fill: var(--color-accent-yellow);
}
.review-card__stars .icon.is-off {
  color: var(--color-border-strong);
  fill: var(--color-border-strong);
}

.review-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-3);
}

/* Puan dağılımı */
.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.rating-bar .progress { flex: 1; height: 6px; }

/* ==========================================================================
   15. Yardım merkezi ve akordeon
   ========================================================================== */

.help-hero {
  padding: var(--sp-12) var(--sp-8);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(700px 300px at 20% 0%, var(--color-primary-50) 0%, transparent 65%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}

[data-theme="dark"] .help-hero {
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(47, 99, 233, 0.14) 0%, transparent 65%),
    var(--color-surface);
}

.help-hero__search {
  max-width: 520px;
  margin: var(--sp-6) auto 0;
}

.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}
.accordion__item:last-child { border-bottom: 0; }

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover { background: var(--color-surface-soft); }

.accordion__trigger .icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
  margin-top: 2px;
}

.accordion__item.is-open .accordion__trigger { color: var(--color-primary-600); }
.accordion__item.is-open .accordion__trigger .icon {
  transform: rotate(180deg);
  color: var(--color-primary-500);
}

.accordion__panel {
  display: none;
  padding: 0 var(--sp-5) var(--sp-5);
}

.accordion__item.is-open .accordion__panel { display: block; }

.accordion__panel p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: 68ch;
}

/* ==========================================================================
   16. Hukuki metin düzeni (prose)
   ========================================================================== */

.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - var(--header-h) - var(--sp-12));
  overflow-y: auto;
}

.legal-toc__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  transition: all var(--dur-fast) var(--ease);
  border-left: 2px solid transparent;
}

.legal-toc__link:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.legal-toc__link.is-active {
  color: var(--color-primary-600);
  border-left-color: var(--color-primary-500);
  font-weight: var(--fw-medium);
}

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.prose h2:first-child { margin-top: 0; }

.prose p {
  font-size: var(--fs-md);
  color: var(--color-text-2);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}

.prose p:last-child { margin-bottom: 0; }

.prose strong { color: var(--color-text); font-weight: var(--fw-semibold); }

.prose__intro {
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-8);
}

.prose__intro p { margin-bottom: 0; }

/* ==========================================================================
   17. 404 sayfası
   ========================================================================== */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-20) var(--sp-6);
  min-height: 62vh;
  position: relative;
}

.error-page__code {
  font-size: 132px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(140deg, var(--color-primary-500), var(--color-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  margin-top: var(--sp-4);
}

.error-page__text {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-3);
  max-width: 460px;
}

.error-page__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  flex-wrap: wrap;
  justify-content: center;
}

.error-page__dots {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 96px;
  height: 64px;
  --dot-color: var(--color-primary-300);
}