@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) --- */
  /*
   * İçerik genişliği. 1280 px, 24"–27" ekranlarda (1920–2560 px) her iki yana
   * 300–600 px ölü alan bırakıyordu; ürün ızgarası dar bir şeride sıkışıyordu.
   * Aşağıdaki büyük ekran sorgularında kademeli olarak genişliyor.
   */
  --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);
}

/*
 * AZ ÜRÜNLÜ IZGARA
 * -----------------------------------------------------------------------------
 * NEDEN: "En Çok Tercih Edilen Ürünler" gibi bölümlerde tek ürün varken ızgara
 * yine 4 sütun aciyordu; kart sola yapisip saginda ekranin dortte ucu kadar
 * bos alan kaliyordu ("sayfa yarim kalmis" gorunumu). Sablon urun sayisini
 * data-adet ile bildiriyor; sutun sayisi urun sayisini asmiyor ve satir
 * ortalaniyor. Kart genisligi ustten sinirli, boylece tek urun sayfa boyunca
 * gerilmiyor.
 */
.product-grid[data-adet="1"] {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}

/* 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 {
  /* Vurgu renginden turetilir; panelden renk degisince hover da uyar. */
  background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  border-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  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ı --- */
/*
 * ÜRÜN KARTI
 * -----------------------------------------------------------------------------
 * Katalog görünümü: görsel öne çıkar, çerçeve geri çekilir. Kart normalde
 * neredeyse çerçevesiz durur; üzerine gelindiğinde kenarlık ve gölge belirir.
 * Eskiden her kart kalın bir kutu içindeydi ve 4'lü ızgarada sayfa
 * "kutular tablosu" gibi görünüyordu.
 */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease,
              transform var(--t-base) ease;
}

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

/*
 * Görsel alanı: aspect-ratio ile sabit oran → CLS (düzen kayması) önlenir.
 *
 * 1/1 yerine 4/3: kare alan kartın yaklaşık üçte ikisini yiyordu ve ürün
 * fotoğrafları "contain" ile yerleştiği için ortada küçük kalıp çevresi boş
 * duruyordu. 4/3 ile kart ~%20 kısalıyor, ekranda daha çok ürün görünüyor.
 */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: block;
  padding: var(--stack-sm);
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--t-slow) ease, opacity var(--t-base) ease;
}

/*
 * İKİNCİ GÖRSEL (hover)
 * -----------------------------------------------------------------------------
 * Ürünün ikinci fotoğrafı birincinin tam üstüne konur ve normalde saydamdır.
 * Karta gelindiğinde birincisi silinir, ikincisi belirir. İki görsel de aynı
 * kutuyu kapladığı için geçişte zıplama olmaz.
 *
 * Dokunmatik cihazda "hover" yok; orada ikinci görsel hiç gösterilmez
 * (aşağıdaki hover:hover sorgusu).
 */
/*
 * Ölçüler neden calc() ile yazıldı: <img> "yer değiştirilen" (replaced) bir
 * öğe. Mutlak konumlu bir replaced öğede width:auto, inset kutusunu DEĞİL
 * görselin kendi doğal genişliğini kullanır — bu yüzden ikinci görsel
 * birincisinden farklı boyutta çıkıyor ve geçişte zıplıyordu. Yüzdeler
 * kapsayıcının padding kutusuna göre çözüldüğü için iç boşluğu elle
 * çıkarıyoruz; iki görsel piksel piksel aynı kutuya oturuyor.
 */
.product-card__img--hover {
  position: absolute;
  top: var(--stack-sm);
  left: var(--stack-sm);
  width: calc(100% - (var(--stack-sm) * 2));
  height: calc(100% - (var(--stack-sm) * 2));
  opacity: 0;
}

@media (hover: hover) {
  .product-card.has-hover-image:hover .product-card__img {
    opacity: 0;
  }

  .product-card.has-hover-image:hover .product-card__img--hover {
    opacity: 1;
  }

  /* Tek görselli kartlarda hafif yakınlaşma kalsın */
  .product-card:not(.has-hover-image):hover .product-card__img {
    transform: scale(1.04);
  }
}

/*
 * FİYAT ETİKETİ
 * -----------------------------------------------------------------------------
 * Görselin sol üstünde duran turuncu şerit. Fiyat kartta en çok bakılan bilgi;
 * gövde metninin arasında kaybolmasın diye öne alındı.
 */
/*
 * Punto neden cqi ile: aynı sayfada kart bazen 158px (mobilde 2 sütun),
 * bazen 282px (ana sayfa) genişliğinde. Sabit punto verince dar kartta
 * "65.000,00 TL …" diye kırpılıyor, geniş kartta cılız kalıyordu. cqi
 * (kapsayıcı genişliğinin %1'i) ile etiket kartla birlikte ölçekleniyor;
 * clamp() alt ve üst sınırı tutuyor. Kesme kuralı yine de dursun — çok
 * uzun bir para birimi biçiminde son çare olarak devreye girer.
 */
.product-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: calc(100% - 46px);
  padding: 0.45em 0.75em;
  border-bottom-right-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(10px, 6.2cqi, 15px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__tag--quote,
.product-card__tag--login {
  background-color: var(--color-secondary);
  font-weight: 500;
}

/*
 * Durum rozetleri fiyat etiketinin altına iner; etiket yüksekliği punto ile
 * değiştiği için mesafe de kart genişliğine göre ölçeklenir.
 */
@container urunkart (max-width: 200px) {
  .product-card__badges { top: 32px; }
}

@container urunkart (min-width: 260px) {
  .product-card__badges { top: 46px; }
}

.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-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  min-height: 42px;
  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 {
  display: block;
  padding-top: var(--stack-xs);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-accent);
}

