@charset "UTF-8";
/* ==========================================================================
   Canber Vinç — Vitrin (Storefront) Stil Dosyası
   Tasarım Dili: "Industrial Precision" — sade, premium, endüstriyel.
   Tailwind CDN bağımlılığı YOKTUR. Saf, el yazımı CSS.
   Kaynak: industrial_precision/DESIGN.md
   ========================================================================== */

/* ==========================================================================
   1. FONTLAR (@font-face)
   Google Fonts CDN kullanılmaz (performans + KVKK / veri aktarımı).
   Dosyalar /assets/fonts/ altına yerleştirilmelidir.
   woff2 dosyaları "latin" + "latin-ext" alt kümelerini içermelidir;
   Türkçe karakterler (ş, ğ, ı, İ) latin-ext aralığındadır.
   ========================================================================== */

/* latin-ext alt kumesi: Turkce karakterler (s, g, i, I, c, o, u) buradadir.
   Tarayici yalnizca ihtiyac duydugu alt kumeyi indirir. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2. TASARIM TOKEN'LARI (:root)
   DESIGN.md içindeki tüm renk / aralık / radius değerleri.
   ========================================================================== */

:root {
  /* --- Yüzeyler --- */
  --color-surface: #f9f9f8;
  --color-surface-dim: #dadad9;
  --color-surface-bright: #f9f9f8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f3;
  --color-surface-container: #eeeeed;
  --color-surface-container-high: #e8e8e7;
  --color-surface-container-highest: #e2e2e2;
  --color-surface-variant: #e2e2e2;
  --color-surface-tint: #885200;

  /* --- Yüzey üstü metin --- */
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #534434;
  --color-inverse-surface: #2f3130;
  --color-inverse-on-surface: #f1f1f0;

  /* --- Kenarlıklar --- */
  --color-outline: #867462;
  --color-outline-variant: #d9c3ae;

  /* --- Birincil (marka) --- */
  --color-primary: #885200;
  --color-on-primary: #ffffff;
  --color-primary-container: #f59a17;
  --color-on-primary-container: #613900;
  --color-inverse-primary: #ffb868;
  --color-primary-fixed: #ffddbb;
  --color-primary-fixed-dim: #ffb868;
  --color-on-primary-fixed: #2b1700;
  --color-on-primary-fixed-variant: #673d00;

  /* --- İkincil --- */
  --color-secondary: #5b5f63;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #dde0e5;
  --color-on-secondary-container: #5f6368;
  --color-secondary-fixed: #e0e3e8;
  --color-secondary-fixed-dim: #c3c7cc;
  --color-on-secondary-fixed: #181c20;
  --color-on-secondary-fixed-variant: #43474c;

  /* --- Üçüncül --- */
  --color-tertiary: #575f67;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #a7afb8;
  --color-on-tertiary-container: #3b434a;
  --color-tertiary-fixed: #dbe3ec;
  --color-tertiary-fixed-dim: #bfc7d0;
  --color-on-tertiary-fixed: #151c23;
  --color-on-tertiary-fixed-variant: #40484f;

  /* --- Hata --- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* --- Arka plan --- */
  --color-background: #f9f9f8;
  --color-on-background: #1a1c1c;

  /* --- Marka kılavuzundaki ek nötrler (DESIGN.md metin bölümü) --- */
  --color-charcoal: #202428;   /* Deep Charcoal — birincil metin */
  --color-slate: #687078;      /* Slate Gray — ikincil / meta metin */
  --color-border: #e2e4e6;     /* Düşük kontrastlı yapısal kenarlık */
  --color-accent: #f59a17;     /* Industrial Orange — CTA ve fiyat */
  --color-white: #ffffff;

  /* --- Durum renkleri (uyarı bileşenleri için) --- */
  --color-success: #1f7a3d;
  --color-on-success: #ffffff;
  --color-success-container: #e6f4ea;
  --color-warning: #b45c00;
  --color-on-warning: #ffffff;
  --color-warning-container: #fdf1e3;
  --color-info: #245a8d;
  --color-on-info: #ffffff;
  --color-info-container: #e8f0f8;

  /* --- Aralıklar (spacing) --- */
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 40px;
  --margin-tablet: 24px;
  --margin-mobile: 16px;
  --stack-xl: 64px;
  --stack-lg: 40px;
  --stack-md: 24px;
  --stack-sm: 12px;
  --stack-xs: 8px;
  --stack-2xs: 4px;

  /* --- Köşe yarıçapları --- */
  --radius-sm: 0.125rem;  /* 2px */
  --radius: 0.25rem;      /* 4px  — çip / etiket */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px  — TEMEL: buton, kart, input */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 9999px;

  /* --- Gölge ("Industrial Glow") --- */
  --shadow-industrial: 0 4px 20px rgba(32, 36, 40, 0.06);
  --shadow-industrial-strong: 0 8px 30px rgba(32, 36, 40, 0.12);
  --shadow-sm: 0 1px 2px rgba(32, 36, 40, 0.05);

  /* --- Odak halkası --- */
  --focus-ring: 0 0 0 2px var(--color-surface-container-lowest), 0 0 0 4px var(--color-primary);

  /* --- Yazı tipi yığınları --- */
  --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Katman sırası (z-index) --- */
  --z-header: 40;
  --z-bottom-nav: 45;
  --z-sticky-actions: 44;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-cookie: 65;

  /* --- Geçiş süreleri --- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* --- Mobil alt bar yüksekliği (sabit gezinme için boşluk hesabı) --- */
  --bottom-nav-h: 64px;
}

/* ==========================================================================
   3. RESET / NORMALIZE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -moz-tab-size: 4;
  tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, pre {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-on-surface);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
  margin: var(--stack-md) 0;
}

/* Erişilebilirlik: klavye ile gezinen kullanıcıya net odak halkası. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Ekran okuyucuya özel metin */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Klavye kullanıcısı için "içeriğe atla" bağlantısı */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--margin-mobile);
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
}

/* Kaydırma çubuğu (webkit) — endüstriyel, ince */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-container-highest);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline-variant);
}

/* ==========================================================================
   4. TİPOGRAFİ SINIFLARI
   DESIGN.md typography bloğuyla birebir aynı değerler.
   ========================================================================== */

