/**
 * KS Buttons — project-wide button component.
 *
 * Gives every KS UI button (side cart, KS Confirm dialog, and anywhere else you
 * add the classes) one consistent identity: the primary variant is the brand
 * fill used by the store's add-to-cart / checkout button, the secondary variant
 * is a matching neutral outline of the same size and type.
 *
 * Usage:  <a class="ks-btn ks-btn--primary ks-btn--block">…</a>
 *   --primary   → brand fill (checkout / confirm) — the add-to-cart look
 *   --secondary → neutral outline, same size/type (view cart / cancel)
 *   --block     → full width (for stacked layouts)
 *
 * Colour/shape identity comes from the core tokens in ks-tokens.css (loaded
 * first), so the whole plugin is managed from ONE place. The values below only
 * *alias* those core tokens — override --ks-primary / --ks-radius-pill / etc. in
 * ks-tokens.css (or Additional CSS) and every KS button follows.
 *
 * @package KS_Variation_Manager
 * @since   2.11.0
 */

/* 🚨 `:root, body` — ks-tokens.css'in AYNI dersi, burada da yaşandı (24 Ağu
   2026): Elementor global'leri `body.elementor-kit-639`ta tanımlı, `html`de
   YOK. Bu blok yalnız `:root`ta dururken `--ks-btn-accent`, `--ks-accent`i
   html seviyesinde çözüyordu ve zincir sessizce hex yedeğine (#da6900)
   düşüyordu — oysa kitteki secondary #F27A1A. Ölçüldü: "Tekrar Satın Al"
   butonu operatörün istediği secondary yerine bayat turuncuyu basıyordu.
   `body` bildirimi zinciri kitin GÖRÜNDÜĞÜ yerde yeniden çözer. */