/*
 * "KDV dahil" etiketi fiyatın YANINDA, küçük ve soluk durur.
 * Ayrı satıra almıştık; KDV'siz fiyat artık görselin üstündeki etikette
 * olduğu için gövdede tek satır kaldı ve yan yana rahat sığıyor.
 */
.product-card__price > span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-secondary);
  white-space: nowrap;
}

/*
 * Kart içindeki "Fiyat için teklif alın" / "Fiyatı görmek için giriş yapın"
 * metni .price-block__main sınıfını taşıyor; o sınıf ürün DETAY sayfası için
 * 32px tasarlanmış. Kartta bu punto satırları taşırıyordu.
 */
.product-card .price-block__main {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
}

.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;
}

/*
 * ÜRÜN KARTI AKSİYONLARI
 * -----------------------------------------------------------------------------
 * Yerleşim (her ekran boyutunda aynı, öngörülebilir):
 *   1. satır: birincil eylem — TAM GENİŞLİK ("Sepete Ekle" asla kırpılmaz)
 *   2. satır: [ Ürünü İncele ][ WhatsApp ]
 * Önceden iki düğme yan yana konduğu için dar kartta metin ya iki satıra
 * kırılıyor ya da üç noktayla kesiliyordu.
 */
/*
 * Ölçüt viewport değil KART genişliği olmalı: aynı ekranda kart 4 sütunluysa
 * dar, 2 sütunluysa geniştir. Bu yüzden kapsayıcı sorgusu (container query)
 * kullanılır. Desteklemeyen tarayıcıda WhatsApp ikon olarak kalır — bozulmaz.
 */
.product-card {
  container-type: inline-size;
  container-name: urunkart;
}

/*
 * Boşluk buton çubuğunun ÜSTÜNDE toplanır (margin-top: auto).
 * NEDEN: boşluk fiyatın üstündeyken, "Sepete Ekle"si olmayan kartlarda
 * (stokta yok / teklife bağlı) fiyat aşağı kayıyor ve ızgarada fiyatlar
 * birbirini tutmuyordu. Artık fiyat her kartta ürün kodunun hemen altında.
 */
.product-card__actions {
  margin-top: auto;
  padding-top: var(--stack-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

/* Birincil eylem her zaman kendi satırında */
.product-card__main {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.product-card__detail {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 8px;
}

/* WhatsApp: dar ekranda kare ikon, geniş ekranda metinli */
.product-card__wa {
  grid-column: 2;
  width: 40px;
  padding-inline: 0;
  justify-content: center;
}

/*
 * "Ürünü İncele" yoksa (stokta olmayan ürünler) WhatsApp düğmesi ANA
 * DÜĞMENİN YANINA girer, alt satırda tek başına tam genişlik kaplamaz.
 * NEDEN: eskiden kocaman yeşil bir "Bilgi Al" çubuğu oluşuyor ve aynı
 * ızgaradaki diğer kartlarla hiç uyuşmuyordu.
 */
.product-card__actions:not(.has-detail) .product-card__main {
  grid-column: 1;
}

.product-card__actions:not(.has-detail) .product-card__wa {
  grid-column: 2;
}

/* WhatsApp yoksa alt satır tek sütun olur */
.product-card__actions:not(.has-wa) {
  grid-template-columns: minmax(0, 1fr);
}

.product-card__actions:not(.has-wa) .product-card__detail {
  grid-column: 1 / -1;
}

.product-card__wa-text {
  display: none;
}

/* Kart yeterince genişse WhatsApp düğmesi metinli gösterilir */
@container urunkart (min-width: 300px) {
  .product-card__wa {
    width: auto;
    padding-inline: 12px;
    gap: 6px;
  }

  .product-card__wa-text {
    display: inline;
  }

  .product-card__detail {
    padding-inline: 12px;
  }
}

/* Dokunma hedefi: mobilde de rahat basılsın */
.product-card__actions .btn-sm {
  min-height: 40px;
}

/* 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);
}

/*
 * Durum rozetleri (YENİ / POPÜLER / STOKTA YOK) fiyat etiketinin ALTINA
 * iner — sol üst köşe artık fiyata ait.
 */
.product-card__badges {
  position: absolute;
  top: 40px;
  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: 180px;
  flex-shrink: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Liste görünümünde fiyat etiketi küçülür; kart dar değil ama görsel dar. */
.product-card--row .product-card__tag {
  font-size: 12px;
  padding: 5px 8px;
}

/* --- Kategori kutusu (ana sayfa bento ızgarası) --- */
/* ==========================================================================
   KATEGORİ KARTLARI (Ürün Grupları)
   Görsel odaklı "bento" ızgara. Yükseklikler ızgara satırlarından gelir,
   bu yüzden kartlar görsel olsun olmasın aynı hizada biter.
   ========================================================================== */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: var(--gutter, 16px);
}

/* Mobilde ilk kart tam genişlik kaplar */
.category-tile--large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Son satirda kalan kart(lar) satiri doldursun (mobil: 2 sutun) */
.category-tile.sm-span-2 {
  grid-column: span 2;
}

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

  /* Mobil icin verilen genislik masaustunde gecersiz olmali */
  .category-tile.sm-span-2 {
    grid-column: auto;
  }

  .category-tile.md-span-2 { grid-column: span 2; }
  .category-tile.md-span-4 { grid-column: span 4; }

  .category-tile--large { grid-column: span 2; }
}

@media (min-width: 1200px) {
  .category-grid {
    grid-auto-rows: 190px;
  }
}

.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: var(--stack-md);
  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;
  isolation: isolate;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease,
              transform var(--t-base) ease;
}

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

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

/* --- Görsel katmanı: kartı tamamen kaplar, üstüne okunabilirlik gradyanı --- */
/*
 * DIKKAT: burada z-index: -1 KULLANILMAZ. Negatif deger, gorseli kartin
 * KENDI arka plan renginin arkasina iter ve gorsel hic gorunmez.
 * Dogru yontem: medya katmani z-index 0, metin katmani z-index 1.
 */
.category-tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.category-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) ease;
}