.t-display-lg {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.t-headline-lg {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -0.01em;
}

.t-headline-md {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.t-headline-sm {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}

.t-body-md {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.t-label-md {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
}

.t-label-sm {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}

/* Mobilde display/headline küçülür (DESIGN.md: headline-lg-mobile) */
@media (max-width: 767px) {
  .t-display-lg {
    font-size: 32px;
    line-height: 40px;
  }

  .t-headline-lg {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* Tipografi yardımcıları */
.t-upper { text-transform: uppercase; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-bold { font-weight: 700; }
.t-semibold { font-weight: 600; }
.t-medium { font-weight: 500; }
.t-nowrap { white-space: nowrap; }

.t-clamp-1,
.t-clamp-2,
.t-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.t-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.t-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Metin renkleri */
.c-primary { color: var(--color-primary); }
.c-accent { color: var(--color-accent); }
.c-on-surface { color: var(--color-on-surface); }
.c-on-surface-variant { color: var(--color-on-surface-variant); }
.c-secondary { color: var(--color-secondary); }
.c-tertiary { color: var(--color-tertiary); }
.c-outline { color: var(--color-outline); }
.c-error { color: var(--color-error); }
.c-success { color: var(--color-success); }
.c-muted { color: var(--color-slate); }

/* Zemin renkleri */
.bg-surface { background-color: var(--color-surface); }
.bg-white { background-color: var(--color-surface-container-lowest); }
.bg-surface-low { background-color: var(--color-surface-container-low); }
.bg-surface-bright { background-color: var(--color-surface-bright); }
.bg-inverse { background-color: var(--color-inverse-surface); color: var(--color-inverse-on-surface); }

/* ==========================================================================
   5. YERLEŞİM (Layout): container, grid, flex
   Mobil öncelikli. Kırılımlar: 768px (tablet), 1024px (masaüstü).
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

.container-fluid {
  width: 100%;
  padding-inline: var(--margin-mobile);
}

/* Kenar boşluğu olmayan tam genişlik şerit */
.section {
  padding-block: var(--stack-lg);
}

.section-tight {
  padding-block: var(--stack-md);
}

.section-loose {
  padding-block: var(--stack-xl);
}

/* Izgara */
.grid {
  display: grid;
  gap: var(--gutter);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/*
 * Duyarli izgara sinifleri (mobil oncelikli).
 *
 * NEDEN EKLENDI: Sablonlarda "grid-cols-1 grid-cols-4" gibi IKI sinif birden
 * yaziliyordu; niyet "mobilde 1, masaustunde 4" idi. Ancak ikisi de kosulsuz
 * oldugu icin CSS'te sonra gelen (grid-cols-4) HER GENISLIKTE kazaniyor ve
 * telefonda dort sutun yan yana sikisiyordu. Artik masaustu degeri
 * "md:" / "lg:" onekiyle yazilir ve yalnizca ilgili kirilimda uygulanir.
 *
 * Kirilimlar dosyanin geri kalaniyla ayni: 768px (tablet), 1024px (masaustu).
 */
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-12 { grid-column: 1 / -1; }
.row-span-2 { grid-row: span 2 / span 2; }

/* Boşluk yardımcıları */
.gap-0 { gap: 0; }
.gap-xs { gap: var(--stack-xs); }
.gap-sm { gap: var(--stack-sm); }
.gap-md { gap: var(--stack-md); }
.gap-lg { gap: var(--stack-lg); }
.gap-gutter { gap: var(--gutter); }

/* Esnek kutu (flex) yardımcıları */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }

/* Genel yardımcılar */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.mx-auto { margin-inline: auto; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dikey ritim yardımcıları */
.mb-xs { margin-bottom: var(--stack-xs); }
.mb-sm { margin-bottom: var(--stack-sm); }
.mb-md { margin-bottom: var(--stack-md); }
.mb-lg { margin-bottom: var(--stack-lg); }
.mb-xl { margin-bottom: var(--stack-xl); }
.mt-sm { margin-top: var(--stack-sm); }
.mt-md { margin-top: var(--stack-md); }
.mt-lg { margin-top: var(--stack-lg); }

/* Görünürlük yardımcıları — mobil/masaüstü ayrımı.
   Tablet ve üzerinde `display: revert` ile elemanın doğal görüntüleme
   değerine dönülür (block/flex/inline farkı korunur). */
.only-desktop { display: none !important; }

/* Ürün ızgarası: mobil 2 → tablet 3 → masaüstü 4 kolon */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-sm);
}

/* Sayfa gövdesi: mobilde sabit alt bar için alt boşluk */
.has-bottom-nav {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   6. BUTONLAR
   Primary: Industrial Orange zemin, beyaz yazı, 8px radius, GRADYAN YOK.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-xs);
  min-height: 44px;              /* dokunmatik hedef */
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  transition: background-color var(--t-base) ease,
              border-color var(--t-base) ease,
              color var(--t-base) ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Birincil aksiyon — turuncu zemin (#f59a17), beyaz yazı */
.btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #e08c0c;
  border-color: #e08c0c;
  color: var(--color-white);
}

.btn-primary:active {
  background-color: #c87c0a;
  border-color: #c87c0a;
}

/* Koyu birincil — küçük metin/ikon butonlarında kontrast gerektiğinde */
.btn-primary-dark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary-dark:hover {
  background-color: #6f4300;
  border-color: #6f4300;
  color: var(--color-on-primary);
}

/* İkincil — beyaz zemin, 1px koyu kenarlık */
.btn-secondary {
  background-color: var(--color-surface-container-lowest);
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.btn-secondary:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-charcoal);
}

/* Nötr — açık kenarlıklı, kart içi ikincil aksiyon */
.btn-outline {
  background-color: var(--color-surface-container-lowest);
  border-color: var(--color-border);
  color: var(--color-on-surface);
}

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

/* Hayalet — zeminsiz */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-secondary);
}

.btn-ghost:hover {
  background-color: var(--color-surface-container-low);
  color: var(--color-primary);
}

/* Tehlike */
.btn-danger {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-error);
}

.btn-danger:hover {
  background-color: #9c1414;
  border-color: #9c1414;
  color: var(--color-on-error);
}

/* WhatsApp aksiyonu (ürün detayında kullanılıyor) */
.btn-whatsapp {
  background-color: #25d366;
  border-color: #25d366;
  color: #0b2e18;
}

.btn-whatsapp:hover {
  background-color: #1fb958;
  border-color: #1fb958;
  color: #0b2e18;
}

/* Boyutlar */
.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0;
}

.btn-lg {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 16px;
  line-height: 20px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Yalnızca ikon */
.btn-icon {
  min-height: 40px;
  width: 40px;
  padding: 0;
  border-radius: var(--radius-lg);
}

.btn-icon-round {
  border-radius: var(--radius-full);
}

/* Yükleniyor durumu — dönen halka */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading > * {
  visibility: hidden;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  opacity: 0.9;
  animation: brk-spin 700ms linear infinite;
  /* Renk, butonun ilk metin renginden bağımsız kalsın diye ayrıca verilir */
  border-color: rgba(255, 255, 255, 0.85);
  border-top-color: transparent;
}

.btn-secondary.btn-loading::after,
.btn-outline.btn-loading::after,
.btn-ghost.btn-loading::after {
  border-color: rgba(32, 36, 40, 0.55);
  border-top-color: transparent;
}

@keyframes brk-spin {
  to { transform: rotate(360deg); }
}

/* Buton grubu */
.btn-group {
  display: inline-flex;
  gap: var(--stack-xs);
  flex-wrap: wrap;
}

/* ==========================================================================
   7. KARTLAR VE ÜRÜN KARTI
   Beyaz zemin, 1px kenarlık, gölge YOK. Hover'da "Industrial Glow".
   ========================================================================== */

.card {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-flat {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-container-lowest);
}

.card__header {
  padding: var(--stack-sm) var(--stack-md);
  border-bottom: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
}

.card__body {
  padding: var(--stack-md);
}

.card__footer {
  padding: var(--stack-sm) var(--stack-md);
  border-top: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
}

.card-hover:hover {
  box-shadow: var(--shadow-industrial);
  border-color: var(--color-outline);
}

/* --- Ürün kartı --- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.product-card:hover,
.product-card:focus-within {
  box-shadow: var(--shadow-industrial);
  border-color: var(--color-outline);
}

/* Görsel alanı: aspect-ratio ile sabit oran → CLS (düzen kayması) önlenir. */
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stack-sm);
  background-color: var(--color-surface-bright);
  border-bottom: 1px solid var(--color-outline-variant);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow) ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

.product-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--stack-sm);
  gap: 4px;
}

.product-card__brand {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--color-tertiary);
}

.product-card__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-on-surface);
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__title a {
  color: inherit;
}

.product-card__title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.product-card__code {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--color-outline);
}

/* Fiyat: turuncu, headline-sm */
.product-card__price {
  margin-top: auto;
  padding-top: var(--stack-xs);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-accent);
}

.product-card__price .vat {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--color-secondary);
}

.product-card__price-old {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-slate);
  text-decoration: line-through;
}

.product-card__actions {
  margin-top: var(--stack-sm);
  display: flex;
  gap: var(--stack-xs);
}

/* Kart üstü yüzen aksiyonlar (favori / karşılaştır) */
.product-card__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  transition: color var(--t-base) ease, border-color var(--t-base) ease;
}

.product-card__fav:hover,
.product-card__fav.is-active {
  color: var(--color-error);
  border-color: var(--color-error);
}

.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* Liste görünümü (yan yana) */
.product-card--row {
  flex-direction: row;
}

.product-card--row .product-card__media {
  width: 160px;
  flex-shrink: 0;
  border-bottom: 0;
  border-right: 1px solid var(--color-outline-variant);
}

/* --- Kategori kutusu (ana sayfa bento ızgarası) --- */
.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--stack-md);
  min-height: 160px;
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  color: var(--color-on-surface);
  overflow: hidden;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}

.category-tile:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-industrial);
  text-decoration: none;
}

.category-tile__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.category-tile__desc {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-on-surface-variant);
}

.category-tile img {
  align-self: flex-end;
  max-height: 60%;
  object-fit: contain;
}

/* --- Güven / fayda şeridi --- */
.trust-strip {
  border-top: 1px solid var(--color-outline-variant);
  border-bottom: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-bright);
  padding-block: var(--stack-md);
}

.trust-item {
  display: flex;
  /*
   * Ikon BASLIKLA hizalanir, metin blogunun ortasiyla degil.
   * Aciklama iki satira dustugunde "center" ikonu asagi kaydirip
   * basliktan kopariyordu.
   */
  align-items: flex-start;
  gap: var(--stack-sm);
  padding-block: var(--stack-sm);
}

/* Ikonun optik merkezini basligin govde yuksekligine oturtur. */
.trust-item > .icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.trust-item + .trust-item {
  border-top: 1px solid var(--color-outline-variant);
}

.trust-item__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--color-on-surface);
  margin-bottom: 4px;
}

.trust-item__desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-on-surface-variant);
}