:root,
body {
    /* Shape/size come from ks-tokens.css (--ks-btn-radius / -pad-* / -font-size
       / -border-width / -letter-spacing). Only the colour identity lives here. */

    /* Primary = the brand fill (core --ks-primary → Elementor global). */
    --ks-btn-bg: var(--ks-primary, var(--e-global-color-primary, #d35400));
    --ks-btn-color: var(--ks-primary-contrast, #fff);
    --ks-btn-accent: var(--ks-accent, #da6900);

    /* Secondary = neutral outline, de-emphasised against the primary. */
    --ks-btn-secondary-border: #dcdcdc;
    --ks-btn-secondary-color: #333;
    --ks-btn-secondary-hover-bg: #f3f3f3;
}

.ks-btn {
    /* Reset so an <a> (side cart) and a <button> (dialog) render identically,
       and theme/normalize button rules (uppercase, min-height, etc.) can't leak
       a size/label difference between the two. */
    box-sizing: border-box;
    margin: 0;
    min-height: var(--ks-btn-min-height, 46px);
    height: auto;
    font-family: inherit;
    text-transform: var(--ks-btn-text-transform, capitalize);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Extra TOP padding = optical nudge, dropping the label to dead centre
       (see --ks-btn-optical-nudge). */
    padding: calc(var(--ks-btn-pad-y) + var(--ks-btn-optical-nudge, 0px))
             var(--ks-btn-pad-x) var(--ks-btn-pad-y);
    border: var(--ks-btn-border-width) solid transparent;
    border-radius: var(--ks-btn-radius);
    font-size: var(--ks-btn-font-size);
    font-weight: var(--ks-btn-font-weight, 600);
    letter-spacing: var(--ks-btn-letter-spacing);
    line-height: var(--ks-btn-line-height, 1.4);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.ks-btn:hover,
.ks-btn:focus {
    text-decoration: none;
}

.ks-btn:focus-visible {
    outline: 2px solid var(--ks-btn-bg);
    outline-offset: 2px;
}

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

/* Small — compact cut of the same button for tight spots (side-cart actions).
 * Same shape/behaviour, reduced height, padding and type size. */
.ks-btn--sm {
    min-height: 38px;
    padding: calc(6px + var(--ks-btn-optical-nudge, 0px)) 16px 6px;
    font-size: .9em;
    letter-spacing: 0.2px;
}

/* 🚨 HER RENK VARYANTI `:visited` DE TAŞIR (24 Ağu 2026, operatör bildirdi:
   "bazı Detaylar butonlarının yazı rengi farklı"). Botiga'nın `a:visited{color:#212121}`
   kuralı (0,1,1) düz `.ks-btn--primary`i (0,1,0) yeniyor → müşterinin DAHA ÖNCE
   AÇTIĞI sayfaya giden buton etiketini koyu griye çeviriyor ve koyu zeminde
   okunmaz oluyordu. Semptom kartlara göre DEĞİŞİR (biri açılmış, biri açılmamış)
   — bu yüzden "rastgele" görünür; CSS'i değil TARAYICI GEÇMİŞİNİ takip eder. */

/* Extra small — ürün kartındaki "Sepete Ekle" pill'iyle AYNI KUTU
 * (operatör, 24 Ağu 2026: hesap sipariş kartındaki butonlar loop grid'deki
 * küçük butonla aynı boyda olsun; renkleri farklı olabilir).
 *
 * 🚨 Sayılar ks-loop-card.css'teki `.ks-loop-card .ks-loop-cart .button.ks-loop-atc`
 * reçetesinden geliyor — 32px / 0.8em / 0 14px / 100px. Biri değişirse ötekini
 * de güncelle; ikisi aynı boy olsun diye eşitlendiler.
 * 🚨 `0.8em` EBEVEYNİN puntosuna göre (16px → 12.8px), loop kartındaki gibi.
 * 🚨 2px ÜST DOLGU = optik ortalama, keyfi değil ÖLÇÜLDÜ (operatör bildirdi:
 *    "etiket biraz üstte duruyor", 24 Ağu 2026). Butonun 6x büyütülmüş
 *    ekran görüntüsünde mürekkep satır satır sayıldı: cap üstü 10.17px,
 *    baseline 20.0px → üstte 10.17px, altta 12.0px boşluk kalıyordu; cap
 *    bloğu 1.83px YUKARIDA.
 *    🚨 Gözle "ortalanmış" görünmemesinin sebebi `align-items:center`in
 *    SATIR KUTUSUNU ortalaması: iniş çizgisi (Detaylar'daki "y") kutuya
 *    dâhil, göz ise cap↔baseline bloğuna bakıyor. Mürekkebin tamamı
 *    ölçülürse "0.5px aşağıda" çıkar ve yanlış sonuca götürür — iniş
 *    çizgisi olan etiketlerde profil sayımı şart.
 *    🚨 Dolgu, ortalamayı 1:1 KAYDIRMAZ: içerik kutusunun hem tepesini
 *    indirir hem boyunu kısaltır, yani 2px dolgu etiketi 1px indirir.
 *    Yükseklik değişmez (17.92 + 2 < 32, `min-height` yönetiyor). */
.ks-btn--xs {
    min-height: 32px;
    padding: 2px 14px 0;
    border-radius: 100px;
    font-size: 0.8em;
    letter-spacing: 0.3px;
}

/* Primary — brand fill, the add-to-cart look. */
.ks-btn--primary,
.ks-btn--primary:visited {
    background: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color: #fff;
}

.ks-btn--primary:hover {
    opacity: 0.9;
    color: var(--ks-btn-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Secondary — same size/type, neutral outline. */
.ks-btn--secondary,
.ks-btn--secondary:visited {
    background: transparent;
    border-color: var(--ks-btn-secondary-border);
    color: var(--ks-btn-secondary-color);
}

.ks-btn--secondary:hover {
    background: var(--ks-btn-secondary-hover-bg);
    color: var(--ks-btn-secondary-color);
}

/* Primary-outline — the "stroke version" of the primary: brand border + text on
   a transparent field, filling with the brand on hover. Pairs with --primary
   for a solid/stroke CTA duo (the notify / buy-now language). */
.ks-btn--primary-outline,
.ks-btn--primary-outline:visited {
    background: transparent;
    border-color: var(--ks-btn-bg);
    border-width: 2px;
    color: var(--ks-btn-bg);
}

.ks-btn--primary-outline:hover,
.ks-btn--primary-outline:focus {
    background: var(--ks-btn-bg);
    color: var(--ks-btn-color);
}

/* 🚨 İSİM TUZAĞI — ÜÇ "accent" var ve İKİSİ AYRI RENK:
     `--ks-btn-accent`     → `--ks-accent` → Elementor **secondary** (#F27A1A)
     `--accent-outline`    → o rengin çizgili hâli
     `--accent-solid`      → o rengin DOLU hâli
     `--kit-accent`        → Elementor **accent** (#B84F0A) — BAŞKA bir global
   Yeni bir varyant eklerken hangi global'e bağlandığını açıkça yaz. */

/* Kit-accent — Elementor kitindeki `accent` (#B84F0A) dolu. Teşekkür
   sayfasındaki "Ödeme bildirimi" butonunun rengi (operatör, 24 Ağu 2026:
   hesap kartındaki küçük kardeşi onunla aynı görünsün).

   🚨 `--ks-btn-accent` üzerinden GİTMEZ: o token Elementor SECONDARY'sine
   bağlı, bu buton ACCENT istiyor.
   🚨 Hover'da renk DEĞİŞMEZ: teşekkür sayfasındaki buton da öyle (ölçüldü —
   Elementor kuralı hover'da yine `--e-global-color-accent` veriyor). İki ekran
   arasında "aynı buton" hissi renkle kuruluyor, uydurma bir hover onu bozar. */
.ks-btn--kit-accent,
.ks-btn--kit-accent:visited,
.ks-btn--kit-accent:hover,
.ks-btn--kit-accent:focus {
    background: var(--e-global-color-accent, #b84f0a);
    border-color: var(--e-global-color-accent, #b84f0a);
    color: #fff;
}

/* Accent-solid — `--accent-outline`ın DOLU ikizi: Elementor SECONDARY zemin +
   beyaz etiket (operatör, 24 Ağu: "Tekrar Satın Al" çizgili değil dolu olsun).
   Hover `--primary` ile aynı dilde: renk korunur, hafif saydamlık + gölge. */
.ks-btn--accent-solid,
.ks-btn--accent-solid:visited {
    background: var(--ks-btn-accent);
    border-color: var(--ks-btn-accent);
    color: var(--ks-btn-color);
}

.ks-btn--accent-solid:hover,
.ks-btn--accent-solid:focus {
    opacity: 0.9;
    color: var(--ks-btn-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Accent-outline — the "Hemen Satın Al" look: accent (brand orange) border +
   text on a transparent field, filling accent with a white label on hover. */
.ks-btn--accent-outline,
.ks-btn--accent-outline:visited {
    background: transparent;
    border-color: var(--ks-btn-accent);
    border-width: 2px;
    color: var(--ks-btn-accent);
}

.ks-btn--accent-outline:hover,
.ks-btn--accent-outline:focus {
    background: var(--ks-btn-accent);
    color: var(--ks-btn-color);
}

/* Danger-outline — yıkıcı eylemin stroke hâli (hesap silme talebi). Dolgu
   DEĞİL: bu butonun işi dikkat çekmek, davet etmek değil; onay penceresi
   (KSConfirm danger) zaten arkasında duruyor. */
.ks-btn--danger-outline,
.ks-btn--danger-outline:visited {
    background: transparent;
    border-color: var(--ks-danger, #c8321f);
    border-width: 2px;
    color: var(--ks-danger, #c8321f);
}

.ks-btn--danger-outline:hover,
.ks-btn--danger-outline:focus {
    background: var(--ks-danger, #c8321f);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
 *  KS Field — project-wide input/select/textarea component.
 *
 *  Add the class (or target it from a component sheet) to get the one shared
 *  field look: rounded, hairline border, brand focus ring. Managed entirely
 *  from ks-tokens.css (--ks-field-*).
 * ───────────────────────────────────────────────────────────────────────── */
.ks-field {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: var(--ks-field-pad-y) var(--ks-field-pad-x);
    border: var(--ks-field-border-width) solid var(--ks-field-border-color);
    border-radius: var(--ks-field-radius);
    background: var(--ks-field-bg);
    color: var(--ks-ink);
    font-family: inherit;
    font-size: var(--ks-field-font-size);
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ks-field:focus {
    border-color: var(--ks-field-focus-border);
    box-shadow: 0 0 0 3px var(--ks-field-focus-ring);
    outline: none;
}

.ks-field::placeholder {
    color: #9a9a9a;
}


/* ═══════════════ Yükleniyor — spinner İKONUN YERİNE ═══════════════
 *
 * Başka bir sayfaya götüren butonda tık ile yeni sayfanın gelmesi arasında ölü
 * bir an var; müşteri "tıkladım mı" diye ikinci kez basıyor. `is-loading` o
 * boşluğu doldurur ve butonu kilitler.
 *
 * 🚨 Spinner ikonun KENDİ KUTUSUNA çizilir (frontend.css'teki `.ks-vm-icon-swap`
 * dersinin aynısı): kutu boyutu değişmediği için etiket yerinden oynamaz.
 * Phosphor glyph'i `::before` ile basıyor — onu GİZLEYİP `::after`a spinner
 * çiziyoruz, böylece `currentColor` hâlâ butonun rengi.
 * 🚨 İkonsuz butonda spinner etiketin SOLUNA girer; `:has()` ikisini ayırır.
 * 🚨 Sınıfı yalnız GERÇEKTEN gezinen/çalışan butona ver: hiçbir yere gitmeyen
 *    bir butonda dönen çark yalan söyler. */
.ks-btn.is-loading {
    pointer-events: none;
    cursor: progress;
}

.ks-btn.is-loading > i {
    position: relative;
}

.ks-btn.is-loading > i::before {
    visibility: hidden;
}

.ks-btn.is-loading > i::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: ks-btn-spin 0.6s linear infinite;
}

.ks-btn.is-loading:not(:has(> i))::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: ks-btn-spin 0.6s linear infinite;
}

@keyframes ks-btn-spin {
    to { transform: rotate(360deg); }
}