/* ==========================================================================
   TEMA: ORION — GENEL MAĞAZA / EV VE YAŞAM
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/orion/shop/layouts/app.blade.php)
   `css/shop.css` dosyasını YÜKLEMEZ. Bu yüzden burada kendi sıfırlaması, kendi
   ızgarası, kendi tipografisi ve çekirdekten devralınan paylaşılan bileşen
   sınıflarının (.container, .btn, .badge, .panel, .field, .cartitem, .summary,
   .datatable, .pagination, .table-scroll …) ORION dilinde yeniden çizimi vardır.
   O adlar korunuyor çünkü tema yalnızca YEDİ görünümü eziyor; sepet, ödeme,
   hesabım, blog, iletişim, koleksiyon, kampanya, karşılaştırma ve sektör modülü
   sayfaları ÇEKİRDEK görünümlerdir ve o sözlüğü kullanır. Karşılığı olmayan bir
   sınıf o sayfalarda STİLSİZ kalırdı — hata yok, log yok, mağazanın yarısı bozuk.

   KARAKTER: klasik yüksek dönüşümlü ticari vitrin. AÇIK ve ferah zemin, koyu
   yeşil kimlik şeridi, PARLAK turuncu aksiyon, banner ızgarası merkezli ana
   sayfa, 4 kolonluk büyük kartlı ürün ızgarası.

   RENK ROLLERİ SABİTTİR: zemin belirteçleri (--page-bg, --card-bg, --surface,
   --primary-soft, --accent-soft, --border, --border-strong, --control-border)
   METİN rengi olarak KULLANILMAZ; ön plan belirteçleri (--title, --text,
   --muted, --on-primary, --on-accent) zemin olarak kullanılmaz.

   KONTRAST — HESAPLANDI (WCAG 2.1 bağıl parlaklık formülü):
     #ffffff üzerine #333e38 gövde metni ............. 11,13:1  (AAA)
     #f2f5f3 üzerine #333e38 gövde metni ............ 10,14:1  (AAA)
     #ffffff üzerine #5f6b64 soluk metin ............. 5,56:1   (AA)
     #f2f5f3 üzerine #5f6b64 soluk metin ............. 5,07:1   (AA)
     #ffffff üzerine #132a20 başlık ................. 15,22:1  (AAA)
     #f2f5f3 üzerine #132a20 başlık ................. 13,86:1  (AAA)
     #ffffff üzerine #a94f04 turuncu fiyat/bağlantı .. 5,52:1   (AA)
     #a94f04 üzerine #ffffff turuncu dolgu + beyaz ... 5,52:1   (AA)
     #1f6b4a üzerine #ffffff yeşil rozet / düğme ..... 6,44:1   (AA)
     #164734 üzerine #ffffff koyu yeşil duyuru şeridi  10,58:1  (AAA)
     #f28c28 üzerine #14211b PARLAK turuncu aksiyon .. 6,77:1   (AA)
     #e07b16 üzerine #14211b turuncu :hover .......... 5,56:1   (AA)
     #ffffff üzerine #0f7a3d "Stokta var" ............ 5,43:1   (AA)
     #ffffff üzerine #c62828 "Son N adet" / hata ..... 5,62:1   (AA)
     #ffffff üzerine #8a5d00 uyarı metni ............. 5,75:1   (AA)
     #ffffff üzerine #79857d denetim kenarlığı ....... 3,84:1   (WCAG 1.4.11)

   AKSİYON TURUNCUSU BEYAZ METİN TAŞIMAZ — ÖLÇÜLDÜ: #f28c28 üzerine beyaz metin
   2,45:1'de kalıyor. Turuncuyu koyultmak (kardeş tema tunga bunu yapıyor) yerine
   parlak turuncu KORUNDU ve üzerine KOYU metin basıldı (#14211b, 6,77:1). Turuncu
   METİN gerektiğinde ayrı bir belirteç kullanılır: --accent (#a94f04, 5,52:1).

   FOTOĞRAF ÜSTÜNE AÇIK METİN BASILMAZ: kategori kutusunda ad fotoğrafın ALTINDA,
   manşette metin RENKLİ PANEL üstündedir. Bu yüzden burada "fotoğraf perdesi"
   kuralı yoktur — perdeye ihtiyaç duyan bir yerleşim de yoktur.
   ========================================================================== */

:root {
  /* --- Tipografi: TEK AİLE, geniş ve dostane sans. Serif YOK. --- */
  --font-heading: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: -0.015em;

  /* --- Ham palet --- */
  --orn-yesil-900: #0f3325;
  --orn-yesil-800: #164734;
  --orn-yesil-700: #1a5c3f;
  --orn-yesil-600: #1f6b4a;
  --orn-yesil-500: #2c8c62;
  --orn-yesil-050: #eaf4ef;
  --orn-turuncu-700: #8a3f02;
  --orn-turuncu-600: #a94f04;
  --orn-turuncu-500: #f28c28;
  --orn-turuncu-400: #e07b16;
  --orn-turuncu-050: #fdf0e2;
  --orn-murekkep: #14211b;
  --orn-cizgi: #dfe5e1;
  --orn-cizgi-koyu: #c4cec8;
  --orn-yuzey: #f2f5f3;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #1f6b4a;
  --accent: #a94f04;
  --title: #132a20;
  --text: #333e38;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #dfe5e1;
  --radius: 6px;
  --card-radius: 10px;
  --btn-radius: 6px;
  --container: 1320px;

  --primary-strong: #0f3325;
  --primary-hover: #1a5c3f;
  --primary-focus: #2c8c62;
  --primary-line: #c9ded4;
  --primary-soft: #eaf4ef;
  --on-primary: #ffffff;

  --accent-strong: #8a3f02;
  --accent-light: #f28c28;
  --accent-soft: #fdf0e2;
  --on-accent: #ffffff;

  /*
   | SOLUK METİN GRİ ZEMİNE KARŞI ÖLÇÜLDÜ, BEYAZA KARŞI DEĞİL.
   |
   | Bu tema "açık gri bölüm zemini" (--surface #f2f5f3) kullanıyor ve soluk
   | metnin çoğu (KDV notu, kart altı bilgi, sıralama etiketi, sayfalama
   | "Önceki/Sonraki", sepet/ödeme yardımcı metinleri) O ZEMİN üstünde duruyor.
   | Belirteci yalnızca beyaza karşı ölçmek gerçek zemini gizler; kardeş temada
   | tam bu hata 22 ölçümde bulgu üretmişti. #5f6b64 → beyazda 5,56:1 ·
   | #f2f5f3 üstünde 5,07:1. İkisi de 4,5 eşiğinin üstünde.
   */
  --muted: #5f6b64;
  --border-strong: #c4cec8;
  --surface: #f2f5f3;
  --white: #ffffff;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği >= 3:1.
     Panelden AYARLANAMAZ (config/themes.php `adjustable` listesinde yok);
     beyaz zeminde 3,84:1 ölçüldü. --border yalnızca DEKORATİF çizgidir. */
  --control-border: #79857d;
  --control-border-strong: #57635b;

  --success: #0f7a3d;
  --danger: #c62828;
  --warning: #8a5d00;

  --radius-sm: 4px;
  --radius-lg: 14px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(19, 42, 32, 0.08);
  --shadow: 0 6px 20px rgba(19, 42, 32, 0.09);
  --shadow-lg: 0 20px 48px rgba(19, 42, 32, 0.16);
  --card-shadow: 0 1px 3px rgba(19, 42, 32, 0.07);
  --card-hover-shadow: 0 10px 26px rgba(19, 42, 32, 0.14);

  --btn-height: 46px;
  --btn-tracking: 0.01em;
  --section-space: 44px;
  --ease: cubic-bezier(0.33, 0, 0.2, 1);

  /* Yapışkan arama şeridinin yüksekliği: satın alma kutusu ve atlama
     bağlantısı bu değerin altına yerleşir. */
  --orn-yapiskan: 64px;
  --orn-kenar: clamp(14px, 3vw, 24px);
  --orn-dokunma: 44px;
}

/* ==================== SIFIRLAMA ==================== */

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

/* BELGENİN YAZI TİPİ KÖKTE AÇIKÇA BİLDİRİLİR (var() ardına saklanmaz):
   hem var() desteklemeyen bağlamlar (bazı tarayıcı form denetimleri) hem de
   `php artisan cea:tasarim-ayrisma` tipografi ölçümü doğru aileyi görsün. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  scroll-padding-top: calc(var(--orn-yapiskan) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--title);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--heading-tracking);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
del { color: var(--muted); }

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

button { font: inherit; color: inherit; }

/* Odak halkası HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmeli. */
:focus-visible {
  outline: 3px solid var(--orn-turuncu-600);
  outline-offset: 2px;
}