/* ==========================================================================
   8. ROZETLER (Badge / Tag)
   Dikdörtgen, 4px radius. Nötr teknik etiketler + ince turuncu vurgular.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

.badge-new {
  background-color: var(--color-primary-fixed);
  border-color: var(--color-primary-fixed-dim);
  color: var(--color-on-primary-fixed);
}

.badge-popular {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-primary-container);
}

.badge-stock {
  background-color: var(--color-success-container);
  border-color: rgba(31, 122, 61, 0.28);
  color: var(--color-success);
}

.badge-outstock {
  background-color: var(--color-error-container);
  border-color: rgba(186, 26, 26, 0.28);
  color: var(--color-on-error-container);
}

.badge-discount {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-error);
}

.badge-neutral {
  background-color: var(--color-surface-container);
  border-color: var(--color-border);
  color: var(--color-secondary);
}

/* Sayaç rozeti (sepet/favori adedi) */
.badge-count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-error);
  color: var(--color-on-error);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

/* ==========================================================================
   9. FORM ELEMANLARI
   1px kenarlık #E2E4E6; odakta turuncu kenarlık + 2px dış halka.
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--stack-sm);
}

/*
 * "hidden" ozniteligi HER ZAMAN kazanmalidir.
 * Tarayicinin varsayilan [hidden]{display:none} kurali, yazar tarafindan
 * verilen .form-group{display:flex} tarafindan eziliyordu; bu yuzden
 * gizlenmesi gereken alanlar ekranda kaliyordu.
 */
[hidden] {
  display: none !important;
}

.form-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--color-on-surface);
}

.form-label .required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 24px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-slate);
  opacity: 1;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-outline-variant);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(245, 154, 23, 0.28);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-surface-container);
  color: var(--color-slate);
  cursor: not-allowed;
}

/* Seçim kutusu oku (SVG, harici istek yok) */
.form-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235b5f63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

/* Hata durumu */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-error);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.24);
}

.form-error {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-error);
}

.form-hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-slate);
}

/* Onay kutusu / radyo */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-xs);
  cursor: pointer;
  padding-block: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-on-surface-variant);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.form-check input[type="radio"] {
  border-radius: var(--radius-full);
}

.form-check input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.2l3 3 6-6.4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-check input[type="radio"]:checked {
  border-color: var(--color-accent);
  border-width: 5px;
}

.form-check input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-check:hover {
  color: var(--color-on-surface);
}

/* Arama kutusu (başlıktaki) */
.form-search {
  position: relative;
  width: 100%;
}

.form-search .form-input {
  padding-right: 44px;
  background-color: var(--color-surface-bright);
  border-color: var(--color-outline-variant);
}

.form-search__btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-secondary);
}

.form-search__btn:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-container-low);
}

/* Form ızgarası (çok kolonlu formlar) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-sm) var(--stack-md);
}

/* ==========================================================================
   10. VERİ TABLOSU
   Yüksek yoğunluklu satırlar, yalnızca yatay 1px ayraç.
   ========================================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
}

.table {
  width: 100%;
  min-width: 560px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface);
}

.table thead th {
  padding: 10px 12px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-secondary);
  white-space: nowrap;
}

.table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background-color: var(--color-surface-container-low);
}

.table tfoot td {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
  font-weight: 600;
  background-color: var(--color-surface);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-compact tbody td,
.table-compact thead th {
  padding: 6px 10px;
}

/* ==========================================================================
   11. UYARILAR (Alert)
   Büyük renk blokları yok: ince kenarlık + açık zemin.
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-xs);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface);
}

.alert__title {
  font-weight: 600;
  margin-bottom: 2px;
}

.alert-success {
  background-color: var(--color-success-container);
  border-color: rgba(31, 122, 61, 0.25);
  border-left-color: var(--color-success);
}

.alert-error {
  background-color: var(--color-error-container);
  border-color: rgba(186, 26, 26, 0.25);
  border-left-color: var(--color-error);
}

.alert-warning {
  background-color: var(--color-warning-container);
  border-color: rgba(180, 92, 0, 0.25);
  border-left-color: var(--color-warning);
}

.alert-info {
  background-color: var(--color-info-container);
  border-color: rgba(36, 90, 141, 0.25);
  border-left-color: var(--color-info);
}

/* ==========================================================================
   12. GEZİNME BİLEŞENLERİ
   breadcrumb, pagination, chip / filter-chip, accordion, tabs
   ========================================================================== */

/* --- Kırıntı yolu --- */
.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  padding-block: var(--stack-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-tertiary);
  scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb a {
  color: var(--color-tertiary);
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--color-outline-variant);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-on-surface);
  font-weight: 600;
}

/* --- Sayfalama --- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--stack-lg);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  transition: background-color var(--t-base) ease, color var(--t-base) ease;
}

.pagination__item:hover {
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface);
  text-decoration: none;
}

.pagination__item.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.pagination__item:disabled,
.pagination__item.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.pagination__gap {
  padding: 0 4px;
  color: var(--color-secondary);
}

/* --- Çipler / filtre çipleri --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface-container-lowest);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-secondary);
  white-space: nowrap;
}

.chip-accent {
  background-color: rgba(245, 154, 23, 0.12);
  border-color: rgba(245, 154, 23, 0.4);
  color: var(--color-on-primary-container);
}

.filter-chip {
  cursor: pointer;
  transition: border-color var(--t-base) ease, background-color var(--t-base) ease, color var(--t-base) ease;
}

.filter-chip:hover {
  border-color: var(--color-outline);
  color: var(--color-on-surface);
}

.filter-chip.is-active,
.filter-chip[aria-pressed="true"] {
  background-color: rgba(245, 154, 23, 0.14);
  border-color: var(--color-accent);
  color: var(--color-on-primary-container);
}

.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  color: inherit;
  opacity: 0.7;
}

.filter-chip__remove:hover {
  opacity: 1;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
}

/* --- Akordeon --- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--stack-xs);
}

.accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  overflow: hidden;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
  background-color: var(--color-surface-container-lowest);
  transition: background-color var(--t-base) ease;
}

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

.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform var(--t-base) ease;
  color: var(--color-secondary);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-bright);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-on-surface-variant);
}

.accordion__panel[hidden] {
  display: none;
}

/* --- Sekmeler --- */
.tabs__list {
  display: flex;
  gap: var(--stack-md);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  position: relative;
  padding: 12px 2px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-base) ease, border-color var(--t-base) ease;
}

.tabs__tab:hover {
  color: var(--color-on-surface);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.tabs__panel {
  padding-top: var(--stack-md);
}

.tabs__panel[hidden] {
  display: none;
}

/* ==========================================================================
   13. ADET GİRİŞİ, YILDIZ DEĞERLENDİRME
   ========================================================================== */

.qty-input {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  overflow: hidden;
}

.qty-input__btn {
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-on-surface);
  background-color: transparent;
  transition: background-color var(--t-fast) ease;
}

.qty-input__btn:hover {
  background-color: var(--color-surface-variant);
}

.qty-input__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-input__field {
  width: 56px;
  min-height: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  background-color: transparent;
  color: var(--color-on-surface);
  appearance: textfield;
  -moz-appearance: textfield;
}

.qty-input__field::-webkit-outer-spin-button,
.qty-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input__field:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(245, 154, 23, 0.28);
}

.qty-input-sm {
  height: 34px;
}

.qty-input-sm .qty-input__btn { width: 30px; font-size: 15px; }
.qty-input-sm .qty-input__field { width: 44px; font-size: 14px; }

/* --- Yıldızlar --- */
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-accent);
  line-height: 1;
}

.rating-stars__star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-surface-container-highest);
}

.rating-stars__star.is-full,
.rating-stars__star.is-half {
  color: var(--color-accent);
}

.rating-stars__count {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
}

/* ==========================================================================
   14. İSKELET (Skeleton) VE BOŞ DURUM
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-container);
  border-radius: var(--radius);
  color: transparent !important;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: brk-shimmer 1.4s ease-in-out infinite;
}

@keyframes brk-shimmer {
  100% { transform: translateX(100%); }
}

.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}

.skeleton-text:last-child { width: 60%; margin-bottom: 0; }
.skeleton-title { height: 20px; border-radius: var(--radius-sm); }
.skeleton-media { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius-lg); }
.skeleton-btn { height: 40px; border-radius: var(--radius-lg); }

/* --- Boş durum --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--stack-sm);
  padding: var(--stack-xl) var(--stack-md);
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  color: var(--color-outline-variant);
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
}

.empty-state__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-slate);
  max-width: 44ch;
}

/* ==========================================================================
   15. MODAL, ÇEKMECE (Drawer) VE BİLDİRİM (Toast)
   ========================================================================== */

/* --- Perde --- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: rgba(26, 28, 28, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) ease, visibility var(--t-base) ease;
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Modal --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin-mobile);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-base) ease, visibility var(--t-base) ease;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 28, 28, 0.45);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-industrial-strong);
  transform: translateY(8px);
  transition: transform var(--t-base) ease;
}

.modal.is-open .modal__dialog {
  transform: translateY(0);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
}

.modal__body {
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-on-surface-variant);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--stack-xs);
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-secondary);
}

.modal__close:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* --- Çekmece (mobil menü / mobil filtre) --- */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-industrial-strong);
  transition: transform var(--t-slow) ease;
  visibility: hidden;
}

