/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 *
 * ── Semantic class hooks (sa-*) ────────────────────────────────────────────
 * Every section, snippet and key element carries a stable `sa-` class you can
 * target with plain CSS — no Tailwind rebuild needed. These classes ship with
 * NO styles of their own; they exist purely as selectors for you to hook onto.
 *
 * Page scope   body.sa-tpl-<template>      e.g. .sa-tpl-product, .sa-tpl-shop
 * Chrome       .sa-header .sa-navbar .sa-footer
 *              .sa-navbar-link .sa-navbar-logo .sa-navbar-cart .sa-footer-link
 * Sections     .sa-<component>             e.g. .sa-hero, .sa-features, .sa-faq
 *   variant    .sa-<component>--<variant>  e.g. .sa-hero--split-media
 *   inner      .sa-<component>-title / -subtitle / -eyebrow / -media /
 *              -items / -item / -actions / -link / -price / -badge / -icon
 * Primitives   .sa-btn (+ .sa-btn--<variant>), .sa-section-header
 *              (.sa-section-title / -eyebrow / -subtitle),
 *              .sa-product-card (+ .sa-product-card--<style>,
 *              .sa-product-card-title / -price / -stock / -status),
 *              .sa-product-form + .sa-add-to-cart, .sa-product-gallery,
 *              .sa-cart-panel + .sa-cart-item, .sa-searchbar, .sa-pagination,
 *              .sa-breadcrumbs, .sa-toasts + .sa-toast, .sa-feedback-card
 *
 * Example — bigger hero heading only on the product page:
 *   .sa-tpl-product .sa-hero-title { font-size: 3rem; }
 * ───────────────────────────────────────────────────────────────────────────
*/

/* Hero centered — full-width background behind headline */
.sa-hero--centered {
  position: relative;
  overflow: hidden;
  background: #05070d;
}

.sa-hero--centered .nexus-hero-bg--full {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.sa-hero--centered .nexus-hero-bg--full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
}

.sa-hero--centered .nexus-hero-centered__wrap {
  position: relative;
  z-index: 2;
}

.sa-hero--centered .sa-hero-title,
.sa-hero--centered .sa-hero-subtitle,
.sa-hero--centered .sa-hero-eyebrow {
  color: #fff;
}

.sa-hero--centered .sa-hero-eyebrow {
  color: #22c55e !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Handoff override'lari (design_handoff_cheapest_tema/theme/custom.css)
   Faz 1'de eklendi. nexus-premium.css'ten ONCE yuklenir.
   Renk/font/kose degerleri settings.json'dan gelir
   (bkz. settings.global.properties.json); tokenler layouts/master.njk :root.
   ───────────────────────────────────────────────────────────────────────── */

/* Navbar: glassmorphism — daha güçlü blur + ince alt çizgi */
.sa-navbar > div {
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

/* Hero: büyük, sıkı harf aralıklı display başlık + güçlü mavi glow */
.sa-hero-title {
  font-weight: 800;
  letter-spacing: -0.035em;
}
.sa-hero .hero-bg-glow {
  background: radial-gradient(circle, rgba(var(--cl-accent), 0.3), transparent 65%);
}

/* Ürün kartları: hover'da hafif kalkma + mavi kenarlık/glow parlaması */
.sa-product-card {
  transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.sa-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cl-accent), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--cl-accent), 0.12), 0 12px 40px rgba(var(--cl-accent), 0.14);
}

/* Birincil CTA: hover'da hafif kalkma + daha güçlü mavi glow */
.sa-btn--primary.sa-btn--solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 36px rgba(var(--cl-accent), 0.5);
}