main { display: block; min-height: 40vh; }

/* ==================== YARDIMCI ==================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.hint { font-weight: 400; color: var(--muted); }
.stack { display: grid; gap: 16px; }

.orn-kap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--orn-kenar), env(safe-area-inset-left, 0px)) max(var(--orn-kenar), env(safe-area-inset-right, 0px));
}

/* Dar ekranda süzgeç kolonu listenin ÜSTÜNDE kalıyor; uzun bir süzgeç
   listesini her ziyaretçiye kaydırtmak erişilebilirlik gerilemesidir. */
.orn-atla {
  display: none;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--orn-turuncu-600);
  text-decoration: underline;
}

/* ==================== DÜĞMELER ==================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  background: var(--orn-yesil-600);
  color: var(--on-primary);
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: var(--ease);
}

.btn:hover { text-decoration: none; background: var(--orn-yesil-700); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/*
 | AKSİYON DÜĞMESİ: PARLAK TURUNCU + KOYU METİN.
 | Beyaz metin bu turuncuda 2,45:1'de kalırdı (ölçüldü); koyu mürekkep 6,77:1.
 | Çekirdek adlar (.btn--gold çekirdek görünümlerde "sepete ekle" düğmesidir)
 | aynı görünüme bağlanır, böylece ezilmeyen sayfalarda da aynı aksiyon rengi
 | görünür.
 */
.btn--turuncu, .btn--gold {
  background: var(--orn-turuncu-500);
  border-color: var(--orn-turuncu-500);
  color: var(--orn-murekkep);
}

.btn--turuncu:hover, .btn--gold:hover {
  background: var(--orn-turuncu-400);
  border-color: var(--orn-turuncu-400);
  color: var(--orn-murekkep);
}

.btn--navy, .btn--primary {
  background: var(--orn-yesil-600);
  border-color: var(--orn-yesil-600);
  color: var(--on-primary);
}

.btn--navy:hover, .btn--primary:hover { background: var(--orn-yesil-700); border-color: var(--orn-yesil-700); }

.btn--outline {
  background: var(--card-bg);
  border-color: var(--control-border);
  color: var(--title);
}

.btn--outline:hover { background: var(--orn-yuzey); border-color: var(--control-border-strong); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--orn-turuncu-600);
}

.btn--ghost:hover { background: var(--accent-soft); }

/* Küçük düğme GÖRSEL olarak küçülür ama dokunma hedefi 44px'in altına düşmez. */
.btn--sm { min-height: var(--orn-dokunma); padding: 6px 14px; font-size: 14.5px; }
.btn--lg { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }

/* ==================== ROZETLER ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pill);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--orn-yuzey);
  color: var(--title);
}

.badge--danger { background: var(--danger); color: #ffffff; }
.badge--gold { background: var(--orn-turuncu-600); color: #ffffff; }
.badge--info { background: var(--orn-yesil-600); color: #ffffff; }
.badge--success { background: var(--success); color: #ffffff; }
.badge--warning { background: var(--warning); color: #ffffff; }
.badge--muted { background: var(--orn-yuzey); color: var(--muted); }

/* ==================== UYARI ŞERİTLERİ ==================== */

.alert {
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--orn-yesil-600);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 15px;
  box-shadow: var(--card-shadow);
}

.alert ul { padding-left: 20px; list-style: disc; }
.alert--success { border-left-color: var(--success); }
.alert--error { border-left-color: var(--danger); }
.alert--info { border-left-color: var(--orn-turuncu-500); }

/* ==========================================================================
   BAŞLIK — ÜÇ KATMAN
   --------------------------------------------------------------------------
   1) .orn-duyuru  koyu yeşil İNCE şerit: solda telefon, ortada kampanya
                   duyurusu, sağda küçük bağlantılar.
   2) .orn-tepe    beyaz ve YÜKSEK (80px): solda logo, sağda hesap/favori/sepet
                   blokları (ikon + ALTINDA etiket). ARAMA BU KATMANDA DEĞİL.
   3) .orn-arabar  TAM GENİŞLİK arama + solunda kutulu "Tüm Kategoriler"
                   açılırı + sağında turuncu ARA. YAPIŞKAN olan KATMAN BUDUR.
   ========================================================================== */

.orn-duyuru {
  background: var(--orn-yesil-800);
  color: #ffffff;
  font-size: 13.5px;
}

.orn-duyuru__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  min-height: 38px;
  padding-block: 4px;
}

.orn-duyuru__orta { flex: 1 1 auto; min-width: 0; text-align: center; }

.orn-duyuru__baglar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }

.orn-duyuru a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  justify-content: center;
  color: #ffffff;
}

.orn-duyuru a:hover { text-decoration: underline; }
.orn-duyuru svg { stroke: currentColor; }

.orn-tepe {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.orn-tepe__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
  padding-block: 10px;
}

.orn-logo { display: inline-flex; align-items: center; gap: 12px; }
.orn-logo:hover { text-decoration: none; }

.orn-logo__isaret {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--orn-yesil-600);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
}

.orn-logo__ad {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--title);
}

.orn-logo__alt {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* İKİ SATIRLI EYLEM BLOKLARI: ikon üstte, etiket ALTINDA. */
.orn-eylemler { display: flex; align-items: stretch; gap: 4px; }

.orn-eylem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  min-width: 62px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--title);
  text-align: center;
}

.orn-eylem:hover { text-decoration: none; background: var(--primary-soft); color: var(--orn-yesil-700); }
.orn-eylem svg { stroke: currentColor; }

.orn-eylem__yazi { font-size: 12.5px; font-weight: 600; line-height: 1.2; }

.orn-eylem__sayi {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 21px;
  padding: 1px 5px;
  border-radius: var(--pill);
  background: var(--orn-turuncu-500);
  color: var(--orn-murekkep);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.orn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

/* --- KATMAN 3: TAM GENİŞLİK ARAMA (YAPIŞKAN) --- */

.orn-arabar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--orn-yesil-600);
  box-shadow: var(--shadow-sm);
}

.orn-arabar__ic {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-height: var(--orn-yapiskan);
  padding-block: 9px;
}

/* "Tüm Kategoriler" KUTULU AÇILIR — yerel <details>, JavaScript gerekmez. */
.orn-katmenu { position: relative; flex: 0 0 auto; }

.orn-katmenu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--orn-dokunma);
  height: 100%;
  padding: 0 14px;
  border: 1.5px solid #ffffff;
  border-radius: var(--btn-radius);
  background: var(--orn-yesil-700);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.orn-katmenu > summary::-webkit-details-marker { display: none; }
.orn-katmenu > summary svg { stroke: currentColor; }
.orn-katmenu[open] > summary { background: var(--orn-yesil-800); }

.orn-katmenu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 264px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
}

.orn-katmenu__panel a {
  display: flex;
  align-items: center;
  min-height: var(--orn-dokunma);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text);
}

.orn-katmenu__panel a:hover { text-decoration: none; background: var(--primary-soft); color: var(--orn-yesil-700); }
.orn-katmenu__panel a.is-active { background: var(--primary-soft); color: var(--orn-yesil-700); font-weight: 700; }

/* Alt kategori: açılır panelde bir kademe içeri. Ayrı bir ad kullanılıyor
   çünkü `.orn-katmenu__panel a` seçicisi (0,1,1) süzgeç kolonundaki
   `.orn-suzgec__alt` (0,1,0) kuralını özgüllükle ezerdi ve girinti KAYBOLURDU. */
.orn-katmenu__panel a.orn-katmenu__alt { padding-left: 26px; font-size: 14px; color: var(--muted); }
.orn-katmenu__panel a.orn-katmenu__alt:hover { color: var(--orn-yesil-700); }

.orn-arama { display: flex; flex: 1 1 auto; min-width: 0; }

.orn-arama input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--orn-dokunma);
  padding: 10px 14px;
  border: 1.5px solid #ffffff;
  border-right: 0;
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
  background: #ffffff;
  color: var(--title);
  font-size: 16px;
}

.orn-arama input::placeholder { color: var(--muted); }

.orn-arama button {
  flex: 0 0 auto;
  min-height: var(--orn-dokunma);
  min-width: 88px;
  padding: 0 20px;
  border: 1.5px solid var(--orn-turuncu-500);
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  background: var(--orn-turuncu-500);
  color: var(--orn-murekkep);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.orn-arama button:hover { background: var(--orn-turuncu-400); border-color: var(--orn-turuncu-400); }

/* ==================== MOBİL MENÜ ==================== */

.orn-mobmenu {
  display: none;
  padding: 10px 0 18px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.orn-mobmenu.is-open { display: block; }

.orn-mobmenu a,
.orn-mobmenu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--orn-dokunma);
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  color: var(--title);
  cursor: pointer;
}