.category-tile:hover .category-tile__media img {
  transform: scale(1.04);
}

/* Metnin her görselde okunur kalmasını sağlayan koyulaştırma */
.category-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 22, 24, 0.82) 0%,
    rgba(20, 22, 24, 0.45) 38%,
    rgba(20, 22, 24, 0.06) 72%,
    rgba(20, 22, 24, 0) 100%
  );
}

/*
 * GÖRSEL YOKSA: kategori adının baş harfinden desenli bir zemin üretilir.
 * Amaç, boş kartın "eksik" değil "sade" görünmesidir.
 */
.category-tile__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  /* Ikon ust-sagda durur; metin alani altta serbest kalir */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 55%),
    linear-gradient(150deg, #2f3438 0%, #22262a 55%, #1a1d20 100%);
}

/* Baş harf, filigran gibi büyük ve soluk */
.category-tile__placeholder::before {
  content: attr(data-harf);
  position: absolute;
  right: -6px;
  bottom: -34px;
  font-family: var(--font-heading);
  font-size: 168px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.category-tile__ph-icon {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.34);
}

.category-tile--large .category-tile__ph-icon {
  width: 56px;
  height: 56px;
}

/* --- Metin katmanı --- */
.category-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  color: #fff;
}

.category-tile__count {
  display: inline-block;
  padding: 2px 8px;
  margin-bottom: 2px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.category-tile__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.category-tile--large .category-tile__title {
  font-size: 24px;
  line-height: 30px;
}

.category-tile__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.82);
}

.category-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base) ease, transform var(--t-base) ease;
}

.category-tile:hover .category-tile__cta,
.category-tile:focus-visible .category-tile__cta {
  opacity: 1;
  transform: translateY(0);
}

/* Dokunmatik cihazda hover yok; çağrı metni hep görünür */
@media (hover: none) {
  .category-tile__cta {
    opacity: 1;
    transform: none;
  }
}

.category-tile__cta .icon {
  width: 15px;
  height: 15px;
}

/* --- 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 color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.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 --- */
/*
 * EKMEK KIRINTISI
 * -----------------------------------------------------------------------------
 * ÖNCESİ: nowrap/overflow kuralları <nav> üzerindeydi ama asıl liste içteki
 * <ol>'du ve o blok akışındaydı; öğeler alt alta diziliyordu. Mobilde
 * "Ana Sayfa / Kategori / Ürün" üç satıra kırılıyor, üstelik hem şablondaki
 * ikon hem CSS'teki "/" yüzünden çift ayraç görünüyordu.
 *
 * ŞİMDİ: liste tek satır, taşarsa yatay kayar (mobilde parmakla sürüklenir),
 * ayraç tek ve CSS'ten geliyor. Bulunulan sayfa dar ekranda üç noktayla
 * kısalır — zaten hemen altındaki H1 tam adı yazıyor.
 */
.breadcrumb {
  padding-block: var(--stack-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-tertiary);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

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

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--color-outline-variant);
  border-bottom: 1.5px solid var(--color-outline-variant);
  transform: rotate(-45deg);
}

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

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

.breadcrumb [aria-current="page"] {
  display: block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-on-surface);
  font-weight: 600;
}

@media (min-width: 768px) {
  .breadcrumb {
    font-size: 13px;
  }

  .breadcrumb [aria-current="page"] {
    max-width: none;
  }
}

/* --- 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: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  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: color-mix(in srgb, var(--color-accent) 14%, transparent);
  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 color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.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);
}

/* ===========================================================================
   KOMPAKT BAŞLIK
   ---------------------------------------------------------------------------
   Sayfa aşağı kaydırılınca (JS ".is-shrunk" ekler) başlık incelir: üst bar
   toplanır, logo satırının boşlukları ve logo punto'su küçülür. Menü satırı
   olduğu gibi kalır — asıl gezinme oradadır.

   max-height ile toplanıyor çünkü display:none ani sıçrama yapar; buradaki
   geçiş 200 ms.
   ========================================================================= */
.site-topbar {
  overflow: hidden;
  max-height: 64px;
  transition: max-height 0.2s ease, border-color 0.2s ease;
}

.site-header__top {
  transition: padding-block 0.2s ease;
}

.site-header__brand {
  transition: font-size 0.2s ease, line-height 0.2s ease;
}

.site-header.is-shrunk .site-topbar {
  max-height: 0;
  border-bottom-color: transparent;
}

.site-header.is-shrunk .site-header__top {
  padding-block: 6px;
}

.site-header.is-shrunk .site-header__brand {
  font-size: 24px;
  line-height: 32px;
}

/* Kompakt başlıkta gölge, sayfanın kaydığını belli eder */
.site-header.is-shrunk,
.mobile-header.is-shrunk {
  box-shadow: 0 2px 10px rgba(26, 28, 28, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .site-topbar,
  .site-header__top,
  .site-header__brand,
  .mobile-header__search {
    transition: none;
  }
}

.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 */
/*
 * MEGA PANEL — menü şeridine hizalanır, öğeye değil
 * -----------------------------------------------------------------------------
 * NEDEN: panel açılır öğenin soluna sabitlenip 760px genişliyordu. Sağdaki bir
 * öğede (ör. "ÜRÜNLER" tablet genişliğinde) panel ekranın dışına taşıyor ve
 * KAPALIYKEN BİLE sayfaya yatay kaydırma çubuğu ekliyordu (820px ekranda
 * belge genişliği 979px ölçüldü). Panel artık menü şeridinin tamamına
 * hizalanıyor; taşma matematiksel olarak imkânsız.
 */
.site-header__nav {
  position: relative;
}

.nav-item:has(> .nav-dropdown--mega) {
  position: static;
}

.nav-dropdown--mega {
  left: 0;
  right: 0;
  min-width: 0;
  padding: 16px;
}

/*
 * Mega panelde sutunlar izgara ile dizilir: flex-wrap kullanildiginda
 * kisa sutunlar uzun sutun kadar yer kaplayip aralarda bosluk biraktigi
 * icin gorunum dagiliyordu. align-items:start ile her sutun kendi
 * yuksekliginde kalir.
 */
.nav-dropdown--mega .nav-dropdown__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  align-items: start;
  gap: 4px 28px;
}

