/* ============================================================
   KODRUN — ORTAK BUTON DİLİ                        2026-08-06
   ============================================================
   Sitede üç ayrı buton stili birikmişti:

     1) koyu lacivert  #0f172a  (header, "Şimdi İletişime Geçin")
     2) koyu turkuaz   #0e7490  köşeli 4px (iç sayfa butonları)
     3) camgöbeği degrade (form gönder, ürün sayfası) — tek doğru olan

   Üçüncüsü hero'daki yeni "Hemen Başla" ile aynı dilde olduğu için onu
   standart aldık. Diğer ikisi buraya çekildi.

   Bu dosya en son yüklenir; mevcut kuralları ezmek için !important
   gerekiyor (Framer'ın satır içi stilleri ve tema CSS'i aynı seçicileri
   defalarca tanımlıyor).
   ============================================================ */

:root {
    --kr-btn-zemin: linear-gradient(100deg, #20bfe5 0%, #3248f6 100%);
    --kr-btn-golge: 0 8px 22px rgba(32, 191, 229, 0.28);
    --kr-btn-golge-uzeri: 0 12px 30px rgba(32, 191, 229, 0.42);
}

/* ---------- birincil butonlar ---------- */
.nav-cta a,
.kodrun-button,
.kri-submit,
.kod-submit,
.kr-button--primary,
a:has([data-framer-name="Start Free Trial"]) {
    background: var(--kr-btn-zemin) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: var(--kr-btn-golge) !important;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

/* Köşeler: header'daki küçük buton hap kalsın, gövdedekiler yumuşak dikdörtgen.
   Önceki 4px'lik köşeler butonları "kutu" gibi gösteriyordu. */
.nav-cta a,
a:has([data-framer-name="Start Free Trial"]) {
    border-radius: 999px !important;
}

.kodrun-button,
.kri-submit,
.kod-submit,
.kr-button--primary {
    border-radius: 12px !important;
}

/* Header butonunun içinde dönen degrade halka var; halkanın ortasını kapatan
   katman koyu lacivertti ve butonu karartıyordu. Onu da degradeye çeviriyoruz
   ki halka görünsün ama dolgu açık kalsın. */
.nav-cta a::after {
    background: var(--kr-btn-zemin) !important;
}

/* ---------- üzerine gelince ---------- */
.nav-cta a:hover,
.kodrun-button:hover,
.kri-submit:hover,
.kod-submit:hover,
.kr-button--primary:hover,
a:has([data-framer-name="Start Free Trial"]):hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--kr-btn-golge-uzeri) !important;
    filter: saturate(1.08) !important;
}

.nav-cta a:hover::after {
    background: var(--kr-btn-zemin) !important;
}

/* ---------- Framer butonlarının iç metni ----------
   Framer yazı rengini satır içi değişkenle veriyor; koyu zeminde koyu metin
   kalıyordu. Değişkenin kendisini eziyoruz ki alt öğeler de beyaz olsun. */
a:has([data-framer-name="Start Free Trial"]) .framer-text,
a:has([data-framer-name="Start Free Trial"]) p {
    --framer-text-color: #ffffff !important;
    --extracted-r6o4lv: #ffffff !important;
    color: #ffffff !important;
}

/* ---------- klavye ile gezinme ----------
   Renk değişince odak halkası kayboluyordu; geri veriyoruz. */
.nav-cta a:focus-visible,
.kodrun-button:focus-visible,
.kri-submit:focus-visible,
.kod-submit:focus-visible,
.kr-button--primary:focus-visible,
a:has([data-framer-name="Start Free Trial"]):focus-visible {
    outline: 3px solid rgba(255, 255, 255, .75) !important;
    outline-offset: 2px !important;
}

/* ---------- hareketi azalt tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
    .nav-cta a,
    .kodrun-button,
    .kri-submit,
    .kod-submit,
    .kr-button--primary,
    a:has([data-framer-name="Start Free Trial"]) {
        transition: none !important;
    }
    .nav-cta a:hover,
    .kodrun-button:hover,
    .kri-submit:hover,
    .kod-submit:hover,
    .kr-button--primary:hover,
    a:has([data-framer-name="Start Free Trial"]):hover {
        transform: none !important;
    }
}


/* ---------- ikincil buton ----------
   Tamamen saydamdi ve kenarligi rgba(255,255,255,.15) idi; koyu hero zemininde
   "buton mu, yazi mi" ayirt edilemiyordu. Dolgu vermiyoruz (birincil butonla
   yarismasin) ama kenarligi ve metni belirgin hale getiriyoruz. */
.btn-secondary-hero {
    background: rgba(255, 255, 255, .07) !important;
    border: 2px solid rgba(255, 255, 255, .42) !important;
    color: #ffffff !important;
    transition: background-color .22s ease, border-color .22s ease, transform .22s ease !important;
}

.btn-secondary-hero:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .72) !important;
    transform: translateY(-2px) !important;
}

.btn-secondary-hero:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .8) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-secondary-hero { transition: none !important; }
    .btn-secondary-hero:hover { transform: none !important; }
}