/* Adım numaraları / ikon karoları: mavi vurgu halkası */
.sa-steps-item .icon-tile,
.sa-features .icon-tile {
  border-color: rgba(var(--cl-accent), 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* İstatistik rakamları: mavi gradient dolgu */
.sa-stats .text-display,
.sa-stats .text-h1 {
  background: linear-gradient(180deg, rgb(var(--cl-t-primary)), var(--cl-accent-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA banner: mavi gradient zemin vurgusu */
.sa-cta-banner .rounded-card {
  border-color: rgba(var(--cl-accent), 0.25);
}

/* Footer: surface zemin + üstte ince ayırıcı (tema zaten hairline çizer) */
.sa-footer {
  background: rgb(var(--cl-surface));
}

/* Odak görünürlüğü (erişilebilirlik) — handoff taban çizgisi */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), 0.7);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}

/* ─────────────────────────────────────────────────────────────────────────
   Erisilebilirlik: klavye odagi her zaman gorunur olmali.
   Fare tiklamasinda halka cikmaz (:focus-visible), klavyede cikar.
   ───────────────────────────────────────────────────────────────────────── */
.nexus-theme :focus-visible {
  outline: 2px solid rgba(var(--cl-accent), 0.9);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   Faz 4 / Gorev 1 + 2 — Urunler sayfasi (page-products)

   BIRLESTIRME NOTU: bu blok `CheaPest/assets/custom.css` SONUNA eklenir
   (plan "Dosya Yapisi" tablosu: mağaza sayfasi `sa-` override'lari custom.css).
   custom.css, master.njk:69'da built.css'ten SONRA yuklendigi icin buradaki
   kurallar Tailwind utility'lerinden sonra gelir; @layer'a alinmasi gerekmez.
   Eklendikten sonra `npm run build:css` calistirilmalidir — Gorev 1/2 njk'ya
   YENI Tailwind siniflari da ekledi (auto-fill izgara, pill toggle, CTA karti).

   Bu dosyada TEK bir kural var. Gerekcesi asagida; geri kalan her sey
   (izgara, chip aktifligi, CTA karti) Tailwind ile njk icinde cozuldu.

   `!important` KULLANILMADI. Butce zaten asilmis durumda (nexus-premium.css
   193 + style.css 17 + custom.css 1); asagidaki kural ozgulluk sirasiyla
   kazaniyor, olcumu yorumun icinde.
   ───────────────────────────────────────────────────────────────────────────── */

/* Stok filtresi pill toggle'inin baloncugu (knob).

   Neden Tailwind ile yazilamiyor: Tailwind'in `peer-checked:*` utility'si
   `.peer:checked ~ .hedef` uretir. Genel kardes birlestirici (`~`) yalnizca
   AYNI ebeveyn altinda, peer'dan sonra gelen ogelerde eslesir. Baloncuk ise
   track `<span>`inin ICINDE duruyor — input'un kardesi degil, yegeni. Yani
   `peer-checked:translate-x-4` bu markup'ta hicbir zaman eslesmez; olu sinif
   birakmamak icin njk'dan da cikarildi.

   Kayma mesafesi 1rem = 16px olcumle turetildi, tahminle degil:
     track  36px genis, her iki yanda 1px `border` -> ic (padding) kutusu 34px
     knob   14px (`size-3.5`), sol bosluk 2px (`left-0.5`)
     hedef  sag bosluk da 2px  ->  34 - 2 - 14 - 2 = 16px
   Isaretli hâlde `peer-checked:border-transparent` kenarligi SEFFAF yapar,
   kaldirmaz; kenarlik genisligi 1px kaldigi icin geometri degismez.

   Ozgulluk: (0,3,3) — .nexus-theme + .sa-stock-toggle + :checked = 3 sinif,
   input + span + span = 3 oge. Rakip Tailwind utility'leri tek sinif (0,1,0)
   oldugundan `!important` gerekmiyor. Ayrica knob'da hic `transform`
   utility'si yok; `transition-transform` sadece gecisi tanimliyor. */
.nexus-theme .sa-stock-toggle input:checked + span > span {
  transform: translateX(1rem);
  /* Isaretli track accent gradyanina donuyor; baloncuk rengi bu yuzden
     sabit beyaz degil, "accent uzerindeki icerik" token'i. */
  background-color: rgb(var(--cl-on-accent));
}

/* =====================================================================
   Faz 4 / Gorev 4 + 5 — Urun detay CSS'i
   =====================================================================
   Bu dosya DERLENMEZ. Tek blok halinde su dosyanin SONUNA tasinir:

     BLOK A -> CheaPest/assets/custom.css   (YENI kurallar, sona eklenir)

   Neden custom.css: her iki kural da Tailwind yardimci siniflariyla
   yazilamiyor (biri Splide'in kendi kodunun ekledigi `is-active` sinifini
   hedefliyor, digeri style.css'teki `.input-stepper` bilesen kuralini
   eziyor). custom.css layouts/master.njk satir 69'da built.css'ten SONRA
   yuklendigi icin esit ozgulukte bile kazanir.

   YENI `!important` YOK (2 kural, 0 adet). Ayrintili gerekce A1'de.

   NOT — bu dosyaya BILEREK konmayan kural:
   nexus-premium.css satir 1073'te `.nexus-theme .sa-tpl-product .rounded-card`
   duruyor ve HICBIR ZAMAN eslesmiyor: master.njk satir 176 iki sinifi da AYNI
   <body> ustune koyuyor, CSS ise torun ariyor. Dogrusu bilesik secici
   (`.nexus-theme.sa-tpl-product .rounded-card`) ama o dosya bu gorevin
   kapsami disinda — burada TEKRARLANMADI, raporda bildirildi.
   ===================================================================== */


/* ---------------------------------------------------------------------
   A1 — Galeri thumbnail'i: aktif olan accent halkali
   ---------------------------------------------------------------------
   OLCUM: style.css satir 1867 zaten `.splide.thumbnails .splide__slide.is-active
   { @apply opacity-100 }` iceriyor — YANI OPAKLIK KISMI HAZIR, eksik olan
   yalnizca accent cerceve. (Plan "is-active stili yok" diyor; yanlis.)

   Kenarlik yerine ic golge kullaniliyor: thumbnail <li>'si
   product-gallery.njk'da `!border !border-theme` tasiyor ve bu Tailwind
   onekli utility built.css'te `border-color: var(--cl-border) !important`
   olarak cikiyor. `border-color`i ezmek yeni bir `!important` gerektirirdi;
   `box-shadow` ayni gorunumu (2px ic halka) sifir !important ile veriyor.

   --cl-accent ham "R G B" uclusudur -> rgba(var(--cl-accent), .6) gecerli.
   (--cl-border ise TAM bir rgba() degeridir; ona rgb() sarilmaz.)
   --------------------------------------------------------------------- */
.nexus-theme .splide.thumbnails .splide__slide.is-active {
  box-shadow: inset 0 0 0 2px rgba(var(--cl-accent), 0.6);
}


/* ---------------------------------------------------------------------
   A2 — Adet stepper'i urun sayfasinda 48px pill
   ---------------------------------------------------------------------
   OLCUM: built.css'te `.input-stepper{height:2.25rem}` (36px) ve
   `.input-stepper>button{width:2.25rem}` var; ikisi de (0,1,0)/(0,2,0)
   ozgulukte ve !important'siz. Asagidaki secici (0,3,0) + custom.css daha
   sonra yuklendigi icin !important'a gerek YOK.

   Kapsam bilerek `.sa-page-product` ile sinirli: ayni stepper sepette ve
   grup modalinda da kullaniliyor, onlar 36px kalmali.
   --------------------------------------------------------------------- */
.nexus-theme .sa-page-product .input-stepper {
  height: 3rem;
  border-radius: 9999px;
}

.nexus-theme .sa-page-product .input-stepper > button {
  width: 3rem;
}


/* Indirim rozeti — prototip birebir.
   Kaynak: design_handoff_cheapest_tema/pages/Cheapest Ürünler.dc.html:97
     top/right 8px · padding 3px 9px · radius 9999px
     background rgba(4,6,11,.7) · border 1px rgba(59,130,246,.35) · color #9CC2FA
   Plan yesil (`bg-success`) + sol kose diyordu; prototip koyu cam + MAVI ve
   sag ust. Proje hedefi prototipe uymak oldugu icin prototip uygulandi.
   Sabit hex yerine token: --cl-background = #04060B (prototipteki 4,6,11),
   --cl-accent = mavi. Boylece panelden renk degistirilince rozet de doner. */
.nexus-theme .sa-product-card-discount {
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(var(--cl-background), 0.7);
  border: 1px solid rgba(var(--cl-accent), 0.35);
  color: var(--cl-accent-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Faz 6 / Gorev 6.6 + 6.7 + 6.8 — musteri panel sayfalari
   (page-customer-invoices / -balance / -reseller / -subscriptions / -tickets /
    -ticket / -affiliate)

   BIRLESTIRME NOTU: bu blok `CheaPest/assets/custom.css` SONUNA eklenir.
   custom.css, layouts/master.njk icinde built.css'ten SONRA yuklendigi icin
   buradaki kurallar Tailwind utility'lerinden sonra gelir; `@layer` gerekmez.
   Eklendikten SONRA `npm run build:css` calistirilmalidir — bu gorev njk'lara
   birkac yeni Tailwind sinifi da ekledi.

   `!important` KULLANILMADI. Butce zaten asilmis durumda; asagidaki kurallar
   ozgulluk sirasiyla kaziniyor, olcumu her kuralin yaninda yazili.
   Sabit hex YOK: renkler `--cl-accent` uzerinden turuyor (panelden accent
   degistirilince kart parlamasi da doner).
   ───────────────────────────────────────────────────────────────────────────── */

/* Panel kart hover dili — "prototip karti": 3px yukari, accent kenarlik, accent
   parlamasi.

   Neden Tailwind ile degil:
     1. `hover:-translate-y-[3px]` built.css'te YOK (olculdu: built.css icinde
        `hover\:-translate-y-\[3px\]` gecmiyor), yani utility ile yazilsa
        `npm run build:css` calistirilana kadar hicbir sey olmazdi.
     2. Golge rengi token'a baglanmali. `shadow-[...]` arbitrary degeri
        `rgba(var(--cl-accent), .14)` alabilir ama okunaksiz ve yine derleme
        ister.
   Karsiligi: njk yalnizca `sa-panel-card` sinifini tasir; taban gorunum
   (rounded-card/border/bg-surface/shadow-card/card-p) Tailwind'de kalir.

   Gecis suresi `.card-p` kuralindan geliyor (style.css:749 —
   `transition: border-color/box-shadow/transform var(--dur) ease`), burada
   yeniden tanimlanmiyor; `sa-panel-card` her zaman `card-p` ile birlikte
   kullaniliyor.

   Ozgulluk: (0,3,0) = .nexus-theme + .sa-panel-card + :hover. Rakip
   `.shadow-card` / `.border-theme` tek sinif (0,1,0) oldugu icin `!important`
   gerekmiyor.

   `@media (hover: hover)` : dokunmatikte "yapisik hover" birakmamak icin. */
@media (hover: hover) {
  .nexus-theme .sa-panel-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--cl-accent), 0.4);
    box-shadow: 0 16px 48px rgba(var(--cl-accent), 0.14);
  }
}

/* Hareket azaltma: kalkma iptal, renk/golge kalir (bilgi kaybi olmasin). */
@media (prefers-reduced-motion: reduce) {
  .nexus-theme .sa-panel-card:hover {
    transform: none;
  }
}

/* Tablo satirlari icin ayni dilin sakin surumu: satir kalkmaz (hucre hizasi
   bozulur), yalnizca zemin isinir. Korunan dort sayfadaki (6.8) tablolar bunu
   kullanir.

   Ozgulluk: (0,3,0) — .nexus-theme + .sa-panel-row + :hover. */
@media (hover: hover) {
  .nexus-theme .sa-panel-row:hover {
    background-color: rgba(var(--cl-t-primary), 0.02);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Faz 6 / Görev 6.2-6.5 — müşteri paneli çekirdeği
   (snippets/customer-sidebar.njk + components/page-customer-dashboard.njk)

   Bu blok `CheaPest/assets/style.css` SONUNA eklenir, ardından
   `npm run build:css` çalıştırılır (girdi her zaman assets/style.css).

   ── Neden neredeyse boş (ölçüldü, tahmin değil) ────────────────────────────
   Panel çekirdeğinin görünümü iki kaynaktan geliyor:
     1. built.css'te ZATEN derlenmiş Tailwind yardımcı sınıfları,
     2. token'a bağlı satır içi stiller (`--grad-accent-from/to`,
        `--cl-accent`, `--cl-surface`, `--cl-surface-raised`, `--cl-t-primary`).

   Satır içi stil bilerek seçildi: bu görevde `CheaPest/assets/*` dosyalarına
   dokunma izni yok, dolayısıyla `npm run build:css` çalıştırılamadı. Yeni bir
   Tailwind sınıfına dayanan her kural, derleme yapılana kadar SESSİZCE ölü
   kalırdı. Aşağıdaki dört yerde bu yüzden sınıf değil satır içi stil var:

     · sidebar avatarı  — `from-accent-500`/`to-accent-600` built.css'te YOK
                          → `linear-gradient(135deg, var(--grad-accent-from),
                             var(--grad-accent-to))`
     · çark diski       — 8 dilimli `conic-gradient`; Tailwind karşılığı yok
     · çark işaretçisi  — `-top-1` ve `size-0` built.css'te YOK
     · kademe barı      — mevcut `.rating-bar-fill` + `--bar-w` (yeni sınıf yok)

   Ölçüm yöntemi: her `class="…"` değeri ayrıştırılıp built.css içinde
   Tailwind kaçışlı seçici olarak (`.hover\:bg-accent-500\/\[0\.12\]`) arandı.
   Aynı denetim `tools/harness/test/faz6-panel.test.mjs` içinde otomatik
   çalışıyor; ileride derlenmemiş bir sınıf eklenirse test kırmızı verir.

   ── !important ────────────────────────────────────────────────────────────
   Yeni `!important` EKLENMEDİ. (Bütçe zaten aşılmış durumda: style.css 17 +
   nexus-premium.css 194.) Aşağıdaki tek kural bir çakışmayı çözmüyor, hiç
   var olmayan bir hover zeminini tanımlıyor; ağırlık yarışına girmiyor.

   ── BİLİNEN ÖLÜ KURAL (bu dosyada DÜZELTİLMEDİ) ───────────────────────────
   `CheaPest/assets/nexus-premium.css` (ölçüldüğünde satır 1093; dosya başka bir
   görevde de değiştiği için seçici metnine göre arayın):

       .nexus-theme .sa-tpl-customer-dashboard .rounded-card,
       .nexus-theme [class*="sa-tpl-customer"] .rounded-card { … }

   Her iki seçici de ÖLÜ: `nexus-theme` ile `sa-tpl-customer-*` AYNI <body>
   üzerindedir, aralarındaki boşluk torun ilişkisi arar. Doğrusu bitişik
   yazımdır (`.nexus-theme.sa-tpl-customer-dashboard .rounded-card`). Dosya bu
   görevin dokunma listesinde olmadığı için düzeltilmedi, rapora yazıldı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar'daki vurgulu "Resellers ↗" bağlantısının hover zemini.
   `hover:bg-accent-500/*` varyantlarının HİÇBİRİ built.css'te derlenmemiş
   (ölçüldü: sıfır isabet), bu yüzden düz CSS. Kenarlık hover'ı
   (`hover:border-accent-500/40`) derlenmiş olduğu için bu kural eklenmeden de
   bağlantı hover'da tepki verir — kural yalnızca zemini güçlendirir. */
.sa-customer-reseller-link:hover {
  background-color: rgba(var(--cl-accent), 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Faz 7 / Görev 7.3 + 7.4 + 7.5 — durum, SSS ve üç yasal sayfa

   BU DOSYA HENÜZ YÜKLENMİYOR. `CheaPest/assets/*` bu turda kilitliydi; aşağıdaki
   kuralları `CheaPest/assets/custom.css` sonuna ekleyin (yükleme sırası:
   built.css → custom.css → nexus-premium.css).

   ── Ölçüm: neredeyse hiç CSS gerekmedi ────────────────────────────────────
   Üç görevin markup'ında kullanılan yardımcı sınıfların TAMAMI (tek istisna
   aşağıda) `CheaPest/assets/built.css` içinde zaten derlenmiş durumda —
   85 sınıf tek tek arandı, biri hariç hepsi VAR. Yani `npm run build:css`
   çalıştırılmadan da sayfalar doğru görünür.

   ── !important bütçesi ────────────────────────────────────────────────────
   Bu dosyada `!important` YOK. Gerekmedi de: aşağıdaki üç seçicinin hiçbiri
   `nexus-premium.css` veya `built.css` içinde geçmiyor (arandı, sıfır sonuç),
   dolayısıyla ezilecek bir kural yok.

   ── Çakışma denetimi: .editor ─────────────────────────────────────────────
   Yasal sayfa gövdesi ham HTML. `.editor` kuralları YALNIZCA `style.css`
   içinde tanımlı (`.editor .e-heading-h2`, `.editor .e-paragraph`, …);
   `custom.css` ve `nexus-premium.css` içinde `.editor` HİÇ geçmiyor.
   Yani `::before` sayacıyla çakışan bir kural yok — kuralı
   `nexus-premium.css`'e taşımaya gerek kalmadı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Yasal sayfa sütun genişliği: 768px → 780px ─────────────────────────
   ARTIK GEREKSİZ, ama zararsız — silinebilir.

   Ölçüm sırası (tahmin değil):
     1. .njk düzenlemesinden hemen sonra: `.max-w-\[780px\]` built.css'te YOKTU.
     2. Bu turda paralel çalışan bir görev `npm run build:css` çalıştırdı;
        Tailwind sınıfı .njk'dan tarayıp derledi. Şimdi VAR.

   Doğrulama:
     grep -c 'max-w-\\\[780px\\\]' CheaPest/assets/built.css   → 1 veya üzeri
   Sonuç 0'a düşerse (built.css eski bir sürümden geri alınırsa) aşağıdaki
   kural devreye girer; testte "780px sınıfı ya built.css'te ya faz7 CSS
   dosyasında karşılanır" iddiası ikisinden birini şart koşuyor. */

.max-w-\[780px\] {
  max-width: 780px;
}

/* ── 2) Yasal sayfa: numaralı bölümler (OPT-IN) ────────────────────────────
   Gövde ham HTML geldiği için `<h2>`'lere sınıf eklenemiyor; numara CSS
   sayacından gelir. `.legal-numbered` sınıfını bileşen YALNIZCA
   `properties.number_sections` açıkken basar — çoğu politika metni
   başlıklarını zaten "1." diye numaralı yazdığı için varsayılan açık olsaydı
   "1. 1. Genel hükümler" gibi çift numara çıkardı.

   Renk sabit hex değil token: `rgb(var(--cl-accent))`.
   DİKKAT: `--cl-border` tam `rgba()` taşır, `rgb(var(--cl-border))` GEÇERSİZ
   olurdu — burada kullanılan `--cl-accent` ise ham kanal üçlüsüdür, sarmalanır. */

.legal-layout.legal-numbered .editor {
  counter-reset: yasal-bolum;
}

.legal-layout.legal-numbered .editor h2 {
  counter-increment: yasal-bolum;
}

.legal-layout.legal-numbered .editor h2::before {
  content: counter(yasal-bolum) ". ";
  color: rgb(var(--cl-accent));
  font-variant-numeric: tabular-nums;
}

/* ── 3) Durum sayfası bannerı: mobilde damga alt satıra insin ──────────────
   `.sa-status-stamp` masaüstünde `ml-auto` ile sağa yaslı. Dar ekranda
   flex-wrap onu ikinci satıra atıyor ve `ml-auto` orada satırı sağa itip
   metni banner'ın karşı ucuna fırlatıyor. 480px altında sola hizalanır. */

@media (max-width: 480px) {
  .sa-status-stamp {
    margin-left: 0;
    width: 100%;
  }
}

/* FAZ 5 — custom page (pazarlama sayfalari) stil eklemeleri.
 *
 * BU DOSYA HENUZ TEMAYA DAHIL DEGILDIR. Icerigi CheaPest/assets/custom.css'in
 * sonuna eklenecek; ayri tutulmasinin sebebi Faz 5'te assets/ dizinine
 * dokunulmamasidir. Ekledikten sonra `npm run build:css` calistirilir.
 *
 * KANCA: sayfa-ozel stiller `.sa-custom-page--<slug>` uzerinden yazilir.
 * `sa-tpl-custom-page-<timestamp>` KULLANILMAZ — timestamp sayfa panelde
 * olusturulunca uretilir ve her magaza kopyasinda farklidir.
 *
 * KURALLAR (testle denetleniyor: tools/harness/test/custom-page.test.mjs)
 *  - `aspect-ratio` YAZILMAZ: urun gorselleri her alanda 1/1
 *    (tools/harness/test/gorsel-orani.test.mjs).
 *  - `!important` YAZILMAZ: butce zaten asilmis durumda.
 *  - Her secici `.sa-custom-page--` ile baslar; genel bilesenler etkilenmez.
 *
 * OZGULLUK NOTU: asagidaki kurallar iki sinifli (0,2,0) seciciler; ezdikleri
 * Tailwind yardimcilari tek sinifli (0,1,0). Ozgulluk medya sorgusundan
 * bagimsiz karsilastirildigi icin `lg:grid-cols-3` gibi kurallari
 * `!important` olmadan yenerler.
 */

/* /packs — prototip §5: sabit 3 kolon degil, auto-fill minmax(310px, 1fr).
   Paket kartlari ic listeleri tasidigi icin dar kolonda kiriliyor; prototipteki
   olcunun aynisi kullaniliyor. */
@media (min-width: 640px) {
  .sa-custom-page--packs .sa-products-items {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  }
}

/* /followers — platform cipleri satiri prototipte tek blok halinde ortali
   duruyor; pills varyanti sola yaslamayi tercih ediyor. */
.sa-custom-page--followers .sa-categories-items {
  justify-content: center;
}

/* /resellers — prototip §7 hero'sunda bento izgarasi koyu bir yuzey uzerinde
   duruyor; kartlarin arasindaki bosluk biraz daha genis. */
.sa-custom-page--resellers .sa-bento-items {
  row-gap: 1.25rem;
}