.nav-dropdown--mega .nav-dropdown__col {
  min-width: 0;
}

.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);
}

/*
 * Mobil arama satırı. Kaydırıldığında kapanır (0fr), bar'daki arama düğmesi
 * geri açar. grid-template-rows 0fr→1fr yöntemi, yüksekliği bilmeden
 * animasyon yapabilmek için; height:auto animasyon edilemiyor.
 */
.mobile-header__search {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 var(--margin-mobile) 12px;
  transition: grid-template-rows 0.2s ease, padding-bottom 0.2s ease;
}

.mobile-header__search > * {
  min-height: 0;
}

.mobile-header.is-shrunk .mobile-header__search {
  grid-template-rows: 0fr;
  padding-bottom: 0;
  overflow: hidden;
}

.mobile-header.is-shrunk.is-search-open .mobile-header__search {
  grid-template-rows: 1fr;
  padding-bottom: 12px;
  overflow: visible;
}

.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 ---
   ----------------------------------------------------------------------------
   NEDEN BU TASARIM
    Eski çubuk düz bir zemin + sert bir üst çizgiden ibaretti; aktif sekme
    yalnızca renk değişimiyle belli oluyordu, küçük ekranda hangi sayfada
    olunduğu bir bakışta anlaşılmıyordu. Yeni yapı:
      - Üst çizgi yerine yumuşak gölge + yarı saydam (buzlu cam) zemin: içerik
        çubuğun altından geçerken "yüzen" bir katman hissi verir.
      - Aktif sekmenin ikonunun arkasında vurgu renginde hap (pill) biçimli bir
        zemin; dokunma hedefi de büyüdüğü için parmakla isabet kolaylaşır.
      - İkon sarmalayıcısı gerçek bir eleman (.bottom-nav__icon-wrap): rozet
        artık ikona göre konumlanır, satır içi stil gerekmez.
   ---------------------------------------------------------------------------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottom-nav);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--color-surface-container-lowest);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-outline-variant) 60%, transparent),
              0 -8px 24px -12px rgb(0 0 0 / 0.28);
}

/* Buzlu cam yalnızca destekleyen tarayıcıda; desteklemeyende zemin opak kalır. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav {
    background-color: color-mix(in srgb, var(--color-surface-container-lowest) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

.bottom-nav__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  height: var(--bottom-nav-h);
  padding: 6px 6px 4px;
  max-width: 560px;
  margin-inline: auto;
}

.bottom-nav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0.01em;
  color: var(--color-secondary);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast) ease;
}

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

.bottom-nav__item:active .bottom-nav__icon-wrap {
  transform: scale(0.92);
}

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

/* İkon hapı: aktifken vurgu renginde dolgu alır. */
.bottom-nav__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: transparent;
  transition: background-color var(--t-fast) ease, transform var(--t-fast) ease;
}

.bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.bottom-nav__item.is-active .bottom-nav__icon-wrap,
.bottom-nav__item[aria-current="page"] .bottom-nav__icon-wrap {
  background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

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

.bottom-nav .badge-count {
  top: -2px;
  right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav__item:active .bottom-nav__icon-wrap {
    transform: none;
  }
}

/* ==========================================================================
   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;
  min-width: 0;
}

/*
 * Uzun e-posta adresi (info@canbervinc.com.tr) 4 sütunlu alt bilgide
 * 150px'lik sütuna sığmayıp taşıyor ve 768px ekranda SAYFAYA yatay kaydırma
 * ekliyordu. Sütun sınırında kırılmasına izin veriyoruz.
 */
.site-footer__list a,
.site-footer__list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.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;
}

/* ===========================================================================
   FİLTRE PANELİ
   ---------------------------------------------------------------------------
   ÖNCESİ: her filtre grubu ayrı bir kutuydu (.sidebar-box). Ekranda alt alta
   5-6 çerçeve duruyordu; hepsi açık, hepsi aynı görsel ağırlıkta. Müşteri
   neye bakacağını seçemiyordu.

   ŞİMDİ: tek çerçeve, içinde ayraçla ayrılmış AÇILIR gruplar (<details>).
   Varsayılan olarak yalnızca ilk iki grup ve içinde seçim olanlar açık.
   Seçili filtreler en üstte tek tek kaldırılabilir rozetler halinde.

   <details> native olduğu için JavaScript kapalıyken de çalışır.
   ========================================================================= */
.filter-panel {
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/*
 * Mobil çekmecede panelin kendi başlığı gereksiz: çekmecenin zaten "Filtrele"
 * başlığı ve altında "Filtreleri Temizle" düğmesi var.
 */
.drawer .filter-panel {
  border-inline: 0;
  border-radius: 0;
}

.drawer .filter-panel__head {
  display: none;
}

.filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-xs);
  padding: 12px var(--stack-sm);
  border-bottom: 1px solid var(--color-outline-variant);
}

