/* ==========================================================================
   TEMA: ORGANIFRESH — MARKET / ORGANİK GIDA
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/organifresh/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ŞILAN bileşen
   sınıflarının (.container, .btn, .badge, .panel, .field, .pgrid, .cartitem,
   .summary, .datatable, .pagination, .table-scroll, .steps, .acclayout …)
   ORGANIFRESH dilinde yeniden çizimi vardır. O adlar korunuyor çünkü tema
   yalnızca YEDİ görünümü eziyor; sepet, ödeme, hesabım, üyelik, blog, iletişim,
   sözleşme, kampanya, karşılaştırma, koleksiyon, bayi 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: market rafı. KOYU YEŞİL başlık, SARI-YEŞİL duyuru şeridi, KIRMIZI
   fırsat vurgusu, pastel sarı/bej/pembe teklif panelleri ve BEYAZ zemin.
   Yuvarlatma cömerttir (kart 16px, düğme 8px, daire tam yuvarlak): gıda
   rafında yumuşak biçim ürünü öne çıkarır, keskin köşe (eclectik) mobilya
   diliydi.

   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ü, node ile ölçüldü):
     #ffffff üzerine #2f3a33 gövde metni ............... 11,84:1  (AAA)
     #f4f7ef üzerine #2f3a33 gövde metni ............... 10,93:1  (AAA)
     #eaf2ee üzerine #2f3a33 gövde metni (manşet paneli) 10,39:1  (AAA)
     #ffffff üzerine #5b6a5e soluk metin ...............  5,73:1  (AA)
     #f4f7ef üzerine #5b6a5e soluk metin ...............  5,29:1  (AA)
     #eaf2ee üzerine #5b6a5e soluk metin ...............  5,03:1  (AA)
     #ffffff üzerine #123a22 başlık .................... 12,70:1  (AAA)
     #f4f7ef üzerine #123a22 başlık .................... 11,73:1  (AAA)
     #1f6b3a üzerine #ffffff koyu yeşil düğme ..........  6,52:1  (AA)
     #0f3a1f üzerine #ffffff en koyu yeşil başlık şeridi 12,76:1  (AAA)
     #8dc63f üzerine #123a22 AÇIK YEŞİL + koyu metin ...  6,22:1  (AA)
     #d7e94a üzerine #123a22 SARI-YEŞİL şerit ..........  9,46:1  (AAA)
     #d62828 üzerine #ffffff KIRMIZI fırsat bandı ......  5,01:1  (AA)
     #ffffff üzerine #a11414 kırmızı METİN .............  8,00:1  (AAA)
     #f4f7ef üzerine #a11414 kırmızı METİN .............  7,39:1  (AAA)
     #fdf3d3 üzerine #123a22 pastel sarı panel ......... 11,45:1  (AAA)
     #f2ece1 üzerine #123a22 bej panel ................. 10,80:1  (AAA)
     #fbe4ea üzerine #123a22 pembe panel ............... 10,51:1  (AAA)
     #ffffff üzerine #166534 "Stokta var" ..............  7,13:1  (AAA)
     #ffffff üzerine #b32620 "Son N adet" / hata .......  6,53:1  (AA)
     #ffffff üzerine #7d5a00 uyarı metni ...............  6,30:1  (AA)
     #ffffff üzerine #6b7c6f denetim kenarlığı .........  4,43:1  (WCAG 1.4.11)
     #f4f7ef üzerine #6b7c6f denetim kenarlığı .........  4,09:1  (WCAG 1.4.11)

   AÇIK YEŞİL (#8dc63f) BEYAZ METİN TAŞIMAZ — ÖLÇÜLDÜ: 2,04:1, yani AA'nın çok
   altında. Açık yeşil bu dosyada YALNIZCA koyu metinle (#123a22) kullanılır;
   beyaz metin gereken her yerde koyu yeşil (#1f6b3a / #0f3a1f) ya da kırmızı
   (#d62828) devreye girer. Kırmızı METİN olarak basılacaksa ayrı ve koyu bir
   belirteç kullanılır: --accent (#a11414), beyazda 8,00:1.

   FOTOĞRAF ÜSTÜNE BEYAZ METİN — PERDE PLATOLUDUR. Bu temada fotoğrafın üstünde
   açık metin taşıyan TEK yerleşim reyon promo kartıdır (.org-promo).

   BAĞIMSIZ DENETİMDE BULUNAN KUSUR (düzeltildi): perde `.org-promo` kuralının
   KENDİ `background-image`'ıydı, fotoğraf ise `z-index: -1` taşıyan bir alt
   ögeydi. CSS boyama sırasında NEGATİF z-index'li alt öge, atasının ARKA
   PLANININ ÜSTÜNE boyanır — yani fotoğraf perdeyi tamamen örtüyordu ve beyaz
   metin çıplak fotoğrafın üstünde kalıyordu. 1280 px'te gerçek pikselden
   ölçüldü: başlık 1,26:1 · etiket 1,36:1 · alt metin 1,31:1 · düğme 1,75:1.
   ("z-index:-1 fotoğrafı zeminin altına indirir" varsayımı yanlıştı: içeriğin
   altına indirir, atanın arka planının değil.)

   ONARIM: perde artık `.org-promo__foto::after` üzerinde, yani fotoğrafın
   ÜSTÜNDE ve metnin ALTINDA boyanıyor. Alfa hiçbir noktada 0,78'in altına
   düşmüyor; EN KÖTÜ HÂL (saf BEYAZ fotoğraf) hesaplandı: 0,78 platosunda
   beyaz metin 6,49:1, 0,88 platosunda 8,89:1 — ikisi de 4,5 eşiğinin üstünde.
   Kuralın kendi `background-image` bildirimi, fotoğrafı yüklenmemiş kartlar
   ve kaynak okuyan kapı için KORUNDU.

   MANŞET METNİ FOTOĞRAFIN ÜSTÜNDE DEĞİLDİR — BİLEREK: referans vitrinde de
   gıda fotoğrafları panelin KENARLARINA yerleşir, ortadaki yazı alanı düz
   açık yeşil kalır (#eaf2ee). Böylece metnin kontrastı fotoğrafın rengine
   bağlı olmaz.
   ========================================================================== */

:root {
  /* --- Tipografi: TEK AİLE, yuvarlak uçlu ama yüksek x-yükseklikli sans. --- */
  --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: -0.01em;

  /* --- Ham palet --- */
  --org-yesil-900: #0f3a1f;
  --org-yesil-800: #14522b;
  --org-yesil-700: #1f6b3a;
  --org-yesil-600: #2a8049;
  --org-yesil-500: #3d9159;
  --org-acik: #8dc63f;
  --org-acik-koyu: #79ad33;
  --org-limon: #d7e94a;
  --org-limon-koyu: #c4d63a;
  --org-kirmizi: #d62828;
  --org-kirmizi-koyu: #a11414;
  --org-sari: #fdf3d3;
  --org-bej: #f2ece1;
  --org-pembe: #fbe4ea;
  --org-mavi: #e2eff3;
  --org-fistik: #eaf2ee;
  --org-cizgi: #dde5db;
  --org-cizgi-koyu: #c2cfbf;
  --org-yuzey: #f4f7ef;
  --org-murekkep: #123a22;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #1f6b3a;
  --accent: #a11414;
  --title: #123a22;
  --text: #2f3a33;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #dde5db;
  --radius: 10px;
  --card-radius: 16px;
  --btn-radius: 8px;
  --container: 1360px;

  --primary-strong: #0f3a1f;
  --primary-hover: #14522b;
  --primary-focus: #2a8049;
  --primary-line: #b9d5c2;
  --primary-soft: #e6f2ea;
  --on-primary: #ffffff;

  --accent-strong: #7d0e0e;
  --accent-light: #d62828;
  --accent-soft: #fbe8e8;
  --on-accent: #ffffff;

  /*
   | SOLUK METİN GRİ/YEŞİL ZEMİNE KARŞI DA ÖLÇÜLDÜ, YALNIZCA BEYAZA KARŞI DEĞİL.
   |
   | Bu temada soluk metnin çoğu (gramaj satırı, KDV notu, sıralama etiketi,
   | sayfalama, sepet/ödeme yardımcı metinleri) AÇIK YEŞİLİMSİ yüzey (--surface
   | #f4f7ef) ya da manşet paneli (#eaf2ee) üstünde duruyor. Belirteci yalnızca
   | beyaza karşı ölçmek gerçek zemini gizler.
   | #5b6a5e → beyazda 5,73:1 · #f4f7ef üstünde 5,29:1 · #eaf2ee üstünde 5,03:1.
   */
  --muted: #5b6a5e;
  --border-strong: #c2cfbf;
  --surface: #f4f7ef;
  --white: #ffffff;

  /*
   | --line ve --surface-2: `shop-stok-bildirim.css` yaprağının okuduğu iki ad.
   | Yaprak dosya onları `var(--line, #e4e7ec)` biçiminde YEDEKLİ okuyor, yani
   | tanımsız kalsa bildirim düşmez — ama yedek değer SOĞUK GRİdir ve bu temanın
   | yeşilimsi paletinde yabancı durur (stok bildirim kutusu tek başına gri
   | çerçeveli çıkardı). Sözleşme gereği burada tanımlanır ve temanın kendi
   | çizgi/yüzey tonuna bağlanır.
   | KONTRAST: #eef2e8 üzerine #2f3a33 gövde 10,43:1 · #5b6a5e soluk 5,04:1 ·
   | #123a22 başlık 11,19:1 · #6b7c6f denetim kenarlığı 3,91:1.
   */
  --line: #dde5db;
  --surface-2: #eef2e8;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği >= 3:1.
     Panelden AYARLANAMAZ: beyazda 4,43:1, açık yeşilimsi yüzeyde 4,09:1
     ölçüldü. --border yalnızca DEKORATİF çizgidir. */
  --control-border: #6b7c6f;
  --control-border-strong: #4b5a4f;

  --success: #166534;
  --danger: #b32620;
  --warning: #7d5a00;

  --radius-sm: 8px;
  --radius-lg: 20px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 58, 34, 0.08);
  --shadow: 0 6px 20px rgba(18, 58, 34, 0.09);
  --shadow-lg: 0 20px 48px rgba(18, 58, 34, 0.16);
  --card-shadow: 0 0 0 1px rgba(18, 58, 34, 0.06);
  --card-hover-shadow: 0 12px 28px rgba(18, 58, 34, 0.14);

  --btn-height: 48px;
  --btn-tracking: 0.06em;
  --section-space: 56px;
  --ease: cubic-bezier(0.32, 0, 0.24, 1);

  --org-bosluk: 16px;
  --org-kenar: clamp(14px, 3vw, 28px);
  --org-dokunma: 44px;
}

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

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100%;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--heading-tracking);
  color: var(--title);
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  list-style: none;
}

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

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

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

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 3px solid var(--org-yesil-700);
  outline-offset: 2px;
}

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

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

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

