/* ============================================================================
   commerce — E-ticaret ve donusum temasi
   ============================================================================

   Kime: magaza, katalog, kampanya ve urun tanitim siteleri.
   Karakter: sicak vurgu rengi, yuvarlak kenar, dolu ve buyuk butonlar,
             kartlarda hafif yukselme. Kurumsal temada buton "devam et" der;
             burada "SATIN AL" der. Donusum bu temanin tek isidir.

   KURALLAR (corporate ile ayni)
   - Bu dosya cekirdek CSS'in (bootstrap + site.css + sablon) UZERINE yuklenir.
     Amac ezmek degil, tonu degistirmek: renk, tipografi, bosluk ve kenarlik.
   - Sayfa veya modul OZEL kural yazilmaz. Yalnizca modul katalogunun gercek
     sinif adlari hedeflenir (hero-module__*, content-module, cta-module,
     feature-*, web-commerce-*, menu-landing-*, Bootstrap card/btn).
   - Renk ve olcu degerleri dogrudan yazilmaz, token uzerinden kullanilir.
     Yeni tema yazan bu dosyayi kopyalayip yalnizca :root blogunu degistirebilmeli.

   VITRIN MODULLERI (2026-09-04)
   - Moduler katman ticaret modullerini (_CommerceModuleCore: urun izgarasi,
     urun detayi, fiyat, stok, kategori, sepet, odeme, marka hiyerarsisi)
     web-commerce.css ile getiriyor. O dosya _Layout'ta tema CSS'inden SONRA
     yuklenir ve renklerini modul kokundeki --commerce-* token'larindan alir.
     Tema bu yuzden iki katmanda calisir:
       1) :root'ta --web-* koprusu: web-commerce.css'in taban katmani ve
          web-shell.css (menu-landing marka blogu) bu token'lari
          var(--web-x, sabit) ile okur; tanimlanmadiklari icin sabit
          Bootstrap mavisine dusuyorlardi. Burada tanimlanmalari yukleme
          sirasindan bagimsizdir (custom property, kalitimla iner).
       2) data-commerce-theme="trust" kapsaminda --commerce-* esleme: "trust"
          modulun VARSAYILANIDIR, yani kullanicinin secmedigi vitrin. Site
          temasi yalniz o durumu sahiplenir. editorial / modular / brand
          kullanicinin CRM'de bilerek sectigi vitrindir; hero overlay
          kuralindaki gibi tema onlari EZMEZ.
     Yukleme sirasi geregi dogrudan renk yazan her kural web-commerce.css'in
     ilgili kuralindan daha yuksek ozgullukte olmak zorundadir; bu yuzden
     vitrin kurallari .web-commerce-module[data-commerce-theme="trust"]
     onekiyle yazilir. Onek kaldirilirsa kural sessizce ise yaramaz.

   FIYAT NOTU
   - Fiyat token'lari artik web-commerce-price ve kart fiyatinda kullaniliyor.
     --kt-price-old icin bugun de bir isaretleme yok (eski fiyat / ustu cizili
     satir modulde basilmiyor); token bilincli tutuluyor ki gun geldiginde
     modul icine sabit renk yazilmasin.
   ============================================================================ */

