:root {
    --primary: #1e293b;
    --primary-light: #334155;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --text: #0f172a;
    --text-muted: #64748b;
    --bg: #ffffff;
    --bg-alt: #f1f5f9;
    --border: #e2e8f0;
    --card-bg: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --container: 1600px;
    --header-height: 80px; 
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease-in-out;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (FORCE LOAD)
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.5;
    overflow-x: hidden; /* Prevent horizontal scroll globally */
    animation: fadeInPage 0.6s ease-out;
}

/* View Transitions API aktifken body animasyonu gereksiz — VT kendi fade'ini yapıyor */
@supports (view-transition-name: none) {
  body {
    animation: none;
  }
}

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cross-document View Transitions (Chrome 126+)
   Tüm sayfalar arası geçişi otomatik yumuşatır
══════════════════════════════════════════════════════════════════════════ */
@view-transition {
  navigation: auto;
}

/* Evrensel sayfa geçiş animasyonları */
::view-transition-old(root) {
  animation: 200ms ease-in both vtPageOut;
}
::view-transition-new(root) {
  animation: 300ms ease-out both vtPageIn;
}

@keyframes vtPageOut {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
}
@keyframes vtPageIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}

/* Reduced motion: sadece basit crossfade */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: 150ms ease both vtFade;
  }
}
@keyframes vtFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Auth sayfalarda root animasyonunu bastır — auth-card kendi slide animasyonunu kullanır */
:root:has(.auth-body) ::view-transition-old(root),
:root:has(.auth-body) ::view-transition-new(root) {
  animation: none;
}

/* ── Auth sayfa geçiş animasyonları ── */
@keyframes authSlideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes authSlideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-32px);
  }
}
@keyframes authSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes authSlideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(32px);
  }
}

/* View Transitions API — auth sayfaları arası */
::view-transition-old(auth-card) {
  animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both authSlideOutLeft;
}
::view-transition-new(auth-card) {
  animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both authSlideInRight;
}

/* register → login geçişinde yön tersine döner */
.vt-reverse::view-transition-old(auth-card) {
  animation-name: authSlideOutRight;
}
.vt-reverse::view-transition-new(auth-card) {
  animation-name: authSlideInLeft;
}

/* Fallback: View Transitions yoksa CSS class ile çıkış animasyonu */
.auth-body.page-exit .auth-card-glass {
  animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards authSlideOutLeft;
  pointer-events: none;
}
.auth-body.page-exit-reverse .auth-card-glass {
  animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards authSlideOutRight;
  pointer-events: none;
}

.soft-reveal {
    animation: softReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes softReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-changing {
  opacity: 0.6;
  filter: blur(4px);
  transition: opacity 0.5s ease, filter 0.5s ease;
  pointer-events: none;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.25rem clamp(0.75rem, 3vw, 1.5rem); /* Minimal top/bottom */
    width: 100%;
}

/* Very wide desktop: let content stretch closer to screen edges */
@media (min-width: 1800px) {
    .container {
        max-width: min(1800px, 96vw);
    }
}

/* Base Styles */
.header-hamburger {
    display: none; /* Hidden by default on desktop */
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

/* Accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Header & Navigation */
.main-header,
.site-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
  z-index: 2000;
  transition: box-shadow 0.25s ease;
}

/* Scroll: küçülen header + derinlik gölgesi */
.main-header.scrolled,
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-bottom-color: transparent;
}
.main-header.scrolled .header-top,
.site-header.scrolled .header-top {
  height: 56px;
}
.main-header.scrolled .header-logo,
.site-header.scrolled .header-logo {
  height: clamp(28px, 4vw, 38px);
}

/* Mobilde scroll shrink: height:auto korunmalı, suchbar 2. satır ezilmemeli */
@media (max-width: 767px) {
  .main-header.scrolled .header-top,
  .site-header.scrolled .header-top {
    height: auto;
    min-height: 48px;
  }
  .main-header.scrolled .header-logo,
  .site-header.scrolled .header-logo {
    height: 26px;
  }
}

/* ============================================================
   HEADER RESPONSIVE — Mobile-First
   Breakpoints:
     Base (mobile-first) : < 768px  → wrap, suchbar 2. satır
     Tablet               : 768px+  → tek satır, suchbar görünür
     Desktop              : 1025px+ → tam genişlik, profil adı görünür
     Small mobile         : < 400px → her şey küçür
   ============================================================ */

/* --- BASE (tüm ekranlar, mobile-first) --- */
.header-hamburger {
  display: none; /* masaüstünde gizli — tablet/mobile'da override edilir */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  color: var(--primary);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.header-hamburger:hover {
  background: var(--border);
}
.header-hamburger:active {
  transform: scale(0.92);
  background: var(--border);
}

.header-top {
    display: flex;
    align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  height: var(--header-height, 80px);
  transition: height 0.2s ease;
}

/* Eleman sırası — masaüstünde hamburger gizli ama order korunur */
.header-hamburger {
  order: 1;
}
.logo {
  order: 2;
  flex-shrink: 0;
}
.search-container {
  order: 3;
}
.header-actions {
  order: 4;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.logo .accent {
  color: var(--accent);
}

.header-logo {
  height: clamp(38px, 5vw, 56px);
    width: auto;
    object-fit: contain;
  transition: height 0.2s ease;
}

/* Açılır-arama trigger butonları şu an devre dışı; overlay search aktive edilirse gösterilecek */
.search-expand-trigger,
.search-close-trigger {
  display: none;
}

/* Profil adı: varsayılan gizli, sadece masaüstünde görünür */
.profile-name-header {
  display: none;
}

/* --- SEARCH: paylaşılan stiller --- */
    .search-container {
        flex: 1;
        min-width: 0;
        position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 560px;
}
    .search-input-wrapper {
        position: relative;
        width: 100%;
  display: flex;
  align-items: center;
    }
    .search-input {
        width: 100%;
  height: 42px;
  padding: 0 1rem 0 3rem;
        background: var(--bg-alt);
  border: 1.5px solid transparent;
  border-radius: 999px;
        font-family: inherit;
  font-size: 0.9rem;
        font-weight: 500;
        color: var(--text);
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
  outline: none;
}
.search-input::placeholder {
  color: var(--text-muted);
}
    .search-icon-inline {
        position: absolute;
  left: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
  width: 18px;
  height: 18px;
        color: var(--text-muted);
        pointer-events: none;
  opacity: 0.75;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}
.search-input:focus ~ .search-icon-inline,
    .search-input:focus + .search-icon-inline {
        color: var(--accent);
        opacity: 1;
    }
    .search-container:hover .search-input:not(:focus) {
        border-color: var(--border);
}

/* --- AUTOCOMPLETE SUGGESTIONS --- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 3000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}
.search-suggestions.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}
.ac-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ac-item:hover {
  background: var(--bg-alt);
}
.ac-item:not(:last-child) {
  border-bottom: 1px solid var(--bg-alt);
}
.ac-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.ac-name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-brand {
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- ACTION BUTTONS (favori, sepet) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    flex-shrink: 0;
  /* margin-left: auto — search-container'ın margin: 0 auto ile çakışıyor;
       mobil breakpoint'te order:3 + margin-left:auto ile orada ayarlanıyor */
}
.action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--primary);
  transition: var(--transition-fast);
  flex-shrink: 0;
  text-decoration: none;
}
.action-btn:hover {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}
.action-btn svg {
  width: 22px;
  height: 22px;
}

/* Wishlist kalp: hover'da dolup kırmızılaşır */
#wishlistTrigger svg path {
  transition:
    fill 0.22s ease,
    stroke 0.22s ease;
  fill: transparent;
}
#wishlistTrigger:hover svg path {
  fill: #ef4444;
  stroke: #ef4444;
}

/* --- DESKTOP: 1025px+ --- */
@media (min-width: 1025px) {
  .header-top {
    height: 80px;
    gap: 1.25rem;
  }
  .header-hamburger {
    display: none;
  }
  .header-logo {
    height: clamp(42px, 5vw, 56px);
  }
  .search-container {
    max-width: 500px;
  }
  .search-input {
    height: 44px;
    font-size: 0.95rem;
    padding-left: 3.5rem;
    border-radius: 999px;
  }
  .search-icon-inline {
    left: 1.2rem;
    width: 20px;
    height: 20px;
  }
  .search-input:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
  }
  /* header-actions sağda: search margin:auto ile çakışmasın diye burada margin-left ekliyoruz */
  .header-actions {
    gap: 0.75rem;
    margin-left: auto;
  }
  .action-btn {
    width: 44px;
    height: 44px;
  }
  .action-btn svg {
    width: 24px;
    height: 24px;
  }
  .action-btn .badge {
    min-width: 22px;
    height: 22px;
    font-size: 0.72rem;
    top: -6px;
    right: -6px;
  }
  .lang-trigger {
    height: 40px;
    padding: 0 0.75rem;
  }
  .profile-name-header {
    display: inline;
  }
}

/* --- DAR MASAÜSTÜ: 1025px – 1279px ---
   Sidebar biraz daha dar, toggle font/padding kompakt tutulur → metin sığar */
@media (min-width: 1025px) and (max-width: 1279px) {
  .shop-layout {
    grid-template-columns: 260px 1fr;
    gap: 2rem;
  }
  .category-label {
    font-size: 0.875rem; /* 14px — okunabilir, kompakt */
    padding: 0.875rem 0.75rem 0.875rem 1rem;
  }
}

/* --- TABLET: 768px – 1024px --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-top {
    height: 64px;
    gap: 0.6rem;
    flex-wrap: nowrap;
  }
  .header-hamburger {
    display: flex;
    width: 40px;
    height: 40px;
  }
  .header-logo {
    height: 36px;
  }
  /* search-container flex:1 tüm boşluğu alır, actions doğal sağa yaslanır */
  .search-container {
    max-width: none;
  }
  .search-input {
    height: 40px;
    font-size: 0.88rem;
  }
  .header-actions {
    gap: 0.4rem;
    margin-left: 0;
  }
  .action-btn {
    width: 38px;
    height: 38px;
  }
  .action-btn svg {
    width: 20px;
    height: 20px;
  }
  .action-btn .badge {
    min-width: 20px;
    height: 20px;
    font-size: 0.68rem;
    top: -5px;
    right: -5px;
  }
  .lang-trigger {
    height: 36px;
    padding: 0 0.5rem;
  }
  .lang-chevron {
    display: none;
  }
}

/* --- MOBILE: < 768px → suchbar 2. satıra iner --- */
@media (max-width: 767px) {
  .header-top {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
  }
  /* Üst satır: hamburger → logo → [boşluk] → ikonlar */
  .header-hamburger {
    order: 1;
    display: flex;
    width: 38px;
    height: 38px;
  }
  .logo {
    order: 2;
  }
  .header-actions {
    order: 3;
    margin-left: auto;
    gap: 0.35rem;
  }
  /* Suchbar ikinci satıra tam genişlikte iner */
  .search-container {
    order: 4;
    flex: 1 0 100%;
    max-width: none;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
  }
  .header-logo {
    height: 30px;
  }
  .action-btn {
    width: 36px;
    height: 36px;
  }
  .action-btn svg {
    width: 20px;
    height: 20px;
  }
  .action-btn .badge {
    min-width: 19px;
    height: 19px;
    font-size: 0.65rem;
    top: -5px;
    right: -5px;
  }
  .lang-trigger {
    height: 32px;
    padding: 0 0.4rem;
    font-size: 1rem;
  }
  .lang-chevron {
    display: none;
  }
  .search-input {
    height: 40px;
    font-size: 0.88rem;
  }
}

/* --- SMALL MOBILE: < 400px --- */
@media (max-width: 399px) {
  .header-hamburger {
    width: 34px;
    height: 34px;
  }
  .header-logo {
    height: 26px;
  }
  .action-btn {
    width: 32px;
    height: 32px;
  }
  .action-btn svg {
    width: 18px;
    height: 18px;
  }
  .action-btn .badge {
    min-width: 17px;
    height: 17px;
    font-size: 0.62rem;
    top: -4px;
    right: -4px;
    padding: 0 3px;
  }
  .lang-trigger {
    height: 30px;
    padding: 0 0.35rem;
    font-size: 0.9rem;
  }
  .lang-trigger-flag {
    font-size: 1rem;
  }
  .header-top {
    gap: 0.25rem;
  }
  .header-actions {
    gap: 0.25rem;
  }
  .search-input {
    height: 38px;
    font-size: 0.85rem;
  }
}

/* Dil seçici – bayrak butonu + dropdown */
.language-dropdown {
    position: relative;
}
.lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 38px;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-alt);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.lang-trigger:hover {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
}
.lang-trigger-flag {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
}
.lang-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.language-dropdown.open .lang-chevron {
    transform: rotate(180deg);
}
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    padding: 0.35rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  transform-origin: top right;
}
.language-dropdown.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}
.lang-option:hover {
    background: var(--bg-alt);
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  transition:
    background 0.15s ease,
    padding-left 0.15s ease,
    border-left 0.15s ease;
}
.lang-option.active {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent);
    font-weight: 600;
}
.lang-option-flag {
    font-size: 1.2rem;
    line-height: 1;
}

.auth-dynamic-content {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Profile Dropdown */
.profile-item {
    position: relative;
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 50px;
    background: #f8fafc;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

.profile-toggle:hover {
    background: white;
    box-shadow: var(--shadow-sm);
    border-color: var(--accent);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent), #3b82f6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
  flex-shrink: 0;
}

/* Tablet ve mobilde profile-toggle sadece avatar — pill kaldırılır */
@media (max-width: 1024px) {
  .profile-toggle {
    padding: 0;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
  .profile-toggle:hover {
    background: var(--bg-alt);
    box-shadow: none;
    border-color: transparent;
  }
  .profile-toggle > svg {
    display: none;
  } /* chevron ok gizle */
}

@media (max-width: 399px) {
  .profile-toggle {
    width: 32px;
    height: 32px;
  }
  .profile-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 240px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}

.profile-item.active .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

.profile-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.profile-email {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.profile-menu {
    padding: 0.5rem 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.profile-menu-item:hover {
    background: #f1f5f9;
    color: var(--accent);
    padding-left: 1.5rem;
}

.profile-menu-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.profile-menu-item.logout-link svg {
    color: #ef4444;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.logout-link {
    color: #ef4444;
    margin: 0.75rem 1rem 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    justify-content: center;
    background: #fffafa;
    border: 1px solid #fee2e2;
    border-radius: 12px;
}

.logout-link:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
    padding-left: 1rem; /* Override the padding-left: 1.5rem from .profile-menu-item:hover */
}

.logout-link svg {
    width: 18px;
    height: 18px;
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
  /* Viewport genişliğine uy, max 420px */
  width: calc(100vw - 2rem);
  max-width: 420px;
}

.toast {
  background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(8px);
    color: #ffffff;
  padding: clamp(0.65rem, 2.5vw, 1rem) clamp(0.85rem, 3vw, 1.75rem);
  border-radius: clamp(8px, 2vw, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 1rem);
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: toastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: auto;
  font-size: clamp(0.78rem, 2.5vw, 0.95rem);
    font-weight: 500;
}

/* Küçük ekranlarda toast metni wrap edebilir */
@media (max-width: 480px) {
  .toast-container {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    transform: none;
  }
  .toast {
    white-space: normal;
  }
}

.toast.success {
  background: rgba(
    37,
    99,
    235,
    0.95
  ); /* mavi – başarılı işlemler (ekleme vb.) */
    border-left: 5px solid rgba(191, 219, 254, 0.95);
}

.toast.error {
  background: rgba(239, 68, 68, 0.96);
  border-left: 4px solid #fecaca;
  min-height: 2.75rem;
}

.toast-message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.toast svg {
    flex-shrink: 0;
  width: clamp(16px, 4vw, 20px);
  height: clamp(16px, 4vw, 20px);
}

@keyframes toastIn {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}

/* ─── Erişilebilirlik: hareket hassasiyeti olan kullanıcılar ─────────────
   OS'ta "Hareketi Azalt" açıksa animasyon ve transition'lar kapatılır     */
@media (prefers-reduced-motion: reduce) {
  .product-card {
    animation: none;
    transition: border-color 0.2s ease;
  }
  .product-card:hover {
    transform: none;
  }
  .product-card:hover .product-image img {
    transform: none;
  }
  .product-image img {
    transition: none;
  }
  .wishlist-btn,
  .add-to-cart,
  .action-btn,
  .col-picker-trigger,
  .pagination-btn,
  .pagination-arrow {
    transition: none;
  }
  .wishlist-btn:hover {
    transform: none;
  }
  .toast {
    animation: none;
  }
  .col-chevron {
    transition: none;
  }
  /* Angebote slider */
  .offers-section {
    transition: none;
  }
  .offer-card {
    transition: none;
  }
  .offer-card:hover {
    transform: none;
  }
  .offer-add-to-cart {
    transition: none;
  }
  .offer-add-to-cart:hover {
    transform: none;
  }
  .offers-nav {
    transition: none;
  }
  .offers-nav:hover {
    transform: none;
  }
  /* Related Products slider */
  .related-nav-btn {
    transition: none;
  }
  .related-nav-btn:hover {
    transform: translateY(-50%); /* scale kaldırıldı */
  }
  .related-slider-wrapper::before,
  .related-slider-wrapper::after {
    transition: none;
  }
  /* Sidebar: anında aç/kapa */
  .sidebar-overlay,
  .cart-sidebar,
  .wishlist-sidebar {
    transition: none;
  }
}

/* Account Pages Layout */
.account-page {
    display: grid;
    grid-template-columns: 360px 1fr;
  gap: clamp(2rem, 8vw, 6rem); /* Boşluk daha dengeli ve dinamik */
  padding: 4rem clamp(1.5rem, 5vw, 4rem) 8rem;
}

.account-content {
  margin-top: 1.5rem; /* Sidebar ile üst hizayı eşitlemek için optimize edildi */
    min-width: 0;
  max-width: 1000px; /* İçeriğin aşırı yayılmasını önleyip odaklanmayı artırır */
}

.page-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--primary);
    position: relative;
    padding-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-title::after {
  content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #3b82f6);
    border-radius: 2px;
}

.account-sidebar {
    background: white;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 1.5rem 1rem 1.5rem; /* Tighter vertical padding */
    position: sticky;
    top: 100px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.08);
    max-height: none; /* Let its container handle flow */
    height: auto;
    overflow: visible; /* Prevent inner scrollbars */
    transition: var(--transition);
}

.sidebar-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.header-main-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.avatar-large {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent), #3b82f6);
    color: white;
    font-size: 1.75rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.15);
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.header-text-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: center;
}

.sidebar-header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.vat-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.vat-badge span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    border-right: 1px solid var(--border);
    padding-right: 0.5rem;
}

.vat-badge strong {
    color: var(--text);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.business-status {
    font-size: 0.7rem;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    animation: pulseStatus 2s infinite;
    display: inline-block;
}

@keyframes pulseStatus {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-nav a,
.logout-btn-account {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.75rem, 1.5vw, 1.5rem) 0.5rem;
    border-radius: 20px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: none;
    border: 1px solid transparent;
    width: 100%;
    cursor: pointer;
    text-align: center;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
}

.account-nav a:hover,
.logout-btn-account:hover {
    background: #f8fafc;
    border-color: var(--border);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    color: var(--accent);
}

.account-nav a.active {
    background: #f1f5f9;
    color: var(--accent);
    border-color: var(--border);
}

.account-nav a svg,
.logout-btn-account svg {
    width: clamp(20px, 3vw, 28px);
    height: clamp(20px, 3vw, 28px);
    opacity: 0.8;
}

.account-nav a:hover svg,
.logout-btn-account:hover svg {
    opacity: 1;
}

/* active state already handled above */

.account-nav a.active svg {
    opacity: 1;
}

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}