.stack > * + * {
  margin-top: 12px;
}

.hint {
  font-weight: 400;
  color: var(--muted);
}

.eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--org-yesil-700);
}

/* ==================== KAP ==================== */

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

/* ==================== DÜĞMELER ====================
   Çekirdek adı `.btn` KULLANILIR (ürün kartı, manşet, bülten, çağrı) ve
   ezilmeyen sayfalar da aynı sözlükten beslenir. Tema kendi değişkelerini
   `--yesil / --limon / --beyaz / --sepet` olarak ekler. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-height);
  min-width: var(--org-dokunma);
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}

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

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn--yesil,
.btn--navy,
.btn--gold {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

.btn--yesil:hover,
.btn--navy:hover,
.btn--gold:hover {
  background: var(--org-yesil-900);
  border-color: var(--org-yesil-900);
}

/* SARI-YEŞİL DOLGU BEYAZ METİN TAŞIMAZ (1,32:1) — koyu mürekkep basılır. */
.btn--limon {
  background: var(--org-limon);
  border-color: var(--org-limon);
  color: var(--org-murekkep);
}

.btn--limon:hover {
  background: var(--org-limon-koyu);
  border-color: var(--org-limon-koyu);
}

.btn--beyaz {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--org-yesil-900);
}

.btn--beyaz:hover {
  background: var(--org-yuzey);
  border-color: var(--org-yuzey);
}

/* ÜRÜN KARTININ TAM GENİŞLİK ÇERÇEVELİ DÜĞMESİ — vurgulu kartta yeşil dolgu
   olur (bkz. .org-kart--vurgulu). */
.btn--sepet {
  background: transparent;
  border-color: var(--control-border);
  color: var(--title);
  font-size: 13.5px;
  letter-spacing: 0.08em;
}

.btn--sepet:hover {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

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

.btn--outline:hover {
  background: var(--surface);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--org-yesil-700);
}

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

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

.btn--lg {
  min-height: 54px;
  padding: 0 30px;
  font-size: 15px;
}

/*
 | .btn--sm GÖRSEL YÜKSEKLİĞİ 36px (masaüstü yoğunluğu) AMA VURUŞ ALANI 44px:
 | negatif inset'li ::before hedefi büyütür. Bu, çekirdek shop.css'teki çözümün
 | aynısıdır ve DuyarlilikTest bu telafiyi ÖLÇEREK tanır (sayı tutmazsa düşer).
 */
.btn--sm {
  position: relative;
  min-height: 36px;
  padding: 0 15px;
  font-size: 12.5px;
}

/*
 | inset DEĞERİ -4px DEĞİL -6px — GERÇEK TARAYICIDA ÖLÇÜLEREK DÜZELTİLDİ.
 | Mutlak konumlu bir çocuğun `inset` değeri KAPSAYICININ PADDING KUTUSUNA
 | görelidir. Bu temada `.btn` 2px kenarlık taşıyor, yani 36px'lik sınır
 | kutusunun padding kutusu 32px. `inset: -4px 0` ile vuruş alanı 32+8 = 40px
 | kalıyordu (elementFromPoint ile ölçüldü: 41px). -6px ile 32+12 = 44px olur.
 | Sabit sayı yerine kenarlığı da hesaba katan bir ölçüm: 36 - 2·2 + 2·6 = 44.
 */
.btn--sm::before {
  content: '';
  position: absolute;
  inset: -6px 0;
}

/* ==========================================================================
   BAŞLIK — ÜÇ KATMAN (SARI-YEŞİL ŞERİT · KOYU YEŞİL · BEYAZ GEZİNME)
   ========================================================================== */

/* --- KATMAN 0: SARI-YEŞİL İNCE ŞERİT --- */
.org-serit {
  background: var(--org-limon);
  color: var(--org-murekkep);
  font-size: 13.5px;
  font-weight: 700;
}

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

.org-serit__sol {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.org-serit__sol strong {
  font-weight: 900;
}

.org-serit__sag {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.org-serit__sag span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- KATMAN 1: KOYU YEŞİL YÜKSEK ŞERİT --- */
.org-tepe {
  background: var(--org-yesil-900);
  color: #ffffff;
}

.org-tepe__ic {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding-block: 12px;
}

/* İKİ RENKLİ KELİME MARKASI */
.org-marka {
  display: inline-flex;
  align-items: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.org-marka:hover {
  text-decoration: none;
}

.org-marka__a {
  color: #ffffff;
}

.org-marka__b {
  color: var(--org-acik);
}

/* KONUM SEÇİCİ — İKİ SATIRLI, AÇILIR */
.org-konum {
  position: relative;
  flex: 0 0 auto;
}

.org-konum > summary,
.org-konum--sade {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: #ffffff;
}

.org-konum > summary:hover,
.org-konum--sade:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
}

.org-konum__ikon {
  font-size: 17px;
  color: var(--org-acik);
}

.org-konum__yazi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.org-konum__etiket {
  font-size: 11.5px;
  color: #d6e6d8;
}

.org-konum__deger {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-konum__ok {
  font-size: 11px;
  color: #d6e6d8;
}

.org-konum[open] .org-konum__ok {
  transform: rotate(180deg);
}

.org-konum__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: max(260px, 100%);
  max-width: min(320px, 92vw);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.org-konum__baslik {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--org-yesil-700);
}

.org-konum__liste a {
  display: flex;
  flex-direction: column;
  min-height: var(--org-dokunma);
  justify-content: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
}

.org-konum__liste a:hover {
  text-decoration: none;
  background: var(--surface);
}

.org-konum__liste strong {
  font-weight: 800;
  color: var(--title);
}

.org-konum__liste span {
  font-size: 13px;
  color: var(--muted);
}

.org-konum__yonet {
  display: flex;
  align-items: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 800;
  color: var(--org-yesil-700);
}

/* ORTADA GENİŞ ARAMA */
.org-arama {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  margin-inline: auto;
  border-radius: var(--pill);
  background: #ffffff;
  overflow: hidden;
}

.org-arama input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--org-dokunma);
  padding: 0 8px 0 20px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

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

.org-arama input:focus {
  outline: 3px solid var(--org-acik);
  outline-offset: -3px;
}

.org-arama button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: 54px;
  border-radius: var(--pill);
  background: var(--org-yesil-700);
  color: #ffffff;
  font-size: 16px;
}

.org-arama button:hover {
  background: var(--org-yesil-600);
}

/* SAĞDAKİ İKİ SATIRLI EYLEM BLOKLARI */
.org-eylemler {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.org-eylem {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 4px 10px;
  border-radius: var(--radius);
  color: #ffffff;
}

.org-eylem:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
}

.org-eylem > i {
  font-size: 19px;
  color: var(--org-acik);
}