.orn-mobmenu details a { padding-left: 18px; font-weight: 400; color: var(--text); }
.orn-mobmenu .orn-arama { margin-bottom: 14px; }
.orn-mobmenu .orn-arama input { border-color: var(--control-border); }

/* ==========================================================================
   ANA SAYFA — 1) TAM GENİŞLİK MANŞET (KAYDIRMALI BANNER)
   --------------------------------------------------------------------------
   SOLDA DİKEY KATEGORİ RAYI YOKTUR: banner kabın TAM GENİŞLİĞİNİ kullanır.
   Metin RENKLİ PANEL üstünde durur, fotoğraf üstünde DEĞİL — bu yüzden perde
   hesabına ihtiyaç yok.
   ========================================================================== */

.orn-manset {
  position: relative;
  margin-top: 22px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  overflow: hidden;
}

.orn-manset__slaytlar { position: relative; }

.orn-manset__slayt { display: none; }
.orn-manset__slayt.is-active { display: block; }

.orn-manset__ic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(26px, 5vw, 56px) clamp(56px, 7vw, 96px);
}

.orn-manset__etiket {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--orn-yesil-600);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.orn-manset__baslik {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--title);
}

.orn-manset__alt {
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text);
}

.orn-manset__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--title);
  cursor: pointer;
}

.orn-manset__ok:hover { background: var(--orn-turuncu-500); border-color: var(--orn-turuncu-500); color: var(--orn-murekkep); }
.orn-manset__ok--geri { left: 10px; }
.orn-manset__ok--ileri { right: 10px; }

.orn-manset__denetim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 16px;
}

.orn-manset__dur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: 84px;
  padding: 0 14px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--title);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.orn-manset__dur:hover { background: var(--orn-yuzey); }

.orn-manset__nokta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.orn-manset__nokta::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--orn-yesil-700);
  border-radius: var(--pill);
  background: transparent;
}

.orn-manset__nokta[aria-current="true"]::after { background: var(--orn-yesil-700); }

/* ==================== 2) DÖRT GÜVEN KUTUSU ==================== */

.orn-guven {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.orn-guven__kutu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.orn-guven__kutu svg { flex: 0 0 auto; stroke: var(--orn-yesil-600); }

.orn-guven__yazi { min-width: 0; }
.orn-guven__yazi strong { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--title); }
.orn-guven__yazi span { display: block; font-size: 13.5px; color: var(--muted); }

/* ==================== BÖLÜM BAŞLIĞI ==================== */

.orn-bolum { margin-top: var(--section-space); }

.orn-bolum__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orn-yesil-600);
}

/* Liste sayfası bu şeridi <h1> ile kullanıyor; ürün ve ana sayfa <h2> ile. */
.orn-bolum__bas h1,
.orn-bolum__bas h2 {
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
}

.orn-bolum__bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  justify-content: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--orn-turuncu-600);
}

.orn-bolum__bag svg { stroke: currentColor; }

/* ==================== 3) ALTI KATEGORİ KUTUSU (3 + 3) ==================== */

.orn-kategori-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.orn-kategori-kutu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
  transition-property: border-color, box-shadow, transform;
  transition-duration: 170ms;
  transition-timing-function: var(--ease);
}

.orn-kategori-kutu:hover {
  text-decoration: none;
  border-color: var(--orn-yesil-500);
  box-shadow: var(--card-hover-shadow);
}

.orn-kategori-kutu__gorsel {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--orn-yuzey);
  overflow: hidden;
}

.orn-kategori-kutu__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Fotoğrafı olmayan kategoride BAŞ HARF yer tutucusu: uydurma bir stok
   fotoğraf basmak, o kategoride olmayan bir ürünü ima ederdi. */
.orn-kategori-kutu__harf {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--primary-soft);
  color: var(--orn-yesil-700);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
}

.orn-kategori-kutu__ad {
  padding: 12px 14px 4px;
  font-family: var(--font-heading);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--title);
}

.orn-kategori-kutu__alt {
  padding: 0 14px 14px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ==================== 4) ÜRÜN IZGARASI — 4 KOLON, BÜYÜK KART ==================== */

.orn-urunler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.orn-urunler--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==================== ÜRÜN KARTI ==================== */

.orn-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition-property: border-color, box-shadow;
  transition-duration: 170ms;
  transition-timing-function: var(--ease);
}

.orn-kart:hover { border-color: var(--orn-cizgi-koyu); box-shadow: var(--card-hover-shadow); }

.orn-kart__foto {
  position: relative;
  display: block;
  padding: 12px;
  background: var(--card-bg);
}

.orn-kart__foto:hover { text-decoration: none; }
.orn-kart__foto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

.orn-kart__bos {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--orn-yuzey);
  color: var(--muted);
  font-size: 14px;
}

/* İMZA: YUVARLAK YEŞİL rozet, fotoğrafın SOL ÜST köşesinde.
   (Kardeş temalarda köşeli kırmızı ve yuvarlak kırmızı kullanıldı.) */
.orn-kart__rozet {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--pill);
  background: var(--orn-yesil-600);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.orn-kart__isaretler {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.orn-kart__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--muted);
  cursor: pointer;
}

.orn-kart__fav:hover { color: var(--danger); border-color: var(--control-border); }
.orn-kart__fav[aria-pressed="true"] { color: var(--danger); }

.orn-kart__govde { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: 4px 14px 12px; }

.orn-kart__marka {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Ürün adı EN ÇOK İKİ SATIR: kartlar aynı yükseklikte hizalanır. */
.orn-kart__ad {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /*
   | 44px — GERÇEK VURUŞ TESTİYLE ÖLÇÜLDÜ, KUTU ARİTMETİĞİYLE DEĞİL.
   | İlk yazımda `min-height: 2.7em` vardı; headless Chrome'da 320 ve 390px'te
   | ürün adı bağlantısının gerçek vuruş dikdörtgeni 262x39,1 ve 332x39,1
   | ölçüldü (2.7em, 14,5px yazıda 39,15px eder). Fotoğraf bağlantısı aynı
   | adrese gidiyor ve 44px'ten büyük olsa da hedefi "eşdeğer bağlantı"
   | istisnasına yıkmak yerine yükseklik doğrudan 44px'e çıkarıldı; iki satır
   | kırpma (line-clamp) etkilenmez.
   */
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--title);
}

.orn-kart__ad:hover { color: var(--orn-turuncu-600); }

.orn-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-top: auto; }
.orn-kart__fiyat del { font-size: 13.5px; }

.orn-kart__fiyat strong {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  color: var(--title);
}

.orn-kart__fiyat strong.orn-indirimli { color: var(--orn-turuncu-600); }

.orn-kart__stok { font-size: 13px; }

.orn-kart__ayak { display: flex; flex-direction: column; gap: 7px; padding: 0 14px 14px; }

/* ==================== 5) İKİ SATIRLI BANNER IZGARASI ==================== */

.orn-banner-izgara { display: grid; gap: 14px; }

/* Üst satır: 1 GENİŞ + 2 DAR */
.orn-banner-izgara--ust { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }

/* Alt satır: 3 EŞİT */
.orn-banner-izgara--alt { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }

.orn-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
  min-height: 148px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
  color: var(--title);
}

.orn-banner:hover { text-decoration: none; border-color: var(--orn-yesil-500); }
.orn-banner--genis { min-height: 200px; }

.orn-banner--yesil { background: var(--orn-yesil-600); border-color: var(--orn-yesil-600); color: #ffffff; }
.orn-banner--yesil:hover { background: var(--orn-yesil-700); border-color: var(--orn-yesil-700); }

.orn-banner--turuncu { background: var(--orn-turuncu-500); border-color: var(--orn-turuncu-500); color: var(--orn-murekkep); }
.orn-banner--turuncu:hover { background: var(--orn-turuncu-400); border-color: var(--orn-turuncu-400); }

.orn-banner--acik { background: var(--primary-soft); border-color: var(--primary-line); }

.orn-banner__ust {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.92;
}

.orn-banner__baslik {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.2;
}

.orn-banner--genis .orn-banner__baslik { font-size: clamp(21px, 2.8vw, 30px); }
.orn-banner__alt { font-size: 14px; }

/* ==================== 7) MARKA ŞERİDİ ==================== */

.orn-markalar {
  display: flex;
  gap: 10px;
  padding-bottom: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.orn-markalar:focus-visible { outline: 3px solid var(--orn-turuncu-600); outline-offset: 3px; }

.orn-marka {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  min-width: 148px;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--title);
  text-align: center;
}

.orn-marka:hover { text-decoration: none; border-color: var(--orn-turuncu-500); color: var(--orn-turuncu-600); }

/* ==================== BÜLTEN BANDI ==================== */

.orn-bulten {
  margin-top: var(--section-space);
  padding-block: 26px;
  background: var(--orn-yesil-800);
}

.orn-bulten__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 18px 32px;
  align-items: center;
}