.filter-panel__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.filter-panel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.filter-panel__reset {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   SEÇİLİ FİLTRE ROZETLERİ
   Not: sınıf adı bilerek ".filter-chip" DEĞİL — o ad zaten listeleme
   sayfasındaki kategori pilleri için kullanılıyor, üzerine yazmak onları
   bozardı.
   ------------------------------------------------------------------------ */
.applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.applied-filters--panel {
  padding: var(--stack-xs) var(--stack-sm);
  border-bottom: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-container-low);
}

.applied-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-lowest);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-on-surface);
  cursor: pointer;
}

.applied-filter__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.applied-filter__x {
  font-size: 15px;
  line-height: 1;
  color: var(--color-secondary);
}

.applied-filter:hover {
  border-color: var(--color-accent);
}

.applied-filter:hover .applied-filter__x {
  color: var(--color-accent);
}

.applied-filters__reset {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
}

/* --- "Sadece stokta olanlar" — grup değil, tek satırlık anahtar --- */
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--stack-sm);
  border-bottom: 1px solid var(--color-outline-variant);
  font-size: 14px;
  color: var(--color-on-surface);
  cursor: pointer;
}

.filter-toggle input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* --- Açılır grup --- */
.filter-group + .filter-group,
.filter-toggle + .filter-group {
  border-top: 0;
}

.filter-group {
  border-bottom: 1px solid var(--color-outline-variant);
}

.filter-group:last-of-type {
  border-bottom: 0;
}

.filter-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--stack-sm);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Tarayıcının varsayılan üçgen işareti gizlenir; kendi okumuzu kullanıyoruz */
.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__head::marker { content: ''; }

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

.filter-group:focus-within > .filter-group__head {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

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

.filter-group__unit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-secondary);
}

.filter-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-fixed, #ffddbb);
  color: var(--color-on-primary-container, #613900);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

/* Ok işareti: kapalıyken aşağı, açıkken yukarı */
.filter-group__caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) ease;
}

.filter-group[open] > .filter-group__head .filter-group__caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.filter-group__body {
  padding: 0 var(--stack-sm) 12px;
}

.filter-group__hint {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-secondary);
}

.filter-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.filter-price .form-input {
  min-width: 0;
  min-height: 38px;
  padding-inline: 8px;
  font-size: 14px;
}

/* --- Seçenek listesi --- */
.filter-options {
  display: flex;
  flex-direction: column;
}

/*
 * 10+ seçenekli gruplar (ör. çok markalı katalog) paneli metrelerce
 * uzatıyordu; kaydırılabilir bir alana alınıyor.
 */
.filter-options.is-scroll {
  max-height: 224px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  margin-inline: -6px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-on-surface);
  cursor: pointer;
}

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

.filter-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.filter-option__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.filter-option__count {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-secondary);
}

.filter-option:has(input:checked) {
  font-weight: 600;
}

.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: color-mix(in srgb, var(--color-accent) 14%, transparent);
  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;
  z-index: 0;
}

/*
 * .hero__bg bir <picture> ogesidir; icindeki <img> icin kural yazilmazsa
 * gorsel kendi dogal boyutunda (or. 1920 px) cizilir, sol ustten tasar ve
 * ortalanmaz. Alani kaplayip kirpmasi icin object-fit: cover sart.
 */
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * OKUNABILIRLIK KATMANI (scrim)
 * -----------------------------------------------------------------------------
 * Eskiden gorselin TAMAMINA opacity: 0.4 uygulaniyordu; fotograf soluyor,
 * "gorsel yuklenmemis" gibi duruyordu. Dogru yontem gorseli tam canlilikta
 * birakip metnin oldugu tarafa bir gecis (gradient) koymak: solda yazi net
 * okunur, sagda urun canli gorunur.
 *
 * Dar ekranda metin tum genisligi kapladigi icin gecis yataydan dikeye doner.
 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(249, 249, 248, 0.94) 0%,
      rgba(249, 249, 248, 0.86) 45%,
      rgba(249, 249, 248, 0.55) 100%
    );
}

/*
 * GORSEL YOKKEN
 * -----------------------------------------------------------------------------
 * Slider gorseli hic yuklenmemisse ya da dosya sunucuda yoksa hero kocaman
 * bos bir gri bant olarak kaliyordu. Burada desenli bir endustriyel zemin
 * ureterek alan "tasarlanmis" gorunuyor; yonetici gorseli yukleyene kadar
 * site eksik degil, sade duruyor.
 */
.hero--nomedia {
  background-color: var(--color-surface-container-low);
  background-image:
    radial-gradient(120% 90% at 88% 15%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(
      135deg,
      rgba(26, 28, 28, 0.045) 0px,
      rgba(26, 28, 28, 0.045) 2px,
      rgba(26, 28, 28, 0) 2px,
      rgba(26, 28, 28, 0) 14px
    );
}

.hero--nomedia .hero__scrim {
  background: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  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ığı
 * -----------------------------------------------------------------------------
 * NEDEN: eskiden her ekranda flex/space-between idi. Dar ekranda baslik ile
 * aciklama yan yana sikisiyor, "EN COK TERCIH EDILEN URUNLER" gibi uzun
 * basliklar dar bir sutunda 2-3 satira kiriliyordu. Mobilde alt alta,
 * 768px ustunde yan yana dizilir.
 */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-2xs, 6px);
  margin-bottom: var(--stack-md);
}

@media (min-width: 768px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--stack-sm);
  }
}

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

/*
 * Ortalanmis bolum basligi. NEDEN AYRI: .section-head yatay bir flex satiri;
 * icine "t-center" koymak yetmiyordu, baslik/cizgi/aciklama satir boyunca
 * dagiliyor ve turuncu cizgi ortada havada kaliyordu.
 */
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--stack-2xs, 6px);
}