.org-eylem__yazi {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.org-eylem__etiket {
  font-size: 11.5px;
  color: #d6e6d8;
}

.org-eylem__deger {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* İMZA: sepet bloğunda TUTAR sarı-yeşil basılır (adet üstte, tutar altta). */
.org-eylem--sepet .org-eylem__deger {
  color: var(--org-limon);
}

.org-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: #ffffff;
  font-size: 19px;
}

/* --- KATMAN 2: BEYAZ İNCE GEZİNME --- */
.org-gezinme {
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.org-gezinme__ic {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  min-height: 52px;
}

.org-katmenu {
  position: relative;
  flex: 0 0 auto;
}

.org-katmenu > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--org-yuzey);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--title);
}

.org-katmenu > summary:hover {
  background: var(--primary-soft);
}

.org-katmenu__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: max(240px, 100%);
  max-width: min(300px, 92vw);
  max-height: min(70vh, 520px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

.org-katmenu__panel a {
  display: flex;
  align-items: center;
  min-height: var(--org-dokunma);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 700;
}

.org-katmenu__panel a:hover {
  text-decoration: none;
  background: var(--surface);
  color: var(--org-yesil-700);
}

.org-katmenu__alt {
  padding-left: 24px !important;
  font-weight: 400 !important;
  color: var(--muted);
}

.org-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.org-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.org-menu a:hover {
  text-decoration: none;
  background: var(--surface);
  color: var(--org-yesil-700);
}

/* SAĞDA KIRMIZI FIRSAT BAĞLANTILARI
   İÇİNDE SARMALANIR (`flex-wrap`) — ÖLÇÜLEREK EKLENDİ: iki bağlantı
   `white-space: nowrap` taşıdığı için 320px'lik ekranda tek satırda 280px
   istiyordu ve hamburgerle birlikte belgeyi 10px yatay kaydırıyordu
   (gerçek tarayıcıda ölçüldü: belge 315px / görünüm 305px). */
.org-firsat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 14px;
  flex: 0 1 auto;
  min-width: 0;
}

.org-firsat a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 8px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--accent);
}

.org-firsat i {
  color: var(--org-kirmizi);
}

/* --- MOBİL MENÜ (js/shop.js `data-toggle-menu` ile açılır) --- */
.org-mobmenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-block: 10px;
}

.org-mobmenu.is-open {
  display: flex;
}

.org-mobmenu > a,
.org-mobmenu summary,
.org-mobmenu details a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--org-dokunma);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  font-weight: 700;
}

.org-mobmenu > a:hover,
.org-mobmenu summary:hover,
.org-mobmenu details a:hover {
  text-decoration: none;
  background: var(--surface);
}

.org-mobmenu details a {
  padding-left: 26px;
  font-weight: 400;
  color: var(--muted);
}

.org-arama--mob {
  margin: 6px 0 10px;
  border: 2px solid var(--control-border);
}

.org-arama--mob input {
  color: var(--text);
}

/* ==========================================================================
   BÖLÜM BAŞLIKLARI
   ========================================================================== */

.org-bolum {
  padding-block: clamp(28px, 4vw, 48px);
}

.org-bolum__orta {
  margin-bottom: 20px;
  text-align: center;
}

.org-bolum__orta h2 {
  font-size: clamp(22px, 3vw, 32px);
}

.org-bolum__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 18px;
}

.org-bolum__bas h2 {
  font-size: clamp(20px, 2.6vw, 28px);
}

.org-bolum__alt {
  margin-top: 6px;
  font-size: 15px;
  color: var(--muted);
}

.org-bolum__bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 12px;
  border-bottom: 2px solid var(--org-yesil-700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--org-yesil-700);
}

/* ==========================================================================
   1) YANDAN TAŞAN MANŞET — KOMŞU SLAYTLARIN KENARI GÖRÜNÜR
   --------------------------------------------------------------------------
   Ray `overflow: hidden` DEĞİL, `clip-path` de değil: slaytlar tam genişlikte
   akar, aktif olan ortada durur ve komşuları kenardan taşar. Taşma GÖVDEDE
   `overflow-x: hidden` ile kesilir — yani yatay kaydırma çıkmaz.
   ========================================================================== */

.org-manset {
  position: relative;
  padding-block: clamp(18px, 3vw, 34px);
  background: var(--card-bg);
  overflow: hidden;
}

.org-manset__ray {
  position: relative;
  width: 100%;
  max-width: calc(var(--container) - 2 * var(--org-kenar));
  margin-inline: auto;
}

.org-manset__slayt {
  position: relative;
  display: none;
  min-height: clamp(300px, 38vw, 440px);
  padding: clamp(28px, 5vw, 64px) clamp(18px, 6vw, 96px);
  border-radius: var(--radius-lg);
  /* Metin DÜZ AÇIK YEŞİL panelin üstünde durur, fotoğrafın üstünde değil. */
  background: var(--org-fistik);
  text-align: center;
  overflow: hidden;
}

.org-manset__slayt.is-active {
  display: block;
}

/* KOMŞU SLAYT KENARLARI: sol ve sağda duran iki süs sütunu. Ekran okuyucudan
   gizli, işlevi yok — referans vitrindeki "yandan taşan" imzayı verir. */
.org-manset::before,
.org-manset::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  width: clamp(28px, 8vw, 150px);
  border-radius: var(--radius-lg);
  background: var(--org-yuzey);
  pointer-events: none;
}

.org-manset::before {
  left: 0;
  background-image: linear-gradient(to right, var(--org-pembe), var(--org-sari));
}

.org-manset::after {
  right: 0;
  background-image: linear-gradient(to left, var(--org-mavi), var(--org-fistik));
}

.org-manset__ic {
  position: relative;
  z-index: 3;
  max-width: 620px;
  margin-inline: auto;
}

.org-manset__etiket {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--org-yesil-700);
}

.org-manset__baslik {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--org-yesil-800);
}

.org-manset__alt {
  margin: 12px 0 22px;
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  color: var(--muted);
}

/* Manşetin köşelerine yerleşen gıda fotoğrafları — SÜS, aria-hidden. */
.org-manset__foto {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(84px, 15vw, 190px);
  pointer-events: none;
}

.org-manset__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--pill);
  object-fit: cover;
}

.org-manset__foto--1 {
  top: -10px;
  left: -18px;
}

.org-manset__foto--2 {
  top: -22px;
  right: -14px;
}

.org-manset__foto--3 {
  bottom: -26px;
  left: 4%;
}

.org-manset__foto--4 {
  bottom: -18px;
  right: 2%;
}

/* --- Manşet denetimi: ok + çizgi göstergesi --- */
.org-manset__denetim {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.org-manset__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  color: var(--title);
  font-size: 14px;
}

.org-manset__ok:hover {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

.org-manset__noktalar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ÇİZGİ GÖSTERGESİ: görsel olarak 4px yüksekliğinde ince bir çizgi, ama
   vuruş alanı 44x44 (düğmenin kendisi büyük, çizgi ::before ile çizilir). */
.org-manset__nokta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
}

.org-manset__nokta::before {
  content: '';
  display: block;
  width: 16px;
  height: 4px;
  border-radius: var(--pill);
  background: var(--org-cizgi-koyu);
  transition: background-color 0.16s var(--ease), width 0.16s var(--ease);
}

.org-manset__nokta[aria-current='true']::before {
  width: 30px;
  background: var(--org-yesil-700);
}

/* ==========================================================================
   2) SEKME ŞERİDİ (GERÇEK BAĞLANTILAR)
   ========================================================================== */

.org-sekmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin-bottom: 22px;
}

.org-sekmeler a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
}

.org-sekmeler a:hover {
  text-decoration: none;
  color: var(--org-yesil-700);
}

.org-sekmeler a.is-active {
  border-bottom-color: var(--org-yesil-700);
  color: var(--title);
  font-weight: 800;
}

/* ==========================================================================
   3) ÜRÜN IZGARASI VE KARTI
   ========================================================================== */

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

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

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

.org-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  text-align: center;
  overflow: hidden;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

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

/* VURGULU KART: en yüksek indirimli ürün — çerçevesi yeşil, düğmesi dolu. */
.org-kart--vurgulu {
  border-color: var(--org-yesil-700);
  box-shadow: 0 0 0 1px var(--org-yesil-700);
}

.org-kart--vurgulu .btn--sepet {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

.org-kart__favform {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
}

.org-kart__fav {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--org-yesil-800);
  font-size: 16px;
}

.org-kart__favform .org-kart__fav {
  position: static;
}

.org-kart__fav:hover {
  background: var(--org-yuzey);
  color: var(--accent);
}

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

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

.org-kart__bos {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--org-cizgi-koyu);
  font-size: 34px;
}

.org-kart__rozet {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--org-kirmizi);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.org-kart__tukendi {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: var(--pill);
  background: var(--org-yesil-900);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.org-kart__govde {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 14px 12px;
}

/*
 | ÜRÜN ADI TEK BAŞINA DURAN BİR DENETİMDİR (bir cümlenin içinde akmaz), bu
 | yüzden WCAG 2.5.5'in "satır içi bağlantı" istisnası UYGULANMAZ. Gerçek
 | tarayıcıda elementFromPoint ile ölçüldü: tek satırlık bir ad ("Bisiklet
 | Kaskı") 96x20, iki satırlık ad 117x41 vuruş alanı veriyordu. min-height
 | 44px, ada ikinci satır eklemeden hedefi büyütür.
 */
.org-kart__ad {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--title);
}