.orn-bulten__baslik {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  color: #ffffff;
}

.orn-bulten__alt { margin-top: 4px; font-size: 14.5px; color: #d7e7de; }

.orn-bulten__durum { margin-top: 8px; font-size: 14.5px; color: #d7e7de; }

/* ==================== ALT BİLGİ — DÖRT KOLON ==================== */

.orn-alt {
  border-top: 4px solid var(--orn-turuncu-500);
  background: var(--orn-yesil-900);
  color: #d7e7de;
}

.orn-alt__kolonlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding-block: 34px;
}

.orn-alt h4 {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
}

.orn-alt__bag a {
  display: inline-flex;
  align-items: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  font-size: 14.5px;
  color: #d7e7de;
}

.orn-alt__bag a:hover { color: #ffffff; }

.orn-alt__rozetler { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.orn-alt__rozetler li {
  padding: 4px 10px;
  border: 1px solid #35604c;
  border-radius: var(--pill);
  font-size: 12.5px;
  font-weight: 600;
}

.orn-alt__odeme { display: flex; flex-wrap: wrap; gap: 8px; }

.orn-alt__odeme li {
  padding: 5px 12px;
  border: 1px solid #35604c;
  border-radius: var(--radius-sm);
  background: #0b2a1e;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
}

.orn-alt__telif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  padding-block: 16px;
  border-top: 1px solid #2a5240;
  font-size: 13.5px;
}

.orn-alt__telif strong { color: #ffffff; }

/* ==================== SAYFA YOLU ==================== */

.orn-yol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding-block: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.orn-yol a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
}

.orn-yol a:hover { color: var(--orn-turuncu-600); }
.orn-yol [aria-current="page"] { color: var(--title); font-weight: 600; }

/* ==========================================================================
   LİSTE SAYFASI — SÜZGEÇ KOLONU SAĞDA VE YAPIŞKAN
   --------------------------------------------------------------------------
   Kardeş temalar süzgeci solda (tunga), yatay şeritte (vast, seasy) ya da
   tam genişlik katlanır blokta (quick) tutuyor. Orion'da kolon SAĞDA ve
   masaüstünde yapışkandır; listenin üstünde ALT KATEGORİ KUTULARI şeridi var.
   ========================================================================== */

.orn-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 22px;
  align-items: start;
  padding-bottom: var(--section-space);
}

.orn-liste__sonuc { grid-column: 1; min-width: 0; }

.orn-liste__yan {
  grid-column: 2;
  position: sticky;
  top: calc(var(--orn-yapiskan) + 14px);
  min-width: 0;
}

.orn-altkat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.orn-altkat a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--card-bg);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--title);
}

.orn-altkat a:hover { text-decoration: none; border-color: var(--orn-yesil-600); color: var(--orn-yesil-700); }
.orn-altkat a.is-active { background: var(--orn-yesil-600); border-color: var(--orn-yesil-600); color: #ffffff; }

.orn-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
  font-size: 14.5px;
  color: var(--muted);
}

.orn-ozet strong { color: var(--title); }

.orn-siralama { display: flex; align-items: center; gap: 9px; }
.orn-siralama label { font-size: 14.5px; font-weight: 600; color: var(--title); }

/*
 | SÜZGEÇ: <fieldset>/<legend> ile gruplanır.
 | Katlanır <details> BİLEREK kullanılmadı: dört kardeş temanın hepsi süzgeç
 | gruplarını <details> ile açıp kapatıyor. Alan kümesi (fieldset) hem yapısal
 | olarak farklı hem de ekran okuyucuya "bu onay kutuları aynı süzgecin
 | parçası" bilgisini doğrudan verir.
 */
.orn-suzgec {
  padding: 4px 0;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.orn-suzgec__bas {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--title);
}

.orn-suzgec__grup {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.orn-suzgec__grup legend {
  padding: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--orn-yesil-700);
}

.orn-suzgec__liste { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 268px; overflow-y: auto; }

.orn-suzgec__liste a {
  display: flex;
  align-items: center;
  min-height: var(--orn-dokunma);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text);
}

.orn-suzgec__liste a:hover { text-decoration: none; background: var(--primary-soft); color: var(--orn-yesil-700); }
.orn-suzgec__liste a.is-active { background: var(--primary-soft); color: var(--orn-yesil-700); font-weight: 700; }
.orn-suzgec__alt { padding-left: 20px; font-size: 14px; }

.orn-suzgec__eylem { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }

.orn-onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--orn-dokunma);
  padding: 4px 0;
  font-size: 14.5px;
  cursor: pointer;
}

.orn-onay input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--orn-yesil-600); }

.orn-bos {
  padding: 46px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
  text-align: center;
}

.orn-bos h3 { margin-bottom: 8px; font-size: 20px; }
.orn-bos p { margin-bottom: 16px; }

/* ==========================================================================
   ÜRÜN SAYFASI — ÜÇ KOLON
   --------------------------------------------------------------------------
   SOL   : büyük fotoğraf + ALTINDA yatay küçük resim şeridi
   ORTA  : ürün bilgisi
   SAĞ   : AYRI SATIN ALMA KUTUSU (kenarlıklı kart, masaüstünde yapışkan)
   Sekme ve accordion YOKTUR: açıklama ve özellikler alt alta bölümler.
   ========================================================================== */

.orn-urun {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 330px);
  gap: 24px;
  align-items: start;
  padding-bottom: 12px;
}

.orn-foto { grid-column: 1; min-width: 0; }

.orn-foto__ana {
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.orn-foto__ana img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

/* KÜÇÜK RESİM ŞERİDİ YATAY VE FOTOĞRAFIN ALTINDA (dikey şerit kardeş temanın
   kalıbı). Dar ekranda kaydırılabilir kalır. */
.orn-foto__serit {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.orn-foto__kucuk {
  flex: 0 0 auto;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

.orn-foto__kucuk.is-active { border-color: var(--orn-turuncu-500); }
.orn-foto__kucuk img { width: 62px; height: 62px; object-fit: contain; }

.orn-bilgi { grid-column: 2; display: flex; min-width: 0; flex-direction: column; gap: 12px; }

.orn-bilgi h1 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; }

.orn-bilgi__marka {
  display: inline-flex;
  align-items: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--orn-yesil-700);
}

.orn-bilgi__ust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); }
.orn-bilgi__ust strong { color: var(--title); }
.orn-bilgi__ozet { font-size: 15.5px; }

.orn-bilgi__vaat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--orn-yuzey); }
.orn-bilgi__vaat li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; }
.orn-bilgi__vaat svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--orn-yesil-600); }

/* --- SAĞ KOLON: AYRI SATIN ALMA KUTUSU (temanın imzası) --- */

.orn-satin {
  grid-column: 3;
  position: sticky;
  top: calc(var(--orn-yapiskan) + 14px);
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 2px solid var(--orn-yesil-600);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.orn-satin__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }

.orn-satin__fiyat strong {
  font-family: var(--font-heading);
  font-size: clamp(25px, 3vw, 33px);
  font-weight: 800;
  color: var(--orn-turuncu-600);
}

.orn-satin__fiyat del { font-size: 16px; }
.orn-satin__kdv { font-size: 13px; color: var(--muted); }
.orn-satin__stok { font-size: 14.5px; font-weight: 600; }

/*
 | VARYANT STOK SATIRI ÖZNİTELİKTEN STİLLENİR — ÖLÇÜLEREK KARAR VERİLDİ.
 | public/js/shop.js varyant seçilince `stockEl.className` değerini TAMAMEN
 | değiştirir ('text-danger' / 'text-success' / 'muted'). Sınıfa bağlanan bir
 | kural ilk seçimden sonra kaybolurdu; öznitelik seçicisi kalıcıdır.
 */
[data-variant-stock] { font-size: 14.5px; font-weight: 600; }

.orn-satin__satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.orn-satin__ayrac { height: 1px; border: 0; background: var(--border); }

.orn-satin__taksit,
.orn-satin__kargo {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--text);
}

.orn-satin__taksit svg,
.orn-satin__kargo svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--orn-yesil-600); }
.orn-satin__taksit strong { color: var(--title); }