:root {
    /* Marka — sicak turuncu-kirmizi. Donusum yuzeyinde vurgu rengi eylemi
       tasir; paletteki tek yuksek doygunluklu deger odur ve yalniz butonda,
       fiyatta ve rozette gorunur.

       TON SECIMI: ilk deger #e2542a idi. Uzerindeki beyaz buton metni 3.79:1
       cikiyordu (harness'ta olculdu 2026-08-29), yani AA esiginin altinda.
       Vurgu bir tik koyulastirildi; ayni sicak kimlik kaliyor ama butun beyaz
       metinli yuzeyler (buton, kampanya seridi) esigi geciyor. Parlak ton
       tamamen birakilmadi: --kt-accent-bright yalniz DEKORATIF yerlerde
       (hover kenarligi, odak izi) kullanilir, uzerine metin YAZILMAZ. */
    --kt-accent: #c1401b;
    --kt-accent-strong: #9d3315;
    --kt-accent-bright: #e2542a;
    --kt-accent-soft: #fdeee8;
    --kt-ink: #1b1b1f;

    /* Metin */
    --kt-text: #2b2b31;
    --kt-text-soft: #6a6a75;
    --kt-heading: var(--kt-ink);

    /* Yuzey */
    --kt-surface: #ffffff;
    --kt-surface-alt: #fff6f2;
    --kt-border: #ece7e4;

    /* Fiyat — bkz. yukaridaki FIYAT NOTU. */
    --kt-price: #1b1b1f;
    --kt-price-old: #9a9aa3;
    --kt-discount: #d92d20;

    /* Stok durumu — ikisi de uzerine yazildigi acik zeminle >= 4.5:1
       (harness'ta olculdu 2026-09-04). Kirmizi ton indirimle karismasin
       diye --kt-discount'tan ayri tutuldu: indirim iyi haberdir, stok yok
       kotu; ayni renk iki anlam tasiyamaz. */
    --kt-stock-in: #14532d;
    --kt-stock-in-bg: #e3f5e8;
    --kt-stock-out: #7f1d1d;
    --kt-stock-out-bg: #fdecea;

    /* Dikey ritim — kurumsaldan sik, trading'den genis. Vitrinde urun
       gormek isteyen ziyaretci bosluk degil SIRADAKI KARTI arar. */
    --kt-section-y: 4rem;
    --kt-block-gap: 2rem;

    /* Tipografi */
    --kt-heading-weight: 700;
    --kt-heading-tracking: -0.02em;
    --kt-body-line: 1.65;
    --kt-radius: 10px;

    /* --- --web-* koprusu (bkz. VITRIN MODULLERI) ---------------------------
       web-commerce.css taban katmani ve web-shell.css bu adlari okur. Deger
       tekrar yazilmaz, --kt-* token'ina baglanir; :root'u degistiren tema
       yazari bu blogu elle guncellemek zorunda kalmaz. */
    --web-primary: var(--kt-accent);
    --web-surface: var(--kt-surface);
    --web-border: var(--kt-border);
    --web-text: var(--kt-text);
    --web-muted: var(--kt-text-soft);
    --web-radius: var(--kt-radius);
}

/* --- Taban -------------------------------------------------------------- */

body {
    color: var(--kt-text);
    line-height: var(--kt-body-line);
    background-color: var(--kt-surface);
}

h1, h2, h3, h4, h5, h6,
.main_title,
.main_title h2 {
    color: var(--kt-heading);
    font-weight: var(--kt-heading-weight);
    letter-spacing: var(--kt-heading-tracking);
    line-height: 1.22;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.35vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }

p, .lead, .content-body {
    color: var(--kt-text);
}

.lead,
.main_description {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--kt-text-soft);
}

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

a:hover,
a:focus-visible {
    color: var(--kt-accent-strong);
    text-decoration: underline;
}

a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: 2px;
}

/* --- Dikey ritim -------------------------------------------------------- */

.content-module,
.cta-module,
.hero-module__inner {
    padding-top: var(--kt-section-y);
    padding-bottom: var(--kt-section-y);
}

.content-module + .content-module {
    padding-top: 0;
}

.content-body > * + * {
    margin-top: var(--kt-block-gap);
}

.page_title {
    background-color: var(--kt-surface-alt);
    border-bottom: 1px solid var(--kt-border);
}

/* --- Hero --------------------------------------------------------------- */
/* Overlay BILINCLI olarak ezilmedi: _HeroModule overlay rengini ve opakligini
   satir ici --hero-overlay degiskeniyle basiyor, yani deger CRM'de kullanicinin
   sectigi degerdir. Kampanya gorseli genelde renkli oldugu icin karartmayi
   sitenin sahibi ayarlamak ister; tema onun yerine karar vermez. */

.hero-module__content {
    max-width: 44rem;
}