.drawer-left {
  left: 0;
  transform: translateX(-100%);
  border-right: 1px solid var(--color-border);
}

.drawer-right {
  right: 0;
  transform: translateX(100%);
  border-left: 1px solid var(--color-border);
}

.drawer-bottom {
  left: 0;
  right: 0;
  top: auto;
  width: 100%;
  max-height: 85vh;
  transform: translateY(100%);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.drawer.is-open {
  visibility: visible;
  transform: translate(0, 0);
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.drawer__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.drawer__footer {
  flex-shrink: 0;
  display: flex;
  gap: var(--stack-xs);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

/* Çekmece açıkken gövde kaydırması kilitlenir (JS .is-locked ekler) */
body.is-locked {
  overflow: hidden;
}

/* Çekmece içi menü listesi */
.drawer-nav {
  display: flex;
  flex-direction: column;
}

.drawer-nav a {
  display: flex;
  align-items: center;
  gap: var(--stack-sm);
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-on-surface);
}

.drawer-nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- Mobil çekmecede katlanır menü (panelden yönetilen öğeler) --- */
.drawer-nav__title {
  padding: 14px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.drawer-nav__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}

.drawer-nav__row > a,
.drawer-nav__row > .drawer-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}

.drawer-nav__label {
  display: flex;
  align-items: center;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-on-surface);
}

.drawer-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--color-slate);
  cursor: pointer;
}

.drawer-nav__caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-base) ease;
}

.drawer-nav__toggle[aria-expanded="true"] .drawer-nav__caret {
  transform: translateY(2px) rotate(-135deg);
}

.drawer-nav__sub[hidden] {
  display: none;
}

.drawer-nav__sub {
  background-color: var(--color-surface-container-low, #f3f3f1);
}

/* --- Bildirimler (Toast) --- */
.toast-container {
  position: fixed;
  right: var(--margin-mobile);
  bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--stack-xs);
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-xs);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-industrial);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base) ease, transform var(--t-base) ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast__message {
  flex: 1 1 auto;
}

.toast__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate);
  border-radius: var(--radius-sm);
}

.toast__close:hover {
  color: var(--color-on-surface);
}

.toast-success { border-left-color: var(--color-success); background-color: var(--color-success-container); }
.toast-error { border-left-color: var(--color-error); background-color: var(--color-error-container); }
.toast-warning { border-left-color: var(--color-warning); background-color: var(--color-warning-container); }
.toast-info { border-left-color: var(--color-info); background-color: var(--color-info-container); }

/* ==========================================================================
   16. SİTE BAŞLIĞI (Header) VE ALT GEZİNME
   ========================================================================== */

/* --- Masaüstü başlık --- */
.site-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-block: 14px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--stack-xs);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--color-secondary);
}

.site-header__brand:hover {
  text-decoration: none;
  color: var(--color-primary);
}

.site-header__search {
  flex: 1 1 auto;
  max-width: 620px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--stack-md);
}

.header-action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 4px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--color-secondary);
  transition: color var(--t-base) ease;
}

.header-action:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.header-action.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

.header-action__icon {
  width: 24px;
  height: 24px;
}

/* Alt kategori navigasyonu */
/* ==========================================================================
   ÜST BİLGİ ÇUBUĞU (site-topbar)
   İçeriği panelden "Menüler > Üst Menü" konumundan yönetilir.
   ========================================================================== */

.site-topbar {
  background-color: var(--color-surface-container-low, #f3f3f1);
  border-bottom: 1px solid var(--color-outline-variant);
  font-size: 13px;
}

.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  min-height: 38px;
  flex-wrap: wrap;
}

.site-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.site-topbar__phone:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.site-topbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--stack-md);
  margin-left: auto;
}

.site-topbar__nav a {
  color: var(--color-slate);
  font-weight: 500;
}

.site-topbar__nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ==========================================================================
   ANA MENÜ — KURUMSAL AÇILIR MENÜ
   Yapının tamamı yönetim panelindeki menü öğelerinden üretilir.
   ========================================================================== */

.site-header__nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  border-top: 1px solid var(--color-outline-variant);
}

/* --- Üst seviye öğe --- */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-base) ease, border-color var(--t-base) ease,
              background-color var(--t-base) ease;
}

/* Bağlantısı olmayan üst öğe: buton olarak basılır (klavye erişimi için) */
button.nav-item__link {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.nav-item__link--plain {
  cursor: pointer;
}

.nav-item__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.nav-item__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-item.is-active > .nav-item__link,
.nav-item__link[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.nav-item.is-highlighted > .nav-item__link {
  color: var(--color-accent-strong, #b56a00);
}

/* Ok işareti — CSS ile çizilir, ikon dosyası gerektirmez */
.nav-item__caret {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.65;
  transition: transform var(--t-base) ease;
}

.nav-item.is-open > .nav-item__link .nav-item__caret,
.nav-item:hover > .nav-item__link .nav-item__caret {
  transform: translateY(1px) rotate(-135deg);
}

/*
 * Dokunmatik/klavye için ayrı aç-kapa düğmesi.
 * Masaüstünde gizlidir (hover yeterli); dokunmatikte JS onu görünür kılar.
 */
.nav-item__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border: 0;
  background: none;
  color: var(--color-secondary);
  cursor: pointer;
}

body.is-touch .nav-item.has-children > .nav-item__toggle {
  display: inline-flex;
}

/* --- Açılır panel --- */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: calc(var(--z-header) + 5);
  min-width: 240px;
  padding: 8px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(26, 28, 28, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-fast) ease, visibility var(--t-fast) ease,
              transform var(--t-fast) ease;
}

/* Fare panele giderken menüden çıkmasın diye görünmez köprü */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ekranın sağına taşan panel sola hizalanır (JS sınıf ekler) */
.nav-dropdown.is-flipped {
  left: auto;
  right: 0;
}

.nav-dropdown__inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Torunu olan menü => sütunlu (mega) panel */
.nav-dropdown--mega {
  min-width: min(760px, calc(100vw - 48px));
  padding: 16px;
}

.nav-dropdown--mega .nav-dropdown__inner {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}

.nav-dropdown--mega .nav-dropdown__col {
  flex: 1 1 180px;
  min-width: 160px;
}

.nav-dropdown__link {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown__link:hover {
  background-color: var(--color-surface-container-low, #f3f3f1);
  color: var(--color-primary);
  text-decoration: none;
}

.nav-dropdown__link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* Mega menüde sütun başlığı */
.nav-dropdown--mega .nav-dropdown__link--head {
  padding-inline: 0;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.nav-dropdown--mega .nav-dropdown__link--head:hover {
  background: none;
}

.nav-dropdown--mega .nav-dropdown__link--sub {
  padding-inline: 0;
}

/* --- Mobil başlık --- */
.mobile-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
}

.mobile-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-xs);
  padding: 10px var(--margin-mobile);
}

.mobile-header__brand {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-primary);
}

.mobile-header__brand:hover {
  text-decoration: none;
}

.mobile-header__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-secondary);
}

.mobile-header__btn:hover {
  background-color: var(--color-surface-container-low);
}

.mobile-header__search {
  padding: 0 var(--margin-mobile) 12px;
}

.mobile-header__search .form-input {
  min-height: 40px;
  font-size: 14px;
}

/* --- Canlı arama sonuç paneli --- */
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 5);
  max-height: 420px;
  overflow-y: auto;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-industrial);
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--stack-sm);
  width: 100%;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  color: var(--color-on-surface);
  background-color: transparent;
  transition: background-color var(--t-fast) ease;
}

.search-suggest__item:last-child {
  border-bottom: 0;
}

.search-suggest__item:hover,
.search-suggest__item.is-active {
  background-color: var(--color-surface-container-low);
  text-decoration: none;
}

.search-suggest__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.search-suggest__info {
  flex: 1 1 auto;
  min-width: 0;
}

.search-suggest__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest__code {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-slate);
}

.search-suggest__price {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.search-suggest__empty,
.search-suggest__more {
  display: block;
  padding: 12px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-slate);
}

/* --- Mobil alt gezinme çubuğu --- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-nav);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--color-surface-container-lowest);
  border-top: 1px solid var(--color-outline-variant);
}

.bottom-nav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  color: var(--color-secondary);
  transition: color var(--t-fast) ease;
}

.bottom-nav__item:hover {
  text-decoration: none;
}

.bottom-nav__item.is-active,
.bottom-nav__item[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
}

.bottom-nav__icon {
  width: 22px;
  height: 22px;
}

.bottom-nav .badge-count {
  top: 2px;
  right: calc(50% - 20px);
}

/* ==========================================================================
   17. MOBİL SABİT AKSİYON ALANI (Ürün detayı)
   ========================================================================== */