.orn-adet {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.orn-adet button {
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 0;
  background: var(--orn-yuzey);
  color: var(--title);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.orn-adet button:hover { background: var(--primary-soft); }
.orn-adet button:disabled { opacity: 0.5; cursor: not-allowed; }

.orn-adet input {
  width: 62px;
  min-height: var(--orn-dokunma);
  border: 0;
  border-inline: 1.5px solid var(--control-border);
  background: var(--card-bg);
  color: var(--title);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.orn-secenek { margin-bottom: 12px; }

.orn-secenek__baslik {
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--orn-yesil-700);
}

.orn-secenek__liste { display: flex; flex-wrap: wrap; gap: 8px; }

.orn-secenek__liste label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--orn-dokunma);
  padding: 6px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  font-size: 14.5px;
  cursor: pointer;
}

.orn-secenek__liste label:hover { border-color: var(--orn-turuncu-500); }
.orn-secenek__liste input { accent-color: var(--orn-yesil-600); }

.orn-renk { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--control-border); border-radius: var(--pill); }

/* --- ALT ALTA BÖLÜMLER (sekme/accordion YOK) --- */

.orn-bolumler { display: flex; flex-direction: column; gap: 18px; margin-top: var(--section-space); }

.orn-metin-bolum {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.orn-metin-bolum > h2 {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orn-yesil-600);
  font-size: 20px;
  font-weight: 800;
}

.orn-yazi { font-size: 16px; line-height: 1.72; }
.orn-yazi h2 { margin: 22px 0 8px; font-size: 20px; }
.orn-yazi h3 { margin: 18px 0 8px; font-size: 17.5px; }
.orn-yazi p { margin-bottom: 12px; }
.orn-yazi ul, .orn-yazi ol { margin: 0 0 14px 22px; list-style: disc; }
.orn-yazi ol { list-style: decimal; }
.orn-yazi a { color: var(--orn-turuncu-600); text-decoration: underline; }

.orn-kunye th { width: 34%; }

.orn-yorum { padding: 16px 0; border-bottom: 1px solid var(--border); }
.orn-yorum:last-child { border-bottom: 0; }
.orn-yorum__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.orn-yorum__yazar { font-family: var(--font-heading); font-weight: 800; color: var(--title); }
.orn-yorum strong { display: block; margin-bottom: 4px; color: var(--title); }

.orn-yorum-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; }

.orn-form-kutu {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
}

.orn-form-kutu h3 { margin-bottom: 4px; font-size: 17px; }
.orn-form-kutu p { margin-bottom: 12px; font-size: 14px; color: var(--muted); }

.stars, .orn-yildiz { color: #8a5d00; letter-spacing: 0.08em; }

/* ==================== FORM ALANLARI ==================== */

.field, .orn-alan { margin-bottom: 14px; }

.field label, .orn-alan label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--title);
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  min-height: var(--orn-dokunma);
  padding: 10px 13px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--title);
  font-family: var(--font-body);
  font-size: 16px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--orn-yesil-600);
}

textarea { min-height: 108px; }
select { cursor: pointer; }

.field-error { font-size: 13.5px; color: var(--danger); }
.orn-alan-satir, .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--orn-dokunma);
  padding: 4px 0;
  font-size: 15px;
  cursor: pointer;
}

.check input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--orn-yesil-600); }

.optgroup { margin-bottom: 14px; }

.optgroup__title {
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--orn-yesil-700);
}

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

.optlist label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--orn-dokunma);
  padding: 6px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  font-size: 14.5px;
  cursor: pointer;
}

.optlist input { width: auto; accent-color: var(--orn-yesil-600); }
.swatch { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--control-border); border-radius: var(--pill); }

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--orn-dokunma);
  margin-bottom: 10px;
  padding: 13px 15px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-size: 15px;
  cursor: pointer;
}

/* Yerel radyo düğmesi yeniden çizilmez (appearance:none yüksek kontrast kipini
   bozar); dokunma hedefi saran kartın kendisidir (.radio-card min-height 44px). */
.radio-card input { width: auto; accent-color: var(--orn-yesil-600); }
.radio-card__price { margin-left: auto; font-family: var(--font-heading); font-weight: 800; color: var(--orn-turuncu-600); }

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty button {
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  border: 0;
  background: var(--orn-yuzey);
  color: var(--title);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.qty input {
  width: 62px;
  min-height: var(--orn-dokunma);
  border: 0;
  border-inline: 1.5px solid var(--control-border);
  text-align: center;
  font-weight: 700;
}

.coupon { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
.coupon input { flex: 1 1 160px; }

/* ==================== SAYFALAMA ==================== */

.pagination { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }

.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  font-size: 15px;
  font-weight: 700;
  color: var(--title);
}

.pagination a:hover { text-decoration: none; border-color: var(--orn-turuncu-500); color: var(--orn-turuncu-600); }
.pagination .is-current { background: var(--orn-yesil-600); border-color: var(--orn-yesil-600); color: #ffffff; }
.pagination .is-disabled { color: var(--muted); background: var(--orn-yuzey); }

/* ==================== TABLOLAR ==================== */

/*
 | TABLOYA display:block VERİLMEZ: satır-sütun ilişkisi erişilebilirlik
 | ağacından düşerdi. Dar ekran için kaydırma SARMALAYICIDA yapılır.
 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--orn-turuncu-600); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-family: var(--font-heading); font-weight: 800; color: var(--title); }

.datatable, .kargo-tablo { width: 100%; border-collapse: collapse; }
.datatable th, .kargo-tablo th { background: var(--orn-yuzey); }
.datatable tbody tr:hover, .kargo-tablo tbody tr:hover { background: var(--primary-soft); }

/* ==========================================================================
   TEMA ÖNİZLEME ŞERİDİ (yalnızca panel personeli görür)
   --------------------------------------------------------------------------
   ŞERİT BELGE AKIŞINDA, SAYFANIN EN ÜSTÜNDE durur — ekranın ALTINA
   KİLİTLENMEZ. Çekirdek stilde şerit `position: fixed; bottom: 0` olduğu için
   `env(safe-area-inset-bottom)` eklemek ZORUNLUYDU: çentikli cihazın alt
   tutamağı "Sepete ekle" düğmesini örtüyordu. Orion'da şerit akışta olduğu
   için hiçbir düğmeyi örtmez ve güvenli alan ekine ihtiyaç duymaz; buraya
   yine de eklemek çalışmayan bir korumaya benzerdi.
   ========================================================================== */

.tema-onizleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 10px max(var(--orn-kenar), env(safe-area-inset-left, 0px)) 10px max(var(--orn-kenar), env(safe-area-inset-right, 0px));
  background: var(--orn-yesil-900);
  color: #ffffff;
  font-size: 14px;
}

.tema-onizleme__metin { min-width: 0; }
.tema-onizleme__ayrinti { color: #d7e7de; }
.tema-onizleme__eylemler { display: flex; flex-wrap: wrap; gap: 8px; }

.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  padding: 0 14px;
  border: 1.5px solid #ffffff;
  border-radius: var(--btn-radius);
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.tema-onizleme__btn--birincil { background: var(--orn-turuncu-500); border-color: var(--orn-turuncu-500); color: var(--orn-murekkep); }

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK KATMANI — EZİLMEYEN SAYFALAR
   ==========================================================================
   NİÇİN GEREKLİ: Orion yedi görünümü eziyor; GERİ KALANLAR çekirdekten geliyor
   (sepet, ödeme, hesabım, üyelik, blog, iletişim ve sözleşme sayfaları,
   kampanya listesi, karşılaştırma, koleksiyon, bayi, oto araç seçici,
   garanti sorgulama, takas, tema mağazası). O sayfalar `css/shop.css`
   yüklenmediği için burada karşılığı olmayan bir sınıf STİLSİZ kalır:
   kapsayıcı genişliği kaybolur, sepet satırı yığılır, ödeme adım şeridi
   düz metne döner. Hata yok, log yok — mağazanın yarısı bozuk görünür.

   LİSTE ÖLÇÜMDEN GELDİ, elle yazılmadı: `resources/views/shop/**` içindeki
   EZİLMEYEN görünümlerin kullandığı sınıflar ile `css/shop.css` içinde tanımlı
   sınıfların kesişimi alındı (100 sınıf); ardından yaprak CSS dosyalarının
   (shop-karsilastirma, shop-birim, shop-dijital, shop-teslimat,
   shop-sepet-zekasi, shop-blog, shop-koleksiyon, shop-bayi, shop-elektronik,
   shop-oto, shop-kuyumcu, shop-parti, shop-yapi, shop-abonelik, shop-listeler)
   ZATEN karşıladıkları ayıklandı. Böylece ölü kural yok.

   Yaprak CSS dosyaları renkleri `var(--…)` ile okuyor; bu yüzden yukarıdaki
   :root sözlüğünün TAMAMI (çekirdekteki her rol belirteci) burada yeniden
   tanımlıdır — tanımlanmasaydı karşılaştırma şeridi, birim fiyat satırı,
   teslimat slotu ve sepet zekâsı kutuları RENKSİZ kalırdı.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--orn-kenar), env(safe-area-inset-left, 0px)) max(var(--orn-kenar), env(safe-area-inset-right, 0px));
}