.org-kart__gramaj {
  font-size: 13px;
  color: var(--muted);
}

.org-kart__puan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.org-kart__yildiz {
  color: var(--warning);
  font-size: 12px;
}

.org-kart__fiyat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.org-kart__fiyat strong {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
}

.org-kart__fiyat del {
  font-size: 13.5px;
  color: var(--muted);
}

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

/* ==========================================================================
   4) YAŞAM TARZINA GÖRE — DÖRT PASTEL DAİRE
   ========================================================================== */

/*
 | SABİT DÖRT KOLON DEĞİL, ORTALANMIŞ ESNEK SATIR — ÖLÇÜLEREK DEĞİŞTİRİLDİ.
 |
 | Bu bölüm GERÇEK koleksiyon kayıtlarından besleniyor ve mağazada bir tane
 | koleksiyon olabilir. Sabit `repeat(4, 1fr)` ızgarada tek öge en soldaki
 | hücreye oturuyor, sağında üç boş hücrelik bir çöl kalıyordu (gerçek
 | tarayıcıda görüldü). Esnek satır 1, 2, 3 ve 4 ögede de dengeli durur;
 | referanstaki dört daire düzeni dolu mağazada aynen çıkar.
 */
.org-yasam__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.org-yasam__liste > li {
  flex: 1 1 190px;
  max-width: 300px;
}

.org-yasam__oge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: var(--org-dokunma);
  padding: 8px;
  text-align: center;
}

.org-yasam__oge:hover {
  text-decoration: none;
}

.org-yasam__daire {
  display: grid;
  place-items: center;
  width: clamp(78px, 9vw, 108px);
  height: clamp(78px, 9vw, 108px);
  border-radius: var(--pill);
  color: var(--org-murekkep);
  font-size: clamp(26px, 3vw, 34px);
}

.org-yasam__daire--a {
  background: var(--org-fistik);
}

.org-yasam__daire--b {
  background: var(--org-sari);
}

.org-yasam__daire--c {
  background: var(--org-mavi);
}

.org-yasam__daire--d {
  background: var(--org-pembe);
}

.org-yasam__ad {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--title);
}

.org-yasam__alt {
  font-size: 13.5px;
  color: var(--muted);
}

/* ==========================================================================
   5) ÖZEL TEKLİFLER — ÜÇ RENKLİ PANEL
   ========================================================================== */

/*
 | AUTO-FIT — ÖLÇÜLEREK DEĞİŞTİRİLDİ: paneller GERÇEK kampanya sayfalarından
 | geliyor ve mağazada iki tane olabilir. Sabit üç kolonda iki panel basılınca
 | sağda bir panel boyu boşluk kalıyordu. Taban `min(280px, 100%)` ile sarılı:
 | 320px'lik ekranın kullanılabilir alanından (280px) büyük bir taban sayfayı
 | yatay kaydırırdı (bu depoda ölçülmüş bir hata).
 */
.org-teklifler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}

.org-teklif {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 190px;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.org-teklif:hover {
  text-decoration: none;
}

.org-teklif--sari {
  background: var(--org-sari);
}

.org-teklif--bej {
  background: var(--org-bej);
}

.org-teklif--pembe {
  background: var(--org-pembe);
}

.org-teklif__yazi {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 62%;
  padding: 20px;
  color: var(--org-murekkep);
}

.org-teklif__etiket {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.org-teklif__baslik {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 900;
  line-height: 1.16;
}

.org-teklif__alt {
  font-size: 14px;
}

.org-teklif__dugme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: underline;
}

/* Fotoğraf panelin SAĞ KENARINDA durur; metin fotoğrafın üstünde DEĞİLDİR. */
.org-teklif__foto {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
}

.org-teklif__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to right, transparent 0%, #000000 42%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 42%);
}

/* ==========================================================================
   6) KATEGORİYE GÖRE — DOKUZ YUVARLAK (YATAY KAYAR)
   ========================================================================== */

.org-daireler {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.org-daireler > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.org-daire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(104px, 11vw, 136px);
  min-height: var(--org-dokunma);
  padding: 6px;
  text-align: center;
}

.org-daire:hover {
  text-decoration: none;
}

.org-daire__gorsel {
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 116px);
  height: clamp(84px, 9vw, 116px);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  overflow: hidden;
}

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

.org-daire__harf {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  color: var(--org-yesil-700);
}

.org-daire__ad {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--title);
}

/* KAYDIRMA NOKTALARI — tema JS'i EKLER. JavaScript kapalıyken çalışmayan bir
   denetim basmamak için HTML'de yoktur; şerit dokunmayla ve klavyeyle
   (odaklanabilir kap + ok tuşları) zaten kaydırılır. */
.org-kayar-nokta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.org-kayar-nokta button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
}

.org-kayar-nokta button::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: var(--org-cizgi-koyu);
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease);
}

.org-kayar-nokta button[aria-current='true']::before {
  background: var(--org-yesil-700);
  transform: scale(1.35);
}

/* ==========================================================================
   7) KIRMIZI TAM GENİŞLİK BANT + KAYAN FIRSAT ŞERİDİ
   ========================================================================== */

.org-bant {
  background: var(--org-kirmizi);
  color: #ffffff;
}

.org-bant__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-block: clamp(24px, 3.4vw, 40px);
}

.org-bant h2 {
  font-size: clamp(21px, 2.8vw, 30px);
  color: #ffffff;
}

.org-bant p {
  margin-top: 6px;
  font-size: 15px;
  color: #ffffff;
}

.org-serit-kayan {
  padding-block: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--org-kirmizi-koyu);
  overflow: hidden;
}

.org-serit-kayan__ray {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: org-kay 34s linear infinite;
}

.org-serit-kayan:hover .org-serit-kayan__ray,
.org-serit-kayan:focus-within .org-serit-kayan__ray,
.org-serit-kayan.is-durgun .org-serit-kayan__ray {
  animation-play-state: paused;
}

/* Tema JS'i hareket azaltma tercihinde bu sınıfı ekler; CSS de aynı sorguyla
   animasyonu durdurur. İki katman birbirini yedekler. */
.org-serit-kayan.is-durgun .org-serit-kayan__ray {
  transform: none;
}

.org-serit-kayan span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #ffffff;
}

@keyframes org-kay {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================================================
   8-9) BİRLEŞİK SATIR — SOL DİKEY PROMO KART + SAĞDA ÜRÜN IZGARASI
   ========================================================================== */

.org-birlesik__satir {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/*
 | FOTOĞRAF ÜSTÜNDE BEYAZ METİN — PLATOLU PERDE, KURALIN KENDİSİNDE.
 |
 | Perde `background-image` olarak BU kurala yazılır (ayrı bir ::after'a değil):
 | böylece "beyaz metin + perde" aynı bildirim bloğunda durur ve kaynak CSS'i
 | okuyan kapı (TemaAyrismaKapisiTest) perdeyi GERÇEKTEN ölçebilir. Fotoğraf
 | `z-index: -1` ile bu kutunun ZEMİNİNİN ALTINA iner; `isolation: isolate`
 | kendi yığma bağlamını kurduğu için negatif indis üst kaba sızmaz.
 |
 | ALFA DURAKLARI: 0,90 → 0,82 → 0,35. Metnin bulunduğu alt/orta bölgede perde
 | PLATOYA oturur ve 0,82'nin ALTINA DÜŞMEZ. EN KÖTÜ HÂL (saf beyaz gıda
 | fotoğrafı) hesaplandı: 0,90 platosunda beyaz metin 9,43:1, 0,82'de 8,31:1.
 | Tepede sıfıra inen platosuz bir gradyan kardeş temada 1,08:1 ölçülmüş bir
 | kusurdu.
 */
.org-promo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 320px;
  padding: 22px;
  border-radius: var(--card-radius);
  color: #ffffff;
  background-image: linear-gradient(to top, rgba(15, 58, 31, 0.88) 0%, rgba(15, 58, 31, 0.78) 50%, rgba(15, 58, 31, 0.88) 100%);
  overflow: hidden;
}

.org-promo:hover {
  text-decoration: none;
}

/* `background-color` KULLANILIR, `background` KISAYOLU DEĞİL: kısayol
   yukarıdaki perde gradyanını sıfırlar ve fotoğraf perdesiz kalırdı. */
.org-promo--yesil {
  background-color: var(--org-yesil-800);
}

.org-promo--limon {
  background-color: var(--org-yesil-700);
}

.org-promo__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
}

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