.sticky-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky-actions);
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
  padding: 10px var(--margin-mobile);
  background-color: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-industrial);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .sticky-actions {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.sticky-actions .qty-input {
  flex-shrink: 0;
}

.sticky-actions .btn {
  flex: 1 1 auto;
}

.sticky-actions__price {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Sabit aksiyon alanı varken sayfa altına ek boşluk */
.has-sticky-actions {
  padding-bottom: calc(var(--bottom-nav-h) + 72px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   18. ÜRÜN DETAY GALERİSİ
   ========================================================================== */

.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stack-sm);
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.gallery__thumbs {
  display: flex;
  gap: var(--stack-xs);
  margin-top: var(--stack-xs);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.gallery__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 6px;
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  opacity: 0.65;
  transition: opacity var(--t-base) ease, border-color var(--t-base) ease;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb.is-active,
.gallery__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--color-accent);
}

/* Teknik özellik tablosu (ürün detayı) */
.spec-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  overflow: hidden;
}

.spec-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-secondary);
}

.spec-list__row:last-child {
  border-bottom: 0;
}

.spec-list__value {
  font-weight: 600;
  color: var(--color-on-surface);
  text-align: right;
}

/* Ürün detay fiyat bloğu */
.price-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-block__main {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

.price-block__main .vat {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-secondary);
}

.price-block__old {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-slate);
  text-decoration: line-through;
}

/* ==========================================================================
   19. SEPET
   ========================================================================== */

.cart-line {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.cart-line__media {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-line__info {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-line__title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-on-surface);
  padding-right: 28px;
}

.cart-line__code {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
}

.cart-line__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  margin-top: var(--stack-sm);
}

.cart-line__price {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--color-accent);
}

.cart-line__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--color-tertiary);
  transition: color var(--t-base) ease, background-color var(--t-base) ease;
}

.cart-line__remove:hover {
  color: var(--color-error);
  background-color: var(--color-error-container);
}

/* Sipariş özeti kutusu */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  padding: var(--stack-md);
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.cart-summary__title {
  padding-bottom: var(--stack-xs);
  border-bottom: 1px solid var(--color-outline-variant);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
}

.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-on-surface-variant);
}

.cart-summary__total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--color-outline-variant);
}

.cart-summary__total-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-accent);
}

/* ==========================================================================
   20. SİTE ALT BİLGİSİ (Footer) — koyu #2f3130 zemin
   ========================================================================== */

.site-footer {
  margin-top: auto;
  background-color: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-md);
  padding-block: var(--stack-lg);
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-white);
  margin-bottom: var(--stack-xs);
}

.site-footer__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--stack-sm);
}

.site-footer p,
.site-footer li {
  color: var(--color-surface-variant);
}

.site-footer a {
  color: var(--color-surface-variant);
  transition: color var(--t-base) ease;
}

.site-footer a:hover {
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-xs);
  padding-block: var(--stack-md);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: 13px;
  color: var(--color-surface-variant);
}

/* Mobilde alt gezinme çubuğunun altında kalmasın */
.site-footer--with-bottom-nav {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   21. ÇEREZ TERCİH BANNER'I
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  padding: var(--stack-sm) var(--margin-mobile)
           calc(var(--stack-sm) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-surface-container-lowest);
  border-top: 1px solid var(--color-outline-variant);
  box-shadow: var(--shadow-industrial-strong);
  transform: translateY(100%);
  transition: transform var(--t-slow) ease;
}

.cookie-banner.is-open {
  transform: translateY(0);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  max-width: var(--container-max);
  margin-inline: auto;
}

.cookie-banner__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-on-surface-variant);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
}

.cookie-banner__actions .btn {
  flex: 1 1 auto;
}

/* Tercihler paneli (modal gövdesinde) */
.consent-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.consent-option:last-child {
  border-bottom: 0;
}

.consent-option__name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.consent-option__desc {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-slate);
}

/* ==========================================================================
   22. FİLTRE ÇUBUĞU / KENAR ÇUBUĞU (Ürün listesi)
   ========================================================================== */

.listing {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.listing__sidebar {
  display: none;
  flex-shrink: 0;
  width: 260px;
}

.listing__main {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar-box {
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  margin-bottom: var(--stack-sm);
}

.sidebar-box__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-on-surface);
  margin-bottom: var(--stack-xs);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition: background-color var(--t-base) ease, color var(--t-base) ease;
}

.sidebar-nav a:hover {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
  text-decoration: none;
}

.sidebar-nav a[aria-current="page"] {
  background-color: rgba(245, 154, 23, 0.14);
  color: var(--color-on-primary-container);
  font-weight: 600;
}

/* Liste araç çubuğu */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  margin-bottom: var(--stack-md);
}

.toolbar__count {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-secondary);
}

.toolbar__count strong {
  color: var(--color-on-surface);
}

.toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
}

.toolbar .form-select {
  min-height: 38px;
  padding-block: 6px;
  font-size: 14px;
  min-width: 180px;
}

/* Görünüm değiştirici (ızgara / liste) */
.view-switch {
  display: inline-flex;
  padding: 3px;
  background-color: var(--color-surface-variant);
  border-radius: var(--radius-md);
  gap: 2px;
}

.view-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--color-secondary);
}

.view-switch__btn.is-active {
  background-color: var(--color-surface-container-lowest);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Mobil filtre/sırala aksiyon çifti */
.mobile-filters {
  display: flex;
  gap: var(--stack-xs);
  margin-bottom: var(--stack-sm);
}

.mobile-filters > * {
  flex: 1 1 0;
}

/* ==========================================================================
   23. HERO (Ana sayfa)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  background-color: var(--color-surface-dim);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-sm);
  padding-block: var(--stack-lg);
  max-width: 620px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(249, 249, 248, 0.86);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-surface);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
  margin-top: var(--stack-xs);
}

/* Bölüm başlığı */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stack-sm);
  margin-bottom: var(--stack-md);
}

.section-head__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--color-on-surface);
}

.section-head__rule {
  width: 64px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  margin: var(--stack-xs) auto 0;
}

/* İkon boyutlandırma (satır içi SVG için) */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ==========================================================================
   24. DUYARLILIK — TABLET (>= 768px)
   DESIGN.md: 8 kolon, 24px kenar boşluğu.
   ========================================================================== */

@media (min-width: 768px) {
  .container,
  .container-fluid {
    padding-inline: var(--margin-tablet);
  }

  .cookie-banner {
    padding-inline: var(--margin-tablet);
  }

  .mobile-header__bar,
  .mobile-header__search {
    padding-inline: var(--margin-tablet);
  }

  /* Görünürlük */
  .only-desktop { display: revert !important; }
  .only-mobile { display: none !important; }

  .site-header { display: block; }
  .mobile-header { display: none; }
  .bottom-nav { display: none; }
  .sticky-actions { display: none; }

  .has-bottom-nav,
  .has-sticky-actions,
  .site-footer--with-bottom-nav {
    padding-bottom: 0;
  }

  .toast-container {
    right: var(--margin-tablet);
    bottom: 24px;
  }

  /* Izgara — tablet kolonları */
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-md-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .flex-row-md { flex-direction: row; }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .product-card__body {
    padding: var(--stack-md);
  }

  .listing {
    flex-direction: row;
  }

  .mobile-filters { display: none; }

  .hero {
    min-height: 520px;
  }

  .trust-item {
    padding-inline: var(--stack-sm);
    border-top: 0;
  }

  .trust-item + .trust-item {
    border-top: 0;
    border-left: 1px solid var(--color-outline-variant);
  }

  .cart-line {
    flex-direction: row;
    align-items: center;
    gap: var(--stack-md);
  }

  .cart-line__media {
    width: 120px;
    height: 120px;
  }

  .site-footer__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--stack-lg);
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-md);
  }

  .cookie-banner__actions .btn {
    flex: 0 0 auto;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid .span-2 {
    grid-column: 1 / -1;
  }

  .modal__dialog {
    max-width: 560px;
  }

  .empty-state {
    padding: var(--stack-xl);
  }
}

/* ==========================================================================
   25. DUYARLILIK — MASAÜSTÜ (>= 1024px)
   DESIGN.md: 12 kolon, 40px kenar boşluğu.
   ========================================================================== */

