/* ============================================================================
   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-*, Bootstrap card/btn).
   - Renk ve olcu degerleri dogrudan yazilmaz, token uzerinden kullanilir.
     Yeni tema yazan bu dosyayi kopyalayip yalnizca :root blogunu degistirebilmeli.

   FIYAT NOTU
   - Fiyat/indirim token'lari asagida tanimli ama modul katalogunda bugun
     karsiligi olan bir sinif YOK. Bilincli birakildi: bir urun/fiyat modulu
     eklendiginde renk kararinin temada hazir olmasi, o gun modul icine sabit
     renk yazilmasini onler.
   ============================================================================ */

: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-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;

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

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

/* --- 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. */
    .hero-module__cta,
    .cta-module .btn {
        display: block;
        width: 100%;
    }
}

/* --- Hareket azaltma ---------------------------------------------------- */
/* Bu tema yukselme ve golge kullanan tek temadir; hareket hassasiyeti olan
   kullanicida bunlar kapanir. */

@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 {
        transform: none;
    }
}

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

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

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

    .card {
        outline: 1px solid #999;
        filter: none;
    }

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