/* PERDE — FOTOĞRAFIN ÜSTÜNDE, METNİN ALTINDA.
   `.org-promo` kuralındaki `background-image` tek başına İŞE YARAMIYORDU:
   `.org-promo__foto` negatif z-index taşıdığı için atasının arka planının
   üstüne boyanıyor ve perdeyi örtüyordu (gerçek pikselden 1,26:1 ölçüldü).
   Perde burada, `__foto`nun KENDİ yığma bağlamında `img`den sonra boyanır;
   `__foto` bir bütün olarak z-index -1'de kaldığı için metnin altında kalır.
   Alfa hiçbir noktada 0,78'in altına inmez: saf beyaz fotoğrafta bile beyaz
   metin en kötü 6,49:1 verir. */
.org-promo__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(15, 58, 31, 0.88) 0%,
    rgba(15, 58, 31, 0.78) 50%,
    rgba(15, 58, 31, 0.88) 100%
  );
}

.org-promo__etiket,
.org-promo__baslik,
.org-promo__alt,
.org-promo__dugme {
  position: relative;
  color: #ffffff;
}

.org-promo__etiket {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ffffff;
}

.org-promo__baslik {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.16;
}

.org-promo__alt {
  font-size: 14.5px;
}

.org-promo__dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: underline;
}

/* ==========================================================================
   10) SICAK FIRSATLAR — ÜÇ PASTEL PANEL
   ========================================================================== */

/* Aynı gerekçe: pastel fırsat panelleri gerçek kategori sayısına göre 1-3 arası
   olabilir; sabit üç kolonda eksik panel boşluk bırakırdı. */
.org-sicaklar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}

.org-sicak {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 172px;
  padding: 20px;
  border-radius: var(--card-radius);
  color: var(--org-murekkep);
  overflow: hidden;
}

.org-sicak:hover {
  text-decoration: none;
}

.org-sicak--mavi {
  background: var(--org-mavi);
}

.org-sicak--yesil {
  background: var(--org-fistik);
}

.org-sicak--pembe {
  background: var(--org-pembe);
}

.org-sicak__etiket {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.org-sicak__ad {
  position: relative;
  z-index: 2;
  max-width: 62%;
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 900;
  line-height: 1.16;
}

.org-sicak__dugme {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: underline;
}

.org-sicak__foto {
  position: absolute;
  z-index: 1;
  right: -6%;
  bottom: -8%;
  width: 48%;
}

.org-sicak__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--pill);
  object-fit: cover;
}

/* ==========================================================================
   11) ORTALANMIŞ ÇAĞRI
   ========================================================================== */

.org-cagri {
  margin-block: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--org-yuzey);
  text-align: center;
}

.org-cagri h2 {
  max-width: 720px;
  margin-inline: auto;
  font-size: clamp(21px, 3vw, 31px);
}

.org-cagri p {
  max-width: 620px;
  margin: 12px auto 22px;
  font-size: 15.5px;
  color: var(--muted);
}

/* ==========================================================================
   12) NOKTALI SATIN ALINABİLİR FOTOĞRAF
   --------------------------------------------------------------------------
   JS'siz çalışır: her nokta ürün sayfasına giden gerçek bir bağlantıdır ve
   kartı :hover / :focus-within ile açar.
   ========================================================================== */

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

.org-sofra__cerceve {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.org-sofra__cerceve > img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.org-nokta {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
}

.org-nokta:hover {
  text-decoration: none;
}

.org-nokta--1 {
  top: 22%;
  left: 18%;
}

.org-nokta--2 {
  top: 58%;
  left: 36%;
}

.org-nokta--3 {
  top: 30%;
  left: 62%;
}

.org-nokta--4 {
  top: 66%;
  left: 80%;
}

.org-nokta__isaret {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: #ffffff;
  color: var(--org-yesil-800);
  font-size: 14px;
  box-shadow: var(--shadow);
}

.org-nokta__kart {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 6px);
  left: 50%;
  display: none;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(230px, 60vw);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.org-nokta--acik .org-nokta__kart,
.org-nokta:hover .org-nokta__kart,
.org-nokta:focus-visible .org-nokta__kart,
.org-nokta.is-acik .org-nokta__kart {
  display: flex;
}

.org-nokta__ad {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--title);
}

.org-nokta__fiyat {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
}

/* ==========================================================================
   13) HAFTANIN FIRSATI — BÜYÜK KART + KÜÇÜK ÜRÜN SATIRLARI
   ========================================================================== */

.org-hafta {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.org-hafta__sayac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 14px;
  color: var(--accent);
}

.org-hafta__sayac strong {
  font-weight: 900;
}

.org-satirlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.org-satir {
  display: grid;
  grid-template-columns: minmax(0, 76px) minmax(0, 1fr) minmax(0, auto);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.org-satir__foto {
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

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

.org-satir__bos {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  color: var(--org-cizgi-koyu);
  font-size: 22px;
}

.org-satir__yazi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Tek başına duran denetim — gerçek tarayıcıda 126x19 vuruş alanı ölçüldü. */
.org-satir__ad {
  display: flex;
  align-items: center;
  min-height: var(--org-dokunma);
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.32;
  color: var(--title);
}

.org-satir__fiyat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.org-satir__fiyat strong {
  font-size: 15.5px;
  font-weight: 900;
  color: var(--accent);
}

.org-satir__fiyat del {
  font-size: 13px;
  color: var(--muted);
}

.org-satir__ekle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  border: 2px solid var(--control-border);
  border-radius: var(--pill);
  color: var(--title);
  font-size: 15px;
}

.org-satir__ekle:hover {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

/* ==========================================================================
   14) MÜŞTERİ YORUMLARI
   ========================================================================== */

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

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

.org-yorum {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.org-yorum__yildiz {
  color: var(--warning);
  font-size: 14px;
}

.org-yorum__soz {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.66;
}

.org-yorum__kisi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.org-yorum__kisi span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Yorumun bağlı olduğu ürün — tek başına duran denetim, satır içi akış DEĞİL
   (gerçek tarayıcıda 143x21 vuruş alanı ölçüldü). */
.org-yorum__kisi a {
  display: inline-flex;
  align-items: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  font-size: 13px;
  color: var(--org-yesil-700);
  text-decoration: underline;
}

.org-yorum__harf {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--pill);
  background: var(--primary-soft);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 900;
  color: var(--org-yesil-700);
}

/* ==========================================================================
   15) MARKA LOGO ŞERİDİ
   ========================================================================== */

.org-logolar__liste {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.org-logolar__liste > li {
  flex: 0 0 auto;
}

.org-logolar__liste a {
  display: grid;
  place-items: center;
  min-height: 76px;
  min-width: 148px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.org-logolar__liste img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   16) SON YAZILAR — 1 BÜYÜK + 3 KÜÇÜK
   ========================================================================== */

.org-yazilar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.org-yazi--buyuk {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.org-yazi__foto {
  display: block;
  border-radius: var(--card-radius);
  background: var(--surface);
  overflow: hidden;
}

.org-yazi__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
}

.org-yazi__harf {
  display: grid;
  place-items: center;
  aspect-ratio: 12 / 7;
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 900;
  color: var(--org-cizgi-koyu);
}

.org-yazi__govde time {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.org-yazi__govde h3 {
  margin: 6px 0 8px;
  font-size: clamp(18px, 2vw, 23px);
}

/* Yazı başlığı bağlantısı — tek başına duran denetim (ölçüldü: 292x24). */
.org-yazi__govde h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
}

.org-yazi__govde p {
  font-size: 15px;
  color: var(--muted);
}

.org-yazilar__kucuk {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.org-yazi__kucuk {
  display: grid;
  grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: var(--org-dokunma);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.org-yazi__kucuk:hover {
  text-decoration: none;
  border-color: var(--org-cizgi-koyu);
}

.org-yazi__kfoto {
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.org-yazi__kfoto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.org-yazi__kfoto .org-yazi__harf {
  aspect-ratio: 4 / 3;
  font-size: 22px;
}

.org-yazi__kyazi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.org-yazi__tarih {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.org-yazi__kbaslik {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.34;
  color: var(--title);
}

/* ==========================================================================
   17) YEŞİL GÜVEN ŞERİDİ (ALT BİLGİNİN ÜSTÜNDE, HER SAYFADA)
   ========================================================================== */

.org-guven {
  background: var(--org-yesil-700);
  color: #ffffff;
}

.org-guven__ic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-block: 24px;
}

.org-guven__oge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.org-guven__oge > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 24px;
  color: var(--org-limon);
}

.org-guven__oge > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.org-guven__oge strong {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
}

.org-guven__oge span span,
.org-guven__oge > span > span {
  font-size: 13.5px;
  color: #dcecdf;
}

/* ==========================================================================
   18) ALT BİLGİ — BÜLTEN + DÖRT KOLON + ÖDEME
   ========================================================================== */

.org-alt {
  background: var(--org-yesil-900);
  color: #e6efe7;
}

.org-bulten {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--org-yesil-800);
}

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

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

.org-bulten__alt {
  margin-top: 6px;
  font-size: 14.5px;
  color: #cfe2d3;
}

.org-bulten__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.org-bulten__form input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: var(--org-dokunma);
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background: #ffffff;
  color: var(--text);
  font-size: 16px;
}

.org-bulten__durum {
  flex: 1 1 100%;
  min-height: 20px;
  font-size: 14px;
  color: var(--org-limon);
}

/*
 | BÜLTEN MODÜLÜNÜN BANDI TEMANIN DİLİNDE.
 |
 | `shop.partials.bulten` kendi stil dosyasını (`shop-stok-bildirim.css`)
 | GÖVDEDEN yüklüyor, yani o dosya bu temadan SONRA geliyor. Eşit özgüllükte
 | sonra gelen kazanır; bu yüzden kurallar `.org-alt` ile SARILIR (özgüllük
 | 0,2,0 > 0,1,0) ve yükleme sırasından bağımsız olarak bu tema kazanır.
 | Ayrı bir görünüm YAZILMAZ: modülün çift opt-in akışı korunur, yalnızca
 | görünüş temanın yeşil bandına çevrilir.
 */
.org-alt .bulten {
  padding-block: 26px;
  border-top: 0;
  background: var(--org-yesil-800);
}

.org-alt .bulten__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 32px;
  align-items: center;
  max-width: var(--container);
  padding-inline: max(var(--org-kenar), env(safe-area-inset-left, 0px)) max(var(--org-kenar), env(safe-area-inset-right, 0px));
}

.org-alt .bulten__baslik {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  color: #ffffff;
}

.org-alt .bulten__aciklama {
  max-width: none;
  margin-top: 6px;
  font-size: 14.5px;
  color: #cfe2d3;
}

.org-alt .bulten__aciklama strong {
  color: var(--org-limon);
}

.org-alt .bulten__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Yaprak dosyadaki `min-width: 240px` sabittir; 320px'lik ekranda taşmayı
   ancak `min-width: 0` ile serbest bırakmak engeller. */
.org-alt .bulten__form input[type='email'] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: var(--org-dokunma);
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background: #ffffff;
  color: var(--text);
  font-size: 16px;
}

/* Modülün düğmesi çekirdek adıyla (`btn--gold`) geliyor ve o ad bu temada KOYU
   YEŞİL dolgu demek; koyu yeşil bandın üstünde düğme zeminden ayrışmıyordu
   (gerçek tarayıcıda görüldü). Bantta düğme SARI-YEŞİL olur: #d7e94a üzerine
   #123a22 metin 9,46:1 ve kenar bandı net keser. */
.org-alt .bulten__form .btn {
  background: var(--org-limon);
  border-color: var(--org-limon);
  color: var(--org-murekkep);
}

.org-alt .bulten__form .btn:hover {
  background: var(--org-limon-koyu);
  border-color: var(--org-limon-koyu);
}

.org-alt .bulten__hata {
  max-width: var(--container);
  padding-inline: max(var(--org-kenar), env(safe-area-inset-left, 0px)) max(var(--org-kenar), env(safe-area-inset-right, 0px));
  color: var(--org-limon);
}

.org-alt__kolonlar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-block: 34px;
}