@media (min-width: 1024px) {
  .container,
  .container-fluid {
    padding-inline: var(--margin-desktop);
  }

  .cookie-banner {
    padding-inline: var(--margin-desktop);
  }

  .toast-container {
    right: var(--margin-desktop);
  }

  /* Izgara — masaüstü kolonları */
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-cols-lg-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .listing__sidebar {
    display: block;
  }

  .listing__sidebar .sidebar-box {
    position: sticky;
    top: 96px;
  }

  .hero {
    min-height: 560px;
  }

  .cart-layout {
    display: flex;
    flex-direction: row;
    gap: var(--gutter);
    align-items: flex-start;
  }

  .cart-layout__aside {
    width: 360px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
  }

  .category-tile {
    min-height: 200px;
  }
}

/* ==========================================================================
   26. YAZDIRMA
   ========================================================================== */

@media print {
  .site-header,
  .mobile-header,
  .bottom-nav,
  .sticky-actions,
  .cookie-banner,
  .toast-container,
  .drawer,
  .overlay,
  .site-footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card,
  .product-card,
  .table-wrap {
    box-shadow: none;
    border-color: #ccc;
  }
}

/* ==========================================================================
   27. HAREKET AZALTMA TERCİHİ
   Kullanıcı "hareketi azalt" dediyse tüm animasyon ve geçişler kapatılır.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton::after {
    animation: none;
    display: none;
  }

  .product-card:hover .product-card__media img {
    transform: none;
  }

  /* Yükleniyor göstergesi tamamen kaybolmasın; yavaş dönsün. */
  .btn-loading::after {
    animation: brk-spin 2.4s linear infinite !important;
    animation-duration: 2.4s !important;
  }
}

/* ==========================================================================
   EK BILESENLER — vitrin sablonlarinin kullandigi tamamlayici siniflar
   (kategori bento kutucuklari, cekmece menu gruplari, urun detayi)
   ========================================================================== */

/* --- Kategori kutucugu (bento izgara) --- */
.category-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
}

.category-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--stack-sm);
}

.category-tile__media {
  align-self: flex-end;
  width: 70%;
  margin-top: auto;
}

.category-tile__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.category-tile__icon {
  display: block;
  margin-top: auto;
  text-align: right;
}

@media (min-width: 768px) {
  .category-tile { min-height: 200px; }
  .category-tile--large { min-height: 424px; }
  .category-tile--large .category-tile__title { font-size: 18px; line-height: 24px; }
}

/* --- Cekmece menu ic gruplar --- */
.drawer-nav__group > a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-nav__group[data-depth="1"] > a,
.drawer-nav__group[data-depth="2"] > a {
  font-size: 14px;
  color: var(--color-on-surface-variant);
}

.drawer-nav hr {
  margin: var(--stack-sm) 0;
  border: 0;
  border-top: 1px solid var(--color-outline-variant);
}

/* --- Urun detayi duzeni --- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
}

@media (min-width: 1024px) {
  .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.product-detail__title {
  margin: 0 0 var(--stack-sm);
}

.product-detail__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.product-detail__meta {
  margin: var(--stack-md) 0;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-detail__meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
}

.product-detail__meta dt,
.product-detail__meta dd {
  padding: 10px 14px;
  margin: 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-outline-variant);
}

.product-detail__meta dt { color: var(--color-secondary); }
.product-detail__meta dd { text-align: right; font-weight: 500; }
.product-detail__meta dl > :nth-last-child(-n+2) { border-bottom: 0; }

.product-detail__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: var(--stack-md) 0 4px;
}

.product-detail__price-main {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary-container);
}

.product-detail__price-old {
  font-size: 18px;
  color: var(--color-secondary);
  text-decoration: line-through;
}

.product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-sm);
  margin: var(--stack-md) 0;
}

.product-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-sm) var(--stack-md);
  padding: var(--stack-sm) var(--stack-md);
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
}

.product-detail__links button,
.product-detail__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  color: var(--color-on-surface-variant);
  background: none;
  border: 0;
  cursor: pointer;
}

.product-detail__links button:hover,
.product-detail__links a:hover { color: var(--color-primary); }

/* --- Varyasyon secim butonlari --- */
.variant-group { margin-bottom: var(--stack-md); }

.variant-group__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-option {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.variant-option:hover { border-color: var(--color-outline); }

.variant-option.is-selected {
  color: var(--color-on-primary);
  background-color: var(--color-primary-container);
  border-color: var(--color-primary-container);
}

.variant-option:disabled,
.variant-option.is-unavailable {
  color: var(--color-outline);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: .55;
}

/* --- Adet + sepete ekle satiri --- */
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-sm);
  align-items: stretch;
}

.buy-row .qty-input { flex: 0 0 auto; }
.buy-row .btn { flex: 1 1 200px; }

/* --- Kademeli fiyat tablosu --- */
.tier-table {
  width: 100%;
  margin-top: var(--stack-sm);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14px;
}

.tier-table th,
.tier-table td { padding: 8px 12px; text-align: left; }
.tier-table thead th { background-color: var(--color-surface); font-size: 12px; text-transform: uppercase; }
.tier-table tbody tr + tr td { border-top: 1px solid var(--color-outline-variant); }
.tier-table td:last-child { text-align: right; font-weight: 600; color: var(--color-primary-container); }

/* --- Sepet duzeni --- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .cart-layout .cart-summary { position: sticky; top: 140px; }
}

.free-shipping-bar {
  padding: 12px 16px;
  margin-bottom: var(--stack-md);
  font-size: 14px;
  background-color: var(--color-primary-fixed);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.free-shipping-bar__track {
  height: 6px;
  margin-top: 8px;
  overflow: hidden;
  background-color: var(--color-surface-container-highest);
  border-radius: 999px;
}

.free-shipping-bar__fill {
  height: 100%;
  background-color: var(--color-primary-container);
  border-radius: 999px;
  transition: width var(--t-slow) ease;
}

/* --- Kupon alani --- */
.coupon-form {
  display: flex;
  gap: 8px;
  margin: var(--stack-sm) 0;
}

.coupon-form .form-input { flex: 1 1 auto; }

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 14px;
  background-color: var(--color-surface-container-low);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   30. VİTRİN EK BİLEŞENLERİ
   Arama, marka, içerik (CMS/blog/SSS), favori-karşılaştırma, teklif,
   banka hesapları ve hata sayfaları.
   ========================================================================== */

/* --- Bal küpü (honeypot): ekran okuyuculardan ve gözden tamamen gizli --- */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- İki kolonlu form ızgarası --- */
@media (min-width: 768px) {
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- Markalar */

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

@media (min-width: 640px)  { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-xs);
  padding: var(--stack-md);
  text-align: center;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}

.brand-tile:hover {
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-industrial);
  text-decoration: none;
}

.brand-tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
}

.brand-tile__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-tile__initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.brand-tile__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.brand-tile__count {
  font-size: 12px;
  color: var(--color-slate);
}

.brand-head {
  display: flex;
  align-items: center;
  gap: var(--stack-md);
  flex-wrap: wrap;
}

.brand-head__logo {
  width: auto;
  max-height: 64px;
  object-fit: contain;
}

/* --------------------------------------------------------------- İletişim */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}

.contact-info__row {
  display: flex;
  align-items: flex-start;
  gap: var(--stack-xs);
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface-variant);
}

.contact-info__row .icon { flex-shrink: 0; color: var(--color-primary); }

/* -------------------------------------------------------------------- SSS */

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* --------------------------------------------------- CMS ve blog içerikleri */

.cms-content > * + * { margin-top: var(--stack-sm); }
.cms-content h2 { font-family: var(--font-heading); font-size: 22px; line-height: 28px; margin-top: var(--stack-lg); }
.cms-content h3 { font-family: var(--font-heading); font-size: 18px; line-height: 24px; margin-top: var(--stack-md); }
.cms-content ul,
.cms-content ol { padding-left: 20px; }
.cms-content li + li { margin-top: 4px; }
.cms-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.cms-content a { color: var(--color-primary); }
.cms-content table { width: 100%; border-collapse: collapse; }
.cms-content th,
.cms-content td { padding: 8px 10px; border: 1px solid var(--color-border); text-align: left; }
.cms-content blockquote {
  margin: 0;
  padding: var(--stack-sm) var(--stack-md);
  border-left: 3px solid var(--color-primary-container);
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-md);
}

.blog-card { display: flex; flex-direction: column; height: 100%; }

.blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  background-color: var(--color-surface-container-low);
}

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

.newsletter-box {
  display: grid;
  gap: var(--stack-md);
  padding: var(--stack-lg);
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
  .newsletter-box { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; }
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
}

.newsletter-form .form-input { flex: 1 1 200px; }
.newsletter-form .form-error { flex: 1 1 100%; }

/* ------------------------------------------------------------ Teklif CTA'sı */

.quote-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  padding: var(--stack-lg);
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------- Teklif formu */

.quote-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: start;
}

@media (min-width: 1024px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .quote-layout__side { position: sticky; top: 96px; }
}

.quote-layout__side {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}