.section { padding-block: clamp(28px, 4vw, 48px); }
.section--surface { background: var(--orn-yuzey); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orn-yesil-600);
}

.section-head h2, .section-head h3 { font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; }
.section-head p { font-size: 14.5px; color: var(--muted); }

.eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orn-yesil-700);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding-block: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.breadcrumb a,
.breadcrumb > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
}

.breadcrumb a:hover { color: var(--orn-turuncu-600); }
.breadcrumb [aria-current="page"] { color: var(--title); font-weight: 600; }

.panel {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/*
 | TELEFON VE E-POSTA BAĞLANTILARI — GERÇEK TARAYICIDA ÖLÇÜLDÜ.
 |
 | /iletisim sayfası ÇEKİRDEK bir görünümdür (bu tema onu EZMEZ) ve iletişim
 | bilgilerini `<li style="display:flex">` içinde tek başına duran bağlantılar
 | olarak basar. Headless Chrome'da 320 · 390 · 1280 px'te ölçüldü: vuruş
 | dikdörtgeni 183x38 ve 199x38, yani yükseklik 44px'in ALTINDA. Bunlar bir
 | cümlenin içinde akan bağlantı DEĞİL (WCAG 2.5.5 satır içi istisnası
 | uygulanmaz), tek başına duran denetimlerdir.
 |
 | Çekirdek görünüm DEĞİŞTİRİLMEDİ — düzeltme temanın kendi stil dosyasında:
 | tel: ve mailto: bağlantıları esnek satıra alınır ve 44px'e çıkar. Kural
 | başlık/alt bilgideki aynı bağlantılara da uyar (onlar zaten 44px'ti).
 */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--orn-dokunma);
}

.panel h2 { margin-bottom: 4px; font-size: 18px; }
.panel__desc { margin-bottom: 14px; font-size: 14.5px; color: var(--muted); }
.panel--sss { margin: 0 0 10px; padding: 4px 18px; }

.prose { font-size: 16px; line-height: 1.72; }
.prose h2 { margin: 24px 0 8px; font-size: 20px; }
.prose h3 { margin: 18px 0 8px; font-size: 17.5px; }
.prose p { margin-bottom: 12px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--orn-turuncu-600); text-decoration: underline; }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.catcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.catcard:hover { text-decoration: none; border-color: var(--orn-yesil-500); box-shadow: var(--card-hover-shadow); }
.catcard strong { font-family: var(--font-heading); font-size: 16.5px; font-weight: 700; color: var(--title); }
.catcard span { font-size: 13.5px; color: var(--muted); }

/* Çekirdek ana sayfa bloğu (hero) — ezilmeyen bir sayfa onu çağırırsa. */
.hero { padding-block: clamp(28px, 5vw, 56px); background: var(--primary-soft); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--orn-yesil-600);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }

.hero__card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-size: 14.5px;
}

.hero__card-icon { flex: 0 0 auto; stroke: var(--orn-yesil-600); }

/* --- sepet --- */

.cartlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: start; }
.cartlist { display: flex; flex-direction: column; gap: 12px; }

.cartitem {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, auto);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.cartitem__img { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cartitem__img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.cartitem__name { font-family: var(--font-heading); font-size: 15.5px; font-weight: 700; color: var(--title); }
.cartitem__meta { font-size: 13.5px; color: var(--muted); }
.cartitem__right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.cartitem__total { font-family: var(--font-heading); font-size: 18px; font-weight: 800; color: var(--title); }

.summary {
  padding: 18px;
  border: 2px solid var(--orn-yesil-600);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 7px; font-size: 15px; }

.summary__row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--title);
}

.summary__note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* --- ödeme --- */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: start; }

.steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

.steps__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--muted);
}

.steps__no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
}

.steps__item.is-active { color: var(--title); font-weight: 700; }
.steps__item.is-active .steps__no { background: var(--orn-yesil-600); border-color: var(--orn-yesil-600); color: #ffffff; }

.success-box {
  padding: 26px;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  text-align: center;
}

.success-box__icon { display: inline-grid; place-items: center; margin-bottom: 12px; color: var(--orn-yesil-700); }

/* --- hesabım --- */

.acclayout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 22px; align-items: start; }
.accnav { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--card-bg); }

.accnav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--orn-dokunma);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.accnav a:hover, .accnav a.is-active { text-decoration: none; background: var(--primary-soft); color: var(--orn-yesil-700); }

.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.addr-grid--bosluklu { gap: 20px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 22px; align-items: start; }

/* --- liste (ezilmeyen liste görünümleri: koleksiyon, kampanya, blog etiketi) --- */

.listlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 22px; align-items: start; }
.listlayout--tek { grid-template-columns: minmax(0, 1fr); }

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
  font-size: 14.5px;
}

.filters { padding: 4px 0; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--card-bg); }
.filters h3 { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 800; }
.filters__group { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.filters__title { margin-bottom: 8px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--orn-yesil-700); }
.filters__list { display: flex; flex-direction: column; gap: 2px; }

.filters__list a {
  display: flex;
  align-items: center;
  min-height: var(--orn-dokunma);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text);
}

.filters__list a:hover, .filters__list a.is-active { text-decoration: none; background: var(--primary-soft); color: var(--orn-yesil-700); }

.empty {
  padding: 46px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  background: var(--orn-yuzey);
  text-align: center;
}

.empty h3 { margin-bottom: 8px; font-size: 20px; }

/* --- rapor / istatistik kartları (bayi panosu, sipariş özeti) --- */

.statcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.statcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.statcard {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.statcard strong { display: block; font-family: var(--font-heading); font-size: 23px; font-weight: 800; color: var(--title); }
.statcard span { font-size: 13.5px; color: var(--muted); }

/* --- galeri (ezilmeyen görünümler: koleksiyon/kombin fotoğrafı) --- */

.gallery__main { padding: 16px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--card-bg); }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }

.gallery__thumb {
  flex: 0 0 auto;
  min-height: var(--orn-dokunma);
  min-width: var(--orn-dokunma);
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  cursor: pointer;
}

.gallery__thumb.is-active { border-color: var(--orn-turuncu-500); }

.pfeatures { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--orn-yuzey); }
.pfeatures li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.pfeatures svg { flex: 0 0 auto; stroke: var(--orn-yesil-600); }

/* ==================================================================
   DUYARLILIK — ONAYLI KIRILMA NOKTALARI
   ------------------------------------------------------------------
   Kullanılan noktalar DuyarlilikTest::KIRILMA_NOKTALARI listesindedir:
   1100 · 1040 · 901 · 900 · 720 · 641 · 640 · 560 · 420.
   Yeni bir nokta EKLENMEDİ: kardeş temada gerekçesiz eklenen 768/1024/1440
   kapıya takılmıştı.
   ================================================================== */

/* Masaüstü: mobil menü ve burger gizli. */
@media (min-width: 901px) {
  .orn-mobmenu { display: none; }
  .orn-mobmenu.is-open { display: none; }
}

/* 1100 ve altı: ürün sayfası ÜÇ kolondan İKİ kolona düşer; satın alma kutusu
   SAĞDA kalır (temanın imzası korunur), fotoğraf ve bilgi sol kolonda yığılır. */