.org-alt__marka {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
}

.org-alt__slogan {
  margin: 6px 0 14px;
  font-size: 14.5px;
  color: #cfe2d3;
}

.org-alt__iletisim {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 14.5px;
}

.org-alt__iletisim i {
  margin-top: 4px;
  color: var(--org-acik);
}

.org-alt__baslik {
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

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

.org-alt__liste a:hover {
  color: var(--org-limon);
}

.org-alt__son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
}

.org-alt__son strong {
  color: var(--org-acik);
}

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

.org-odeme li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--pill);
  font-size: 13px;
}

/* ==========================================================================
   LİSTE SAYFASI — SÜZGEÇ ÜSTTE YATAY ÇEKMECE, YAN KOLON YOK
   ========================================================================== */

.org-yol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding-block: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

.org-yol a,
.org-yol > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding-inline: 4px;
}

.org-yol a:hover {
  color: var(--org-yesil-700);
}

.org-yol [aria-current='page'] {
  font-weight: 800;
  color: var(--title);
}

.org-liste-bas {
  padding-block: clamp(18px, 3vw, 30px);
  background: var(--surface);
}

.org-liste-bas__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.org-liste-bas__etiket {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--org-yesil-700);
}

.org-liste-bas h1 {
  margin-top: 4px;
  font-size: clamp(24px, 3.4vw, 36px);
}

.org-liste-bas__alt {
  max-width: 680px;
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

.org-liste-bas__sayi {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 15px;
  color: var(--muted);
}

.org-liste-bas__sayi strong {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  color: var(--title);
}

/* YATAY ÇEKMECE: <details> tek satırda açılır, yan kolon YOKTUR. */
.org-suzgec {
  margin-block: 18px;
}

.org-suzgec__cekmece {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  overflow: hidden;
}

.org-suzgec__cekmece > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 16px;
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--title);
}

.org-suzgec__cekmece > summary i:last-child {
  margin-left: auto;
  font-size: 12px;
}

.org-suzgec__cekmece[open] > summary i:last-child {
  transform: rotate(180deg);
}

.org-suzgec__satir {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 16px;
}

.org-suzgec__baslik {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--org-yesil-700);
}

.org-suzgec__liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 208px;
  overflow-y: auto;
}

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

.org-suzgec__liste a:hover,
.org-suzgec__liste a.is-active {
  text-decoration: none;
  background: var(--surface);
  color: var(--org-yesil-700);
  font-weight: 800;
}

.org-suzgec__alt {
  padding-left: 20px;
  color: var(--muted);
}

.org-onay {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--org-dokunma);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  cursor: pointer;
}

.org-onay:hover {
  background: var(--surface);
}

.org-onay input {
  width: 20px;
  height: 20px;
  accent-color: var(--org-yesil-700);
}

.org-suzgec__ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.org-alan {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.org-alan label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.org-alan input,
.org-alan select,
.org-alan textarea {
  width: 100%;
  min-height: var(--org-dokunma);
  padding: 10px 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  font-size: 16px;
}

.org-alan input:focus,
.org-alan select:focus,
.org-alan textarea:focus {
  outline: 3px solid var(--org-yesil-700);
  outline-offset: 1px;
}

.org-alan__ipucu {
  font-weight: 400;
  color: var(--muted);
}

.org-suzgec__eylem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.org-sonuc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border-radius: var(--card-radius);
  background: var(--surface);
  font-size: 14.5px;
}

.org-sonuc__sayi strong {
  font-weight: 900;
  color: var(--title);
}

.org-sirala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  /* min-width:0 + max-width:100% ZORUNLU — ÖLÇÜLEREK EKLENDİ: <select>'in
     ÖZGÜN en küçük genişliği en uzun seçenek metnine ("Fiyat: yüksekten
     düşüğe") bağlıdır ve 320px'lik ekranda belgeyi 8px yatay kaydırıyordu
     (gerçek tarayıcıda ölçüldü: belge 313px / görünüm 305px). */
  min-width: 0;
  max-width: 100%;
}

.org-sirala label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.org-sirala select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: var(--org-dokunma);
  padding: 0 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  font-size: 16px;
}

.org-bos {
  padding: 48px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.org-bos > i {
  font-size: 34px;
  color: var(--org-cizgi-koyu);
}

.org-bos h2 {
  margin: 12px 0 8px;
  font-size: 22px;
}

.org-bos p {
  margin-bottom: 18px;
  color: var(--muted);
}

/* ==========================================================================
   ÜRÜN SAYFASI — ÜSTTE TAM GENİŞLİK YATAY GALERİ, ALTINDA İKİ KOLON
   ========================================================================== */

.org-galeri {
  padding-block: 12px 22px;
  background: var(--surface);
}

/* ÜÇ GÖRSEL YAN YANA, YATAY KAYAR. Tek görselli üründe de aynı ray kullanılır
   (kart genişliği esner), böylece ikinci bir yerleşim yazılmaz. */
.org-galeri__ray {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.org-galeri__foto {
  flex: 0 0 calc((100% - 24px) / 3);
  min-width: 0;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  scroll-snap-align: start;
  overflow: hidden;
}

.org-galeri__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.org-galeri__bos {
  display: grid;
  place-items: center;
  flex: 1 1 100%;
  min-height: 220px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--card-radius);
  color: var(--muted);
  font-size: 15px;
}

.org-urun__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 26px;
  align-items: start;
  padding-block: clamp(22px, 3vw, 38px);
}

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

.org-urun__ad {
  font-size: clamp(24px, 3.4vw, 36px);
}

.org-urun__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.org-urun__yildiz {
  color: var(--warning);
}

.org-urun__ozet {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.72;
}

.org-urun__metin {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.74;
}

.org-urun__metin h2 {
  margin: 22px 0 8px;
  font-size: 21px;
}

.org-urun__metin h3 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.org-urun__metin p {
  margin-bottom: 12px;
}

.org-urun__metin ul,
.org-urun__metin ol {
  margin: 0 0 14px 22px;
  list-style: disc;
}

.org-urun__metin ol {
  list-style: decimal;
}