.quote-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--stack-sm);
  padding: var(--stack-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.quote-line:last-child { border-bottom: 0; }
.quote-line__qty { width: 110px; flex: 0 0 auto; }
.quote-line__remove { flex: 0 0 auto; margin-bottom: 6px; color: var(--color-error); }

.quote-steps,
.quote-benefits {
  margin: var(--stack-xs) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--stack-xs);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface-variant);
}

.quote-benefits li { display: flex; align-items: flex-start; gap: var(--stack-xs); }
.quote-benefits .icon { flex-shrink: 0; color: var(--color-primary); }

/* ------------------------------------------------------- Teklif görüntüleme */

.quote-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-bottom: var(--stack-md);
  border-bottom: 2px solid var(--color-primary-container);
}

.quote-doc__meta {
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
}

.quote-doc__parties {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  margin-top: var(--stack-md);
}

@media (min-width: 768px) {
  .quote-doc__parties { grid-template-columns: 1fr 1fr; }
}

.quote-doc__foot {
  padding-top: var(--stack-md);
  border-top: 1px solid var(--color-border);
}

.quote-files {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--stack-xs);
}

.quote-files li {
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
  padding: 10px 12px;
  font-size: 14px;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.quote-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--stack-sm);
}

.quote-timeline__item {
  display: flex;
  align-items: center;
  gap: var(--stack-xs);
  font-size: 14px;
  color: var(--color-slate);
}

.quote-timeline__dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-outline-variant);
  background-color: var(--color-surface-container-lowest);
}

.quote-timeline__item.is-done .quote-timeline__dot {
  border-color: var(--color-primary-container);
  background-color: var(--color-primary-container);
}

.quote-timeline__item.is-done .quote-timeline__label {
  color: var(--color-on-surface);
  font-weight: 600;
}

.quote-actions {
  padding: var(--stack-md);
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------ Karşılaştırma */

.compare-table th[scope="row"] {
  min-width: 180px;
  text-align: left;
  font-weight: 600;
  background-color: var(--color-surface-container-low);
  white-space: normal;
}

.compare-table thead th { vertical-align: top; min-width: 200px; }
.compare-table td { min-width: 200px; vertical-align: top; }

.compare-table__media {
  display: block;
  width: 120px;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--stack-xs);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-low);
}

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

.compare-table__title {
  display: block;
  margin-bottom: var(--stack-xs);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-on-surface);
  white-space: normal;
}

/* ---------------------------------------------------------- Banka hesapları */

.bank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px)  { .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .bank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bank-card__iban {
  margin: var(--stack-sm) 0;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
  word-break: break-all;
  background-color: var(--color-surface-container-low);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------------- Hata sayfası */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sm);
  padding: var(--stack-xl) var(--stack-md);
  text-align: center;
}

.error-page__code {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(64px, 14vw, 120px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

.error-page__search {
  width: 100%;
  max-width: 520px;
  margin-top: var(--stack-md);
}

/* ==========================================================================
   31. YAZDIRMA (@media print)
   Teklif belgesi kağıda temiz basılır: gezinme, butonlar ve arka planlar gider.
   ========================================================================== */

@media print {
  .site-header,
  .mobile-header,
  .site-footer,
  .bottom-nav,
  .cookie-banner,
  .toast-container,
  .drawer,
  .overlay,
  .skip-link,
  .breadcrumb,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .container { max-width: none; padding: 0; }
  .section { padding: 0; }

  .quote-doc__head { border-bottom: 2pt solid #000; }

  .sidebar-box,
  .card,
  .table-wrap {
    border: 1pt solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .table thead th { background: #eee !important; color: #000 !important; }
  .table tbody tr:hover { background: transparent !important; }

  a[href]::after { content: ""; }

  .quote-doc { break-inside: auto; }
  tr, .cart-line, .quote-files li { break-inside: avoid; }

  @page { margin: 14mm; }
}

/* =========================================================================
   SIPARIS SONUC SAYFALARI (order-success.php / order-failed.php)
   Bu blok dosyanin SONUNA eklenmistir; mevcut siniflar degistirilmemistir.
   ========================================================================= */

.order-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sm);
  padding: var(--stack-lg) var(--stack-md);
  margin-bottom: var(--stack-lg);
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.order-result--success { border-top: 3px solid var(--color-success); }
.order-result--failed  { border-top: 3px solid var(--color-error); }

.order-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--color-success);
  background-color: var(--color-primary-fixed);
  border-radius: var(--radius-full);
}

.order-result__icon--error { color: var(--color-error); }

.order-result__number {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
}

.order-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .order-layout .cart-summary { position: sticky; top: 140px; }
}

.d-block { display: block; }

/* =========================================================================
   MUSTERI HESABI (hesabim) VE KIMLIK DOGRULAMA EKRANLARI
   Bu blok dosyanin SONUNA eklenmistir; mevcut siniflar degistirilmemistir.
   ========================================================================= */

/* --- Ortalanmis kimlik dogrulama karti --- */
.auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--stack-lg);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.auth-card--wide { max-width: 720px; }

.auth-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--stack-md);
  text-align: center;
}

.auth-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--color-primary);
  background-color: var(--color-surface-container);
  border-radius: var(--radius-full);
}

.auth-card__form { display: grid; gap: var(--stack-sm); }

.auth-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--stack-xs);
}

.auth-card__foot {
  margin-top: var(--stack-md);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.auth-card__details {
  margin-top: var(--stack-sm);
  font-family: var(--font-body);
  font-size: 14px;
}

.auth-card__details > summary {
  cursor: pointer;
  color: var(--color-secondary);
  padding: 6px 0;
}

/* --- Hesabim iki sutunlu duzen --- */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .account-layout { grid-template-columns: 248px minmax(0, 1fr); }
  .account-layout__side { position: sticky; top: 140px; }
}

.account-layout__main { min-width: 0; }

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--stack-sm);
}

/* --- Hesap menusu --- */
.account-nav__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
}

.account-nav__list::-webkit-scrollbar { display: none; }

.account-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  white-space: nowrap;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  transition: background-color var(--t-base) ease, color var(--t-base) ease;
}

.account-nav__link:hover {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
  text-decoration: none;
}

.account-nav__link.is-active {
  background-color: rgba(245, 154, 23, 0.14);
  color: var(--color-on-primary-container);
  font-weight: 600;
}

.account-nav__logout { display: none; }

@media (min-width: 1024px) {
  .account-nav__list {
    flex-direction: column;
    overflow-x: visible;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .account-nav__link { font-size: 15px; }
  .account-nav__logout { display: block; margin-top: var(--stack-sm); }
}

/* --- Ozet sayaclari --- */
.account-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-sm);
}

@media (min-width: 768px) {
  .account-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.account-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base) ease, transform var(--t-base) ease;
}

.account-stat:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-1px);
}

.account-stat__icon { color: var(--color-secondary); }

.account-stat__value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-on-surface);
}

.account-stat__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-secondary);
}

/* --- Siparis satirlari --- */
.account-order-list { display: grid; gap: var(--stack-xs); }

.account-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--stack-xs) var(--stack-sm);
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .account-order { grid-template-columns: minmax(0, 1fr) auto auto auto; }
}

.account-order__main { min-width: 0; }

.account-order__number {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-surface);
}

.account-order__total {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Islem butonlari serisi --- */
.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-xs);
}

.account-actions form { margin: 0; }

/* --- Filtre serisi --- */
.account-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-xs) var(--stack-sm);
  padding: var(--stack-sm);
  margin-bottom: var(--stack-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .account-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
}

.account-filter__actions {
  display: flex;
  gap: var(--stack-xs);
  align-items: center;
}

/* --- Adres kartlari --- */
.address-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-sm);
}

@media (min-width: 768px) {
  .address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.address-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.address-card.is-default { border-color: var(--color-accent); }

.address-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-xs);
}

.address-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
  margin: 0;
}

.address-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--stack-xs);
  border-top: 1px solid var(--color-border);
}

.address-card__foot form { margin: 0; }

/* --- Kalem / odeme listeleri --- */
.account-item-list,
.account-payments {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-item-list > li,
.account-payments > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-xs);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 14px;
}

.account-item-list > li:last-child,
.account-payments > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- Iki sutunlu form izgarasi --- */
@media (min-width: 640px) {
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   CHECKOUT — siparis tamamlama akisi
   ========================================================================== */

.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-sm);
  margin-bottom: var(--stack-md);
  font-size: 13px;
  color: var(--color-secondary);
}

.checkout-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
}

.checkout-steps__item.is-active {
  color: var(--color-on-primary);
  background-color: var(--color-primary-container);
  border-color: var(--color-primary-container);
}

.checkout-steps__item.is-done { color: var(--color-on-surface); }

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .checkout-summary { position: sticky; top: 140px; }
}

.checkout-main { display: grid; gap: var(--stack-md); }