.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-grid[data-adet="1"] { grid-template-columns: minmax(0, 340px); }
  .product-grid[data-adet="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .product-grid[data-adet="2"] { justify-content: center; }

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

  .listing {
    flex-direction: row;
  }

  .mobile-filters { display: none; }

  .hero {
    min-height: 520px;
  }

  /*
   * Genis ekranda metin sol yariya siginiyor; bu yuzden gecis dikeyden
   * YATAYA doner: solda opak, sagda seffaf. Boylece fotografin urun tarafi
   * tam canliliginda kalir.
   */
  .hero__scrim {
    background:
      linear-gradient(
        to right,
        rgba(249, 249, 248, 0.96) 0%,
        rgba(249, 249, 248, 0.9) 34%,
        rgba(249, 249, 248, 0.45) 62%,
        rgba(249, 249, 248, 0.12) 100%
      );
  }

  .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));
  }

  .product-grid[data-adet="3"] {
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
  }

  .listing__sidebar {
    display: block;
  }

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

  /*
   * Panel sayfayla birlikte kaymasın; uzun listede filtreye dönmek için
   * yukarı kaydırmak gerekiyordu. Kompakt başlık ~107px olduğu için
   * üstten o kadar boşluk bırakılıyor.
   */
  .listing__sidebar .filter-panel {
    position: sticky;
    top: 116px;
    max-height: calc(100vh - 136px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .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;
  }

}

/* ==========================================================================
   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)
   ========================================================================== */

/* --- 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;
}

/*
 * YAN AKSİYONLAR (favori / karşılaştır / teklif / WhatsApp)
 * -----------------------------------------------------------------------------
 * NEDEN IZGARA: flex-wrap ile öğeler farklı genişlikte olduğu için satırlar
 * düzensiz kırılıyordu (üstte 4 öğe, altta tek başına "WhatsApp'tan Sor").
 * İki sütunlu ızgarada hepsi hizalı duruyor ve dokunma hedefleri büyüyor.
 */
.product-detail__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--stack-md);
  padding: var(--stack-xs) var(--stack-sm);
  background-color: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
}

.product-detail__links > * {
  min-width: 0;
  min-height: 36px;
}

.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); }

/* ===========================================================================
   YÖNETİCİ GİRDİSİ METİN BLOĞU (.prose)
   ---------------------------------------------------------------------------
   Ürün açıklaması, sayfa içeriği, blog yazısı gibi panelden HTML olarak giren
   metinlerin ortak dikey ritmi. Öncesinde bu blokların hiç kuralı yoktu:
   paragraflar birbirine yapışıyor, başlıklar gövde metninden ayrışmıyor,
   madde listeleri geniş ekranda tek sütunda uzayıp sağı boş bırakıyordu.
   ========================================================================= */
.prose {
  max-width: 78ch;
  color: var(--color-on-surface);
}

.prose > * + * {
  margin-top: var(--stack-sm);
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-on-surface);
}

.prose h2 { font-size: 20px; }
.prose h3 { font-size: 18px; }
.prose h4 { font-size: 16px; }

.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
  margin-top: var(--stack-xs);
}

.prose > * + h2,
.prose > * + h3,
.prose > * + h4 {
  margin-top: var(--stack-md);
}

.prose p {
  line-height: 1.65;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 4px;
}

.prose li {
  line-height: 1.6;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 8px 10px;
  border: 1px solid var(--color-outline-variant);
  text-align: left;
}

/*
 * Geniş ekranda özellik listeleri iki sütuna akar. Paragraf DEĞİL, yalnızca
 * liste: uzun bir madde listesini tek sütunda okumak yorucu ve sağ yarı boş
 * kalıyor. Paragraflar çok sütunlu olsaydı okuma sırası bozulurdu.
 */
@media (min-width: 1024px) {
  .prose {
    max-width: none;
  }

  .prose > p,
  .prose > h2,
  .prose > h3,
  .prose > h4 {
    max-width: 78ch;
  }

  .prose > ul,
  .prose > ol {
    columns: 2;
    column-gap: var(--stack-xl, 40px);
  }

  .prose > ul > li,
  .prose > ol > li {
    break-inside: avoid;
  }
}

/* --- 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); }
/* Paragraf satır aralığı: 24px sabit satırda uzun metin sıkışık okunuyordu. */
.cms-content p { line-height: 1.65; }
.cms-content li { line-height: 1.6; }
.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: color-mix(in srgb, var(--color-accent) 14%, transparent);
  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;
  }
}

/* ==========================================================================
   BÜYÜK EKRANLAR
   --------------------------------------------------------------------------
   1280 px'lik sabit içerik genişliği 24"+ ekranlarda iki yana 300–600 px ölü
   alan bırakıyor, ürün ızgarası ekranın ortasında dar bir şeride sıkışıyordu.
   İçerik genişliği kademeli açılır; metin bloklarının satır uzunluğu kendi
   max-width'leriyle zaten sınırlı olduğu için okunabilirlik bozulmaz.
   ========================================================================== */

@media (min-width: 1500px) {
  :root { --container-max: 1440px; }
}

@media (min-width: 1750px) {
  :root { --container-max: 1600px; }
}

@media (min-width: 2100px) {
  :root { --container-max: 1760px; }
}

/* ==========================================================================
   IZGARA SONU ÇAĞRI KARTI (.product-cta)
   --------------------------------------------------------------------------
   Ürün sayısı sütun sayısının katı değilse son satırın sağı boş kalıyordu.
   Bu kart tam o boşluk kadar yer kaplar. Boşluk PHP'de hesaplanıp
   --bosluk-2 / --bosluk-3 / --bosluk-4 değişkenleriyle geliyor; ilgili
   kırılımda boşluk 0 ise kart basılmaz (aksi halde kendisi yeni bir boşluk
   yaratırdı).
   ========================================================================== */