.org-urun__baslik {
  margin-bottom: 12px;
  font-size: clamp(19px, 2.2vw, 24px);
}

/* --- SAĞ: SATIN ALMA KUTUSU (YAPIŞKAN) --- */
.org-satin {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--org-yesil-700);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

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

.org-satin__fiyat strong {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  color: var(--accent);
}

.org-satin__fiyat del {
  font-size: 16px;
  color: var(--muted);
}

.org-satin__rozet {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--org-kirmizi);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
}

.org-satin__kdv {
  flex: 1 1 100%;
  font-size: 13.5px;
  color: var(--muted);
}

.org-satin__stok {
  font-size: 14.5px;
  font-weight: 700;
}

.org-satin__satir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.org-satin__satir .btn {
  flex: 1 1 160px;
}

.org-adet {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--control-border);
  border-radius: var(--btn-radius);
  overflow: hidden;
}

.org-adet button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  background: var(--surface);
  color: var(--title);
  font-size: 14px;
}

.org-adet button:hover {
  background: var(--primary-soft);
}

.org-adet button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

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

.org-secenek {
  border: 0;
}

.org-secenek legend {
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--title);
}

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

.org-secenek__deger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 13px;
  border: 2px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  font-size: 14.5px;
  cursor: pointer;
}

.org-kutucuk {
  width: 18px;
  height: 18px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
}

.org-satin__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* Teslimat randevusu notu — çekirdek teslimat modülünün gerçek verisine
   bağlanır; modül kapalıyken görünüm bu bloğu HİÇ basmaz. */
.org-randevu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  font-size: 14px;
}

.org-randevu i {
  margin-top: 3px;
  color: var(--org-yesil-700);
}

.org-sozler {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.org-sozler li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}

.org-sozler i {
  color: var(--org-yesil-700);
}

/* --- BESİN DEĞERLERİ TABLOSU --- */
.org-besin {
  padding-block: clamp(24px, 3.4vw, 42px);
  background: var(--surface);
}

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

.org-besin table {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-size: 14.5px;
  overflow: hidden;
}

.org-besin th,
.org-besin td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.org-besin th {
  width: 46%;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--title);
}

.org-besin__not {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

.org-besin__not i {
  margin-top: 3px;
  color: var(--org-yesil-700);
}

/* --- SIKÇA BİRLİKTE ALINANLAR --- */
.org-birlikte {
  padding-block: clamp(24px, 3.4vw, 42px);
}

/* --- ÜRÜN SAYFASI YORUMLARI --- */
.org-yorum-bolum {
  padding-block: clamp(24px, 3.4vw, 42px);
}

.org-yorum-bolum__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 22px;
  align-items: start;
}

.org-yorum-sira {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.org-yorum-kart {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.org-yorum-kart__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--muted);
}

.org-yorum-kart__yazar {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--title);
}

.org-yorum-kart__yildiz {
  color: var(--warning);
}

.org-yorum-kart__satin {
  padding: 2px 9px;
  border-radius: var(--pill);
  background: var(--primary-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--success);
}

.org-yorum-kart__baslik {
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--title);
}

.org-yorum-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.org-yorum-form h3 {
  font-size: 18px;
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK KATMANI — EZİLMEYEN SAYFALAR
   ==========================================================================
   NİÇİN GEREKLİ: OrganiFresh yedi görünümü eziyor; GERİ KALANLAR çekirdekten
   geliyor (sepet, ödeme, sipariş sonucu, hesabım, üyelik, blog, iletişim ve
   sözleşme sayfaları, kampanya listesi, karşılaştırma, koleksiyon, kombin,
   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.

   Yaprak CSS dosyaları (shop-karsilastirma, shop-birim, shop-dijital,
   shop-teslimat, shop-sepet-zekasi, shop-blog, shop-listeler, shop-kuyumcu,
   shop-koleksiyon, shop-elektronik, shop-oto, shop-yapi, shop-parti,
   shop-abonelik, shop-bayi) renkleri `var(--…)` ile OKUR ve hiçbirini
   TANIMLAMAZ; bu yüzden yukarıdaki :root sözlüğünün TAMAMI zorunludur.
   Tanımsız bir ada `var()` ile bakıldığında CSS o BİLDİRİMİN TAMAMINI düşürür
   ve sonuç sessizdir.
   ========================================================================== */

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

.section {
  padding-block: clamp(28px, 4vw, 48px);
}

.section--surface {
  background: var(--surface);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
}

.section-head h2,
.section-head h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
}

.section-head p {
  font-size: 14.5px;
  color: var(--muted);
}

/* --- rozetler --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--pill);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.badge--gold {
  background: var(--org-kirmizi);
  color: #ffffff;
}

.badge--info {
  background: var(--org-yesil-700);
  color: #ffffff;
}

.badge--danger {
  background: var(--danger);
  color: #ffffff;
}

.badge--success {
  background: var(--success);
  color: #ffffff;
}

.badge--warning {
  background: var(--warning);
  color: #ffffff;
}

.badge--muted {
  background: var(--surface);
  color: var(--muted);
}

/* --- uyarı şeritleri --- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 14px;
  padding: 12px 16px;
  border-left: 4px solid var(--org-yesil-700);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14.5px;
}

.alert--success {
  border-left-color: var(--success);
}

.alert--error {
  border-left-color: var(--danger);
}

.alert--info {
  border-left-color: var(--org-yesil-600);
}

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

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

.prose h2 {
  margin: 24px 0 8px;
  font-size: 21px;
}

.prose h3 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.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(--accent);
  text-decoration: underline;
}

/*
 | TELEFON VE E-POSTA BAĞLANTILARI — /iletisim ÇEKİRDEK bir görünümdür ve
 | iletişim bilgilerini tek başına duran bağlantılar olarak basar. Bunlar bir
 | cümlenin içinde akan bağlantı DEĞİL, tek başına duran denetimlerdir.
 */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--org-dokunma);
}

/* --- form alanları (çekirdek adları) --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--title);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--org-dokunma);
  padding: 10px 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  font-size: 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--org-yesil-700);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-error {
  font-size: 13px;
  color: var(--danger);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--org-dokunma);
  font-size: 14.5px;
  cursor: pointer;
}

/* --- ürün ızgaraları (çekirdek adları) --- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.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: 12px;
}

.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(--org-cizgi-koyu);
  background: var(--surface);
}

.catcard strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--title);
}

.catcard span {
  font-size: 13.5px;
  color: var(--muted);
}

/* --- çekirdek ana sayfa bloğu (ezilmeyen bir sayfa çağırırsa) --- */
.hero {
  padding-block: clamp(28px, 5vw, 56px);
  background: var(--surface);
}

.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(--org-yesil-700);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
}

.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(--org-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: 10px;
}

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

.cartitem__name {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 800;
  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: 900;
  color: var(--title);
}

.summary {
  padding: 18px;
  border: 2px solid var(--org-yesil-700);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.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: 900;
  color: var(--title);
}

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

.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.coupon input {
  flex: 1 1 150px;
  min-width: 0;
  min-height: var(--org-dokunma);
  padding: 10px 12px;
  border: 2px solid var(--control-border);
  border-radius: var(--btn-radius);
  font-size: 16px;
}

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

.qty button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  background: var(--surface);
  color: var(--title);
  font-size: 16px;
}

.qty button:hover {
  background: var(--primary-soft);
}

.qty button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.qty input {
  width: 62px;
  min-height: var(--org-dokunma);
  border: 0;
  border-inline: 2px solid var(--control-border);
  background: var(--card-bg);
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

/* --- ö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 18px;
  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: 2px 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: 800;
}

.steps__item.is-active .steps__no {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--org-dokunma);
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 2px solid var(--control-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  cursor: pointer;
}

.radio-card input {
  width: 20px;
  height: 20px;
  accent-color: var(--org-yesil-700);
}

.radio-card__price {
  margin-left: auto;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--title);
}

.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(--org-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: 2px;
  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(--org-dokunma);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.accnav a:hover,
.accnav a.is-active {
  text-decoration: none;
  background: var(--surface);
  color: var(--org-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;
}

/* --- 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-radius: var(--card-radius);
  background: var(--surface);
  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: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--org-yesil-700);
}

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

.filters__list a {
  display: flex;
  align-items: center;
  min-height: var(--org-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(--surface);
  color: var(--org-yesil-700);
}

.empty {
  padding: 46px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

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

/* --- rapor / istatistik kartları --- */
.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: 900;
  color: var(--title);
}

.statcard span {
  font-size: 13.5px;
  color: var(--muted);
}

/* --- galeri (koleksiyon / kombin fotoğrafı) --- */
.gallery__main {
  padding: 14px;
  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(--org-dokunma);
  min-width: var(--org-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(--org-yesil-700);
}

.pfeatures {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.pfeatures li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
}

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

.optgroup {
  margin-bottom: 14px;
}

.optgroup__title {
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--title);
}

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

.optlist label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 13px;
  border: 2px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 14.5px;
}

.swatch {
  width: 18px;
  height: 18px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
}