.logout-btn-account {
    color: #ef4444;
    margin: 1.5rem 1rem 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    justify-content: center;
    background: #fffafa;
    border: 1px solid #fee2e2;
    border-radius: 12px;
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logout-btn-account:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Account Content Area */
.content-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem; /* Restored padding */
    margin-bottom: 3rem; /* Increased margin */
    box-shadow: var(--shadow-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent inner content bleed */
}

.content-card h3 {
    font-size: 1.5rem;
    margin: 0;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem; /* Reduced from 2rem */
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.card-header svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.card-inner-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 1rem;
}

.form-grid-divider {
    height: 1px;
    background: var(--border);
    margin: 2.5rem 0;
    opacity: 0.5;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 46%; /* Slightly up to center visually */
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--accent);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.subcategory-list li {
    border-top: 1px solid rgba(226, 232, 240, 0.5);
}

.subcategory-list li:first-child {
    border-top: none;
}

.subcategory-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  transition:
    background 0.3s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    font-weight 0.1s ease;
    position: relative;
}

.subcategory-link::before {
  content: "";
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    opacity: 0.4;
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* padding-left animasyonu yerine translateX — içerik genişliği değişmez */
.subcategory-link:hover {
    background: white;
    color: var(--accent);
  transform: translateX(6px);
    font-weight: 600;
    box-shadow: inset 4px 0 0 var(--accent);
}

.subcategory-link:hover::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.3);
}

.subcategory-link.active {
    background: white;
    color: var(--accent);
    font-weight: 700;
  transform: translateX(6px);
    box-shadow: inset 4px 0 0 var(--accent);
}

.subcategory-link.active::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.5);
}

.info-item .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-item .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.info-item.tech-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
    position: relative;
    overflow: hidden;
}

.info-item.tech-card::after {
  content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.1) 0%,
    transparent 70%
  );
    pointer-events: none;
}

.info-item.tech-card .label {
    color: #7dd3fc;
}

.info-item.tech-card .value {
    color: #f0f9ff;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Inquiry Styles */
.inquiry-filters-container {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: hidden; /* For pseudo fades */
}

/* Modern Slider Hint: Right edge fade if overflow */
.inquiry-filters-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    z-index: 2;
    opacity: 1; /* Always show hint on mobile practically */
}

.inquiry-filters {
    display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.5rem 0.25rem;
  scrollbar-width: none; /* Firefox için scrollbar gizle */
  -ms-overflow-style: none; /* IE/Edge */
  justify-content: center; /* Geniş ekranlarda ortalar */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    position: relative;
    align-items: center;
    padding-right: 60px; /* Space for the fade hint */
}

.inquiry-filters::-webkit-scrollbar {
  display: none; /* Chrome/Safari için scrollbar gizle */
}

.filter-chip {
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.filter-chip.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.inquiry-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Inquiry Card – Modern Vertical Layout ──────────────────── */
.inquiry-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
  padding: 1.5rem 2rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.inquiry-card:hover {
    transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
}

/* inquiry-card and other styles follow... */

.checkout-stepper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
    width: max-content; /* Important for sliding */
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    position: relative; /* For the fade hint */
    padding-right: 60px; /* Space for the fade hint */
}

.checkout-stepper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.inquiry-filters-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 2rem; /* Reduced from 2.5rem */
    margin-top: 1rem;
    background: #f8fafc;
    border-radius: 60px;
    padding: 0;
    border: 1px solid var(--border);
    min-height: 56px; /* Tighter vertical height */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
    overflow: hidden;
}

.inquiry-filters-scrollbox {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    justify-content: center; /* Symmetric centering by default */
    padding: 0 40px;
}

.inquiry-filters-scrollbox::-webkit-scrollbar { display: none; }

.inquiry-filters {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: max-content;
    flex-shrink: 0;
    position: relative;
    padding: 5px 0; /* Tight symmetric vertical padding */
    margin-bottom: 0 !important; /* Force zero margin bottom to eliminate the gap */
    max-width: 100%;
}

/* Connect circles perfectly */
.inquiry-filters .step-line {
    display: block !important;
    height: 2px;
    background: #e2e8f0;
    flex: 1;
    margin: 16px -10px 0; /* Center of 32px circle (16px) */
    z-index: 1;
    min-width: 10px;
}

/* Ensure all connection lines are visible between steps */
.inquiry-filters .step-line {
    background: #e2e8f0;
}

.inquiry-filters .step.completed .step-num,
.inquiry-filters .step.active .step-num {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.inquiry-filters .step.active + .step-line,
.inquiry-filters .step.completed + .step-line {
    background: var(--primary);
}

.inquiry-filters::-webkit-scrollbar {
    display: none;
}

.filter-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 100; /* Above EVERYTHING */
    opacity: 0;
    visibility: hidden;
}

.filter-nav-btn.filter-prev { left: 8px; }
.filter-nav-btn.filter-next { right: 8px; }

.filter-nav-btn.visible {
    opacity: 1;
    visibility: visible;
}

.filter-nav-btn:hover {
    background: var(--primary);
    color: white;
}

.filter-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Fix for Card Structural Alignment ('Yamukluk') */
.inquiry-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    gap: 1.5rem;
    border-left: 6px solid #e2e8f0; /* Default border */
    position: relative;
    overflow: hidden;
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
    flex-wrap: nowrap !important; /* Force single line until media breakpoint */
}

.inquiry-date-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: max-content;
    flex-shrink: 1; /* Allow slight shrinkage if needed */
}

.inquiry-price-block {
    flex-shrink: 0; /* Price NEVER shrinks or wraps manually */
}

.inquiry-date-block .date-val,
.inquiry-date-block .items-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.inquiry-id {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.inquiry-date-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inquiry-date-block .date-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
}

.inquiry-date-block .items-val {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.inquiry-price-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f1f5f9;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    flex-shrink: 0; /* Don't shrink price, let metadata wrap or stay inline */
}

.price-label-box {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.1;
}

.price-label-box .label-main {
    font-size: 0.65rem;
    font-weight: 800;
    color: #475569;
}

.price-label-box .label-sub {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
}

.price-value-box {
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    font-weight: 900;
    color: var(--text-main);
    white-space: nowrap;
}

.card-footer-row {
    margin-top: 0.5rem;
    text-align: center;
}

.footer-divider {
    height: 1px;
    background: #f1f5f9;
    margin-bottom: 1.25rem;
}

.btn-details {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem; /* Increased as requested */
    cursor: pointer;
    transition: all 0.2s;
}

.btn-details:hover {
    background: var(--primary);
    color: white;
}

@media (max-width: 613px) {
    .card-meta-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    .inquiry-date-block {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .inquiry-date-block .date-val::after {
        content: "•";
        margin: 0 0.75rem;
        opacity: 0.5;
        display: inline-block;
    }
    
    .inquiry-price-block {
        width: 100% !important;
        justify-content: center !important;
        background: #f8fafc;
        border: 1px solid #f1f5f9;
        margin-top: 0.25rem;
    }
}

@media (max-width: 350px) {
    .price-label-box {
        display: block; /* Force column */
    }
    
    .price-label-box .label-sub {
        display: block;
    }
}

.inquiry-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.inquiry-price-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-soft);
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    margin-left: auto;
    flex-wrap: wrap; /* Allow wrapping of label/value separately */
    justify-content: flex-end;
}

.inquiry-price-inline .price-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    display: flex;
    flex-direction: column; /* Force Brutto to next line if needed */
}

.inquiry-price-inline .price-value {
    font-size: clamp(1rem, 3vw, 1.25rem); /* Fluid font for large amounts */
    font-weight: 900;
    color: var(--text-main);
    white-space: nowrap; /* Price itself must not wrap */
}

/* Modal Meta Centered and Spaced */
.inquiry-modal-meta-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 5vw, 4rem);
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
    background: #f8fafc;
    padding: 1.25rem 2rem;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.inquiry-modal-meta-centered .meta-item {
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    white-space: nowrap;
}