.hero-module__title {
    color: #fff;
}

.hero-module__subtitle {
    color: rgba(255, 255, 255, .9);
    font-size: 1.125rem;
}

.hero-module__cta {
    margin-top: 1.85rem;
}

/* --- Butonlar ----------------------------------------------------------- */
/* Donusum butonu bu temanin en gorunur ogesidir: dolu, buyuk, yuvarlak,
   ustune gelince hafif yukselen. */

.btn {
    border-radius: var(--kt-radius);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .78rem 1.7rem;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn-primary {
    background-color: var(--kt-accent);
    border-color: var(--kt-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--kt-accent-strong);
    border-color: var(--kt-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--kt-accent) 32%, transparent);
}

.btn-lg {
    font-size: 1.05rem;
    padding: .9rem 2rem;
}

.hero-module__cta--secondary {
    margin-left: .75rem;
    background: transparent;
    border-color: color-mix(in srgb, #fff 70%, transparent);
    color: #fff;
}

.hero-module__cta--secondary:hover,
.hero-module__cta--secondary:focus-visible {
    background: color-mix(in srgb, #fff 16%, transparent);
    border-color: #fff;
    color: #fff;
}

@media (max-width: 575.98px) {
    /* Dar ekranda butonlar alt alta; yan yana sigmiyor. */
    .hero-module__cta--secondary {
        margin-left: 0;
        margin-top: .75rem;
    }
}

/* --- Kartlar (vitrin) --------------------------------------------------- */
/* _FeaturesModule kartlari markup'ta border-0 ve shadow-sm tasiyor; ikisi de
   Bootstrap utility'si oldugu icin !important'li ve temanin border/box-shadow
   bildirimini yutuyor. Kenarlik bu yuzden border yerine OUTLINE ile veriliyor:
   hicbir utility outline'a dokunmaz. Bu temada shadow-sm ISTENEN yondedir,
   ustune ek golge filter ile veriliyor ki utility ile yarismasin. */

.card {
    background-color: var(--kt-surface);
    border-radius: var(--kt-radius);
    outline: 1px solid var(--kt-border);
    outline-offset: -1px;
    transition: outline-color .18s ease, transform .18s ease, filter .18s ease;
}

.card-body {
    padding: 1.6rem;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .55rem;
}

.card-text {
    color: var(--kt-text-soft);
    margin-bottom: 0;
}

/* Ikon rengi markup'ta text-primary; Bootstrap mavisi bu paletin disinda. */
.feature-icon .text-primary {
    color: var(--kt-accent) !important;
}

.feature-image {
    /* Urun gorselleri farkli en-boy oranlarinda. Vitrin kartlari ayni hizada
       durmali; gorsel kirpilmadan sigar. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

.feature-image img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Rozet bu temada "kampanya/indirim" anlamini tasir: dolu, yuksek kontrast. */
.feature-badge {
    background-color: var(--kt-discount);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .03em;
    padding: .32rem .8rem;
    text-transform: uppercase;
}

.feature-card--linked {
    cursor: pointer;
}

.feature-card--linked:hover {
    /* Dekoratif: uzerine metin yazilmadigi icin parlak ton burada guvenli. */
    outline-color: color-mix(in srgb, var(--kt-accent-bright) 55%, transparent);
    transform: translateY(-4px);
    filter: drop-shadow(0 10px 18px rgba(27, 27, 31, .12));
}

/* stretched-link odaklandiginda kartin tamami gorunur olmali; aksi halde
   klavyeyle gezen kullanici nerede oldugunu anlayamaz. */
.feature-card--linked:focus-within {
    outline: 2px solid var(--kt-accent);
    outline-offset: 2px;
    transform: translateY(-4px);
}

/* --- CTA seridi --------------------------------------------------------- */
/* _CtaModule markup'i text-white tasiyor ve zemini yalniz kullanici bir renk
   sectiyse satir ici geliyor. Renk secilmediginde temanin verdigi zemin KOYU
   olmak zorundadir; acik bir zemin verilirse beyaz metin gorunmez olur.
   Bu temada serit kampanya bandidir: vurgu renginde ve dikkat cekicidir.
   Vurgu tonu zaten beyaz metne gore esigi gececek sekilde secildi (bkz. :root
   icindeki TON SECIMI notu), bu yuzden serit dogrudan vurgu rengini alir. */

.cta-module {
    background-color: var(--kt-accent);
}

.cta-module h2 {
    margin-bottom: .75rem;
    color: #fff;
}

.cta-module .lead {
    color: rgba(255, 255, 255, .9);
}

.cta-module .btn-light {
    color: var(--kt-accent-strong);
    border-color: #fff;
    font-weight: 700;
}

.cta-module .btn-light:hover,
.cta-module .btn-light:focus-visible {
    color: var(--kt-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* --- CTA: acik zemin durumu ------------------------------------------- */
/* _CtaModule zeminin parlakligini olcup metin rengini kendisi seciyor: acik
   zeminde "text-white" yerine "text-dark" basiyor ve seride
   cta-module--on-light sinifini ekliyor. Tema o durumda kendi beyazini
   DAYATMAMALI, yoksa acik zemin uzerinde beyaz metin kalir.

   Renk sabit yazilmiyor, "inherit" kullaniliyor: baslik ve aciklama seridin
   kendi rengini devralir. Boylece kural koyu temalarda da dogru calisir -
   oralarda --kt-heading beyaza yakindir ve acik zeminde ise yaramazdi. */

.cta-module--on-light h2,
.cta-module--on-light .lead {
    color: inherit;
}

/* --- Sayfa basligi / breadcrumb ----------------------------------------- */
/* NEDEN VAR: _HeaderBreadcrumbModule <ol class="breadcrumb"> icine DUZ <li>
   basiyor; Bootstrap ayraci .breadcrumb-item::before ile tanimli oldugu icin
   hic uygulanmiyor ve ogeler bitisik cikiyor. Ayrac modul markup'inda degil
   TEMADA tanimlandi; ayni markup butun tenant temalarinda kullaniliyor ve
   markup'i degistirmek kendi stilini kurmus temalari kirardi (ayni gerekce
   corporate temasinda da yazili). */

.page_title .breadcrumb {
    /* Bootstrap 4 .breadcrumb'a #e9ecef zemin veriyor; temanin sicak seridini
       ortasindan kesen gri bir hap birakiyor. */
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_title .breadcrumb li + li::before {
    content: "/";
    padding: 0 .5rem;
    opacity: .55;
}

.page_title .breadcrumb li.active {
    font-weight: 600;
}

/* --- Vitrin modulleri (web-commerce-*) ---------------------------------- */
/* Bkz. dosya basindaki VITRIN MODULLERI notu. Tum kurallar varsayilan
   ("trust") vitrinle sinirli ve web-commerce.css'i gecmek icin onekli.
   Yerlesim (grid, container query, kart iskeleti) web-commerce.css'te kalir;
   burada yalniz renk, olcu ve kenarlik degisir. */

.web-commerce-module[data-commerce-theme="trust"] {
    --commerce-accent: var(--kt-accent);
    --commerce-accent-strong: var(--kt-accent-strong);
    --commerce-accent-soft: var(--kt-accent-soft);
    --commerce-canvas: var(--kt-surface-alt);
    --commerce-card: var(--kt-surface);
    --commerce-border: var(--kt-border);
    --commerce-heading: var(--kt-heading);
    --commerce-muted: var(--kt-text-soft);
    --commerce-radius: var(--kt-radius);
    border-radius: var(--kt-radius);
}

/* Kart: FeaturesModule kartiyla ayni dil - ince kenarlik, hover'da yukselme.
   web-commerce.css hover'da vurgu rengine caliyor; burada sicak kenarlik. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-card:hover {
    outline: 1px solid color-mix(in srgb, var(--kt-accent-bright) 55%, transparent);
    outline-offset: -1px;
    box-shadow: 0 10px 18px rgba(27, 27, 31, .12);
}

/* Urun basligi ve fiyat: fiyat token'i burada ilk kez gercek bir yuzeye
   baglanir (bkz. FIYAT NOTU). tabular-nums web-commerce.css'ten geliyor. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-card strong,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-detail strong,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-price {
    color: var(--kt-price);
    font-weight: var(--kt-heading-weight);
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-price {
    background: var(--kt-surface);
    border: 1px solid var(--kt-border);
}

/* Deneme suresi: bilgi rozetidir, kampanya rozetiyle (feature-badge)
   karismasin diye dolu degil yumusak zeminli. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-trial {
    /* Kart govdesi grid; justify-self olmadan rozet satiri boydan boya
       kaplayip buton gibi gorunuyor (harness'ta goruldu 2026-09-04). */
    justify-self: start;
    background: var(--kt-accent-soft);
    border-radius: 999px;
    color: var(--kt-accent-strong);
    padding: .3rem .7rem;
}

/* Birincil eylem (sepete ekle, guncelle, odemeye gec): .btn-primary ile ayni
   olcu ve yukselme; kullanici iki farkli buton dili gormemeli. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-card button,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-detail button,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions a,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart button,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-checkout-link {
    border-radius: var(--kt-radius);
    font-weight: 600;
    letter-spacing: .01em;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-card button:focus-visible,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-detail button:focus-visible,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions a:focus-visible,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart button:focus-visible,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-checkout-link:focus-visible,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-categories a:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: 2px;
}

/* Tek birincil eylem kurali: web-commerce.css yalniz "a + a" baglantilarini
   ikincil yapar; "Sepete ekle" butonunun hemen ardindaki ilk baglanti (demo,
   teklif, satisla gorus) dolu buton gibi cikar ve kartta iki birincil buton
   ust uste durur. Donusum temasinda birincil TEKTIR: buton varsa onu izleyen
   her baglanti ikincildir. Buton yoksa (satin alinamayan urun) taban kural
   gecerli kalir ve ilk baglanti birincil olur - kartta yine tek dolu buton. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions button ~ a {
    background: transparent;
    border: 1px solid var(--kt-border);
    color: var(--kt-heading);
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions button ~ a:hover,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions button ~ a:focus-visible {
    background: var(--kt-accent-soft);
    border-color: var(--kt-accent);
    color: var(--kt-accent-strong);
    box-shadow: none;
}

/* Sepetten cikar: yikici eylem birincil buton gibi dolu olmamali; ikincil
   (kenarlikli) dil. Hover'da kirmizi degil, sicak vurgu - satir zaten
   silinecegini metinle soyluyor. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart button[data-commerce-remove] {
    background: transparent;
    border: 1px solid var(--kt-border);
    color: var(--kt-text);
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart button[data-commerce-remove]:hover,
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart button[data-commerce-remove]:focus-visible {
    background: var(--kt-accent-soft);
    border-color: var(--kt-accent);
    color: var(--kt-accent-strong);
    box-shadow: none;
}

/* Sepet satiri ve toplamlar: genel toplam satiri gorsel olarak ayrilir;
   odeme sayfasinda da ayni kural (son <strong> genel toplamdir). */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__line {
    border-bottom-color: var(--kt-border);
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__line input {
    border: 1px solid var(--kt-border);
    border-radius: var(--kt-radius);
    padding: .4rem .6rem;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__line input:focus-visible {
    border-color: var(--kt-accent);
    outline: 2px solid color-mix(in srgb, var(--kt-accent) 35%, transparent);
    outline-offset: 1px;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__totals dt {
    color: var(--kt-text-soft);
    font-weight: 500;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__totals > div:last-child {
    border-top: 1px solid var(--kt-border);
    color: var(--kt-price);
    font-size: 1.15rem;
    font-weight: var(--kt-heading-weight);
    padding-top: .5rem;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-cart__totals > div:last-child dt {
    color: var(--kt-price);
    font-weight: var(--kt-heading-weight);
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-checkout > strong {
    color: var(--kt-price);
    font-size: 1.35rem;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-checkout li {
    border-bottom: 1px solid var(--kt-border);
    padding: .45rem 0;
}

/* Kategori haplari: hover'da yumusak vurgu zemini, secili olan yok (modul
   aktif kategori basmiyor). */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-categories a {
    border-radius: 999px;
    font-weight: 600;
}

/* Stok durumu: web-commerce.css bu hapa renk VERMIYOR (yalniz olcu). Anlam
   renkle tasindigi icin metin de var; renk tek basina yeterli sayilmaz. */
.web-commerce-stock {
    font-size: .85rem;
    font-weight: 600;
}

.web-commerce-stock[data-available="true"] {
    background: var(--kt-stock-in-bg);
    color: var(--kt-stock-in);
}

.web-commerce-stock[data-available="false"] {
    background: var(--kt-stock-out-bg);
    color: var(--kt-stock-out);
}

/* Bos durum ve saglama siniri: sessiz, kartla ayni yuzey. Saglama siniri
   ("odeme icin CRM komutu bagli degil") site sahibine yonelik bir mesajdir,
   ziyaretciye kampanya gibi bagirmamali. */
.web-commerce-module[data-commerce-theme="trust"] .web-commerce-empty {
    color: var(--kt-text-soft);
    padding: var(--kt-block-gap) 0;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-command-boundary {
    border-style: dashed;
}

.web-commerce-module[data-commerce-theme="trust"] .web-commerce-command-boundary p {
    color: var(--kt-text-soft);
    margin: 0;
}

/* --- Dar ekran ---------------------------------------------------------- */
/* Vitrin trafiginin buyuk kismi telefondan gelir; bu blok bu temada
   "kucuk ekran uyarlamasi" degil ASIL yerlesimdir. */

@media (max-width: 767.98px) {
    :root {
        --kt-section-y: 2.75rem;
        --kt-block-gap: 1.5rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    .feature-image {
        height: 96px;
    }

    /* Donusum butonu dar ekranda tam genislik: bas parmakla isabet alani.
       Vitrin modulunde de ayni kural: sepete ekle ve odemeye gec. */
    .hero-module__cta,
    .cta-module .btn,
    .web-commerce-module[data-commerce-theme="trust"] .web-commerce-card button,
    .web-commerce-module[data-commerce-theme="trust"] .web-commerce-detail button,
    .web-commerce-module[data-commerce-theme="trust"] .web-commerce-checkout-link {
        display: block;
        width: 100%;
    }

    .web-commerce-module[data-commerce-theme="trust"] .web-commerce-actions {
        display: grid;
    }
}

/* --- Hareket azaltma ---------------------------------------------------- */
/* Bu tema yukselme ve golge kullanan tek temadir; hareket hassasiyeti olan
   kullanicida bunlar kapanir. web-commerce.css kendi gecislerini zaten
   kapatiyor; burada yalniz temanin ekledigi yukselme sifirlanir. */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .card,
    .feature-card--linked {
        transition: none;
    }

    .btn-primary:hover,
    .feature-card--linked:hover,
    .feature-card--linked:focus-within,
    .cta-module .btn-light:hover,
    .web-commerce-module[data-commerce-theme="trust"] .web-commerce-card:hover {
        transform: none;
    }
}

/* --- Baski -------------------------------------------------------------- */

@media print {
    .hero-module__overlay,
    .cta-module,
    .page_title,
    .web-commerce-module {
        background: none;
    }

    .cta-module h2,
    .cta-module .lead {
        color: #000;
    }

    .card,
    .web-commerce-card,
    .web-commerce-cart,
    .web-commerce-checkout {
        outline: 1px solid #999;
        filter: none;
        box-shadow: none;
    }

    /* Sepet/odeme ciktisinda eylem butonlari anlamsiz; fiyat ve satirlar kalir. */
    .web-commerce-actions,
    .web-commerce-cart button,
    .web-commerce-checkout-link,
    .web-commerce-feedback {
        display: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}