.stars {
  color: var(--warning);
}

.pcard__brand,
.pcard__name {
  display: inline-flex;
  align-items: center;
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
}

/* --- tablolar --- */
.table-scroll {
  overflow-x: auto;
}

.datatable,
.kargo-tablo {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  font-size: 14.5px;
  overflow: hidden;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.datatable th,
.kargo-tablo th {
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--title);
}

/* --- sayfalama --- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
}

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

.pagination a:hover {
  text-decoration: none;
  border-color: var(--org-yesil-700);
  color: var(--org-yesil-700);
}

.pagination .is-current {
  background: var(--org-yesil-700);
  border-color: var(--org-yesil-700);
  color: #ffffff;
  font-weight: 900;
}

.pagination .is-disabled {
  background: var(--surface);
  color: var(--muted);
}

/* --- ekmek kırıntısı (çekirdek adı) --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding-block: 12px;
  font-size: 13.5px;
  color: var(--muted);
}

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

.breadcrumb a:hover {
  color: var(--org-yesil-700);
}

/* --- ürün sayfası çekirdek yerleşimi (tema kendi görünümünü getirir; bu
       kurallar yalnızca çekirdeğe düşen bir uçta stilsizlik olmasın diye) --- */
.pdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.pinfo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--muted);
}

.pinfo__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.pinfo__price strong {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 900;
  color: var(--accent);
}

.pinfo__price del {
  font-size: 16px;
  color: var(--muted);
}

.pinfo__tax {
  flex: 1 1 100%;
  font-size: 13.5px;
  color: var(--muted);
}

.qtyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.tabs {
  margin-top: 40px;
}

.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--border);
}

.tabs__btn {
  min-height: var(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--muted);
}

.tabs__btn.is-active {
  border-bottom-color: var(--org-yesil-700);
  color: var(--title);
}

.tabs__panel {
  display: none;
  padding-top: 20px;
}

.tabs__panel.is-active {
  display: block;
}

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

.review {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 6px;
  font-size: 13.5px;
}

.review__author {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--title);
}

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

.tema-onizleme__metin {
  min-width: 0;
}

.tema-onizleme__ayrinti {
  color: #cfe2d3;
}

.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(--org-dokunma);
  min-width: var(--org-dokunma);
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--btn-radius);
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.tema-onizleme__btn--birincil {
  background: var(--org-limon);
  border-color: var(--org-limon);
  color: var(--org-murekkep);
}

/* ==================================================================
   DUYARLILIK — ONAYLI KIRILMA NOKTALARI
   ------------------------------------------------------------------
   Kullanılan noktalar DuyarlilikTest::KIRILMA_NOKTALARI listesindedir:
   1100 · 1040 · 901 · 900 · 720 · 641 · 640 · 560 · 420.
   ================================================================== */

@media (max-width: 1100px) {
  .org-urunler--5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .org-eylem__yazi {
    display: none;
  }

  .org-eylem--sepet .org-eylem__yazi {
    display: flex;
  }

  .org-birlesik__satir {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  }
}

@media (max-width: 1040px) {
  .org-tepe__ic {
    flex-wrap: wrap;
  }

  .org-arama {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin-inline: 0;
  }

  .org-eylemler {
    margin-left: auto;
  }

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

  .org-urun__izgara {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }

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

@media (max-width: 901px) {
  .org-guven__ic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  /* SATIN ALMA KUTUSU GALERİNİN ALTINA İNER: iki kolon 900px altında
     ürün adını üç harfe kırpıyordu (gerçek tarayıcıda ölçüldü). */
  .org-urun__izgara {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-satin {
    position: static;
  }

  .org-besin__izgara,
  .org-yorum-bolum__izgara {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-galeri__foto {
    flex: 0 0 calc((100% - 12px) / 2);
  }

  .org-yazilar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* KÜÇÜK ÜRÜN SATIRLARI TEK KOLONA İNER — ÖLÇÜLEREK EKLENDİ: 768px'te
     "Haftanın Fırsatı" iki kolonda kalınca satırın ad sütunu 22px'e düşüyor
     ve ürün adı harf harf alt alta diziliyordu (gerçek tarayıcıda ölçüldü:
     kutu 22x57). Referanstaki 2x3 düzen 901px ve üstünde sürer. */
  .org-satirlar {
    grid-template-columns: minmax(0, 1fr);
  }

  .cartlayout,
  .checkout,
  .acclayout,
  .listlayout,
  .contact-grid,
  .reviews-layout,
  .pdetail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .org-gezinme__ic {
    flex-wrap: wrap;
  }

  .org-menu {
    order: 3;
    flex: 1 1 100%;
  }

  .org-firsat {
    margin-left: auto;
  }

  .org-birlesik__satir {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-promo {
    min-height: 200px;
  }

  .org-hafta {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-yasam__liste > li {
    flex: 1 1 42%;
  }

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

@media (max-width: 641px) {
  /* MENÜ HAMBURGERE İNER: gezinme katmanının yatay kaydırması 641px altında
     "Blog" bağlantısını görünmez kılıyordu. */
  .org-menu,
  .org-katmenu {
    display: none;
  }

  .org-burger {
    display: inline-flex;
  }

  .org-gezinme__ic {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .org-urunler,
  .org-urunler--4,
  .org-urunler--5,
  .pgrid,
  .pgrid--3,
  .pgrid--4,
  .pgrid--5,
  .catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-satirlar {
    grid-template-columns: minmax(0, 1fr);
  }

  /* `.org-teklifler` ve `.org-sicaklar` auto-fit kullanıyor: 640px altında
     zaten tek kolona iniyorlar (taban 280px), ayrıca yazmak gerekmiyor. */
  .org-yorumlar__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-suzgec__satir {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-galeri__foto {
    flex: 0 0 88%;
  }

  .org-serit__sag {
    gap: 12px;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cartitem {
    grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
  }

  .cartitem__right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .org-manset__slayt {
    min-height: 0;
    padding-inline: 20px;
  }

  .org-manset__foto--3,
  .org-manset__foto--4 {
    display: none;
  }

  .org-guven__ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-alt__kolonlar {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-bulten__ic,
  .org-alt .bulten__ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .org-yazi__kucuk {
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  }

  .org-teklif__yazi {
    width: 100%;
  }

  .org-teklif__foto {
    width: 38%;
    opacity: 0.5;
  }
}

@media (max-width: 420px) {
  /* ÜRÜN IZGARASI BURADA TEK KOLONA İNMEZ — ölçülerek karar verildi: iki
     kolonda kart genişliği 320px'lik ekranda (320 − 28 dolgu − 14 boşluk) ÷ 2
     = 139px kalıyor; ad iki satıra sarıldığı için okunur ve dokunulabilir.
     Tek kolona inince ana sayfanın belge yüksekliği kırk ekran boyuna çıkar. */
  .org-serit {
    font-size: 12.5px;
  }

  .org-serit__sag span:first-child {
    display: none;
  }

  .org-kart__foto {
    padding: 10px;
  }

  .org-kart__govde,
  .org-kart__ayak {
    padding-inline: 10px;
  }

  .org-yasam__liste {
    gap: 10px;
  }

  .org-satin {
    padding: 16px;
  }
}

/* Yükseklik kısıtlı ekran (yatay tutulan telefon): yapışkan kutu ekranı
   kaplamasın. */
@media (max-height: 640px) {
  .org-satin {
    position: static;
  }
}

/* ==================================================================
   HAREKETİ AZALTMA TERCİHİ (WCAG 2.3.3)
   ------------------------------------------------------------------
   Süreleri sıfırlamak YETMEZ: yumuşak kaydırma ve scroll-snap de
   harekettir; kayan fırsat şeridi burada HİÇ başlamaz.
   ================================================================== */

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

  .org-serit-kayan__ray {
    animation-play-state: paused;
    transform: none;
  }

  .org-daireler,
  .org-galeri__ray {
    scroll-snap-type: none;
  }
}


/* ==========================================================================
   REKLAM YUVASI — ORGANIFRESH 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.
   ========================================================================== */

/*
 * ORGANIFRESH — MARKET RAFI: YUMUŞAK KÖŞE, KISA BOŞLUK.
 *
 * Bu temada yuvarlatma cömerttir (kart 16px) ve raflar sık dizilir. Yuva o
 * yoğunluğa uyar: boşluk kısa (36px), ayırıcı olarak ÜSTTE kesikli bir
 * çizgi kullanılır — raf etiketi dili. Kesikli çizgi kardeş temaların düz
 * çizgisinden ayrışır ve bir "kart çerçevesi" izlenimi vermez.
 */
[data-tema='organifresh'] .reklam {
  --reklam-bosluk: 36px;

  border-top: 2px dashed var(--border);
  padding-top: 14px;
}

[data-tema='organifresh'] .reklam--kenar-cubugu {
  --reklam-bosluk: 28px;
}

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

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

@media (max-width: 640px) {
  [data-tema='organifresh'] .reklam {
    --reklam-bosluk: 24px;
  }
}