.status-badge-inline {
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge-inline.pending { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.status-badge-inline.quoted { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.status-badge-inline.closed { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

@media (max-width: 650px) {
    .inquiry-modal-meta-centered {
        gap: 1.5rem;
        padding: 1rem;
    }
}

.inquiry-date-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 600px) {
    .inquiry-price-inline {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .inquiry-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .inquiry-filters-container::before {
        display: block; /* Ensure it's visible as a hint */
    }
}
.inquiry-card.status-pending {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(to right, #fffbeb 0%, white 60%);
}
.inquiry-card.status-quoted {
    border-left: 4px solid #10b981;
    background: linear-gradient(to right, #f0fdf4 0%, white 60%);
}
.inquiry-card.status-closed {
    border-left: 4px solid #64748b;
    background: linear-gradient(to right, #f8fafc 0%, white 60%);
}

/* Inquiry action buttons row */
.inquiry-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Top row: ID on left, status badge on right */
.inquiry-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.inquiry-id {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    opacity: 0.8;
}

.inquiry-price-tag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.inquiry-price-tag .price-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.inquiry-price-tag .price-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}

/* Meta row: date + summary side by side */
.inquiry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.inquiry-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inquiry-status-pill {
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Status-based pill colors */
.status-pending .inquiry-status-pill { background: #fffbeb; color: #b45309; }
.status-quoted .inquiry-status-pill { background: #f0fdf4; color: #15803d; }
.status-closed .inquiry-status-pill { background: #f8fafc; color: #475569; }

.inquiry-summary-brief {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Status pill */
.inquiry-status {
  padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
  margin-right: 0.25rem;
}

.status-quoted {
  background: #dcfce7;
  color: #166534;
}
.status-pending {
  background: #fef9c3;
  color: #854d0e;
}
.status-closed {
  background: #f1f5f9;
  color: #475569;
}

/* Divider */
.inquiry-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

/* Action button – full width, accent style */
.btn-outline-sm {
    align-self: flex-start;
    padding: 0.55rem 1.4rem;
    border-radius: 10px;
    border: 1.5px solid var(--accent);
    background: none;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-outline-sm:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Unified Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-fast);
    border: 2px solid transparent;
    font-family: inherit;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
    background: var(--accent);
    color: white;
}
.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn--outline {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.btn--outline:hover {
    background: var(--accent);
    color: white;
}

.btn--dark {
    background: var(--primary);
    color: white;
}
.btn--dark:hover {
  background: #0f172a;
}

.btn--pill {
  border-radius: 999px;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Existing button replacements */
.btn-login {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login:hover {
    background: var(--accent);
    color: white;
}

.btn-register {
    background: var(--accent);
    color: white;
    border: 2px solid var(--accent);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-register:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.badge {
    position: absolute;
  top: -6px;
  right: -6px;
    background: var(--accent);
    color: white;
  font-size: 0.72rem;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
    font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
  pointer-events: none;
}

@keyframes badge-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
  70% {
    transform: scale(0.88);
  }
  100% {
    transform: scale(1);
  }
}
.badge-bounce {
  animation: badge-pop 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Auth Section UI */
.auth-links {
    display: flex;
    gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

/* Tablet: buton metni kısalt, padding küçült */
@media (max-width: 1024px) {
  .btn-login,
  .btn-register {
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
  }
  .auth-links {
    gap: 0.4rem;
  }
}

/* Mobile: daha da küçük — logoya yer kalsın */
@media (max-width: 767px) {
  .btn-login,
  .btn-register {
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    border-radius: 8px;
    white-space: nowrap;
  }
  .auth-links {
    gap: 0.3rem;
  }
}

/* Small mobile: border-width küçült */
@media (max-width: 399px) {
  .btn-login {
    border-width: 1.5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.74rem;
  }
  .btn-register {
    border-width: 1.5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.74rem;
  }
  .auth-links {
    gap: 0.25rem;
  }
}

/* Mega Menu integrated in Header */
.nav-menu {
    height: 60px;
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.nav-item {
    position: relative; /* Fixed for relative positioning of dropdowns */
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
    border-radius: var(--radius);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    background: var(--bg-alt);
    color: var(--accent);
}

.nav-link-with-image {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-link-with-image:hover {
    background: #f8fafc;
    transform: translateX(4px);
}

.nav-link-with-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.nav-link-with-image span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.nav-link-with-image:hover span {
    color: var(--accent);
}

/* Layout */
.shop-layout {
    display: grid;
  /* 1280px+ masaüstü: 300px sidebar — en uzun kategori adı (Dekoration & Geschenke) rahat sığar */
  grid-template-columns: 300px 1fr;
    gap: 2.5rem;
  padding: 3rem 0 8rem;
}

.shop-layout.no-sidebar {
    grid-template-columns: 1fr;
}

/* ── Sidebar Collapse Toggle ─────────────────────────────────────────────── */
.sidebar-collapse-btn {
  display: none; /* Sadece ≥1025px'de görünür — aşağıdaki media query ile açılıyor */
  position: fixed;
  top: 240px; /* Stable fixed position */
  left: -100px; /* JS tarafından sidebar.getBoundingClientRect().right ile güncellenir */
  width: 24px;
  height: 48px; /* Pill şekli — modern sidebar toggle trendi */
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 0 8px 8px 0;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 200;
  color: var(--text-muted);
  padding: 0;
  /* Başlangıçta görünmez — JS pozisyon belirledikten sonra fade-in yapar */
  opacity: 0;
  pointer-events: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s,
    left 0.37s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s,
    opacity 0.25s ease;
}

.sidebar-collapse-btn.is-ready {
  opacity: 1;
  pointer-events: auto;
}

/* display: none'dan SONRA override — cascade sırası önemli */
@media (min-width: 1025px) {
  .sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.sidebar-collapse-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 3px 0 14px rgba(37, 99, 235, 0.3);
  color: white;
}

.sidebar-collapse-btn .collapse-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  pointer-events: none;
}

/* ── Sidebar collapse animasyonu (sadece ≥1025px masaüstü) ── */
@media (min-width: 1025px) {
  /* Masaüstünde sticky sidebar: collapse transition aktif */
  .filters-sidebar {
    transition:
      opacity 0.37s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.37s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.37s;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity;
  }

  /* LocalStorage restore sırasında animasyon engellenir */
  .shop-layout.no-transition,
  .shop-layout.no-transition .filters-sidebar,
  .shop-layout.no-transition .products-container {
    transition: none !important;
  }

  /* Grid collapse transition — sadece grid modda anlamlı */
  .shop-layout {
    transition:
      grid-template-columns 0.37s cubic-bezier(0.4, 0, 0.2, 1),
      gap 0.37s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .shop-layout.sidebar-collapsed {
    grid-template-columns: 0 1fr;
    gap: 0;
  }

  /* Collapsed: products-container sol/sağ nefes boşluğu — sidebar animasyonuyla senkron */
  .shop-layout.sidebar-collapsed .products-container {
    padding-left: 2rem;
    padding-right: 1rem;
    transition: padding 0.37s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .shop-layout:not(.sidebar-collapsed) .products-container {
    padding-left: 0;
    padding-right: 0;
    transition: padding 0.37s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Collapsed sidebar: slide-out + fade */
  .shop-layout.sidebar-collapsed .filters-sidebar {
    transform: translateX(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Collapsed: ikonu ters çevir */
.shop-layout.sidebar-collapsed .sidebar-collapse-btn .collapse-icon {
  transform: rotate(180deg);
}

/* Collapsed modda sol kenara yapışık pill */
.shop-layout.sidebar-collapsed .sidebar-collapse-btn {
  border-radius: 0 8px 8px 0;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 3px 0 14px rgba(30, 41, 59, 0.25);
  color: white;
}
/* Pagination Footer - Modern 3-Part Layout */
.pagination-footer {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: space-between;
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    gap: 2rem;
    min-height: 80px; /* Ensure stable height */
}

.footer-left,
.footer-right {
    flex: 1;
}

.footer-right {
    display: flex;
    justify-content: flex-end;
}

.footer-center {
    flex: 0 1 auto;
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pagination-settings {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pagination-select {
    padding: 0.45rem 1.75rem 0.45rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background-color: white;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
}

.pagination-select:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pagination-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (max-width: 1100px) {
    .pagination-footer {
        gap: 1.5rem;
    }
    .pagination-info, 
    .pagination-settings,
    .pagination-btn {
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .pagination-footer {
        flex-wrap: wrap;
        gap: 2rem 1rem;
        padding-bottom: 2rem;
        justify-content: space-between;
    }
    
    .footer-center {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-left {
        order: 2;
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .footer-right {
        order: 3;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .pagination-settings {
        justify-content: flex-end;
    }

    .pagination-info {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .pagination-footer {
        gap: 1.5rem 0.5rem;
        margin-top: 3rem;
    }
    
    .ipp-label-text {
        display: inline;
        font-size: 0.72rem;
        opacity: 0.8;
    }

    .pagination-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .pagination-settings {
        gap: 0.35rem;
    }

    .pagination-select {
        padding: 0.35rem 1.5rem 0.35rem 0.5rem;
        font-size: 0.8rem;
    }
}

.shop-layout.sidebar-collapsed .sidebar-collapse-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Filters Sidebar */
.filters-sidebar {
    position: sticky;
  top: var(
    --header-height
  ); /* Header yüksekliğiyle senkron — scroll shrink'te de doğru hizalanır */
  padding-top: 2.5rem; /* Collapse buton için üstte alan bırak */
  padding-left: clamp(0.5rem, 1vw, 1rem); /* Sol kenara yapışıklığı önler */
    height: auto;
  max-height: calc(100vh - var(--header-height));
    overflow-y: auto; /* Enable vertical scrolling */
    overscroll-behavior-y: contain; /* Prevent scrolling parent when reaching end */
    padding-right: 0.5rem; /* Space for scrollbar */
    padding-bottom: 2rem; /* Bottom padding for last elements */
    
    /* Modern Scrollbar Styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--border) transparent; /* Firefox */
}

/* Chrome, Edge, Safari Scrollbar */
.filters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.filters-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 20px;
    border: 2px solid transparent; /* Creates padding effect */
    background-clip: content-box;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.filter-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.filter-group h3 {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    text-align: center;
    color: var(--primary);
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--border);
  /* margin-right magic number kaldırıldı — sidebar padding-right zaten scrollbar alanını yönetiyor */
}

.filter-list {
    list-style: none;
}

.filter-item {
    margin-bottom: 0.75rem;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
    padding: 0.25rem 0;
}

.filter-checkbox:hover {
    color: var(--accent);
    transform: translateX(4px);
}

.filter-checkbox input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent);
}

.filter-checkbox input {
    width: 1.2rem;
    height: 1.2rem;
}

/* Product Grid */
.products-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  min-width: 0;
  overflow: hidden;
}

.products-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
    align-items: center;
  gap: clamp(0.4rem, 1vw, 1rem);
    margin-top: 0.5rem;
  min-width: 0;
}

.products-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  min-width: 0;
}

.products-toolbar-center {
    display: flex;
    align-items: baseline;
  gap: 0.4rem;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}

.products-title {
  font-size: clamp(0.95rem, 2vw, 1.3rem);
    font-weight: 700;
  white-space: nowrap;
}

.products-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.count-number {
  font-size: clamp(0.75rem, 1.2vw, 0.88rem);
  font-weight: 700;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  line-height: 1.4;
}

.count-label {
  font-size: clamp(0.68rem, 1vw, 0.8rem);
    color: var(--text-muted);
  font-weight: 500;
}

.products-toolbar-right {
    display: flex;
    align-items: center;
  gap: clamp(0.3rem, 0.75vw, 0.5rem);
  justify-self: end;
}

.sort-label {
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
    color: var(--text-muted);
  white-space: nowrap;
}

.sort-select {
  min-width: clamp(120px, 18vw, 190px);
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
}

/* Mobil: 2 sütuna düş, başlık ortada gizle */
@media (max-width: 600px) {
  .products-toolbar {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .products-toolbar-left {
    grid-column: 1;
    grid-row: 1;
  }
  .products-toolbar-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .products-toolbar-center {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    text-align: center;
  }
  .sort-label {
    display: none;
  }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .products-toolbar {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 1rem;
    column-gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
  }
  .products-toolbar-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .products-toolbar-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .products-toolbar-center {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

/* --- SÜTUN SEÇİCİ --- */
.col-picker {
  position: relative;
}

.col-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  color: var(--text);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}
.col-picker-trigger:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
  background: rgba(255, 255, 255, 0.95);
}
.col-picker.open .col-picker-trigger {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
}

/* İkon bölgesi */
.col-trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 100%;
  color: var(--accent);
  border-right: 1.5px solid var(--border);
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.col-picker-trigger:hover .col-trigger-icon,
.col-picker.open .col-trigger-icon {
  background: rgba(37, 99, 235, 0.07);
}

/* Sayı bölgesi */
.col-trigger-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  min-width: 24px;
  transition: color 0.15s ease;
}
.col-picker-trigger:hover .col-trigger-value,
.col-picker.open .col-trigger-value {
  color: var(--accent);
}

/* Chevron bölgesi */
.col-trigger-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 100%;
  color: var(--text-muted);
  border-left: 1.5px solid var(--border);
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.col-picker-trigger:hover .col-trigger-chevron,
.col-picker.open .col-trigger-chevron {
  background: rgba(37, 99, 235, 0.05);
}
.col-chevron {
  transition: transform 0.2s ease;
}
.col-picker.open .col-chevron {
  transform: rotate(180deg);
}

.col-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  transform-origin: top right;
  z-index: 500;
}
.col-picker.open .col-picker-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}

.col-option {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.col-option:hover {
  background: var(--bg-alt);
  border-color: var(--accent);
}
.col-option.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Küçük ekranlarda sort-label gizle, col-picker sayıyı gizle */
@media (max-width: 480px) {
  .sort-label {
    display: none;
  }
  .col-trigger-value {
    display: none;
  }
  .col-trigger-chevron {
    display: none;
  }
  .col-trigger-icon {
    border-right: none;
    width: 38px;
  }
}

.product-grid {
    display: grid;
  grid-template-columns: repeat(5, 1fr); /* 1025–1279px: 5 sütun */
  column-gap: 1rem;
  row-gap: 1.25rem; /* satırlar arası nefes alan boşluk */
  min-width: 0;
  background: transparent;
}

/* Geniş desktop: 6 sütun */
@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Tablet: 4 sütun (sidebar overlay modda) */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0.75rem;
    row-gap: 1rem;
  }
}

/* Mobil: 3 sütun, SKU gizle */
@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.75rem;
  }
  .product-sku {
    display: none;
  }
}

/* Küçük mobil: 2 sütun */
@media (max-width: 479px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.4rem;
    row-gap: 0.6rem;
  }
}

/* Angebote Slider - kompakte Karten, gleiche Breite wie Produktbereich */
.offers-section {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem 0.5rem;
    border-radius: 18px;
  background: rgba(248, 250, 252, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    width: 100%;
  /* Smooth göster/gizle geçişi */
  overflow: hidden;
  opacity: 1;
  max-height: 800px;
  transition:
    opacity 0.35s ease,
    max-height 0.4s ease,
    margin 0.35s ease,
    padding 0.35s ease;
}

/* Filtre aktifken, guest kullanıcıda veya alt sayfalarda gizle — smooth kaybolma */
.offers-section.offers-hidden {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.offers-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  margin-bottom: 0.25rem; /* Başlık ile slider arasında az boşluk */
}

.offers-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.offers-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0; /* Oklar ve kartlar arasında boşluk bırakma */
    min-width: 0; /* ürün kolonu içinde daralabilsin */
}

.offers-slider {
    flex: 1;
  min-width: 0;
    max-width: 100%;
    display: flex;
  gap: 0.8rem;
    overflow-x: auto;
    scroll-behavior: smooth;
  padding: 0.5rem 0.2rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Slider kenarlarını yumuşak göstermek için sol/sağ fade efektleri */
.offers-slider-wrapper::before,
.offers-slider-wrapper::after {
  content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px; /* Daha dar alan: daha hafif fade */
    pointer-events: none;
    z-index: 2;
}

.offers-slider-wrapper::before {
    left: 0;
  background: linear-gradient(
    to right,
        rgba(248, 250, 252, 0.9),
        rgba(248, 250, 252, 0.55),
        transparent
    );
}

.offers-slider-wrapper::after {
    right: 0;
  background: linear-gradient(
    to left,
        rgba(248, 250, 252, 0.9),
        rgba(248, 250, 252, 0.55),
        transparent
    );
}

.offers-slider::-webkit-scrollbar {
    height: 6px;
}

.offers-slider::-webkit-scrollbar-track {
    background: transparent;
}

.offers-slider::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.6);
    border-radius: 999px;
}

.offer-card {
    min-width: 140px;
    max-width: 160px;
    flex: 0 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.2s ease;
}

.offer-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    z-index: 2;
}

.offer-card:active {
  transform: scale(0.98);
}

.offer-card-image {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1; /* Match product card aspect if possible, or 3/2 if preferred for offers */
    background: #f8fafc;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}

.offer-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #fdfdfd;
    transition: transform 0.5s;
    padding: 5px;
}

.offer-card:hover .offer-card-image img {
    transform: scale(1.05);
}

.offer-card-body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    background: white;
    border-top: 1px solid var(--border);
}

.offer-card-image .image-badge-sale {
    position: absolute;
    bottom: 6px;
    right: 6px;
    top: auto;
    left: auto;
    transform: scale(0.8);
    transform-origin: bottom right;
    z-index: 3;
}

.offer-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.offer-brand {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #ef4444; /* Diğer sale badge ile aynı renk tonu */
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.offer-card-title {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.offer-price-row {
    margin-top: 0.2rem;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.offer-price-main {
    display: inline-flex;
  align-items: center; /* Rakam ve € aynı hizada kalsın */
    gap: 0.12rem;
    flex-wrap: nowrap;
  white-space: nowrap; /* 3 haneli rakamlarda satır kırılmasın */
}

/* Angebote-Karten: kompakter Preisstil */
.offer-card .old-price-inline {
    font-size: 0.6rem; /* Eski fiyat daha da küçük */
    line-height: 1;
}

.offer-card .current-price-inline.is-sale {
    font-size: 0.85rem; /* Biraz küçült, euro ile beraber sığsın */
  line-height: 1; /* 3 haneli rakamlarda € aşağı taşmasın */
}

.offer-price-unit {
    font-size: 0.55rem; /* / Stück daha küçük */
    color: var(--text-muted);
    white-space: nowrap;
}

.offer-actions {
  margin-top: auto; /* Kart gövdesinin altına yapıştır */
    padding-top: 0.45rem;
}

.offer-add-to-cart {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: none;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.offer-add-to-cart:hover {
    background: var(--accent);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

.offer-add-to-cart:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.offers-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  color: var(--accent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  z-index: 10;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.offers-nav:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
  transform: translateY(-50%) translateY(-1px);
}

/* Prev/next okları — overlay, layout’u itmez */
.offers-nav-prev {
  left: 0.5rem;
}
.offers-nav-next {
  right: 0.5rem;
}

.offers-footer {
  margin-top: 0.15rem; /* Butonun üzerinde daha az boşluk */
    display: flex;
    justify-content: flex-end;
}

.offers-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    border: none;
  background: var(
    --primary
  ); /* In den Warenkorb butonuyla aynı arka plan rengi */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
    transition: var(--transition-fast);
}

.offers-all-btn:hover {
    background: var(--accent);
}

/* Tablet: 768–900px */
@media (max-width: 900px) {
    .offers-section {
    padding: 0.45rem 0.85rem;
    margin-top: 0.5rem;
    margin-bottom: 0.6rem;
    border-radius: 12px;
  }
  .offers-title {
    font-size: 1.05rem;
  }
    .offers-nav {
    display: inline-flex;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* Mobil: < 600px */
@media (max-width: 599px) {
  .offers-section {
    padding: 0.35rem 0.6rem;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  }
  .offers-title {
    font-size: 0.95rem;
  }
  .offer-card {
    min-width: 120px;
    max-width: 140px;
  }
  .offer-card-title {
    font-size: 0.72rem;
  }
  .offer-add-to-cart {
    font-size: 0.72rem;
    padding: 0.35rem 0.5rem;
    }
}

.product-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    height: 100%;
  min-width: 0;
    animation: slideInUp 0.5s ease-out both;
  animation-delay: calc(var(--delay) * 0.03s);
  padding: 0;
}

.product-title {
  font-size: clamp(0.7rem, 0.9vw, 0.88rem);
    font-weight: 600;
    line-height: 1.3;
  margin-bottom: 0.25rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.6em;
}

.product-price {
  font-size: clamp(0.88rem, 1.5vw, 1.1rem);
    font-weight: 700;
    color: var(--accent);
  margin-bottom: 0;
  min-width: 0;
  overflow: hidden;
}

/* Kart içi price-label: "Fachhandel-Preis" — tek satırda kalır */
.product-card .price-label {
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.wishlist-btn.active {
    color: #ef4444;
    animation: HeartBeat 0.3s ease-in-out;
}

@keyframes HeartBeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.product-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1; /* Square aspect ratio for consistency */
    background: #f8fafc;
    overflow: hidden;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.product-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Fit the frame perfectly without cutting */
    background: #fdfdfd; 
    transition: transform 0.5s;
    padding: 5px; /* Subtle inset */
}

.product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  z-index: 2;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

/* Badge Positioning - Overlay */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through */
}

/* Modern styling for the NEW badge */
.badge-new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  font-size: clamp(0.48rem, 0.65vw, 0.7rem);
    font-weight: 800;
  padding: clamp(0.18rem, 0.3vw, 0.35rem) clamp(0.28rem, 0.5vw, 0.65rem);
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
  white-space: nowrap;
}

/* Wishlist Button - Overlay */
.wishlist-btn {
    position: absolute;
  top: 8px;
  right: 8px;
  width: clamp(28px, 6%, 36px);
  height: clamp(28px, 6%, 36px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  transition: all 0.25s ease;
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* WCAG 2.5.5: minimum 44×44px touch target */
.wishlist-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.wishlist-btn svg {
  width: clamp(12px, 55%, 16px);
  height: clamp(12px, 55%, 16px);
  flex-shrink: 0;
}

.wishlist-btn:hover {
  transform: scale(1.12);
  background: rgba(255, 220, 220, 0.6);
  color: #ef4444;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.wishlist-btn.active svg {
    fill: #ef4444;
    stroke: #ef4444;
}

/* 6-sütun: daha küçük */
.product-grid[data-cols="6"] .wishlist-btn {
  width: 26px;
  height: 26px;
  top: 5px;
  right: 5px;
}
.product-grid[data-cols="6"] .wishlist-btn svg {
  width: 12px;
  height: 12px;
}

/* 7-sütun: en küçük */
.product-grid[data-cols="7"] .wishlist-btn {
  width: 22px;
  height: 22px;
  top: 4px;
  right: 4px;
}
.product-grid[data-cols="7"] .wishlist-btn svg {
  width: 10px;
  height: 10px;
}

.product-info {
  padding: 0.6rem 0.75rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-top: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
  margin-bottom: 0.35rem;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow: hidden;
}

.product-brand {
  font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-brand:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.product-sku {
  font-size: 0.62rem;
    color: var(--text-muted);
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 4px;
    border-radius: 4px;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ordering Section */
.ordering-box {
    margin-top: auto;
    display: flex;
    flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.6rem;
    border-top: 1px solid var(--border);
  min-width: 0;
}

/* Label + input/select dikey grubu */
.qty-control,
.unit-control {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.qty-control {
  flex: 0 0 auto;
}
.unit-control {
  flex: 1;
  min-width: 0;
}

/* Küçük etiket: "Menge" / "Einheit" */
.qty-control label,
.unit-control label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}

.order-controls {
    display: flex;
  gap: 0.3rem;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.qty-input {
  width: 52px;
  height: 32px;
  padding: 0.3rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.qty-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.qty-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.1s,
    box-shadow 0.1s;
}

.qty-btn:hover {
  background: #e0f2fe;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
}

.qty-btn:active {
  transform: translateY(1px);
}

.qty-btn--minus,
.qty-btn--plus {
  flex-shrink: 0;
}
/* filter-dropdown: ana liste filtresi için büyük stil korunur */
.filter-dropdown {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background-color: white;
    color: var(--text);
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    box-shadow: var(--shadow-sm);
}
.filter-dropdown:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Guest'te sortierung: soluk görünüm + not-allowed cursor */
.filter-dropdown:disabled,
.sort-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-color: #f8fafc;
  color: var(--text-muted);
  pointer-events: none;
}

/* unit-select: kart içindeki kompakt dropdown */
.unit-select {
    flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--border);
    border-radius: 6px;
  background-color: white;
  color: var(--text);
  padding: 0.3rem 1.4rem 0.3rem 0.4rem;
  font-size: 0.78rem;
    font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.75rem;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  overflow: hidden;
}
.unit-select:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* Gesamt satırı */
.price-preview {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.15rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-preview span {
  color: var(--accent);
}
.preview-context {
  font-size: 0.72em;
  color: var(--text-secondary, #64748b);
  margin-left: 0.25rem;
  font-weight: 500;
}

.add-to-cart {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  margin-top: 0.15rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Variant styling (same button contract, size-based differences) */
.add-to-cart[data-cart-variant="compact"] {
  font-size: 0.72rem;
  padding: 0.4rem 0.45rem;
}

@media (max-width: 480px) {
  .add-to-cart[data-cart-variant="compact"] {
    font-size: 0.68rem;
    padding: 0.35rem 0.4rem;
  }
}

.add-to-cart .cart-btn__icon,
.offer-add-to-cart .cart-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-to-cart .cart-btn__icon svg,
.offer-add-to-cart .cart-btn__icon svg {
  width: 0.95em;
  height: 0.95em;
}

.add-to-cart .cart-btn__label,
.offer-add-to-cart .cart-btn__label {
  line-height: 1;
  color: #ffffff; /* cart buton metinleri her zaman beyaz */
}

.add-to-cart.btn-disabled-stock {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    border: 1px solid #e2e8f0 !important;
    transform: none !important;
    box-shadow: none !important;
}
.add-to-cart:hover {
    background: var(--accent);
}

/* Already in cart: green confirmed state */
.add-to-cart.in-cart-state,
.offer-add-to-cart.in-cart-state {
    background: #16a34a !important;
    color: white !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    animation: button-pop 0.3s ease-out;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3);
}

.add-to-cart.in-cart-state .cart-btn__label,
.offer-add-to-cart.in-cart-state .cart-btn__label {
  color: #ffffff !important;
}
.add-to-cart.in-cart-state:hover,
.offer-add-to-cart.in-cart-state:hover {
    background: #15803d !important;
}

@keyframes button-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Sidebar item highlight pulse */
@keyframes item-highlight-pulse {
    0% { background-color: rgba(22, 163, 74, 0.4); box-shadow: inset 0 0 0 2px #16a34a; }
    30% { background-color: rgba(22, 163, 74, 0.2); box-shadow: inset 0 0 0 1px #16a34a; }
    100% { background-color: transparent; box-shadow: inset 0 0 0 0px transparent; }
}
.item-highlight {
    animation: item-highlight-pulse 2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

/* Sidebar Categories - Modern & User-Friendly */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Alle Produkte linki */
.all-products-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--primary);
  background: var(--primary); /* lacivert — Marken butonu ile tutarlı */
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2);
}

.all-products-link:hover {
  background: var(--primary-light); /* #334155 — biraz açık lacivert */
  border-color: var(--primary-light);
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.25);
}

.all-products-link.active {
  background: var(--accent); /* mavi — aktifken kategori seçiminden ayrışır */
    border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.all-products-link svg {
  stroke: white; /* icon her zaman beyaz */
}

/* Kategori toggle: label (filtrele) + chevron (sadece accordion) */
.category-toggle-wrapper {
    display: flex;
    align-items: center;
  width: 100%;
    background: linear-gradient(to right, #ffffff, #fafbfc);
}

.category-label {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
  padding: 1rem 0.75rem 1rem 1.25rem;
  background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    font-family: inherit;
  transition:
    background 0.3s ease,
    color 0.2s ease,
    transform 0.2s ease;
  min-width: 0;
}

.category-label:hover {
    color: var(--accent);
  transform: translateX(3px);
}

.category-label.active {
  color: var(--accent);
}

.category-label > span:not(.category-icon) {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.3;
}

/* Chevron butonu — sadece accordion */
.category-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 100%;
  min-height: 44px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-muted);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  padding: 0;
}

.category-chevron-btn:hover {
  background: #f1f5f9;
  color: var(--accent);
}

.category-item.expanded .category-toggle-wrapper {
    background: linear-gradient(135deg, var(--accent), #3b82f6);
}

.category-item.expanded .category-label {
    color: white;
}

.category-item.expanded .category-label:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(3px);
}

.category-item.expanded .category-label .category-icon {
  color: white;
}

.category-item.expanded .category-chevron-btn {
  border-left-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.category-item.expanded .category-chevron-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.category-item.expanded .chevron {
    transform: rotate(180deg);
}

.category-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.category-item.expanded {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}

/* .category-toggle — yeni yapıya geçildi: .category-label + .category-chevron-btn */

.category-chevron-btn .chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  opacity: 0.7;
}

.category-chevron-btn:hover .chevron {
    opacity: 1;
}

.subcategory-list {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(to bottom, #fafbfc, #f8fafc);
}

.category-item.expanded .subcategory-list {
  /* 1000px: mevcut en uzun kategori (elektronik: 7 alt × ~44px ≈ 308px)
       için fazlasıyla yeterli; alt kategori sayısı artarsa burası güncellenebilir */
  max-height: 1000px;
}

.price-locked {
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--bg-alt);
    padding: 0.75rem;
    border-radius: 4px;
    text-align: center;
    margin-top: auto;
}

.price-locked a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg);
    width: 95%;
    max-width: 800px;
    width: min(900px, 95vw);
    max-height: 92vh;
    border-radius: var(--radius-lg, 20px);
    position: relative;
    padding: clamp(1.25rem, 5vw, 2.5rem);
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0,0,0,0.15));
    overflow-y: auto;
}

.inquiry-modal-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.inquiry-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.inquiry-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.inquiry-modal-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inquiry-item-row {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: 0.75rem clamp(0.5rem, 2vw, 1rem); 
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.inquiry-item-row:hover {
    border-color: var(--primary-light, #e2e8f0);
    transform: translateY(-2px);
}

.inquiry-item-row img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.inquiry-item-info {
    flex: 1;
}

.inquiry-item-info h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inquiry-item-price {
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
    color: var(--text-main);
    margin-left: auto;
}

@media (max-width: 600px) {
    .inquiry-item-row {
        gap: 0.75rem;
    }
    
    .inquiry-item-row img {
        width: 50px;
        height: 50px;
    }
    
    .inquiry-item-info h4 {
        font-size: 0.85rem;
    }
    
    .inquiry-item-price {
        font-size: 0.95rem;
    }

    .inquiry-modal-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

.inquiry-modal-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.inquiry-total-box {
    display: flex;
    align-items: center; /* Better vertical centering for different sizes */
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: var(--bg-soft);
    padding: 1.25rem;
    border-radius: 12px;
}

.inquiry-total-box .label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
}

.inquiry-total-box .value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
}

@media (max-width: 480px) {
    .inquiry-total-box {
        padding: 1rem;
    }
    .inquiry-total-box .label {
        font-size: 1rem;
    }
    .inquiry-total-box .value {
        font-size: 1.4rem;
    }
}

.inquiry-footer-note {
    text-align: center;
    width: 100%;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid rgba(0,0,0,0.03);
    padding-top: 1rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Forms */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    background: var(--bg-alt);
}

.auth-card {
    background: var(--bg);
    padding: 3rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 450px;
}

.auth-card h2 {
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-card p {
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 0.75rem; /* Reduced from 1.5rem for tighter spacing */
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem; /* Slightly reduced label spacing */
    font-weight: 600;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.75rem; /* Adjusted padding */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
}

/* Password Input Wrapper for Toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 2.5rem; /* Space for the toggle button */
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 46%; /* Slightly up to center visually */
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--text);
}

.auth-btn {
    width: 100%;
    padding: 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
}

.auth-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-footer a {
    color: var(--accent);
    font-weight: 600;
}

.btn-text {
    background: none;
    border: none;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.85rem;
    gap: 0.2rem;
}

.sidebar-overlay,
.files-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

.sidebar-overlay.show,
.sidebar-overlay.active,
.files-overlay.active {
    opacity: 1;
    visibility: visible;
  pointer-events: auto;
}

.sidebar-overlay:not(.active):not(.show),
.files-overlay:not(.active) {
  pointer-events: none;
}

/* Sidebar Components */
.cart-sidebar,
.wishlist-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: min(450px, 90vw);
    height: 100vh;
    background: white;
  z-index: 9999;
    transform: translateX(100.1%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    visibility: hidden; /* Prevent interaction and scroll bleed */
}

body.sidebar-open {
  overflow: hidden;
}

.cart-sidebar.active,
.wishlist-sidebar.active {
    transform: translateX(0);
    visibility: visible;
}

@media (max-width: 480px) {
  .cart-sidebar,
  .wishlist-sidebar {
    width: min(400px, 92vw);
  }
}

.cart-sidebar .sidebar-header,
.wishlist-sidebar .sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.sidebar-header {
    padding: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.sidebar-header .sidebar-close-btn {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #ffffff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.sidebar-header .sidebar-close-btn:hover,
#closeSidebar:hover,
#closeWishlistSidebar:hover {
    transform: rotate(180deg) scale(1.1);
    color: var(--accent);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
  padding: clamp(0.45rem, 1vw, 0.6rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.sidebar-footer .total-row {
    display: flex;
  justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
  margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.sidebar-footer .sidebar-vat-note {
  display: block;
  margin-bottom: 0.75rem;
}

.sidebar-footer .total-row span:first-child {
    flex-shrink: 0;
}

.sidebar-footer .total-row span:last-child {
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.5rem;
}

.sidebar-buttons .btn-register,
.sidebar-buttons .add-to-cart {
    width: auto;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
}

.empty-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  min-height: 120px;
}
.empty-mini-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.empty-mini-icon--wishlist {
  color: #e11d48;
}
.empty-mini-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-weight: 600;
}
.empty-mini-cta {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 8px;
}

/* Mini Cart Item */
.mini-cart-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-right: 1.5rem; /* Space for remove button */
}

.mini-cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.mci-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
}

.mci-head {
  min-width: 0;
}

/* Cart item: direct grid children (img, mci-head, mixed-qty, mci-totals) */
.cart-sidebar .mini-cart-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.5rem 0.75rem;
}

.cart-sidebar .mini-cart-item img {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
}

.cart-sidebar .mini-cart-item .mci-head {
  grid-column: 2;
  grid-row: 1;
}

.cart-sidebar .mini-cart-item .mixed-qty-sidebar {
  grid-column: 2;
  grid-row: 2;
}

.cart-sidebar .mini-cart-item .mci-totals {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
  padding-top: 0.5rem;
}

.mci-totals {
    margin-top: 12px;
    border-top: 2px solid #e2e8f0;
    padding-top: 12px;
    margin-left: 0;
    width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}

.mci-pricing-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mci-stk-info {
    font-size: 0.75rem;
    color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mci-totals .mci-price {
  flex-shrink: 0;
}

.mci-info h4 {
    margin: 0;
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  line-clamp: 3;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.mci-qty {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.mci-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
}

.mci-sku-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  margin-bottom: 5px;
}

.mci-sku-row .mci-sku {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.mci-sku-row .sale-badge-mini {
  flex-shrink: 0;
}

.mci-wishlist-pricing {
    margin-top: 4px;
}

.mci-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mci-price-row .price-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sale-badge-mini {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.old-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 0.8rem;
}

.mci-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #ef4444;
  transition:
    transform 0.2s,
    color 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

/* Sidebar mini items: make image/title clickable without layout changes */
.mini-cart-item .mci-link {
  color: inherit;
  text-decoration: none;
}
.mini-cart-item .mci-link:hover h4 {
  color: var(--accent);
}

.mci-remove:hover {
    transform: scale(1.2);
    color: #b91c1c;
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Site Footer */
.site-footer {
  background: #0f172a;
  color: #cbd5e1;
    padding: 4rem 2rem 2rem;
    margin-top: 6rem;
    width: 100%;
  position: relative;
  overflow: hidden;
}

/* Gradient üst çizgi */
.site-footer::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 40%, #3b82f6 100%);
}

.site-footer h4 {
  color: #f1f5f9;
    font-weight: 700;
}

.site-footer a {
  color: #94a3b8;
}

.site-footer a:hover {
  color: #f1f5f9;
}

.footer-content {
    max-width: var(--container);
  margin: 0 auto 3rem;
    display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: start;
  column-gap: 3rem;
}

.footer-section {
    min-width: 0;
}

.footer-logo {
  color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: block;
    letter-spacing: -0.02em;
}

.footer-brand-block {
  margin-top: 0.25rem;
}

.footer-brand-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 0.5rem;
}

.footer-brand-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  display: block;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.6;
  max-width: 240px;
  margin-bottom: 0.75rem;
}

.footer-brand-email {
  display: inline-block;
  font-size: 0.85rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}
.footer-brand-email:hover {
  color: #f1f5f9;
}

/* footer-title: h4'e uygulanmış class — .footer-links h4 ile aynı stil */
.footer-title,
.footer-links h4 {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    padding-bottom: 0.75rem;
  color: #f1f5f9;
    display: inline-block;
}

.footer-title::after,
.footer-links h4::after {
  content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--accent);
}

/* footer-links-list: ul class — .footer-links ul ile aynı stil */
.footer-links-list,
.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.65rem;
}

.footer-links a {
    color: #94a3b8;
  transition:
    color 0.2s,
    padding-left 0.2s;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    line-height: 1.5;
}

.footer-links a:hover {
  color: #f1f5f9;
    padding-left: 5px;
}

/* Kontakt plain text items */
.footer-contact-item {
    color: #94a3b8;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    line-height: 1.5;
    margin-bottom: 0.65rem;
}

.no-results,
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 6rem 2rem;
    color: var(--text-muted);
    background: white;
    border-radius: var(--radius);
    border: 1px dashed var(--border);
}

.empty-state h3 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* --- Product Detail Page --- */
.product-detail-page .error,
.product-detail-container .error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}
.product-detail-page .error-catalog-link,
.product-detail-container .error-catalog-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.product-detail-page .error-catalog-link:hover,
.product-detail-container .error-catalog-link:hover {
    text-decoration: underline;
}

.detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.detail-brand {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.detail-brand:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1rem;
}
.detail-title-row .detail-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: clamp(1.2rem, 5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
}
.detail-wishlist-btn {
    flex-shrink: 0;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.detail-wishlist-btn:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.6);
    background: var(--bg-alt);
}
.detail-wishlist-btn.active {
    color: #ef4444;
    border-color: #ef4444;
}
.detail-wishlist-btn.active svg {
    fill: #ef4444;
    stroke: #ef4444;
}

.detail-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0.25rem 0 1rem;
    line-height: 1.1;
}

.detail-ean {
    margin-bottom: 0px;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.price-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #059669;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.25rem;
}

.price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}

.price-value small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.detail-description {
    margin: 2rem 0;
}

.detail-description h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.detail-description p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* .technical-grid + .tech-item: tek tanım aşağıda "Technical Details" bölümünde */

.tech-item {
    font-size: 0.95rem;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Kategori: 2 sütun grid — başlık solda, tag’ler değer sütununda; alta sarkma/hizalı değil */
.tech-item--categories {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
}
.tech-item--categories > strong {
  white-space: nowrap;
  font-size: inherit;
}
.tech-item--categories > .category-tags {
  min-width: 0;
  max-height: 4rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #e2e8f0) transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-content: flex-start;
  align-items: baseline;
}
.tech-item--categories > .category-tags::-webkit-scrollbar {
  width: 5px;
}
.tech-item--categories > .category-tags::-webkit-scrollbar-track {
  background: transparent;
}
.tech-item--categories > .category-tags::-webkit-scrollbar-thumb {
  background: var(--border, #e2e8f0);
  border-radius: 999px;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.category-tag {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: var(--bg-alt, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent, #1e3a8a);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

/* Technical grid: tag/label fluid — ara viewport’larda da taşma olmasın */
.technical-grid .category-tag {
  font-size: clamp(0.52rem, 1.15vw + 0.35rem, 0.72rem);
  padding: 0.07rem 0.36rem;
  border-radius: 999px;
  line-height: 1.35;
  box-sizing: border-box;
}
.technical-grid .tech-item--categories > .category-tags {
  gap: 0.18rem;
}
/* Kategori başlığı (.tech-item--categories > strong) diğer tech-item’larla aynı — font-size inherit */

.category-tag:hover {
  background: var(--accent, #1e3a8a);
  color: white;
  border-color: var(--accent, #1e3a8a);
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}
.status-badge.obsolete {
  background: #fee2e2;
  color: #991b1b;
}

.detail-ordering {
    margin-top: 3rem;
    padding: 2rem;
}

.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.pack-info {
    margin-top: 2rem;
    padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Related Products */
.related-products-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Wrapper: ok butonları + fade overlay pozisyonlaması */
.related-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  /* Padding: ok butonlarının kesilmemesi için alan açar */
  padding: 0 24px;
  margin: 0 -24px; /* Negative margin ile container hizasını korur */
}

/* Sol/sağ yumuşak geçiş — JS ile .show-left-fade / .show-right-fade class'ı eklenince görünür */
.related-slider-wrapper::before,
.related-slider-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.related-slider-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85), transparent);
}
.related-slider-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent);
}
/* Dinamik gösterim */
.related-slider-wrapper.show-left-fade::before {
  opacity: 1;
}
.related-slider-wrapper.show-right-fade::after {
  opacity: 1;
}

.related-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
  padding: 1.5rem 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
  /* scroll-behavior CSS'den kaldırıldı — JS'de behavior:'smooth' yeterli */
}

.related-slider::-webkit-scrollbar {
    display: none;
}

.related-slider .product-card {
  /* 4-sütun mantığı: ana sayfa product grid ile uyumlu, daha kompakt */
  min-width: clamp(150px, 20vw, 260px);
  flex: 0 0 clamp(150px, 20vw, 260px);
    scroll-snap-align: start;
}

/* Ok butonları */
.related-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  /* opacity ile gizleme — display:none yerine yumuşak geçiş sağlar */
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.3s ease;
}

.related-nav-btn:hover {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 16px rgba(30, 41, 59, 0.25);
  transform: translateY(-50%) scale(1.08);
}

.related-nav-prev {
  left: 0.5rem;
}

.related-nav-next {
  right: 0.5rem;
}

.related-products-section .section-header {
  margin-bottom: 1.5rem;
  min-width: 0;
}

.related-products-section .section-header h2 {
    font-size: clamp(0.95rem, 4.5vw, 1.75rem);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Glassmorphism Auth Pages --- */
.auth-body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #1e3a8a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  font-family: "Inter", sans-serif;
  padding: 2rem 1.25rem;
}

.auth-card-glass {
  view-transition-name: auth-card;
    width: 100%;
    max-width: 480px;
  margin: 0 auto;
    padding: 3.5rem;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2.5rem;
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: white;
    z-index: 2;
}

.auth-card-glass--wide {
  max-width: 680px;
  padding: 2.5rem 3rem;
}

/* ══════════════════════════════════════════
   REGISTER — sayfa özel kurallar
   ══════════════════════════════════════════ */

/*
  Register: kartı dikeyde ortala; form viewport’tan uzunsa body scroll (overflow-y).
  Mobilde .auth-body (max-width: 560px) flex-start ile üstten hizalamayı korur.
*/
.auth-body--register {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

/* Geniş tablet / küçük laptop: register kartı dar kalmayıp ekranla orantılansın */
@media (min-width: 768px) {
  .auth-body--register .auth-card-glass--wide {
    max-width: min(960px, 92vw);
    padding: 2.75rem 3.25rem;
  }
}

@media (min-width: 1100px) {
  .auth-body--register .auth-card-glass--wide {
    max-width: min(1024px, 88vw);
  }
}

/* Register logo — daha kompakt */
.auth-body--register .auth-logo {
  height: 64px;
  margin-bottom: 1.25rem;
}

/* Register alan arası boşluk — login ile tutarlı */
.auth-body--register .auth-field {
  margin-bottom: 0.85rem;
}

/* Register input yüksekliği — daha kompakt, form daha az yer kaplar */
.auth-body--register .auth-field .glass-input {
  height: 3rem;
  line-height: 3rem;
}

/*
  Register: input 3rem → label tam ortası = 1.5rem
  top:50% auth-field div'inin ortasına gider (error span eklenince kayar).
  Sabit piksel değeriyle sadece input'u referans alır.
*/
.auth-body--register .auth-field label {
  top: 1.5rem;
  transform: translateY(-50%);
}

.auth-body--register .auth-field .glass-input:focus,
.auth-body--register .auth-field .glass-input:not(:placeholder-shown) {
  line-height: 1.5;
  padding-top: 0.85rem;
}

/* Register toggle — input yüksekliğine göre ayarla */
.auth-body--register .auth-toggle-password {
  top: calc(3rem / 2);
}

/* ══════════════════════════════════════════
   LOGIN — sayfa özel kurallar
   ══════════════════════════════════════════ */

/* Dil seçici — sayfanın sağ üst köşesi */
.auth-lang-picker {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  will-change: transform;
  transform: translateZ(0);
}

.auth-lang-trigger {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: white !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 36px !important;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.auth-lang-trigger:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.auth-lang-trigger .lang-chevron {
  color: rgba(255, 255, 255, 0.7);
}

/* Login sayfası: her boyutta scroll olmadan ekranın tam ortasında */
.auth-body.auth-body--login {
  align-items: center;
  overflow: hidden;
  height: 100dvh;
  min-height: unset;
  padding: clamp(0.75rem, 3dvh, 2rem) 1.25rem;
  box-sizing: border-box;
}

/* Login kartı: padding ekrana göre küçülür */
.auth-body--login .auth-card-glass {
  padding: clamp(1.5rem, 4dvh, 3.5rem) clamp(1.5rem, 3vw, 3.5rem);
}

/* Login logosu: ekrana göre küçülür */
.auth-body--login .auth-logo {
  height: clamp(48px, 8dvh, 80px);
  margin-bottom: clamp(0.75rem, 2dvh, 2rem);
}

/* Login h2: ekrana göre küçülür */
.auth-body--login .auth-card-glass h2 {
  font-size: clamp(1.35rem, 3dvh, 2rem);
  margin-bottom: clamp(0.6rem, 1.8dvh, 1rem);
}

/* Login tagline: ekrana göre küçülür
   Seçici güçlendirildi (.auth-card-glass p specificity'sini geçmek için) */
.auth-body--login .auth-card-glass .auth-tagline {
  font-size: clamp(0.78rem, 1.5dvh, 0.95rem);
  margin-bottom: clamp(0.6rem, 1.8dvh, 1.2rem);
}

/* Login input yüksekliği: ekrana göre küçülür */
.auth-body--login .auth-field .glass-input {
  height: clamp(2.8rem, 6dvh, 3.5rem);
  line-height: clamp(2.8rem, 6dvh, 3.5rem);
}

/*
  Login: input clamp(2.8rem, 6dvh, 3.5rem) → label tam ortası = clamp / 2
  top:50% auth-field div'inin (input + error span) ortasına giderdi — kayıyordu.
*/
.auth-body--login .auth-field label {
  top: clamp(1.4rem, 3dvh, 1.75rem);
  transform: translateY(-50%);
}

/* Toggle butonu: input yüksekliğinin tam ortasına sabitlenir */
.auth-body--login .auth-toggle-password {
  top: calc(clamp(2.8rem, 6dvh, 3.5rem) / 2);
}

.auth-body--login .auth-field .glass-input:focus,
.auth-body--login .auth-field .glass-input:not(:placeholder-shown) {
  line-height: 1.5;
  padding-top: clamp(0.75rem, 1.5dvh, 1rem);
}

/* Login alanlar arası boşluk */
.auth-body--login .auth-field {
  margin-bottom: clamp(0.4rem, 1.2dvh, 0.85rem);
}

/* Login form row (remember me) */
.auth-body--login .auth-form-row {
  margin-bottom: clamp(0.5rem, 1.5dvh, 1.25rem);
}

/* Login buton */
.auth-body--login .glass-btn {
  padding: clamp(0.65rem, 1.6dvh, 0.9rem);
}

/* Login footer */
.auth-body--login .auth-footer-text {
  margin-top: clamp(0.6rem, 1.8dvh, 1.5rem);
}

.auth-logo {
    height: 80px;
    width: auto;
    display: block;
    margin: 0 auto 2rem;
  /* JPEG beyaz arka planını lacivert üstünde karıştır */
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

/* "Passwort vergessen?" buton görünümlü link */
.auth-forgot-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.auth-forgot-btn:hover {
  color: white;
}

/* ── Floating Label Field ── */
.auth-field {
  position: relative;
  margin-bottom: 1rem;
}

.auth-field .glass-input {
  margin-bottom: 0;
  height: 3.5rem;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  line-height: 3.5rem; /* tek satır tam ortada */
}

/* Dolu / focus durumda label yukarı çıktığında yazıya üst alan aç */
.auth-field .glass-input:focus,
.auth-field .glass-input:not(:placeholder-shown) {
  padding-top: 1rem;
  padding-bottom: 0;
  line-height: 1.5;
}

.auth-field label {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition:
    top 0.18s ease,
    font-size 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

/* Input dolu veya focus'ta label yukarı kayar */
.auth-field .glass-input:focus + label,
.auth-field .glass-input:not(:placeholder-shown) + label {
  top: 0.6rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  transform: none;
}

/* Hata durumu */
.auth-field .glass-input.error,
.glass-input.error {
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(248, 113, 113, 0.08);
}

.auth-field-error {
  display: block;
  font-size: 0.8rem;
  color: #fca5a5;
  min-height: 1.2rem;
  margin-top: 0.2rem;
  padding-left: 0.25rem;
  line-height: 1.3;
}

/* Alan altı ipucu (hint) */
.auth-field-hint {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.2rem;
  padding-left: 0.25rem;
  line-height: 1.3;
}

/*
  Hint span'ı flow içinde olduğunda auth-field div yüksekliği artar.
  Bu, label'ın top:50% hesabını bozar — placeholder görsel olarak aşağı kayar.
  Çözüm: hint içeren alanlarda label'ı inputun gerçek ortasına sabitle.
  Register: input 3rem → top = 1.5rem
  Base (login): input 3.5rem → top = 1.75rem
*/
.auth-field:has(.auth-field-hint) label {
  top: 1.5rem;
  transform: translateY(-50%);
}

.auth-body--login .auth-field:has(.auth-field-hint) label {
  top: 1.75rem;
  transform: translateY(-50%);
}

/* Dolu/focus durumunda hint'li label da yukarı kayar */
.auth-field:has(.auth-field-hint) .glass-input:focus + label,
.auth-field:has(.auth-field-hint) .glass-input:not(:placeholder-shown) + label {
  top: 0.6rem;
  transform: none;
}

/* Opsiyonel etiket */
.auth-optional {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  margin-left: 0.15rem;
}

/* ── Custom Country Dropdown ── */
.auth-country-dropdown {
  position: relative;
}

/* Margin-collapse kaynaklı spacing sapmalarını engelle (dropdown + section label arası) */
#countryDropdown {
  display: flow-root;
}

/* Trigger butonu — glass-input ile aynı görünüm */
.auth-country-trigger {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Label (Land) için üstte yer bırak */
  padding: 1.15rem 2.5rem 0 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  color: white;
  font-size: 0.95rem;
  font-family: "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
  box-sizing: border-box;
}

.auth-country-trigger:focus,
.auth-country-dropdown.open .auth-country-trigger {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.13);
}

/* Chevron — trigger'ın tam ortasına sabitlenir (3rem / 2 = 1.5rem) */
.auth-select-chevron {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition:
    transform 0.22s ease,
    color 0.2s;
}

.auth-country-dropdown.open .auth-select-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: white;
}

/* Label — her zaman yukarıda */
.auth-select-label {
  top: 0.45rem !important;
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transform: none !important;
  pointer-events: none;
}

/* Dropdown listesi — trigger yüksekliğinden (3rem) hemen altına açılır */
.auth-country-menu {
  position: absolute;
  top: calc(3rem + 6px);
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top center;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.auth-country-dropdown.open .auth-country-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}

/* Her seçenek */
.auth-country-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
  user-select: none;
}

.auth-country-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.auth-country-option.active {
  background: rgba(37, 99, 235, 0.25);
  color: white;
  font-weight: 600;
}

.auth-country-option .country-flag {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Password field wrapper */
.auth-password-wrapper {
  position: relative;
}

.auth-password-input {
  padding-right: 3rem;
}

.auth-toggle-password {
  position: absolute;
  right: 1rem;
  top: calc(3.5rem / 2);
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.auth-toggle-password:hover,
.auth-toggle-password.active {
  color: white;
}

/* Remember me row */
.auth-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  gap: 0.5rem;
}

.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
}

.auth-remember-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.auth-forgot-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.auth-forgot-link:hover {
  color: white;
}

/* Register grid */
.auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  align-items: start; /* Her hücre kendi yüksekliğine göre hizalanır, asimetri olmaz */
}

.auth-grid-2 .auth-field {
  margin-bottom: 1rem;
}

/* Grid içindeki hata alanı global min-height'ı miras alır */

/* Checkbox row */
.auth-checkbox-row {
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}

.auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.auth-checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Footer links */
.auth-footer-text {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.auth-link-bold {
  color: white;
    font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}

.auth-link-bold:hover {
  opacity: 0.8;
}

.auth-back-link-wrap {
  margin-top: 0.75rem;
    text-align: center;
  font-size: 0.85rem;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.auth-back-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.auth-back-link:hover {
  color: white;
}

.auth-back-link:hover svg {
  transform: translateX(-3px);
}

/* Zorunlu alan * işareti */
.auth-required {
  color: rgba(252, 165, 165, 0.9);
  margin-left: 0.2rem;
  font-weight: 700;
  font-size: 0.85em;
}

/* Zorunlu alan notu — butonun altında, formu kapatır */
.auth-required-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.5rem;
  margin-bottom: 0;
    text-align: center;
  letter-spacing: 0.01em;
}

/* Bölüm başlıkları (register) */
.auth-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* İlk bölüm başlığında üst margin olmasın */
.auth-section-label:first-of-type {
  margin-top: 0.4rem;
}

/* Register: Bölüm başlıkları öncesi boşluk ritmini normalize et
   Not: Vergi başlığından önceki ülke dropdown'ı (#countryDropdown) dahil etmeyelim;
   çünkü o eleman spacing'i "diğer boşluklara eşitleme" kuralından bağımsız olmalı. */
.auth-field:not(#countryDropdown):has(+ .auth-section-label) {
  margin-bottom: 0 !important;
}

.auth-grid-2:has(+ .auth-section-label) .auth-field:last-child,
.auth-grid-3:has(+ .auth-section-label) .auth-field:last-child {
  margin-bottom: 0 !important;
}

/* PLZ + Ort 3 sütun grid (1fr 2fr) */
.auth-grid-3 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 1rem;
  align-items: start;
}

.auth-grid-3 .auth-field {
  margin-bottom: 1rem;
}

/* Horizontal Quantity Pickers in Sidebar */
/* Quantity Picker Refinements */
.qty-btn-mini:hover {
    background: #f8fafc;
    border-color: var(--accent);
    color: var(--accent);
}

.cart-item button:hover {
    background: #e2e8f0;
}

/* Amazon Marketplace Button */
.amazon-marketplace-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(to bottom, #f7dfa1, #f0c14b);
    border: 1px solid;
    border-color: #a88734 #9c7e31 #846a29;
    color: #111;
    text-decoration: none;
    padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 8px;
    margin-bottom: 1.25rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 1px 0 rgba(0, 0, 0, 0.1);
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 600;
    transition: all 0.2s ease;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.amazon-marketplace-btn:hover {
    background: linear-gradient(to bottom, #f5d78e, #eeb91b);
    border-color: #a88734 #9c7e31 #846a29;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.amazon-marketplace-btn img {
    height: 18px;
    margin-top: 4px;
}

.amazon-marketplace-btn span {
    line-height: 1;
}

/* Mixed Quantity Adjusters */
.mixed-qty-sidebar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 8px;
    background: var(--bg-alt);
    padding: 0.5rem;
    border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.cart-sidebar .mixed-qty-sidebar {
  min-width: 0;
  overflow: hidden;
}

.mixed-qty-sidebar .unit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mixed-qty-sidebar .unit-label-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.mixed-qty-sidebar .unit-label-group span {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.mixed-qty-sidebar .unit-label-group small {
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.mixed-qty-sidebar .unit-adjuster {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border-radius: 4px;
    padding: 2px;
    border: 1px solid var(--border);
}

.mixed-qty-sidebar .unit-adjuster button {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 14px;
    border: none;
    background: transparent;
    color: var(--text);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.mixed-qty-sidebar .unit-adjuster button:hover {
    background-color: var(--bg-alt);
    color: var(--primary);
}

.mixed-qty-sidebar .unit-adjuster button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mixed-qty-sidebar .unit-adjuster strong {
    font-size: 0.8rem;
    min-width: 16px;
    text-align: center;
}

.mixed-qty-cart {
    display: flex;
    gap: 1.5rem;
    background: #f8fafc;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
}

.mixed-qty-cart .unit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mixed-qty-cart label {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}

.mixed-qty-cart .unit-adjuster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mixed-qty-cart .unit-adjuster button {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.mixed-qty-cart .unit-adjuster button:hover {
    background: var(--accent);
    color: white;
}

.mixed-qty-cart .unit-adjuster button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mixed-qty-cart .unit-adjuster span {
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    color: var(--text);
}

.auth-card-glass h2 {
    font-size: 2rem;
    font-weight: 800;
  margin-bottom: 0.75rem;
    text-align: center;
  color: white;
}

.auth-card-glass p {
    text-align: center;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.account-content .glass-input {
    background: #f1f5f9;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

.account-content .glass-input:read-only {
    background: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
}

.account-content .glass-input::placeholder {
    color: #1e293b;
}

.brand-item.active .brand-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Brand Blocks in Category */
.brand-blocks-container {
  /* display:none yerine grid + max-height:0 — böylece CSS transition çalışır */
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  padding: 0;
    background: linear-gradient(to bottom, #fafbfc, #f8fafc);
    max-height: 0;
    overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease;
}

/* Always show in standalone Marken sidebar group */
#brandsGroup .brand-blocks-container {
    max-height: none;
    overflow: visible;
  opacity: 1;
    background: transparent;
    padding: 0.25rem 0;
}

.category-item.expanded .brand-blocks-container {
  /* ~20 marka × 2 kolon × ~80px kart ≈ 800px; 1200px yeterli ve performanslı */
  max-height: 1200px;
  opacity: 1;
  padding: 0.5rem;
}

.brand-block {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.brand-block:hover,
.brand-block.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    border-color: var(--accent);
    background: #eff6ff;
}

.brand-block.active .brand-block-name {
    color: var(--accent);
}

.brand-block.active .brand-block-count {
    color: var(--accent);
    opacity: 0.8;
}

/* Category Icons */
.category-label .category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  flex-shrink: 0;
  margin-right: 0;
    color: #64748b;
    transition: color 0.2s;
}

.category-label:hover .category-icon {
    color: var(--accent);
}

/* Aktif (expanded) durumda icon beyaz */
.category-item.expanded .category-label .category-icon {
    color: white;
}

.category-item.expanded .category-label:hover .category-icon {
  color: rgba(255, 255, 255, 0.85);
}

/* brand-category-btn — marken butonu artık ayrı .marken-btn class ile yönetiliyor */

/* Sidebar Marken Dropdown */
.sidebar-marken-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

.marken-dropdown-wrapper {
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.marken-dropdown-wrapper:last-child {
    border-bottom: none;
}

.marken-btn {
    width: 100%;
    height: 44px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* In den Warenkorb butonuyla aynı arka plan rengi */
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0 1.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
  transition:
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.marken-btn:hover {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}

.marken-btn::after {
  content: "";
    width: 10px;
    height: 10px;
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.marken-dropdown-wrapper.expanded .marken-btn {
    background: #1e293b;
    box-shadow: none;
}

.marken-dropdown-wrapper.expanded .marken-btn::after {
    transform: rotate(180deg);
}

.marken-menu {
    position: static;
    width: 100%;
    box-sizing: border-box;
  /* overflow:hidden + max-height ile gizleme — visibility gereksiz */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease;
}

.marken-dropdown-wrapper.expanded .marken-menu {
    max-height: 1000px;
    opacity: 1;
    padding: 0.5rem 0 1rem;
}

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.pagination-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-weight: 700;
    color: var(--text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 0.95rem;
}

.pagination-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #f8faff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.pagination-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 42px;
  color: var(--text-secondary, #64748b);
  font-weight: 600;
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
}

.pagination-arrow {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-arrow:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: var(--primary);
}

.pagination-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.brand-block-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.brand-block:hover .brand-block-name {
    color: var(--accent);
}

.brand-block-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.glass-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.95rem;
  font-family: "Inter", sans-serif;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.glass-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.13);
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-btn {
  background: var(--accent);
  color: white;
    font-weight: 700;
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    border: none;
    cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
}

.glass-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-hover);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.5);
}

/* Back Button Styling in Product Detail */
.back-link {
    display: inline-flex;
    align-items: center;
    width: fit-content; /* Ensure it only takes needed width */
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--text);
    background-color: white;
    border: 1px solid var(--border);
    border-radius: 8px; /* Slightly rounded corners */
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 1rem; /* Space below the button */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-top: 1rem; /* Add some space from header */
}

.back-link:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1; /* Slightly darker border on hover */
    color: var(--primary);
    transform: translateX(-3px); /* Movement to left indicating "back" */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.back-link svg {
    transition: transform 0.2s ease;
}

.back-link:hover svg {
    transform: translateX(-2px);
}

/* Modern Product Detail Page Styles */
.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(320px, 3fr);
    gap: 1.5rem;
    padding: 2rem 0 3rem;
    align-items: start;
    margin-bottom: 3rem;
}

/* Image Section — gallery wrapper */
.product-detail-left {
  position: sticky;
  top: 140px;
  max-width: min(100%, clamp(400px, 36vw, 560px));
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: visible;
  z-index: 5;
}

.detail-gallery-main {
  background: white;
  border-radius: 1rem;
  padding: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  aspect-ratio: 1 / 1;
  max-height: min(65vh, 560px);
  max-width: min(100%, 560px);
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: zoom-in;
  flex-shrink: 0;
}

/* Rozetler: sol üst (Neu, Angebot) — resim boyutuna uyumlu */
.detail-gallery-badges {
  position: absolute;
  top: clamp(6px, 1.2vw, 14px);
  left: clamp(6px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  z-index: 6;
  pointer-events: none;
}
.detail-gallery-badges .badge-new {
  font-size: clamp(0.45rem, 1.1vw, 0.65rem);
  padding: clamp(0.15rem, 0.4vw, 0.28rem) clamp(0.22rem, 0.55vw, 0.5rem);
  border-radius: clamp(4px, 0.4vw, 6px);
}
/* Sol üstteki ANGEBOT rozeti — kartlarla aynı (product-badge içindeki gibi), sağ alt kuralı burada geçersiz */
.detail-gallery-badges .sale-label-inline {
  position: static;
  display: inline-block;
  font-size: clamp(0.45rem, 1.1vw, 0.65rem);
  padding: clamp(0.15rem, 0.4vw, 0.28rem) clamp(0.22rem, 0.55vw, 0.5rem);
  border-radius: clamp(4px, 0.4vw, 6px);
  background: #ef4444;
  color: white;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* % indirim sağ alt — kartlarla aynı (image-badge-sale) */
.detail-gallery-main .detail-gallery-sale-percent {
  position: absolute;
  bottom: clamp(6px, 1.2vw, 14px);
  right: clamp(6px, 1.2vw, 14px);
  left: auto;
  top: auto;
  z-index: 6;
}
.detail-gallery-main .detail-gallery-sale-percent .sale-percent {
  display: block;
  line-height: 1;
}

/* Like butonu: foto üzerinde sağ üst, boyuta uyumlu */
.detail-gallery-wishlist-btn {
  position: absolute;
  top: clamp(6px, 1.2vw, 14px);
  right: clamp(6px, 1.2vw, 14px);
  width: clamp(32px, 8vw, 44px);
  height: clamp(32px, 8vw, 44px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-muted);
  cursor: pointer;
  z-index: 6;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.detail-gallery-wishlist-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(255, 220, 220, 0.6);
  transform: scale(1.05);
}
.detail-gallery-wishlist-btn.active {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(255, 255, 255, 0.95);
}
.detail-gallery-wishlist-btn.active svg {
  fill: #ef4444;
  stroke: #ef4444;
}
.detail-gallery-wishlist-btn svg {
  width: clamp(16px, 4vw, 22px);
  height: clamp(16px, 4vw, 22px);
}

.detail-gallery-thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow: visible;
  padding: 0.15rem 0;
  min-height: 48px;
  justify-content: flex-start;
}

.detail-gallery-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-gallery-thumb:hover {
  border-color: var(--border);
}

.detail-gallery-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.detail-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Wishlist Modern Header */
.wishlist-header-modern {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the title by default */
    gap: 1rem; /* Tighter gap */
    margin-bottom: 2rem;
    padding: 0 0.5rem;
}

.wishlist-title-with-count {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title */
    gap: 1rem;
    font-size: 2rem;
    width: 100%;
    order: 2; /* Title below the button */
}

.wishlist-header-modern .back-link {
    align-self: flex-start; /* Move back link to the left */
    margin-top: 0;
    order: 1; /* Button on top */
}

.title-count-badge {
    background: var(--bg-alt);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
}

.detail-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  transition:
    transform 0.3s ease,
    transform-origin 0.1s ease-out; /* Smooth origin shift */
    border-radius: 0.5rem;
}

/* Kenar zoom: önizleme kutusu (Amazon tarzı), ana görselde scale yok */
.detail-zoom-preview {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.75rem;
  width: 320px;
  height: 320px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10;
}

.detail-zoom-preview.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Zoom img: aynı oran (contain), kesilme yok — Amazon tarzı */
.detail-zoom-preview-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 250%;
  height: 250%;
  max-width: none;
  object-fit: contain;
  object-position: 0 0;
  display: block;
}

/* Tablet/telefonda kenar zoom yok; tap → lightbox kullanılır */
@media (hover: none) {
  .detail-zoom-preview {
    display: none !important;
  }
}

.detail-main-image {
    cursor: zoom-in;
}

/* Fullscreen image lightbox */
.image-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1.5rem;
}

/* Standardize kutu: farklı boyuttaki resimler aynı alanda, geçişte sıçrama yok */
.image-lightbox-content {
    position: relative;
    width: min(90vw, 900px);
    height: min(85vh, 80vmin);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

.image-lightbox-counter {
    position: absolute;
    bottom: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.image-lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
  transition:
    background 0.2s ease,
    transform 0.1s ease;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.image-lightbox-prev,
.image-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
    z-index: 1;
}

.image-lightbox-prev:hover,
.image-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
}

.image-lightbox-prev {
    left: 1rem;
}

.image-lightbox-next {
    right: 1rem;
}

@media (max-width: 640px) {
    .image-lightbox-overlay {
        padding: 1rem;
    }

    .image-lightbox-close {
        top: -2.2rem;
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.2rem;
    }
}

/* Info Section */
.product-detail-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.product-detail-right .add-to-cart {
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ... existing code ... */

/* Technical Details — büyük ekranda 3–4 sütun, küçüldükçe en az 2 sütun */
.technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
    container-type: inline-size;
    container-name: tech-grid;
}
.technical-grid .tech-item {
    min-width: 0;
    overflow-wrap: break-word;
    font-size: clamp(0.72rem, 1.2vw + 0.5rem, 0.95rem);
}

/* Kategori tam genişlik grid 3+ sütun olduğunda */
@container tech-grid (min-width: 660px) {
    .tech-item--categories {
        grid-column: 1 / -1;
    }
}

/* Dar alanda kategori: rem ile tutarlı yükseklik, ara genişliklerde de taşma olmasın */
@container tech-grid (max-width: 520px) {
    .tech-item--categories > .category-tags {
        max-height: 3.85rem;
        padding-bottom: 0.22rem;
    }
    .technical-grid .category-tag {
        font-size: clamp(0.5rem, 2.2cqw, 0.66rem);
        padding: 0.06rem 0.3rem;
    }
}
@container tech-grid (max-width: 420px) {
    .tech-item--categories > .category-tags {
        max-height: 3.6rem;
        padding-bottom: 0.2rem;
    }
    .technical-grid .category-tag {
        font-size: 0.52rem;
        padding: 0.06rem 0.28rem;
    }
}

/* ... existing code ... */

/* Ordering Card */
.detail-ordering.card-glass {
    background: white;
    border: 2px solid var(--accent); /* Highlight border */
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin: 1.5rem 0 2rem 0;
}

.ordering-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.detail-ordering .product-price {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.detail-ordering .price-label {
    display: block;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: #059669; /* Diğer kartlardaki yeşil fiyat etiketiyle aynı */
    margin-bottom: 0.1rem;
    white-space: nowrap;
}

.detail-ordering .price-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.detail-ordering .price-value span,
.detail-ordering .price-value small {
    white-space: nowrap;
}

.detail-availability {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    text-align: right;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
}

.detail-availability-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.detail-availability-label span:last-child {
    white-space: nowrap;
}

.detail-availability-label .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.detail-availability-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
}

.detail-availability-value strong {
    font-size: 1rem;
}

.detail-availability-value span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.detail-availability-low .detail-availability-label .dot {
    background-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.detail-availability-low .detail-availability-value strong {
    color: #f97316;
}

.detail-availability-medium .detail-availability-label .dot {
    background-color: #eab308;
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.18);
}

.detail-availability-medium .detail-availability-value strong {
    color: #eab308;
}

@media (max-width: 425px) {
    .ordering-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .detail-ordering .product-price {
        width: 100%;
    }

    .detail-availability {
        justify-content: flex-start;
        text-align: left;
    }
}

.detail-ordering .price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.detail-ordering .price-main {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}

/* Detay sayfasında ordering elemanları daha büyük */
.detail-ordering .qty-input {
  width: 80px;
  height: 44px;
  font-size: 1rem;
  padding: 0.5rem;
}
.detail-ordering .unit-select {
  height: 44px;
  font-size: 0.95rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background-size: 0.9rem;
  background-position: right 0.6rem center;
}
.detail-ordering .qty-control label,
.detail-ordering .unit-control label {
  font-size: 0.72rem;
}

.detail-ordering .add-to-cart {
    width: 100%;
    padding: 1rem;
  font-size: 1rem;
    margin-top: 1rem;
}

.detail-ordering .price-preview {
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    font-weight: 700;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.status-badge.active {
  background: #dcfce7;
  color: #166534;
}
.status-badge.discontinued {
  background: #fee2e2;
  color: #991b1b;
}

/* Profile Save Button */
.btn-save-profile {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.8rem 2.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.btn-save-profile:hover {
    background: #1d4ed8; /* Darker accent */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}
/* Default state for mobile components on desktop */
.mobile-filter-btn,
.close-filters-btn {
    display: none;
}

/* --- Modern Cart Overhaul Styles --- */

.cart-page-modern {
    max-width: 1400px;
    margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem);
}

/* Checkout Stepper */
.checkout-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    gap: 0.5rem;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.checkout-stepper .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.checkout-stepper .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid var(--border);
}

.checkout-stepper .step.active .step-num {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.checkout-stepper .step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checkout-stepper .step.active .step-label {
    color: var(--accent);
}

.checkout-stepper .step-line {
    flex: 1;
    min-width: 15px; /* Ensure it stays visible */
    max-width: 60px;
    height: 2px;
    background: var(--border);
    margin-top: -1.5rem;
}

.checkout-stepper .step.completed .step-num {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.checkout-stepper .step.completed .step-label {
    color: var(--text-muted);
}

/* Hinweis: Filter sind klickbar */
.inquiry-filters-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Inquiry filters: stepper görünümü (Warenkorb ile aynı), tıklanabilir butonlar */
.inquiry-filters--stepper.checkout-stepper {
    margin-bottom: 0px; /* Eliminated large bottom margin */
}

.inquiry-filters--stepper .step {
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.inquiry-filters--stepper .step:hover {
    background-color: var(--bg-alt, #f1f5f9);
}

.inquiry-filters--stepper .step:hover .step-num {
    border-color: var(--accent);
}

.inquiry-filters--stepper .step:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}

.inquiry-filters--stepper .step.active:hover .step-num {
    border-color: var(--accent);
    background-color: var(--accent);
    color: white;
}

.inquiry-filters--stepper .step .step-num:first-child:only-of-type {
    font-size: 0.65rem;
}

/* Inquiry modal: Auftrags-Details stepper */
.inquiry-detail-stepper {
    margin-bottom: 2rem;
}

/* Status Tracker (Inquiries Page) - legacy, artık checkout-stepper kullanılıyor */
.status-tracker-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding: 2rem 1.5rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.status-tracker-modern .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  position: relative;
}

.status-tracker-modern .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  z-index: 2;
  transition: all 0.3s ease;
}

.status-tracker-modern .step.active .step-num {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.status-tracker-modern .step.completed .step-num {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

.status-tracker-modern .step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.status-tracker-modern .step.active .step-label {
  color: var(--primary);
}

.status-tracker-modern .step-date {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: -2px;
}

.status-tracker-modern .step-line {
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: var(--border-light);
  z-index: 1;
}

.status-tracker-modern .step:last-child .step-line {
  display: none;
}

.status-tracker-modern .step.completed .step-line {
  background: #22c55e;
}

/* 2-Column Content Layout — summary moves below at 1024px so Bestellübersicht stays under prices */
.cart-content-layout {
    display: grid;
  grid-template-columns: 1fr minmax(280px, 350px);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
    min-height: 400px;
}

@media (max-width: 1024px) {
  .cart-content-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cart-summary-sidebar {
    position: static;
    padding-top: 0;
    order: 1;
  }
  .cart-items-column {
    order: 0;
  }
  .summary-card-sticky {
    position: static;
  }
}

.cart-items-column {
    min-width: 0;
}

.cart-summary-sidebar {
  position: relative;
  padding-top: 0;
  min-width: 0;
}

.cart-header-modern {
    margin-bottom: 2rem;
}

.cart-header-centered {
  display: flex;
  justify-content: center;
  align-items: center;
    margin-bottom: 3rem;
    width: 100%;
  gap: 0.5rem;
}

.cart-header-centered h2,
.cart-header-centered h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text);
  margin: 0;
}

.cart-header-centered .header-count {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-muted);
  flex-shrink: 0;
}

.header-count {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-muted);
}

.btn-back-soft {
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1rem;
    transition: color 0.2s;
}

.btn-back-soft:hover {
    color: var(--accent);
}

/* Cart Item Rows */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-item-row {
    background: white;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.cart-item-row:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

/* Wishlist sidebar: inline Menge + Einheit + mini cart button */
.mci-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  gap: 0.5rem;
}

.mci-order-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mci-order-qty {
  width: 52px;
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
  text-align: center;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.mci-order-unit {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 1.4rem 0.2rem 0.4rem;
  font-size: 0.78rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background-color: #fff;
}

.mci-order-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.mci-order-btn:hover:not(:disabled) {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.mci-order-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.mci-order-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.mci-order-btn.in-cart-state {
  background: #16a34a; /* green-600 tarzı */
  color: #ffffff;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
  animation: wishlist-cart-confirm 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.mci-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mci-btn-icon--check svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Wishlist cart confirm animation: güçlü ama kısa onay efekti */
.mci-order-btn.in-cart-state .mci-btn-icon {
  animation: wishlist-cart-icon-bounce 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes wishlist-cart-confirm {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.0);
  }
  40% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.25);
  }
  70% {
    transform: scale(1.0);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  }
  100% {
    transform: scale(1.0);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.0);
  }
}

@keyframes wishlist-cart-icon-bounce {
  0% {
    transform: translateY(2px) scale(0.8);
    opacity: 0;
  }
  40% {
    transform: translateY(-1px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .mci-order-qty,
  .mci-order-unit {
    font-size: 0.72rem;
  }

  .mci-order-btn {
    width: 28px;
    height: 28px;
  }
}

.cart-item-image-wrapper {
    width: 120px;
    height: 120px;
    background: var(--bg-alt);
    border-radius: 1rem;
    overflow: hidden;
}

.cart-item-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.cart-item-image-wrapper img,
.cart-item-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding-right: 1.5rem; /* Reduced space for remove button */
    min-width: 0;
  overflow-x: hidden;
}

.cart-item-info-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.title-group h4 {
    margin: 0;
    font-size: clamp(0.875rem, 2.5vw + 0.5rem, 1.25rem);
    font-weight: 700;
    color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-group .cart-item-title-link {
  color: inherit;
  text-decoration: none;
}

.title-group .cart-item-title-link:hover h4 {
  color: var(--accent);
}

.item-brand {
    flex: 1 1 0%;
    min-width: 0;
    font-size: clamp(0.75rem, 2vw + 0.4rem, 0.95rem);
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-brand:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.brand-price-row {
    display: flex;
    align-items: center;
  gap: clamp(0.35rem, 1.5vw, 1rem);
    margin-top: 0.35rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.brand-divider {
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 400;
  margin: 0 0.35rem;
}

.unit-price {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text);
  font-size: clamp(0.75rem, 1.8vw + 0.4rem, 0.95rem);
  white-space: nowrap;
}

.unit-price small {
    color: var(--text-muted);
    font-weight: 400;
}

/* Sale Pricing Styles */
.sale-price-tag {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: 12px;
    border: 1px solid #fee2e2;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05);
}

.discount-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    letter-spacing: -0.02em;
}

.price-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.current-price-sale {
    color: #ef4444;
    font-weight: 800;
    font-size: 1.35rem;
}

/* Sale badge: .product-badge içinde badge-new ile alt alta */
.sale-label-inline {
  display: inline-block;
    background: #ef4444;
    color: white;
  font-size: clamp(0.48rem, 0.65vw, 0.7rem);
  padding: clamp(0.18rem, 0.3vw, 0.35rem) clamp(0.28rem, 0.5vw, 0.65rem);
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

.image-badge-sale {
    position: absolute;
  bottom: clamp(5px, 1vw, 12px);
  right: clamp(5px, 1vw, 12px);
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
  padding: clamp(0.2rem, 0.35vw, 0.45rem) clamp(0.28rem, 0.5vw, 0.65rem);
    border-radius: 8px;
    font-weight: 800;
  font-size: clamp(0.58rem, 0.8vw, 0.9rem);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    z-index: 5;
    animation: badgePulse 2.5s infinite ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

@keyframes badgePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Detail: yüzde rozeti sağ üst — resim boyutuna göre ölçeklenir */
.detail-badge {
  top: clamp(8px, 1.5vw, 20px);
  right: clamp(8px, 1.5vw, 20px);
  left: auto;
  bottom: auto;
  padding: clamp(0.4rem, 1.2vw, 0.65rem) clamp(0.5rem, 1.5vw, 0.85rem);
  font-size: clamp(0.75rem, 2.2vw, 1.1rem);
    width: auto;
    height: auto;
    min-width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-badge .sale-percent {
    display: block;
    line-height: 1;
}

/* Detail sayfasında ANGEBOT sadece .detail-gallery-badges içinde sol üstte; bu kural artık kullanılmıyor (galeri rozetleri kendi stillerine sahip). */

/* Consolidated Inline Pricing */
.old-price-inline {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.35rem;
}

.current-price-inline {
    font-weight: 700;
}

.current-price-inline.is-sale {
    color: #ef4444;
    font-weight: 800;
}

.price-value {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.2rem;
}

.price-value span,
.price-value small {
    white-space: nowrap;
}

/* Kart içi price-value bloğu — normal ve angebotlu */
.product-card .price-value {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.15rem;
  overflow: hidden;
  max-width: 100%;
}
.product-card .current-price-inline {
  font-size: 0.88rem;
  white-space: nowrap;
}
.product-card .old-price-inline {
  font-size: 0.68rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.product-card .price-value small {
  font-size: 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Kart içi price-preview (Gesamt) — kart scope'unda güvence altına al */
.product-card .price-preview {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.1rem 0;
}
/* Tablet varsayılan 4-sütun */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-card .price-preview {
    font-size: 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   data-cols bazlı kompakt kurallar
   Strateji:
   • Global (cihaz bağımsız) temel boyutlar burada
   • PC (≥1025px) overrideları ayrı @media bloğunda → tam yazı, yan yana
   • Tablet (768–1024px) overrideları → 5/6-col'da alt alta
   • Mobil (<768px) overrideları → tüm kartlarda alt alta + kısaltmalar
═══════════════════════════════════════════════════════════════════════════ */

/* ── 5 sütun – temel (tüm cihazlar): buton kompakt + ortalı ────────────── */
.product-grid[data-cols="5"] .product-card .add-to-cart {
  padding: 0.35rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* ── 6 sütun – temel (tüm cihazlar) ───────────────────────────────────── */
.product-grid[data-cols="6"] .product-card .unit-select {
  font-size: 0.68rem;
  padding: 0.28rem 1.2rem 0.28rem 0.35rem;
  height: 28px;
  background-size: 0.65rem;
}
.product-grid[data-cols="6"] .product-card .qty-input {
  width: 40px;
  height: 28px;
  font-size: 0.72rem;
  padding: 0.28rem 0.2rem;
}
.product-grid[data-cols="6"] .product-card .qty-control label,
.product-grid[data-cols="6"] .product-card .unit-control label {
  font-size: 0.55rem;
}
.product-grid[data-cols="6"] .product-card .add-to-cart {
  padding: 0.35rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.product-grid[data-cols="6"] .product-card .price-preview {
  font-size: 0.68rem;
}
.product-grid[data-cols="6"] .product-card .price-label {
  font-size: 0.55rem;
}
.product-grid[data-cols="6"] .product-card .current-price-inline {
  font-size: 0.78rem;
}

/* ── 7 sütun – temel (tüm cihazlar): küçük boyutlar, order alt alta ───── */
.product-grid[data-cols="7"] .product-card .order-controls {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
}
.product-grid[data-cols="7"] .product-card .qty-control,
.product-grid[data-cols="7"] .product-card .unit-control {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
}
.product-grid[data-cols="7"] .product-card .qty-control label,
.product-grid[data-cols="7"] .product-card .unit-control label {
  font-size: 0.5rem;
  min-width: 28px;
  flex-shrink: 0;
}
.product-grid[data-cols="7"] .product-card .unit-select {
  font-size: 0.62rem;
  padding: 0.22rem 1rem 0.22rem 0.3rem;
  height: 24px;
  background-size: 0.6rem;
}
.product-grid[data-cols="7"] .product-card .qty-input {
  width: 36px;
  height: 24px;
  font-size: 0.65rem;
  padding: 0.22rem 0.15rem;
}
.product-grid[data-cols="7"] .product-card .add-to-cart {
  font-size: 0;
  padding: 0.28rem 0.3rem;
  overflow: hidden;
}
/* Previously used ::before with data-label; now text comes from .btn-text */
.product-grid[data-cols="7"] .product-card .price-preview {
  font-size: 0.62rem;
}
.product-grid[data-cols="7"] .product-card .price-label {
  font-size: 0.5rem;
}
.product-grid[data-cols="7"] .product-card .current-price-inline {
  font-size: 0.72rem;
}
.product-grid[data-cols="7"] .product-card .old-price-inline {
  font-size: 0.58rem;
}
.product-grid[data-cols="7"] .product-card .price-value small {
  font-size: 0.55rem;
}
.product-grid[data-cols="7"] .product-card .product-title {
  font-size: 0.65rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PC (≥1025px) overrideları:
   • 4-col / 5-col: Menge/Einheit alt alta (kart dar)
   • 6-col: tam "In den Warenkorb" yazısı
   • 7-col: tam "In den Warenkorb" yazısı + order-controls YAN YANA
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* 4-sütun PC: Menge/Einheit YAN YANA */
  .product-grid[data-cols="4"] .product-card .order-controls {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.3rem;
    width: 100%;
  }
  .product-grid[data-cols="4"] .product-card .qty-control,
  .product-grid[data-cols="4"] .product-card .unit-control {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: auto;
  }
  .product-grid[data-cols="4"] .product-card .qty-control {
    flex: 0 0 auto;
  }
  .product-grid[data-cols="4"] .product-card .unit-control {
    flex: 1;
    min-width: 0;
  }

  /* 5-sütun PC: Menge/Einheit YAN YANA */
  .product-grid[data-cols="5"] .product-card .order-controls {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.3rem;
    width: 100%;
  }
  .product-grid[data-cols="5"] .product-card .qty-control,
  .product-grid[data-cols="5"] .product-card .unit-control {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: auto;
  }
  .product-grid[data-cols="5"] .product-card .qty-control {
    flex: 0 0 auto;
  }
  .product-grid[data-cols="5"] .product-card .unit-control {
    flex: 1;
    min-width: 0;
  }

  /* 5-sütun PC: tam "In den Warenkorb" — küçük font, ortalı */
  /* Button label rendered via .btn-text; no ::before needed */

  /* 6-sütun PC: data-label üzerinden i18n uyumlu tam yazı */
  /* Button label rendered via .btn-text; no ::before needed */

  /* 7-sütun PC: data-label üzerinden i18n uyumlu tam yazı */
  /* Button label rendered via .btn-text; no ::before needed */
  .product-grid[data-cols="7"] .product-card .order-controls {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.25rem;
    width: 100%;
  }
  .product-grid[data-cols="7"] .product-card .qty-control,
  .product-grid[data-cols="7"] .product-card .unit-control {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.15rem;
    width: auto;
  }
  .product-grid[data-cols="7"] .product-card .qty-control {
    flex: 0 0 auto;
  }
  .product-grid[data-cols="7"] .product-card .unit-control {
    flex: 1;
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tablet (768–1024px) overrideları:
   • 5-col ve 6-col: Menge/Einheit alt alta (dar kartlarda okunaklılık)
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-grid[data-cols="5"] .product-card .order-controls,
  .product-grid[data-cols="6"] .product-card .order-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
  }
  .product-grid[data-cols="5"] .product-card .qty-control,
  .product-grid[data-cols="5"] .product-card .unit-control,
  .product-grid[data-cols="6"] .product-card .qty-control,
  .product-grid[data-cols="6"] .product-card .unit-control {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
  }
  /* Tablet 5-sütun buton kısaltması */
  .product-grid[data-cols="5"] .product-card .add-to-cart {
    font-size: 0;
    padding: 0.35rem 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Tablet-specific ::before labels removed; .btn-text handles text */
  /* Tablet 5-sütun price-preview */
  .product-grid[data-cols="5"] .product-card .price-preview {
    font-size: 0.65rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobil (<768px) overrideları:
   • Tüm kartlarda Menge/Einheit alt alta
   • 3-sütun (varsayılan mobil): "+" buton kısaltması
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Tüm mobil kartlarda order-controls alt alta */
  .product-grid .product-card .order-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
  }
  .product-grid .product-card .qty-control,
  .product-grid .product-card .unit-control {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
  }
  .product-grid .product-card .qty-control {
    flex: 0 0 auto;
  }
  .product-grid .product-card .unit-control {
    flex: 1;
    min-width: 0;
  }

  /* Mobil 3-sütun: data-label ile i18n uyumlu */
  .product-grid .product-card .add-to-cart {
    padding: 0.4rem 0.3rem;
    font-size: 0.7rem;
  }

  /* Mobil price-preview biraz küçük */
  .product-grid .product-card .price-preview {
    font-size: 0.68rem;
  }
}

/* ── Mobil 3-sütun: preview-label kısalt, unit-select min genişlik ──────── */
@media (max-width: 767px) {
  /* 3-sütun ve 2-sütun: "Gesamt:" → "Ges.:" */
  .product-grid[data-cols="3"] .product-card .preview-label,
  .product-grid[data-cols="2"] .product-card .preview-label,
  .product-grid:not([data-cols]) .product-card .preview-label {
    font-size: 0;
  }
  .product-grid[data-cols="3"] .product-card .preview-label::before,
  .product-grid[data-cols="2"] .product-card .preview-label::before,
  .product-grid:not([data-cols]) .product-card .preview-label::before {
    content: "Ges.:";
    font-size: 0.62rem;
    font-weight: 600;
  }
  /* unit-select en az 3 harf sığsın */
  .product-grid[data-cols="3"] .product-card .unit-select,
  .product-grid:not([data-cols]) .product-card .unit-select {
    min-width: 54px;
    flex-shrink: 0;
  }

  /* 3-sütun: taşmayı önle — başlık, fiyat, Menge/Einheit, Gesamt küçült */
  .product-grid[data-cols="3"] .product-card .product-title {
    font-size: 0.65rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .product-grid[data-cols="3"] .product-card .price-label {
    font-size: 0.52rem;
  }
  .product-grid[data-cols="3"] .product-card .current-price-inline {
    font-size: 0.72rem;
  }
  .product-grid[data-cols="3"] .product-card .old-price-inline {
    font-size: 0.55rem;
  }
  .product-grid[data-cols="3"] .product-card .price-value small {
    font-size: 0.5rem;
  }
  .product-grid[data-cols="3"] .product-card .price-preview {
    font-size: 0.65rem;
  }
  .product-grid[data-cols="3"] .product-card .preview-label::before {
    font-size: 0.58rem;
  }
  .product-grid[data-cols="3"] .product-card .qty-control label,
  .product-grid[data-cols="3"] .product-card .unit-control label {
    font-size: 0.52rem;
  }
  .product-grid[data-cols="3"] .product-card .qty-input {
    width: 44px;
    height: 28px;
    font-size: 0.72rem;
    padding: 0.25rem 0.15rem;
  }
  .product-grid[data-cols="3"] .product-card .unit-select {
    min-width: 46px;
    font-size: 0.68rem;
    padding: 0.25rem 1rem 0.25rem 0.3rem;
    height: 28px;
    background-size: 0.6rem;
  }
  .product-grid[data-cols="3"] .product-card .ordering-box {
    gap: 0.2rem;
    padding-top: 0.45rem;
  }
}

/* ── 1-sütun mobil: Menge/Einheit yan yana (yeterli alan var) ─────────── */
@media (max-width: 767px) {
  .product-grid[data-cols="1"] .product-card .order-controls {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
    width: 100%;
  }
  .product-grid[data-cols="1"] .product-card .qty-control,
  .product-grid[data-cols="1"] .product-card .unit-control {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
  }
  .product-grid[data-cols="1"] .product-card .qty-control {
    flex: 0 0 auto;
  }
  .product-grid[data-cols="1"] .product-card .unit-control {
    flex: 1;
    min-width: 0;
  }
  /* 1-sütunda tam yazı sığar */
  /* Single-column label handled by .btn-text */
}

/* ── 2-sütun (çok küçük mobil <480px) ─────────────────────────────────── */
@media (max-width: 479px) {
  /* Small mobile: label handled by .btn-text */
  .product-grid .product-card .price-preview {
    font-size: 0.72rem;
  }
}

.cart-item-controls-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    width: 100%;
  min-width: 0;
}

.modern-qty-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.25rem, 1.5vw, 0.5rem);
    background: #f8fafc;
  padding: clamp(0.4rem, 1.5vw, 0.75rem);
    border-radius: 1rem;
    border: 1px dashed #e2e8f0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 600px) {
  .modern-qty-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .title-group h4 {
    font-size: 0.875rem;
    line-height: 1.25;
  }
}

@media (max-width: 350px) {
  .cart-page-modern .modern-adjuster {
    min-width: 56px;
  }
  .cart-page-modern .modern-qty-box {
    padding: 0.35rem 0.25rem;
    gap: 0.15rem;
  }
}

.modern-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
  gap: 0.25rem;
  min-width: 0;
  container-type: inline-size;
  container-name: qty-unit;
}

/* Unit UNAVAILABLE state: insufficient stock for this unit size */
.modern-unit.unit-unavailable,
.unit-row.unit-unavailable {
    opacity: 0.35;
    filter: grayscale(1);
    user-select: none;
}

.modern-unit label {
  font-size: clamp(0.5rem, 1.2vw, 0.65rem);
    font-weight: 800;
    color: #94a3b8;
  letter-spacing: 0.03em;
  line-height: 1.1;
  min-height: 2.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modern-adjuster {
    display: flex;
    align-items: center;
  justify-content: space-between;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 2px;
  height: clamp(30px, 6vw, 40px);
  min-height: 30px;
  min-width: 64px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.modern-adjuster button {
  flex: 0 0 clamp(28px, 26%, 44px);
  width: clamp(28px, 26%, 44px);
  max-width: 44px;
  height: clamp(28px, 5.5vw, 38px);
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text-main);
}

.modern-adjuster button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.modern-adjuster button:hover {
  background: rgba(37, 99, 235, 0.05);
  color: var(--primary);
}

/* Sütun genişken kutu içi oran korunur, taşma yok */
@container qty-unit (min-width: 90px) {
  .modern-adjuster button { flex: 0 0 30px; width: 30px; height: 30px; min-width: 30px; min-height: 30px; max-width: 30px; }
}
@container qty-unit (min-width: 130px) {
  .modern-adjuster button { flex: 0 0 34px; width: 34px; height: 34px; min-width: 34px; min-height: 34px; max-width: 34px; }
  .modern-adjuster { height: 38px; min-height: 38px; }
}
@container qty-unit (min-width: 160px) {
  .modern-adjuster button { flex: 0 0 38px; width: 38px; height: 38px; min-width: 38px; min-height: 38px; max-width: 38px; }
  .modern-adjuster { height: 40px; min-height: 40px; }
}

@container qty-unit (min-width: 100px) {
  .modern-adjuster span { min-width: 1.5em; }
}

/* Çok dar sütunda (350px altı vb.) üst üste binme olmasın, tek satırda kalsın */
@container qty-unit (max-width: 80px) {
  .modern-adjuster {
    padding: 1px;
    min-height: 26px;
    height: 26px;
    min-width: 56px;
  }
  .modern-adjuster button {
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    height: 24px;
    min-height: 24px;
    font-size: 0.9rem;
  }
  .modern-adjuster span {
    font-size: 0.65rem;
  }
}

.modern-adjuster span {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  display: inline-block;
  animation: qtyAppear 0.3s ease-out;
}

@keyframes qtyAppear {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modern-adjuster button:active {
  transform: scale(0.92);
  background: rgba(37, 99, 235, 0.08);
  transition: transform 0.05s ease;
}

.cart-page-modern {
  animation: cartSoftFade 0.2s ease-out;
}

@keyframes cartSoftFade {
  from { opacity: 0.95; }
  to { opacity: 1; }
}

.btn-remove-item {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ef4444;
    border: 3px solid white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-remove-item::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.btn-remove-item:hover {
    background: #dc2626;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.item-total-price {
    display: flex;
  justify-content: space-between;
    align-items: center;
  flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
  min-width: 0;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    text-align: left;
}

.item-total-price small {
    color: var(--text-muted);
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-total-price span {
  font-size: clamp(0.9rem, 2.5vw, 1.25rem);
    font-weight: 900;
    color: var(--text);
  flex-shrink: 0;
}

/* Sidebar Summary — scales with viewport */
.summary-card-sticky {
    position: sticky;
  top: calc(var(--header-height) + 1rem);
    background: white;
    border: 1px solid var(--border);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2rem);
    box-shadow: var(--shadow-sm);
}

.summary-card-sticky h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    font-weight: 800;
  text-align: center;
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: var(--text);
}

.summary-line.info-line {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

.summary-total-netto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.5rem;
}

.summary-total-netto .label {
    font-weight: 600;
}

.summary-total-netto .value {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text);
}

.tax-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
}

.summary-actions-modern {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-note-block {
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: #f8fafc;
}

.cart-note-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.45rem;
}

.cart-note-input {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
    background: #fff;
    font-family: "Inter", sans-serif;
}

.cart-note-input::placeholder {
    color: var(--text-muted);
}

.cart-note-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.cart-note-meta {
    margin-top: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cart-note-meta small {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.cart-note-counter {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
}

.cart-note-counter.is-warning {
    color: #b45309;
}

.cart-note-counter.is-limit {
    color: #dc2626;
}

.cart-note-warning {
    display: block;
    margin-top: 0.4rem;
    color: #b45309;
    font-size: 0.72rem;
    line-height: 1.3;
}

.btn-checkout-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 1rem 1.5rem; /* Optimized size */
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.btn-checkout-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.btn-checkout-primary.is-loading {
  pointer-events: none;
  cursor: wait;
}

.btn-checkout-primary.is-loading:hover {
  transform: none;
}

.btn-checkout-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-checkout-spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes btn-checkout-spin {
  to { transform: rotate(360deg); }
}

.btn-continue-shopping {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-continue-shopping:hover {
    color: var(--accent);
}

.trust-indicators {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Empty State Modern */
.empty-state {
    padding: 8rem 2rem;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.empty-cart-icon {
    margin-bottom: 2rem;
    display: inline-flex;
    padding: 2rem;
    background: var(--bg-alt);
    border-radius: 50%;
}

.empty-state h3 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.empty-state p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Mobile Responsiveness Below */
@media (max-width: 768px) {
    .cart-item-row {
        grid-template-columns: 100px 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .cart-item-image-wrapper {
        width: 100px;
        height: 100px;
    }
    
    .cart-item-info {
        padding-right: 0;
    }

    .cart-item-controls-row {
        gap: 1rem;
    }
    
    .modern-qty-box {
        width: 100%;
    }
    
    .cart-header-modern h2 {
        font-size: 1.5rem;
    }
    
    .checkout-stepper {
        margin-bottom: 2rem;
        gap: 0.25rem;
        padding: 0 1rem;
    }
    
    .checkout-stepper .step-label {
        font-size: 0.65rem;
        letter-spacing: 0;
    }

    .step-num {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .checkout-stepper .step-line {
        max-width: 30px;
        margin-top: -1.2rem;
    }

  .cart-header-centered h2,
  .cart-header-centered h1 {
        font-size: 1.5rem;
    }

  /* Account Page Mobile Optimization - Modern & Spaced */
    .account-page {
    padding: 2rem clamp(1.25rem, 6vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 3rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .b2b-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-item {
        padding: 1.25rem;
    }

    .info-item .value {
        font-size: 1rem;
    }

    .content-card {
        padding: 1.25rem;
        border-radius: 15px;
    }

    .cart-header-centered .header-count {
        font-size: 0.9rem;
    }

    /* Inquiry Card Mobile Adjustment - Cleaned up to use new card-row layout */
    .inquiry-card {
        padding: 1.25rem;
        gap: 1rem;
        border-radius: 16px;
    }

    /* Conflicting mobile styles removed for .card-meta-row to respect 613px rule */
    .inquiry-price-block {
        padding: 0.5rem 1rem;
    }

    .inquiry-main {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }

    .inquiry-id {
        font-size: 1.05rem;
        font-weight: 800;
    }

    .inquiry-date {
        font-size: 0.85rem;
    }

    .inquiry-status {
        align-self: center;
        font-size: 0.8rem;
    margin-right: 0;
    }

    .inquiry-summary {
        font-size: 0.85rem;
        text-align: center;
        margin: 0;
    }

    .btn-outline-sm {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

  /* Tablet and Mobile: Bestellübersicht below product list, reduced padding */
  .cart-page-modern {
    padding: 1.5rem clamp(0.75rem, 3vw, 1rem);
  }

    .cart-content-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

  .cart-summary-sidebar {
    position: static;
    padding-top: 0;
    order: 1;
  }

  .cart-items-column {
    order: 0;
  }

    .cart-item-row {
        grid-template-columns: 80px 1fr;
        gap: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        margin-top: 10px; /* Space for the overlapping remove button */
    }

    .cart-item-image-wrapper {
        width: 80px;
        height: 80px;
    }

    .title-group h4 {
        font-size: 1rem;
        line-height: 1.2;
        padding-right: 1.5rem;
    }

    .brand-price-row {
    gap: 0.4rem;
        margin-top: 0.25rem;
    }

    .item-brand {
        font-size: clamp(0.7rem, 2vw + 0.4rem, 0.85rem);
    }

    .unit-price {
        font-size: clamp(0.7rem, 1.5vw + 0.4rem, 0.9rem);
    }

    .cart-item-controls-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .modern-qty-box {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.5rem 0.35rem;
    gap: 0.2rem;
        border-radius: 0.75rem;
    }

    .modern-unit {
    gap: 0.15rem;
    }

    .modern-unit label {
    font-size: clamp(0.48rem, 2vw, 0.6rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    gap: 0;
    }

    .modern-unit label span {
        font-weight: 800;
    line-height: 1.1;
    }

    .modern-unit label small {
    font-size: 0.45rem;
        font-weight: 500;
        color: var(--text-muted);
    opacity: 0.9;
    }

    .modern-adjuster span {
        min-width: 0;
        font-size: clamp(0.7rem, 2vw, 0.8rem);
    }

    .modern-adjuster button {
        flex: 0 0 clamp(28px, 26%, 36px);
        width: clamp(28px, 26%, 36px);
        max-width: 36px;
        height: clamp(28px, 6vw, 36px);
        min-width: 28px;
        min-height: 28px;
    }

  .item-total-price small {
    line-height: 1.2;
    }

    .summary-card-sticky {
        padding: 1.25rem;
        position: static;
        margin-top: 0;
        border-radius: 1.25rem;
    }

    .summary-card-sticky h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    text-align: center;
    }

    .summary-line {
        font-size: 0.9rem;
    }

    .cart-note-input {
        min-height: 88px;
    }

    .summary-total-brutto .label {
        font-size: 0.9rem;
    }

    .summary-total-brutto .value {
        font-size: 1.4rem;
    }

    .btn-checkout-primary {
        padding: 0.85rem;
        font-size: 1rem;
        border-radius: 0.75rem;
    }

    .btn-remove-item {
        top: -8px;
        right: -8px;
        width: 28px;
        height: 28px;
        border-width: 2px;
    }
}

/* Very small phones: qty-box full width below image, Zwischensumme readable */
@media (max-width: 400px) {
  .cart-item-row {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
  }

  .cart-item-info {
    display: contents;
  }

  .cart-item-image-wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  .cart-item-info-top {
    grid-column: 2;
    grid-row: 1;
    overflow-x: hidden;
    min-width: 0;
  }

  .cart-item-controls-row {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    flex-direction: column;
    align-items: stretch;
  }

  .cart-item-controls-row .item-total-price {
    flex-wrap: nowrap;
  }
  .cart-item-controls-row .item-total-price small {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cart-item-controls-row .item-total-price span {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .cart-page-modern {
    padding: 1.25rem 0.65rem;
  }
}

/* --- B2B Cart Enhancements --- */

.summary-total-brutto {
    display: flex;
    flex-direction: column; 
  align-items: center; /* Center for Phone & PC (PC is narrow sidebar) */
    text-align: center;
    padding: 1.5rem 0;
    gap: 0.5rem;
    border-top: 2px solid #f1f5f9;
    margin-top: 1rem;
    width: 100%;
}

/* Tablet styles moved to bottom */

.summary-total-brutto .label {
    font-weight: 700;
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-total-brutto .value {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 900;
    color: var(--accent);
    line-height: 1.2;
    display: block;
  word-break: break-all;
}

.b2b-info-box {
    padding: 1rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    margin-top: 1rem;
}

.b2b-info-box.is-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.b2b-info-box.is-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.btn-checkout-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-checkout-primary:disabled:hover {
    background: #cbd5e1;
    transform: none;
}

/* Footer media queries moved to bottom */

/* --- Footer Bottom & Credit --- */
/* ============================================================
   BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.2s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}
.back-to-top:active {
  transform: translateY(0);
}
@media (max-width: 767px) {
  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
  }
  .back-to-top svg {
    width: 17px;
    height: 17px;
  }
}

/* ============================================================
   FOOTER — Tam tanım + responsive
   ============================================================ */

.footer-bottom {
  max-width: var(--container);
  margin: 3rem auto 0;
    padding-top: 2rem;
  border-top: 1px solid #1e293b;
  color: #64748b;
  font-size: 0.85rem;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom-flex p {
    margin: 0;
  font-size: 0.85rem;
}

.developer-credit {
    display: flex;
    align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
    flex-wrap: wrap;
}

.dev-link {
  color: #e2e8f0;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
  border-bottom: 1px solid rgba(226, 232, 240, 0.2);
}
.dev-link:hover {
  color: #fff;
  border-color: rgba(226, 232, 240, 0.6);
}

.dev-divider {
  color: #334155;
}

.dev-email {
  color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}
.dev-email:hover {
  color: #cbd5e1;
}

.dev-phone {
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s;
}
.dev-phone:hover {
  color: #25d366;
}

/* --- Tablet: 768–1024px --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer {
    padding: 3rem 1.5rem 1.5rem;
    margin-top: 4rem;
  }
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  /* Her sütunun padding'i tek kuralda — çakışma yok */
  .footer-content .footer-section:nth-child(1) {
    padding-right: 1.5rem;
    padding-bottom: 2.5rem;
  }
  .footer-content .footer-section:nth-child(2) {
    padding-left: 1.5rem;
    padding-bottom: 2.5rem;
  }
  /* border-top → gap:0 olduğu için tek kesintisiz çizgi */
  .footer-content .footer-section:nth-child(3) {
    padding-right: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid #1e293b;
  }
  .footer-content .footer-section:nth-child(4) {
    padding-left: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid #1e293b;
  }
}

/* --- Mobile: < 768px → 2×2 grid --- */
@media (max-width: 767px) {
  .site-footer {
    padding: 2.5rem 1rem 1.5rem;
    margin-top: 3rem;
  }
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-bottom: 1.5rem;
  }
  .footer-links h4 {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
  }
  .footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
  /* Her sütunun padding'i tek kuralda — çakışma yok */
  .footer-content .footer-section:nth-child(1) {
    padding-right: 1rem;
    padding-bottom: 2.25rem;
  }
  .footer-content .footer-section:nth-child(2) {
    padding-left: 1rem;
    padding-bottom: 2.25rem;
  }
  /* border-top → gap:0 olduğu için tek kesintisiz çizgi */
  .footer-content .footer-section:nth-child(3) {
    padding-right: 1rem;
    padding-top: 2.25rem;
    border-top: 1px solid #1e293b;
  }
  .footer-content .footer-section:nth-child(4) {
    padding-left: 1rem;
    padding-top: 2.25rem;
    border-top: 1px solid #1e293b;
  }
}

/* --- Small mobile: < 480px --- */
@media (max-width: 479px) {
  .footer-bottom-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
  }
  .developer-credit {
    justify-content: center;
  }
  .site-footer {
    padding: 2rem 0.75rem 1.25rem;
    margin-top: 2rem;
  }
}

/* --- Çok küçük ekran: < 300px → tek sütun (pratik olarak hiçbir cihazda tetiklenmez) --- */
@media (max-width: 299px) {
  .footer-content {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* Sidebar Specific Unit Layout */
.unit-label-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unit-label-group span {
    font-weight: 700;
    font-size: 0.85rem;
}

.unit-label-group small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* 430px: cart mixed-qty tam genişlikte resmin altında (taşma önleme) */
@media (max-width: 430px) {
  .cart-sidebar .mini-cart-item img {
    grid-row: 1;
  }

  .cart-sidebar .mini-cart-item .mixed-qty-sidebar {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .cart-sidebar .mini-cart-item .mixed-qty-sidebar .unit-row {
    min-width: 0;
    flex: 1 1 0;
    min-width: 52px;
  }

  .cart-sidebar .mini-cart-item .mci-totals {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 480px) {
  .cart-sidebar .mini-cart-item img {
    width: 56px;
    height: 56px;
  }

  .wishlist-sidebar .mini-cart-item img {
    width: 56px;
    height: 56px;
  }

    .mixed-qty-sidebar .unit-row {
        align-items: flex-start;
    }
    
    .mixed-qty-sidebar .unit-label-group {
        gap: 0;
    }

  .inquiry-card {
    padding: 1.25rem 1.25rem 1.25rem 1rem;
  }
}

@media (max-width: 1024px) {
  html,
  body {
        width: 100%; 
        max-width: 100vw;
        overflow-x: hidden; 
        margin: 0;
        padding: 0;
    }
    
    .container { 
        width: 100%; 
        max-width: 100vw; 
        padding: 0 0.75rem; 
        box-sizing: border-box; 
    }
    
  .shop-layout,
  .account-page {
    display: block;
    padding-left: clamp(1.25rem, 6vw, 2.5rem);
    padding-right: clamp(1.25rem, 6vw, 2.5rem);
  }

  .account-page {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .account-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    width: 100%;
  }

  .account-content {
    margin-top: 0;
  }
  .products-container {
    width: 100%;
    overflow: hidden;
  }

  /* Hide sidebar by default on mobile/tablet — off-canvas drawer */
    .filters-sidebar {
        position: fixed;
        left: 0;
    top: 56px; /* Mobil header yüksekliği */
        bottom: 0;
    height: calc(100vh - 56px);
    width: calc(100% - 60px);
        max-width: 320px;
        z-index: 9998;
        background: white;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
    padding: 0;
        overflow-y: auto;
    box-shadow:
      10px 0 30px rgba(0, 0, 0, 0.1),
      0 20px 40px -10px rgba(0, 0, 0, 0.05);
    border-bottom-right-radius: 20px;
  }

  /* Tablette header 64px — sidebar buna göre hizalanmalı */
  @media (min-width: 768px) {
    .filters-sidebar {
      top: 64px;
      height: calc(100vh - 64px);
    }
  }

  /* .active specificity yükseltildi: sidebar-collapsed ile olası çakışma engellendi */
  .filters-sidebar.active,
  .shop-layout .filters-sidebar.active,
  .global-mobile-menu.active {
    transform: translateX(0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    }

    .global-mobile-menu {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        width: min(320px, 80vw);
        z-index: 10000;
    background: var(
      --bg-alt
    ); /* Hamburger menüdeki sidebar, masaüstü filtre alanıyla aynı ton */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .global-mobile-menu .category-list {
        padding: 1rem;
    }

    .close-filters-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.85rem 1.25rem;
        background: white;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--primary);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
    transition:
      background 0.2s ease,
      color 0.2s ease;
        position: relative;
        top: 0;
        right: 0;
        height: auto;
        border-radius: 0;
        box-shadow: none;
    }

    .close-filters-btn:hover {
        background: var(--bg-alt);
        color: var(--accent);
    }

    /* Animated X Icon – only the × rotates */
    .close-filters-btn span:first-child {
        font-size: 24px;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 400;
    }

    .close-filters-btn span:last-child {
        font-size: 0.9rem;
        font-weight: 600;
        margin-left: 0.6rem;
        padding-right: 0.5rem;
        white-space: nowrap;
        transform: none !important;
        transition: none;
    }

    .close-filters-btn:hover span:first-child {
        transform: rotate(180deg) scale(1.2);
    }
    
    .filters-sidebar .filter-group {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
    }

    .amazon-marketplace-btn { 
        padding: 0.5rem 0.85rem;
        margin: 0.75rem auto;
        gap: 0.35rem;
        border-radius: 6px;
        width: calc(100% - 2.5rem); /* Proper gutters */
    }

    .filter-dropdown {
        min-width: 140px;
        height: 40px;
        font-size: 0.85rem;
        padding: 0 2rem 0 1rem;
        border-radius: 10px;
        background-color: var(--bg-alt);
        border: 1px solid var(--border);
        font-weight: 600;
    }

    /* Marken-Button: mobilede de koyu lacivert kalsın */
    .filter-dropdown.marken-btn {
        background: var(--primary);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
    }

  /* Slider: sadece base'den farklı değerler */
  .related-slider {
    gap: 1rem;
    padding: 1rem 0.25rem;
  }
  .related-slider::-webkit-scrollbar {
    display: none;
  }

  /* Mobilede ok butonları daha küçük */
  .related-nav-btn {
    width: 32px;
    height: 32px;
  }
  .related-nav-prev {
    left: 0.35rem;
  }
  .related-nav-next {
    right: 0.35rem;
  }
  .related-slider-wrapper {
    padding: 0 16px;
    margin: 0 -16px;
  }
}

/* filter-dropdown: küçük ekran — iç içe @media'dan çıkarıldı */
    @media (max-width: 850px) {
        .filter-dropdown {
            min-width: 110px;
            font-size: 0.75rem;
            height: 36px;
        }
    }

    @media (max-width: 520px) {
        .filter-dropdown {
            width: 100%;
            max-width: none;
            min-width: 0;
        }
}

/* Dar masaüstü / geniş tablet: sol resim orantılı küçülsün, kart taşmasın */
@media (min-width: 1025px) and (max-width: 1280px) {
    .product-detail-layout {
        grid-template-columns: minmax(260px, 2fr) minmax(300px, 3fr);
        gap: 1.25rem;
        padding: 1.75rem 0 2.75rem;
    }

    .product-detail-left {
        max-width: min(100%, clamp(360px, 34vw, 520px));
    }
}

/* Tablet: 2 kolon — galeri solda: ana üstte, thumbnails altta */
@media (min-width: 769px) and (max-width: 1024px) {
    .product-detail-layout {
        grid-template-columns: minmax(240px, 2fr) minmax(280px, 3fr);
        gap: 1.25rem;
        padding: 1.5rem 0 2.5rem;
    }

    .product-detail-left {
        position: relative;
        top: 0;
        margin-bottom: 0;
        max-width: min(100%, clamp(320px, 42vw, 400px));
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
        overflow: visible;
    }

    .detail-gallery-thumbs {
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
        min-height: 48px;
        justify-content: flex-start;
    }

    .detail-gallery-thumb {
        width: 48px;
        height: 48px;
    }

    .detail-gallery-main {
        flex-shrink: 0;
    }

    /* Kompakt sağ kolon */
    .product-detail-right {
        gap: 0.75rem;
    }

    .detail-title {
        font-size: clamp(1.15rem, 2.5vw + 0.75rem, 1.75rem);
        line-height: 1.2;
    }

    .detail-brand {
        font-size: 0.875rem;
    }

    .detail-meta,
    .detail-ean {
        font-size: 0.8rem;
    }

    .detail-ordering.card-glass {
        padding: 1rem;
        border-radius: 0.75rem;
        margin: 1rem 0 1.25rem 0 !important;
    }

    .ordering-header {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .detail-ordering .price-main {
        font-size: 1.35rem;
    }

    .detail-ordering .product-price {
        font-size: clamp(0.85rem, 1.4vw, 1rem);
    }

    .detail-ordering .price-label {
        font-size: 0.7rem;
    }

    .detail-ordering .price-row {
        margin-bottom: 0.75rem;
    }

    .detail-ordering .qty-input {
        width: 64px;
        height: 36px;
        font-size: 0.9rem;
        padding: 0.35rem;
    }

    .detail-ordering .unit-select {
        height: 36px;
        font-size: 0.85rem;
        padding: 0.4rem 1.5rem 0.4rem 0.5rem;
        background-position: right 0.5rem center;
    }

    .detail-ordering .qty-control label,
    .detail-ordering .unit-control label {
        font-size: 0.65rem;
    }

    .detail-ordering .add-to-cart {
        padding: 0.7rem;
        font-size: 0.9rem;
        margin-top: 0.75rem;
    }

    .detail-ordering .price-preview {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
    }

    .detail-description {
        margin: 1rem 0;
    }

    .detail-description h3 {
        font-size: 1.05rem;
    }

    .detail-description p {
        font-size: 0.9rem;
    }

    .technical-grid {
        grid-template-columns: repeat(2, 1fr); /* dar sağ kolonda tek sütuna düşmesin */
        margin-top: 1.5rem;
        gap: 0.5rem;
        padding: 1rem;
    }
    .technical-grid .tech-item {
        font-size: 0.85rem;
    }
    .technical-grid .tech-item--categories > .category-tags {
        max-height: 3.9rem;
        padding-bottom: 0.22rem;
    }
    .technical-grid .category-tag {
        font-size: clamp(0.56rem, 1.2vw, 0.7rem);
        padding: 0.07rem 0.34rem;
    }

    .detail-availability,
    .detail-availability-value strong,
    .detail-availability-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem 0 2rem;
    }
  .detail-title,
  .detail-title-row .detail-title {
    font-size: 1.35rem;
    line-height: 1.2;
  }
    /* Ana resim yukarıda (tek kolon): ana solda, thumbnails sağda alt alta; ekrana ortalanır, yana sarkma yok */
    .product-detail-left {
        position: relative;
        top: 0;
        margin-bottom: 1rem;
        max-width: min(480px, 100%);
        width: 100%;
        margin-inline: auto;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: hidden;
        justify-content: center;
    }

    .detail-gallery-main {
        flex: 0 1 auto;
        min-width: 0;
        width: fit-content;
        max-width: 100%;
        aspect-ratio: unset;
        min-height: 120px;
    }

    .detail-gallery-main .detail-main-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 70vmin;
        display: block;
        object-fit: contain;
    }

    .detail-gallery-thumbs {
        flex-direction: column;
        flex-wrap: nowrap;
        flex-shrink: 0;
        width: 56px;
        min-width: 56px;
        overflow-y: visible;
        overflow-x: hidden;
        min-height: 56px;
    }

    .detail-gallery-thumb {
        width: 56px;
        height: 56px;
    }

  .detail-ordering.card-glass {
    padding: 1.25rem;
  }
  .detail-ordering .price-preview {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
  }

  .technical-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .technical-grid .tech-item {
    font-size: 0.8rem;
  }
  .technical-grid .tech-item--categories > .category-tags {
    max-height: 3.85rem;
    padding-bottom: 0.22rem;
  }
  .technical-grid .category-tag {
    font-size: clamp(0.52rem, 1.3vw, 0.68rem);
    padding: 0.06rem 0.32rem;
  }
}

/* 534px altı: en az 2 sütun (tek sütuna düşmesin) layout aynı (ana solda, thumbnails sağda alt alta); çerçeve resme tam oturur, ekrana optimal sığar */
@media (max-width: 534px) {
    .product-detail-layout {
        gap: 1rem;
        padding: 1rem 0 1.75rem;
    }

    .detail-title,
    .detail-title-row .detail-title {
        font-size: 1.2rem;
    }

    .technical-grid {
        grid-template-columns: repeat(2, 1fr); /* dar ekranda sabit 2 sütun */
        gap: 0.4rem;
        padding: 0.65rem 0.85rem;
    }
    .technical-grid .tech-item {
        font-size: clamp(0.68rem, 2vw, 0.78rem);
    }
    /* Dar ekranda kategori satırı tam genişlik — tag’ler tam görünsün */
    .technical-grid .tech-item--categories {
        grid-column: 1 / -1;
    }
    .technical-grid .tech-item--categories > .category-tags {
        max-height: 3.7rem;
        padding-bottom: 0.2rem;
    }
    .technical-grid .category-tag {
        font-size: clamp(0.46rem, 1.5vw, 0.58rem);
        padding: 0.05rem 0.24rem;
        line-height: 1.3;
    }

    .product-detail-left {
        max-width: 100%;
        gap: 0.35rem;
        justify-content: center;
    }

    .detail-gallery-main {
        flex: 0 1 auto;
        min-width: 0;
        width: fit-content;
        max-width: 100%;
        aspect-ratio: unset;
        min-height: 120px;
    }

    .detail-gallery-main .detail-main-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 65vmin;
        display: block;
        object-fit: contain;
    }

    .detail-gallery-thumbs {
        flex-direction: column;
        flex-wrap: nowrap;
        flex-shrink: 0;
        width: 44px;
        min-width: 44px;
        overflow-x: hidden;
        overflow-y: visible;
        min-height: 44px;
        gap: 0.35rem;
    }

    .detail-gallery-thumb {
        width: 44px;
        height: 44px;
    }
}

/* Auth pages — tablet arası (küçük tablet / büyük telefon) */
@media (min-width: 561px) and (max-width: 767px) {
  .auth-card-glass {
    padding: 3rem 2.25rem;
    max-width: 92vw;
  }

  .auth-card-glass--wide {
    padding: 2rem 1.75rem;
    max-width: 96vw;
  }

  .auth-card-glass h2 {
    font-size: 1.7rem;
  }

  .auth-logo {
    height: 70px;
  }
}

/* Auth pages — mobile responsive */
@media (max-width: 560px) {
  .auth-body {
    padding: 2.5rem 1rem 1.5rem;
    align-items: flex-start;
  }

  /* Login sayfası mobilde: clamp kuralları zaten kapsar, sadece yatay padding */
  .auth-body.auth-body--login {
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .auth-card-glass {
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
  }

  .auth-card-glass--wide {
    padding: 1.75rem 1.25rem;
    border-radius: 1.5rem;
  }

  .auth-logo {
    height: 60px;
    margin-bottom: 1.5rem;
  }

  .auth-card-glass h2 {
    font-size: 1.5rem;
  }

  .auth-card-glass p {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .glass-input {
    /* Shorthand yerine longhand: auth-field içindeki padding-top/bottom:0 korunur */
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.9rem;
  }

  .auth-field .glass-input {
    height: 3.2rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 3.2rem;
  }

  .auth-field .glass-input:focus,
  .auth-field .glass-input:not(:placeholder-shown) {
    padding-top: 0.9rem;
    padding-bottom: 0;
    line-height: 1.5;
  }

  .auth-field label {
    left: 1rem;
    font-size: 0.88rem;
  }

  /* Mobil: input 3.2rem → register label tam ortası = 1.6rem */
  .auth-body--register .auth-field label {
    top: 1.6rem;
  }

  /* Mobil: hint'li alanlar da 3.2rem → top = 1.6rem */
  .auth-field:has(.auth-field-hint) label,
  .auth-body--register .auth-field:has(.auth-field-hint) label {
    top: 1.6rem;
  }

  .auth-field .glass-input:focus + label,
  .auth-field .glass-input:not(:placeholder-shown) + label {
    top: 0.5rem;
    font-size: 0.66rem;
  }

  .auth-section-label {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .auth-section-label:first-of-type {
    margin-top: 0.25rem;
  }

  .glass-btn {
    padding: 0.85rem;
    font-size: 0.95rem;
  }

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

  .auth-form-row {
    flex-wrap: nowrap;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    gap: 0.5rem;
  }

  .auth-footer-text {
    font-size: 0.85rem;
    margin-top: 1.5rem;
  }
}

@media (max-width: 768px) {
  .auth-field:not(#countryDropdown):has(+ .auth-section-label) {
    margin-bottom: 0 !important;
  }

  .auth-grid-2:has(+ .auth-section-label) .auth-field:last-child,
  .auth-grid-3:has(+ .auth-section-label) .auth-field:last-child {
    margin-bottom: 0 !important;
  }
}

/* Auth pages — küçük telefon (iPhone SE vb.) */
@media (max-width: 375px) {
  .auth-card-glass,
  .auth-card-glass--wide {
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
  }

  .auth-section-label {
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
  }

  .auth-section-label:first-of-type {
    margin-top: 0.2rem;
  }

  .auth-card-glass h2 {
    font-size: 1.35rem;
  }

  .auth-logo {
    height: 50px;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 375px) {
  .auth-field:not(#countryDropdown):has(+ .auth-section-label) {
    margin-bottom: 0 !important;
  }

  .auth-grid-2:has(+ .auth-section-label) .auth-field:last-child,
  .auth-grid-3:has(+ .auth-section-label) .auth-field:last-child {
    margin-bottom: 0 !important;
  }
}

/* Legacy pagination controls removed - replaced by .pagination-footer */
    margin-top: 1.25rem;
    margin-bottom: 0.6rem;
  }

  .auth-section-label:first-of-type {
    margin-top: 0.2rem;
  }

  .auth-card-glass h2 {
    font-size: 1.35rem;
  }

  .auth-logo {
    height: 50px;
    margin-bottom: 1.25rem;
  }
}

/* Legacy pagination controls removed - replaced by .pagination-footer */

/* ══════════════════════════════════════════════════════════════════════════
   QUANTITY CAPPING ANIMATION
══════════════════════════════════════════════════════════════════════════ */
@keyframes qtyShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.qty-capped {
    animation: qtyShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Legal page */
.legal-page {
    min-height: calc(100vh - 280px);
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.legal-card {
    max-width: 920px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.legal-card h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    color: var(--text);
    line-height: 1.2;
}

.legal-title-center {
    text-align: center;
}

.legal-subtitle {
    color: var(--text-muted);
    margin-top: -0.6rem;
    margin-bottom: 1.4rem;
}

.legal-subtitle--center {
    text-align: center;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--text);
}

.legal-section + .legal-section {
    border-top: 1px solid var(--border);
    margin-top: 1.2rem;
    padding-top: 1.2rem;
}

.legal-summary {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: rgba(37, 99, 235, 0.05);
}

.legal-summary h2 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    color: var(--text);
}

.legal-summary p {
    margin: 0.32rem 0;
    color: var(--text-muted);
    line-height: 1.65;
}

.legal-toggle-btn {
    margin-top: 0.7rem;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 0.55rem;
    padding: 0.48rem 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.legal-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.legal-section h2 {
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    color: var(--text);
}

.legal-section p {
    margin: 0.35rem 0;
    color: var(--text-muted);
    line-height: 1.7;
}

.legal-section a {
    word-break: break-word;
}

.legal-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.97rem;
    line-height: 1.72;
    color: var(--text-muted);
}

.legal-pre-heading {
    color: var(--text);
    font-weight: 700;
}

.legal-pre-heading--contact {
    font-size: 2em;
}

.legal-pre-heading--double {
    font-size: 2em;
}

.legal-pre-emphasis {
    font-weight: 700;
    font-style: italic;
    color: var(--text);
}

.legal-pre-strong {
    font-weight: 700;
    color: var(--text);
}

.legal-pre-italic {
    font-style: italic !important;
    color: var(--text);
}

.legal-card--links-strong a {
    font-weight: 700;
    color: var(--text);
}

.legal-pre a[href="https://ec.europa.eu/info/law/law-topic/data-protection/international-dimension-data-protection/standard-contractual-clauses-scc_de"] {
    font-weight: 700;
    color: var(--text);
}

.legal-pre a[href="https://calendly.com/de/pages/privacy"] {
    font-weight: 700;
    color: var(--text);
}

.legal-pre a[href="https://support.google.com/accounts/answer/61416?hl=de"],
.legal-pre a[href="https://support.microsoft.com/de-de/help/17442/windows-internet-explorer-delete-manage-cookies"],
.legal-pre a[href="https://support.mozilla.org/de/kb/cookies-erlauben-und-ablehnen"],
.legal-pre a[href="https://support.apple.com/de-de/guide/safari/manage-cookies-and-website-data-sfri11471/mac"] {
    font-weight: 700;
    color: var(--text);
}

.legal-pre a[href="https://policies.google.com/privacy/frameworks"],
.legal-pre a[href="https://business.safety.google/adsprocessorterms/"],
.legal-pre a[href="https://tools.google.com/dlpage/gaoptout?hl=de"],
.legal-pre a[href="https://www.google.com/analytics/terms/de.html"],
.legal-pre a[href="https://www.google.de/intl/de/policies/"],
.legal-pre a[href="https://policies.google.com/technologies/cookies?hl=de"],
.legal-pre a[href="https://www.google.com/privacypolicy.html"],
.legal-pre a[href="https://www.youtube.com/t/privacy"],
.legal-pre a[href="https://developers.google.com/fonts/faq"] {
    font-weight: 700;
    color: var(--text);
}

.legal-pre a[href*="policies.google.com/privacy/frameworks"] {
    font-weight: 700;
    color: var(--text);
}

.legal-card--dense h2 {
    margin-bottom: 1rem;
}

.legal-card--dense h3 {
    margin-top: 1rem;
    margin-bottom: 0.45rem;
    font-size: 1rem;
    color: var(--text);
}

.legal-card--dense ul {
    margin: 0.45rem 0 0.7rem 1.15rem;
    color: var(--text-muted);
}

.legal-card--dense li {
    margin-bottom: 0.35rem;
    line-height: 1.65;
}

.legal-card--agb .legal-section p,
.legal-card--agb .legal-section li {
    font-size: 0.95rem;
}

/* About page */
.about-page {
    min-height: calc(100vh - 280px);
    padding-top: 2.2rem;
    padding-bottom: 3.2rem;
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    gap: 1.85rem;
    position: relative;
    isolation: isolate;
}

.about-page::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 420px;
    background:
        radial-gradient(70% 85% at 0% 0%, rgba(30, 64, 175, 0.08), transparent 65%),
        radial-gradient(60% 80% at 100% 0%, rgba(14, 116, 144, 0.07), transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.about-hero {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.about-kicker {
    display: block;
    margin-bottom: 0.7rem;
    text-align: center;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--text);
    line-height: 1.05;
}

.about-hero h1 {
    margin: 0 auto 0.9rem;
    max-width: 40ch;
    text-align: center;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    color: var(--text);
    line-height: 1.24;
    font-weight: 700;
}

.about-hero > p {
    max-width: 75ch;
    margin: 0 auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 1.01rem;
    line-height: 1.75;
}

.about-metrics {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 0.15rem;
}

.about-metric-card {
    padding: 0.15rem 0.9rem 0.15rem 0;
    border-right: 1px solid var(--border);
    display: grid;
    gap: 0.2rem;
}

.about-metric-card:last-child {
    border-right: 0;
}

.about-metric-value {
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

.about-metric-label {
    color: var(--text-muted);
    font-size: 0.89rem;
    line-height: 1.45;
}

.about-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.65rem;
}

.about-block {
    position: relative;
    padding-top: 0.7rem;
}

.about-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(37, 99, 235, 0.25));
    border-radius: 999px;
}

.about-block h2 {
    margin-bottom: 0.65rem;
    font-size: 1.19rem;
    color: var(--text);
}

.about-block p {
    color: var(--text-muted);
    line-height: 1.72;
    margin: 0;
}

.about-checklist {
    margin: 0.75rem 0 0;
    padding-left: 1.22rem;
    color: var(--text-muted);
}

.about-checklist li {
    margin-bottom: 0.42rem;
    line-height: 1.6;
}

.about-cta {
    border-top: 1px solid var(--border);
    padding-top: 1.15rem;
    padding-left: 0.1rem;
    display: grid;
    gap: 0.5rem;
}

.about-cta h2 {
    margin: 0;
    color: var(--text);
}

.about-cta p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.72;
}

.about-cta-actions {
    margin-top: 0.48rem;
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.54rem 0.96rem;
    border-radius: 0.62rem;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: var(--transition-fast);
}

.about-btn--primary {
    background: linear-gradient(135deg, var(--accent), #1d4ed8);
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.about-btn--primary:hover {
    transform: translateY(-1px);
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.about-btn--ghost {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
    color: var(--text);
}

.about-btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 768px) {
    .legal-page {
        padding-top: 1.4rem;
        padding-bottom: 2.25rem;
    }

    .legal-card {
        border-radius: 0.9rem;
    }

    .legal-pre-heading--contact,
    .legal-pre-heading--double {
        font-size: 1.5em;
    }

    .about-page {
        padding-top: 1.45rem;
        padding-bottom: 2.3rem;
        gap: 1.2rem;
    }

    .about-page::before {
        height: 300px;
    }

    .about-hero h1 {
        white-space: normal;
    }

    .about-metrics {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .about-metric-card {
        padding-right: 0;
        padding-bottom: 0.55rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .about-metric-card:last-child {
        border-bottom: 0;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 1.05rem;
    }

    .about-block::before {
        width: 44px;
    }

    .about-hero > p {
        text-align: left;
        margin: 0;
    }

    .about-cta-actions {
        flex-direction: column;
    }

    .about-btn {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .about-hero h1 {
        max-width: none;
        white-space: nowrap;
        font-size: clamp(1.05rem, 1.7vw, 1.55rem);
    }
}