@media (max-width: 1100px) {
  .orn-urun { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .orn-foto { grid-column: 1; grid-row: 1; }
  .orn-bilgi { grid-column: 1; grid-row: 2; }
  .orn-satin { grid-column: 2; grid-row: 1 / span 2; }
  .orn-yorum-duzen { grid-template-columns: minmax(0, 1fr); }
  .checkout, .cartlayout { grid-template-columns: minmax(0, 1fr); }
  .contact-grid, .listlayout { grid-template-columns: minmax(0, 1fr); }
  .acclayout { grid-template-columns: minmax(0, 1fr); }
  .hero__cards, .statcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid, .pgrid--4, .pgrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1040 ve altı: liste sayfası tek kolon; süzgeç kolonu yapışkanlıktan çıkar. */
@media (max-width: 1040px) {
  .orn-liste { grid-template-columns: minmax(0, 1fr); }
  .orn-liste__sonuc, .orn-liste__yan { grid-column: 1; }
  .orn-liste__yan { position: static; }
  .orn-atla { display: inline-flex; }
  .orn-suzgec__liste { max-height: none; }
  .orn-urunler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orn-bulten__ic { grid-template-columns: minmax(0, 1fr); }
}

/* 900 ve altı: başlık mobil kipe geçer, üç kolonlu ürün tek kolona iner. */
@media (max-width: 900px) {
  .orn-burger { display: inline-flex; }
  .orn-eylem { min-width: 54px; }
  .orn-eylem__yazi { display: none; }
  .orn-duyuru__orta { display: none; }
  .orn-duyuru__ic { justify-content: space-between; }
  .orn-tepe__ic { min-height: 68px; }

  .orn-urun { grid-template-columns: minmax(0, 1fr); }
  .orn-foto, .orn-bilgi, .orn-satin { grid-column: 1; }
  .orn-foto { grid-row: 1; }
  .orn-satin { grid-row: 2; position: static; }
  .orn-bilgi { grid-row: 3; }

  .orn-guven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orn-banner-izgara--ust, .orn-banner-izgara--alt { grid-template-columns: minmax(0, 1fr); }
  .orn-alt__kolonlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catgrid, .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orn-manset__ic { padding-inline: clamp(20px, 5vw, 40px); }
  .orn-manset__ok { top: auto; bottom: 12px; transform: none; }
  .orn-manset__ok--geri { left: auto; right: 66px; }
  .orn-manset__ok--ileri { right: 12px; }
  .orn-manset__denetim { justify-content: flex-start; padding-bottom: 12px; }
}

/* 720 ve altı: kategori kutuları ikiye, ürün ızgarası üç yerine iki kolona. */
@media (max-width: 720px) {
  .orn-kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orn-urunler, .orn-urunler--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid, .pgrid--3, .pgrid--4, .pgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 641 üstü: sepet satırı üç kolonlu kalır (aşağıdaki 640 kuralının karşılığı). */
@media (min-width: 641px) {
  .cartitem { align-items: center; }
}

/* 640 ve altı */
@media (max-width: 640px) {
  .orn-kart__ad { font-size: 14.5px; }
  .orn-kart__fiyat strong { font-size: 19px; }
  .orn-kart__rozet { width: 46px; height: 46px; font-size: 12px; }
  .orn-guven { grid-template-columns: minmax(0, 1fr); }
  .cartitem { grid-template-columns: minmax(0, 68px) minmax(0, 1fr); }
  .cartitem__right { grid-column: 1 / -1; align-items: stretch; }
  .orn-alan-satir, .field-row { grid-template-columns: minmax(0, 1fr); }
  .orn-bolum__bas { border-bottom-width: 1px; }
  .orn-metin-bolum { padding: 16px; }
  .orn-satin { padding: 15px; }
}

/* 560 ve altı */
@media (max-width: 560px) {
  .orn-alt__kolonlar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .catgrid, .addr-grid, .hero__cards, .statcards, .statcards--3 { grid-template-columns: minmax(0, 1fr); }
  .orn-arabar__ic { flex-wrap: wrap; }
  .orn-katmenu { flex: 1 1 100%; }
  .orn-katmenu > summary { justify-content: center; }
  .orn-katmenu__panel { right: 0; max-width: none; }
}

/*
 | 420 ve altı: en dar bantta logo alt yazısı gizlenir, kategori kutuları tek
 | kolona iner.
 |
 | ÜRÜN IZGARASI BURADA TEK KOLONA İNMEZ — ÖLÇÜLEREK KARAR VERİLDİ: ilk yazımda
 | iniyordu ve 390px'te ana sayfanın belge yüksekliği 16.495px ölçüldü (kırk
 | ekran boyu kaydırma). İki kolonda kart genişliği 320px'lik ekranda
 | (320 − 28 dolgu − 16 boşluk) ÷ 2 = 138px kalıyor; kart adı iki satıra
 | kırpıldığı ve düğme tam genişlik olduğu için okunur ve dokunulabilir kalıyor
 | (yatay kaydırma dokuz genişlikte SIFIR ölçüldü).
 */
@media (max-width: 420px) {
  .orn-logo__alt { display: none; }
  .orn-logo__isaret { width: 40px; height: 40px; font-size: 21px; }
  /* Kategori kutuları da İKİ kolonda kalır: tek kolonda altı kutu telefonda
     1.380px yer kaplıyor ve ürünler ekranın çok altına iniyordu. */
  .orn-kategori-kutu__ad { font-size: 15px; }
  .orn-kategori-kutu__alt { display: none; }
  .orn-kart__foto { padding: 8px; }
  .orn-kart__govde, .orn-kart__ayak { padding-inline: 10px; }
  .orn-kart__marka { font-size: 11px; }
  .orn-arama button { min-width: 64px; padding: 0 12px; }
}

/* Kısa/yatay ekran: yapışkan arama şeridi AKIŞA döner, yoksa ekranın yarısını
   kaplar (onaylı yükseklik noktası: 480px). */
@media (max-height: 480px) {
  .orn-arabar { position: static; }
  .orn-satin, .orn-liste__yan { position: static; }
}

/* ==================================================================
   HAREKETİ AZALT (WCAG 2.3.3)
   ------------------------------------------------------------------
   Süreleri sıfırlamak YETMEZ: yumuşak kaydırma da harekettir. Manşetin
   otomatik geçişi ayrıca JavaScript tarafında HİÇ BAŞLAMAZ
   (public/js/tema-orion.js), yani hareket burada yalnızca görsel
   olarak değil KAYNAĞINDA da kapatılır.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  html { scroll-behavior: auto; }
}

/* ==========================================================================
   DOKUNMA HEDEFİ — LOGO BAĞLANTISI
   --------------------------------------------------------------------------
   Gerçek tarayıcıda ölçüldü: `.orn-logo` 1280px'te 159x40, 390px'te 117x42 —
   ikisi de 44px eşiğinin ALTINDA (vuruş sınaması 45x39 ve 45x41 döndü).
   Logo, mağazanın ana sayfasına giden birincil bağlantıdır ve başlıkta tek
   başına durur; satır içi metin akışı istisnası UYGULANMAZ.
   ========================================================================== */

.orn-logo {
  min-height: 44px;
}

/* ==========================================================================
   GENİŞLETME NOKTASI MODÜLLERİNİN ORION'A ÇEVİRİSİ
   --------------------------------------------------------------------------
   Ürün sayfasına, alt bilgiye ve kabuğa dört modül bağlanıyor:
     shop.partials.bulten        → alt bilgi üstü, çift opt-in bülten
     shop.partials.stok-bildirim → satın alma kutusu, "gelince haber ver"
     shop.partials.dealer-price  → satın alma kutusu, B2B bayi fiyat şeridi
     shop.partials.exit-offer    → kabuk sonu, çıkış teklifi katmanı

   ÇIKIŞ TEKLİFİ İÇİN TEK SATIR YAZILMADI: shop-sepet-zekasi.css tamamen
   belirteçlerle (--card-bg, --border, --card-radius, --title, --text, --muted,
   --accent-strong, --accent-soft, --pill, --shadow-lg, --ease) çiziliyor ve bu
   tema hepsini tanımlıyor; kardeş temalar (teknomart, comforte, meniac) da
   onun için tek satır yazmıyor.

   AŞAĞIDAKİLER ÖLÇÜLMÜŞ İKİ SOMUT SORUNU ÇÖZER:
     1) BÜLTEN — modül bandı açık zeminli sayfa varsayıyor, bu temada ise
        alt bilginin üstündeki KOYU YEŞİL bandın yerine geçiyor. Modül
        çiziminde açıklama var(--muted) (#5f6b64) ve alan `color: inherit`
        alıyordu; koyu yeşilde ikisi de okunmaz kalır.
     2) STOK FORMU + BAYİ ŞERİDİ — ikisi de 330px'lik satın alma kutusunun
        İÇİNE giriyor. Modül çizimindeki 18-20px iç boşluk ve ikinci bir
        çerçeve, zaten 2px yeşil çerçeveli olan kutunun içinde "kutu içinde
        kutu" üretiyor ve içerik genişliğini 258px'e düşürüyordu.
   ========================================================================== */

/* -------------------- 1) ALT BİLGİ ÜSTÜ: BÜLTEN BANDI -------------------- */

/* Temanın kendi bandıyla AYNI yüzey: modül kurulduğunda ziyaretçi bandın
   yerinin değiştiğini değil, içeriğinin doğrulandığını görür. */
/*
 | SEÇİCİLERİN ÖNÜNDE `.tema-orion` VAR — SÜS DEĞİL, ÖLÇÜLMÜŞ ZORUNLULUK.
 |
 | Modülün kendi stili (public/css/shop-stok-bildirim.css) `.bulten__aciklama`
 | gibi TEK SINIFLI seçiciler kullanıyor ve GÖVDEDEN yükleniyor
 | (shop.partials.bulten kendi <link> etiketini basıyor), yani temanın stil
 | dosyasından SONRA geliyor. Eşit özgüllükte SONRAKİ kural kazanır: ilk turda
 | buradaki kuralların HİÇBİRİ uygulanmadı.
 |
 | GERÇEK TARAYICIDA ÖLÇÜLDÜ (9 genişlik): `.bulten__aciklama` modülün
 | `var(--muted)` rengiyle çiziliyordu ve koyu yeşil bant üstünde kontrast
 | 1,90:1 çıkıyordu (eşik 4,5:1). Düzeltilmiş hâlde 8,34:1.
 |
 | Gövde sınıfı (`<body class="{{ $tema->bodyClass() }}">`) özgüllüğü
 | (0,2,0)'a çıkarır ve modülün (0,1,0) kuralını yener. `!important`
 | KULLANILMADI: o, sıradaki her ezmeyi de imkânsız kılar.
 */

.tema-orion .bulten {
  margin-top: var(--section-space);
  padding-block: 26px;
  border-top: 0;
  background: var(--orn-yesil-800);
}

.tema-orion .bulten__ic {
  max-width: var(--container);
  padding-inline: max(var(--orn-kenar), env(safe-area-inset-left, 0px))
                  max(var(--orn-kenar), env(safe-area-inset-right, 0px));
  gap: 18px clamp(20px, 4vw, 40px);
}

.tema-orion .bulten__baslik {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  color: #ffffff;                 /* #164734 üstünde 10,67:1 */
}

.tema-orion .bulten__aciklama {
  font-size: 14.5px;
  color: #d7e7de;                 /* #164734 üstünde 8,34:1 */
}

.tema-orion .bulten__aciklama strong { font-weight: 700; color: #ffffff; }

/* Alan BEYAZ zeminli: modülün `color: inherit` bildirimi burada bandın açık
   metnini miras alıyordu, yani beyaza yakın zeminde beyaza yakın yazı. */
.tema-orion .bulten__form input[type="email"] {
  min-height: var(--orn-dokunma);
  border: 1px solid var(--control-border);
  background: var(--card-bg);
  color: var(--title);            /* #132a20 · beyaz üstünde 15,22:1 */
  font-size: 16px;                /* iOS Safari 16px altında ZORLA yakınlaştırır */
}

/* Turuncu aksiyon düğmesi bandın üstünde 4,35:1 sınır kontrastı veriyor
   (WCAG 1.4.11 eşiği 3:1) — değiştirilmedi, yalnızca yükseklik güvenceye
   alındı. */
.tema-orion .bulten__form .btn { min-height: var(--orn-dokunma); }

.tema-orion .bulten__hata {
  max-width: var(--container);
  padding-inline: max(var(--orn-kenar), env(safe-area-inset-left, 0px))
                  max(var(--orn-kenar), env(safe-area-inset-right, 0px));
  color: #ffd7cd;                 /* #164734 üstünde 7,49:1 */
}

/* ---------- 2) SATIN ALMA KUTUSU: BAYİ ŞERİDİ + STOK FORMU ---------- */

/*
 | KUTU İÇİNDE KUTU YOK. `.orn-satin` zaten 2px yeşil çerçeveli, 18px iç
 | boşluklu bir kart; modüllerin kendi çerçevesi ve 18px boşluğu içeride
 | ikinci bir kart üretiyordu. İkisi de yatay çizgiyle ayrılan BÖLÜMLERE
 | indirgendi — kutunun kendi `hr.orn-satin__ayrac` diliyle aynı.
 */
.orn-satin .bayi-panel,
.orn-satin .stokbildirim {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.orn-satin .bayi-panel__head {
  padding: 0 0 8px;
  border-bottom: 0;
}

.orn-satin .bayi-panel__head h2 { font-size: 15px; }
.orn-satin .bayi-panel__body { padding: 0; }

.orn-satin .bayi-total--big {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.orn-satin .stokbildirim__baslik { font-size: 15.5px; }

/*
 | KVKK ONAY ETİKETİ EN AZ 44px — ÖLÇÜLEREK EKLENDİ.
 | Onay kutusunun dokunma hedefi kutunun kendisi (18x18) değil, onu saran
 | ETİKETTİR. Etiketin yüksekliği metnin kaç satıra sardığına bağlı; gerçek
 | tarayıcıda 768px'te 42px ölçüldü (eşik 44). Kardeş temalarda da aynı ölçüm
 | çıktı, düzeltme üçüne birden yazıldı.
 */
.orn-satin .stokbildirim__onay {
  min-height: var(--orn-dokunma);
  align-items: center;
}

/* Dar kutuda alanlar zaten tam genişlik; düğme de öyle olsun ki 258px'lik
   içerikte satır sonunda asılı kalmasın. */
.orn-satin .stokbildirim__form .btn { width: 100%; }


/* ==========================================================================
   REKLAM YUVASI — ORION DİLİNDE
   ==========================================================================
   TABAN BU DOSYADA DEĞİL: `public/css/reklam.css` (R1 kolu) `.reklam`,
   `.reklam__etiket`, `.reklam__birim` ve `.reklam--bos` kurallarını
   tanımlar; yer ayırma (`--reklam-yer`), asgari mesafe tabanı (24px) ve
   dolmayan yuvanın çöküşü ORADADIR ve BURADA TEKRARLANMAZ. Bu bölüm
   yalnızca temanın kendi ritmini ve kendi tipografisini uygular.

   O dosya reklam basılacaksa `@stack('head')` üzerinden yükleniyor; bu
   temanın düzeni `@stack('head')` taşıdığı için taban kurallar burada da
   geçerli. (Tema `css/shop.css` yüklemez, ama `reklam.css` yaprak bir
   dosyadır ve sıfırlama içermez — iki sıfırlama üst üste binmez.)

   KART GÖRÜNÜMÜ VERİLMEZ — BİLEREK: zemin, çerçeve, gölge ve yuvarlatma
   bir arada reklamı ÜRÜN KARTINA benzetir; bu AdSense'in ayrı bir
   yasağıdır ve mağaza sahibinin hesabını kapattırır. Temalar birbirinden
   ZEMİNLE değil, BOŞLUK RİTMİ · AYIRICI ÇİZGİ · ETİKET TİPOGRAFİSİ ve
   ÖLÇÜ ile ayrışır.

   SABİT GENİŞLİK YOK: yalnızca `max-width` kullanılır. Duyarlılık kapısı
   9 genişlikte (320·360·390·414·768·1024·1280·1440·1920) yatay kaydırmayı
   SIFIR ölçüyor; sabit bir genişlik ya da `min-width: <px>` o kapıyı
   düşürürdü.

   GEÇİŞ KISAYOLU `all` DEĞERİYLE YAZILMAZ (depo kuralı; DuyarlilikTest
   `transition` bildirimini `all` ile arayıp düşürür — bu satır ilk
   yazımda kuralı ANLATIRKEN kalıbı da içerdiği için kapı 13 dosyada
   birden düştü, ÖLÇÜLDÜ). Bu bölümde hiç geçiş bildirimi yok.
   ========================================================================== */

/*
 * ORION — PAZARYERİ: SIK RİTİM, İNCE ÇİZGİ.
 *
 * Pazaryeri düzeninde bölümler sık dizilir ve her bölüm başlığının altında
 * ince bir çizgi vardır. Yuva o dili sürdürür: ALTTA tek ince çizgi
 * (üstte değil — bu temada çizgi başlığın ALTINDA durur) ve orta boy
 * boşluk. Kenar çubuğu yuvası süzgeç kolonunun dibinde 64px ile ayrılır;
 * gerekçe Blade dosyasında yazılı.
 */
[data-tema='orion'] .reklam {
  --reklam-bosluk: 40px;

  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

[data-tema='orion'] .reklam--kenar-cubugu {
  --reklam-bosluk: 64px;

  border-bottom-width: 0;
  padding-bottom: 0;
}

[data-tema='orion'] .reklam__etiket {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  opacity: 1;
}

[data-tema='orion'] .reklam--bos {
  border-bottom-width: 0;
  padding-bottom: 0;
}

@media (max-width: 1040px) {
  [data-tema='orion'] .reklam--kenar-cubugu {
    --reklam-bosluk: 40px;
  }
}