.checkout-block {
  padding: var(--stack-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.checkout-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--stack-md);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.checkout-block__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-primary);
  background-color: var(--color-primary-container);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.checkout-summary {
  padding: var(--stack-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.checkout-summary__items {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: var(--stack-sm);
  padding-bottom: var(--stack-sm);
  border-bottom: 1px solid var(--color-outline-variant);
}

.checkout-summary__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  align-items: start;
}

.checkout-summary__qty { color: var(--color-secondary); font-weight: 600; }
.checkout-summary__price { font-weight: 600; white-space: nowrap; }

/* --- Adres secim kartlari --- */
.address-picker {
  display: grid;
  gap: var(--stack-sm);
  margin-bottom: var(--stack-md);
}

@media (min-width: 640px) {
  .address-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.address-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.address-card:hover { border-color: var(--color-outline); }

.address-card:has(input:checked) {
  border-color: var(--color-primary-container);
  background-color: var(--color-surface-container-low);
}

.address-card__body { display: grid; gap: 2px; font-size: 13px; }

/* --- Segmentli secim (bireysel / kurumsal) --- */
.segmented { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.segmented span {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  transition: all var(--t-fast) ease;
}

.segmented input:checked + span {
  color: var(--color-on-primary);
  background-color: var(--color-primary-container);
  border-color: var(--color-primary-container);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Secenek listesi (kargo / odeme) --- */
.option-list { display: grid; gap: 8px; }

.option-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

.option-row:hover { border-color: var(--color-outline); }

.option-row:has(input:checked) {
  border-color: var(--color-primary-container);
  background-color: var(--color-surface-container-low);
}

.option-row__body { display: grid; gap: 2px; min-width: 0; }
.option-row__price { font-weight: 600; white-space: nowrap; }

/* --- Banka hesabi satiri --- */
.bank-row {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-md);
}

.bank-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}

/* --- Sozlesme onayi --- */
.checkout-agreements {
  padding: 12px;
  margin-top: var(--stack-sm);
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-md);
}

.checkout-trust {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: var(--stack-md) 0 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-secondary);
}

.checkout-trust li { display: flex; align-items: center; gap: 6px; }

/* --- Odeme sayfasi (saglayici formu) --- */
.payment-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .payment-page { grid-template-columns: minmax(0, 1fr) 340px; }
  .payment-page__summary { position: sticky; top: 140px; }
}

.payment-page__form,
.payment-page__summary {
  padding: var(--stack-md);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
}

.payment-embed { min-height: 420px; }


/* ==========================================================================
   FAZ 3 - KARGO ENTEGRASYONU
   Bu blok bagimsiz bir modul olarak yazildi, tek istek olsun diye buraya alindi.
   ========================================================================== */

/* ===========================================================================
   Kargo entegrasyonu — modul stilleri

   KURAL: Bu dosya YENI RENK, GRADIENT veya ANIMASYON TANIMLAMAZ. Yalnizca
   yerlesim (grid/flex/bosluk) kurar ve rengi mevcut tasarim degiskenlerinden
   (--renk-*, --c-*) miras alir. Rozetler, butonlar ve tablolar admin.css /
   app.css icindeki mevcut siniflarla gelir.
   =========================================================================== */

/* --------------------------------------------------- Yonetim: ayar ekrani */

/* Sag/sol iki sutuna sigmayan alanlar (Surat JSON eslemesi) tam genislik alir */
.kargo-form-group--genis {
  grid-column: 1 / -1;
}

.kargo-firma-not {
  margin: 0.35rem 0 0;
}

.kargo-seri-baslik {
  margin: 1.5rem 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kargo-seri-form {
  margin-top: 0.75rem;
  align-items: end;
}

/* ------------------------------------------- Yonetim: siparis detay kutusu */

.kargo-gonderi-listesi {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.kargo-gonderi {
  border: 1px solid currentColor;
  border-color: inherit;
  border-radius: 8px;
  padding: 0.75rem;
  opacity: 1;
}

.kargo-gonderi__ust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kargo-gonderi__aksiyonlar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.kargo-gonderi__aksiyonlar form {
  display: inline;
  margin: 0;
}

.kargo-gonderi-formu {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.kargo-aksiyon {
  margin-bottom: 0.75rem;
}

/* ----------------------------------------------- Vitrin: kargo takip sayfasi */

.kargo-takip-formu {
  display: grid;
  gap: 1rem;
  max-width: 32rem;
  margin: 1.5rem 0 2rem;
}

.kargo-takip-sonuc {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}

.kargo-kart {
  border: 1px solid;
  border-color: inherit;
  border-radius: 12px;
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
}

.kargo-kart__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.kargo-kart__ust p {
  margin: 0;
}

/* Zaman cizelgesi: sol kenarda dikey cizgi + her adimda nokta */
.kargo-zaman-cizelgesi {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid;
  border-color: inherit;
  display: grid;
  gap: 1rem;
}

.kargo-zaman-cizelgesi__oge {
  position: relative;
  display: flex;
  gap: 0.75rem;
}

.kargo-zaman-cizelgesi__oge p {
  margin: 0 0 0.15rem;
}

.kargo-zaman-cizelgesi__nokta {
  position: absolute;
  left: -1.6rem;
  top: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 640px) {
  .kargo-kart__ust {
    flex-direction: column;
  }
}


/* ==========================================================================
   FAZ 3 - B2B (CARI HESAP, BAYI, FIYAT LISTESI, HIZLI SIPARIS)
   Bu blok bagimsiz bir modul olarak yazildi, tek istek olsun diye buraya alindi.
   ========================================================================== */

@charset "UTF-8";
/* ==========================================================================
   Canber Vinç — B2B Modülü Stilleri
   (cari hesap, bayi başvurusu, fiyat listesi, hızlı sipariş)

   KURAL: app.css ve admin.css'teki token'ları KULLANIR, hiçbirini geçersiz
   kılmaz. Yeni renk, gradient, animasyon veya aşırı yuvarlak kart tanımlanmaz;
   yalnızca bu modüle özgü yerleşim (layout) yardımcıları bulunur.

   Kullanım: ilgili ekranlar bu dosyayı kendi gövdelerinde yükler
            (yönetim düzeni ek stil dosyası için kanca sunmuyor).
   ========================================================================== */

/* ==========================================================================
   1. LİMİT DOLULUK ÇUBUĞU
   Kredi limitinin ne kadarının kullanıldığını gösterir. Renk yerine
   mevcut durum sınıfları (badge) ile birlikte okunur; tek başına
   renge dayanmaz (erişilebilirlik).
   ========================================================================== */

.b2b-limit {
  display: block;
  width: 100%;
  min-width: 90px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-high);
}

.b2b-limit__fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.b2b-limit__fill.is-full {
  background: var(--color-error, #b3261e);
}

.b2b-limit__text {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

/* ==========================================================================
   2. YAŞLANDIRMA TABLOSU
   ========================================================================== */

.b2b-aging {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.b2b-aging__cell {
  padding: 12px 14px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
}

.b2b-aging__label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.b2b-aging__value {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-on-surface);
}

/* ==========================================================================
   3. EKSTRE TABLOSU
   Borç/alacak sütunları sayısal hizalanır; tutarlar sekme figürüyle
   alt alta okunabilir olur.
   ========================================================================== */

.b2b-ledger td.num,
.b2b-ledger th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.b2b-ledger tr.is-reversed td {
  text-decoration: line-through;
  opacity: 0.65;
}

.b2b-ledger__doc {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ==========================================================================
   4. HIZLI SİPARİŞ
   ========================================================================== */

.b2b-quick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 900px) {
  .b2b-quick {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.b2b-quick__area {
  min-height: 180px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
}

.b2b-quick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-outline-variant);
}

.b2b-quick-row:last-child {
  border-bottom: 0;
}

.b2b-quick-row__meta {
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.b2b-quick-row__qty {
  width: 88px;
}

/* ==========================================================================
   5. BAYİ BAŞVURU FORMU
   ========================================================================== */

.b2b-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.b2b-agreement {
  max-height: 260px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  font-size: 13px;
  line-height: 1.7;
}

.b2b-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.b2b-steps__item {
  padding: 6px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.b2b-steps__item.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================================================
   6. FİYAT LİSTESİ SATIRLARI
   ========================================================================== */

.b2b-pricerow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.b2b-import-report {
  max-height: 320px;
  overflow-y: auto;
}

/* ==========================================================================
   7. YAZDIRMA — CARİ EKSTRE
   Ekstre çıktısında menü, filtre ve butonlar basılmaz.
   ========================================================================== */

@media print {
  .b2b-noprint,
  .account-nav,
  .site-header,
  .site-footer,
  .bottom-nav {
    display: none !important;
  }

  .b2b-ledger {
    font-size: 11px;
  }

  .account-layout {
    display: block;
  }
}