.product-cta {
  display: flex;
  align-items: center;
  grid-column: span var(--bosluk-2, 1);
  padding: var(--stack-md);
  border-radius: var(--radius-lg);
  background-color: var(--color-inverse-surface);
  background-image:
    radial-gradient(120% 100% at 90% 10%, color-mix(in srgb, var(--color-accent) 28%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 2px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 255, 255, 0) 14px
    );
  color: var(--color-inverse-on-surface);
}

.product-cta[data-bosluk-2="0"] {
  display: none;
}

.product-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 34ch;
}

.product-cta__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-fixed-dim, #ffb868);
}

.product-cta__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.product-cta__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  opacity: 0.85;
}

.product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--stack-xs);
  margin-top: var(--stack-xs);
}

.product-cta__phone {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-inverse-on-surface);
  white-space: nowrap;
}

.product-cta__phone:hover {
  color: var(--color-primary-fixed-dim, #ffb868);
}

@media (min-width: 768px) {
  .product-cta {
    grid-column: span var(--bosluk-3, 1);
  }

  .product-cta[data-bosluk-2="0"] {
    display: flex;
  }

  .product-cta[data-bosluk-3="0"] {
    display: none;
  }
}

/*
 * Kırılım 1200 DEĞİL 1024: ürün ızgarası 4 sütuna 1024 px'te geçiyor
 * (.product-grid kuralı @media min-width:1024 bloğunda). Bu kırılım onunla
 * birebir aynı olmazsa kart yanlış sayıda hücre kaplar ya da kapanması
 * gerekirken açık kalır — 1024 px'te satırın sağında 484 px boşluk
 * bırakıyordu.
 */
@media (min-width: 1024px) {
  .product-cta {
    grid-column: span var(--bosluk-4, 1);
  }

  .product-cta[data-bosluk-3="0"] {
    display: flex;
  }

  .product-cta[data-bosluk-4="0"] {
    display: none;
  }
}

@media (min-width: 1200px) {
  .product-cta {
    padding: var(--stack-lg);
  }

  .product-cta__title {
    font-size: 24px;
    line-height: 30px;
  }
}

/* ==========================================================================
   PANELDEN YÜKLENEN LOGO
   --------------------------------------------------------------------------
   Logo yoksa başlıkta firma adı metin olarak durur (eski davranış). Logo
   yüklendiğinde metnin yerini görsel alır; yükseklik sabit, genişlik oranla
   belirlenir — böylece farklı en/boy oranındaki logolar başlığı bozmaz.
   ========================================================================== */

.site-header__brand.has-logo,
.mobile-header__brand.has-logo {
  padding-block: 4px;
}

.site-header__brand img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 240px;
  object-fit: contain;
  transition: height 0.2s ease;
}

.site-header.is-shrunk .site-header__brand img {
  height: 34px;
}

.mobile-header__brand img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 170px;
  object-fit: contain;
}

.site-footer__logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 220px;
  object-fit: contain;
  margin-bottom: var(--stack-xs);
}

/* =============================================================================
 * BELGELERİMİZ (/belgelerimiz) — kurumsal belge kartları
 * ========================================================================== */

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
  margin-bottom: var(--stack-md);
}

.doc-nav .chip:hover {
  border-color: var(--color-primary-container);
  color: var(--color-on-surface);
}

.chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  font-size: 11px;
  font-weight: 600;
}

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

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

.doc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.doc-card:hover {
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-industrial);
  transform: translateY(-2px);
}

.doc-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-border);
}

.doc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--stack-sm);
}

.doc-card__pdf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-xs);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.doc-card__pdf .icon { width: 44px; height: 44px; }

.doc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-xs);
  padding: var(--stack-sm) var(--stack-md) var(--stack-md);
  flex: 1 1 auto;
}

.doc-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.doc-card__title a { color: var(--color-on-surface); }
.doc-card__title a:hover { color: var(--color-primary); }

.doc-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-card__meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.doc-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-xs);
}

.doc-card__actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }

/* =============================================================================
 * HERO SLIDER — sırayla geçiş + otomatik yaklaşma (Ken Burns) efekti
 * -----------------------------------------------------------------------------
 * Slaytlar aynı grid hücresinde üst üste durur (yükseklik = en uzun slayt).
 * Etkin slayt .is-active ile görünür; geçiş çapraz solma. Yaklaşma efekti
 * yalnızca etkin slaytın görselinde, süresi --hero-interval (JS yazar).
 * JS yoksa yalnızca ilk slayt görünür, ok/nokta gizli kalır (.is-ready yok).
 * ========================================================================== */

.hero {
  display: grid;
  --hero-interval: 7s;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 0.9s ease;
}

.hero__slide > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__title {
  margin: 0;
}

/* Yaklaşma efekti: etkin slaytın görseli interval boyunca yavaşça büyür */
.hero__bg img {
  transform-origin: center center;
  will-change: transform;
}

@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

.hero--zoom .hero__slide.is-active .hero__bg img {
  animation: hero-kenburns var(--hero-interval) ease-out forwards;
}

.hero.is-paused .hero__slide.is-active .hero__bg img,
.hero.is-paused .hero__dot.is-active .hero__dot-bar {
  animation-play-state: paused;
}

/* Gezinme: oklar + noktalar + duraklat (yalnızca JS hazır olunca görünür) */
.hero__nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--stack-sm);
  z-index: 3;
  align-items: center;
  justify-content: center;
  gap: var(--stack-xs);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.hero.is-ready .hero__nav {
  display: flex;
}

.hero__nav > * {
  pointer-events: auto;
}

.hero__arrow,
.hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(32, 36, 40, 0.14);
  border-radius: var(--radius-full);
  background-color: rgba(249, 249, 248, 0.88);
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.hero__arrow:hover,
.hero__pause:hover {
  background-color: #fff;
  transform: translateY(-1px);
}

.hero__arrow:focus-visible,
.hero__pause:focus-visible,
.hero__dot:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
}

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

.hero__dot {
  position: relative;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero__dot-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: rgba(32, 36, 40, 0.28);
  overflow: hidden;
}

.hero__dot-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background-color: var(--color-primary-container);
}

.hero__dot.is-active .hero__dot-bar {
  background-color: rgba(32, 36, 40, 0.18);
}

@keyframes hero-progress {
  from { width: 0; }
  to   { width: 100%; }
}

.hero.is-autoplay .hero__dot.is-active .hero__dot-bar::after {
  animation: hero-progress var(--hero-interval) linear forwards;
}

.hero:not(.is-autoplay) .hero__dot.is-active .hero__dot-bar::after {
  width: 100%;
}

.hero.is-paused .hero__dot.is-active .hero__dot-bar::after {
  animation-play-state: paused;
}

/* Duraklat / oynat simgesi (saf CSS) */
.hero__pause-icon {
  position: relative;
  width: 12px;
  height: 12px;
}

.hero__pause-icon::before,
.hero__pause-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 12px;
  background-color: currentColor;
  border-radius: 1px;
}

.hero__pause-icon::before { left: 0; }
.hero__pause-icon::after  { right: 0; }

.hero__pause[aria-pressed="true"] .hero__pause-icon::before {
  left: 1px;
  width: 0;
  height: 0;
  background: transparent;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  border-radius: 0;
}

.hero__pause[aria-pressed="true"] .hero__pause-icon::after {
  display: none;
}

/* Dar ekranda oklar kenara, noktalar ortada */
@media (max-width: 767px) {
  .hero__arrow { display: none; }
  .hero--slider .hero__content { padding-bottom: calc(var(--stack-lg) + 40px); }
}

@media (min-width: 768px) {
  .hero__nav {
    justify-content: flex-start;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-tablet);
  }
  .hero--slider .hero__content { padding-bottom: calc(var(--stack-lg) + 48px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero--zoom .hero__slide.is-active .hero__bg img { animation: none; }
  .hero__dot-bar::after { transition: none; }
}

/* =============================================================================
 * MOBİL MENÜ — kompakt çekmece
 * -----------------------------------------------------------------------------
 * Daha sıkı satırlar, hızlı erişim kutuları, tek "Tüm Kategoriler" katlanır
 * grubu (kapalı gelir). Panel menüsündeki yinelenen bağlantılar header.php'de
 * ayıklanır.
 * ========================================================================== */

.drawer-nav--compact a,
.drawer-nav--compact .drawer-nav__label {
  padding: 11px 4px;
  font-size: 15px;
  line-height: 20px;
}

.drawer-nav--compact .drawer-nav__row > a > .c-muted {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
}

.drawer-nav--compact [data-depth="0"] > .drawer-nav__row > a,
.drawer-nav--compact [data-depth="0"] > .drawer-nav__row > .drawer-nav__label {
  font-weight: 600;
}

.drawer-nav--compact .drawer-nav__sub a {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
}

.drawer-nav--compact .drawer-nav__sub .drawer-nav__sub a {
  font-size: 13px;
}

.drawer-nav--compact .drawer-nav__sub .drawer-nav__row {
  border-bottom-color: color-mix(in srgb, var(--color-border) 60%, transparent);
}

.drawer-nav--compact .drawer-nav__item--categories > .drawer-nav__row {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}

.drawer-nav--compact .drawer-nav__item--categories > .drawer-nav__row > a {
  color: var(--color-primary);
}

.drawer-nav--compact .drawer-nav__toggle {
  width: 48px;
}

.drawer-nav--compact hr { display: none; }

/* Hızlı erişim kutuları */
.drawer-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.drawer-nav--compact .drawer-quick__item {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-container-lowest);
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  color: var(--color-on-surface);
}

.drawer-nav--compact .drawer-quick__item .icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.drawer-nav--compact .drawer-quick__item:hover {
  border-color: var(--color-primary-container);
}

.drawer-nav--compact .drawer-quick__item .badge-count {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* =============================================================================
   FOTO GALERI (/galeri) — izgara kartlari ve lightbox
   ========================================================================== */

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

@media (min-width: 768px)  { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1280px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.photo-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.photo-card:hover,
.photo-card:focus-within {
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-industrial);
  transform: translateY(-2px);
}

.photo-card__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface-container-low);
}

.photo-card__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.photo-card:hover .photo-card__link img { transform: scale(1.04); }

.photo-card__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
  color: var(--color-on-surface);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.photo-card:hover .photo-card__zoom,
.photo-card__link:focus-visible .photo-card__zoom { opacity: 1; transform: none; }

.photo-card__caption {
  padding: var(--stack-xs) var(--stack-sm) var(--stack-sm);
}

.photo-card__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Lightbox ------------------------------------------------------------ */

body.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 16px;
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 12, 14, 0.92);
}

.lightbox__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-sm);
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background-color: #111;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  color: #f1f1f0;
  font-size: 14px;
  text-align: center;
  max-width: 80ch;
}

.lightbox__caption span:empty { display: none; }
.lightbox__counter { color: rgba(241, 241, 240, 0.65); font-variant-numeric: tabular-nums; }

.lightbox__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible { background-color: var(--color-accent); color: var(--color-on-accent, #1a1c1c); outline: none; }
.lightbox__btn[hidden] { display: none; }
.lightbox__btn--close { top: 12px; right: 12px; }
.lightbox__btn--prev  { left: 8px;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 8px; top: 50%; transform: translateY(-50%); }

@media (min-width: 1024px) {
  .lightbox__btn--prev { left: 24px; }
  .lightbox__btn--next { right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-card, .photo-card__link img, .photo-card__zoom { transition: none; }
}