/* ============================================================
   CvLaunch — Kanonik UI Bileşen Sistemi (tasarım dili tek kaynak)
   Her iki layout (_Layout + _DashboardLayout) tarafından yüklenir.
   Amaç: sayfa-özel buton/kart/input sınıflarını tek standarda bağlamak.
   Renkler daima token'lardan gelir (bkz layout :root). Sabit hex YOK.
   ============================================================ */

:root {
    /* Kanonik birincil gradyan — tüm "primary" butonlar bunu kullanır.
       Landing "Mürekkep İndigo" paleti: primary #5B47E0 → accent #9B6BFF. */
    --grad-primary: linear-gradient(135deg, #5B47E0, #9B6BFF);
    --btn-radius: 10px;
    --btn-pad-y: 12px;
    --btn-pad-x: 22px;
    --btn-font: 600 0.95rem/1.2 'Inter', system-ui, sans-serif;
    --focus-ring: 0 0 0 3px var(--pri-light);
}

/* ── Hareket azaltma tercihi (a11y / WCAG 2.3.3) ──
   Kullanıcı işletim sisteminde "hareketi azalt" seçtiyse sonsuz/dekoratif
   animasyonlar (marquee, pulse, dönen spinner) nötrlenir. Kısa geçişlere
   (transition) dokunulmaz — işlevsel UI bozulmasın. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ── Skip-to-content linki (a11y / WCAG 2.4.1) ──
   Klavye kullanıcısı Tab'a basınca görünür; fare/dokunmada gizli kalır.
   Hedef: her iki layout'taki <main id="main-content">. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 4000;
    background: var(--pri, #5B47E0);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--btn-radius) var(--btn-radius);
    font: var(--btn-font);
    text-decoration: none;
    box-shadow: var(--sh-md, 0 4px 20px rgba(0,0,0,.35));
    transition: top .15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ── Temel buton ── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    font: var(--btn-font);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .15s ease, color .18s ease, border-color .18s ease;
    -webkit-user-select: none;
    user-select: none;
}
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Klavye erişilebilirliği — her varyantta tutarlı focus halkası */
.ui-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Birincil (mor gradyan) ── */
.ui-btn--primary {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 4px 15px rgba(124, 58, 237, .3);
}
.ui-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124, 58, 237, .42); color: #fff; }
.ui-btn--primary:active { transform: translateY(0); }

/* ── İkincil / hayalet ── */
.ui-btn--ghost {
    background: transparent;
    color: var(--txt2, var(--text-muted));
    border-color: var(--border, var(--border-color));
}
.ui-btn--ghost:hover { background: var(--pri-light); color: var(--txt, var(--text-main)); border-color: var(--pri); }

/* ── Tehlike ── */
.ui-btn--danger {
    background: transparent;
    color: var(--danger);
    border-color: rgba(239, 68, 68, .25);
}
.ui-btn--danger:hover { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .45); }

/* ── Değişkenler ── */
.ui-btn--block { width: 100%; }
.ui-btn--sm { padding: 8px 14px; font-size: .85rem; }
.ui-btn--lg { padding: 14px 28px; font-size: 1rem; }

/* ── Kanonik form girişi ── */
.ui-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surf2);
    border: 1px solid var(--border, var(--border-color));
    color: var(--txt, var(--text-main));
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: border-color .18s, box-shadow .18s;
}
.ui-input::placeholder { color: var(--txt3); }
.ui-input:focus { outline: none; border-color: var(--pri); box-shadow: var(--focus-ring); }

/* ── Mobil dokunma hedefleri + iOS odak-zoom önlemi ──
   Küçük buton varyantları dokunmada en az ~40px olmalı (Apple/Google ~44px hedefi).
   iOS Safari, font-size < 16px olan input'a odaklanınca sayfayı ZOOM'lar → 16px'e çıkar. */
@media (max-width: 860px) {
    .ui-btn { min-height: 44px; }
    .ui-btn--sm { min-height: 40px; }
    /* iOS Safari, font-size < 16px olan alana odaklanınca sayfayı zoom'lar → 16px'e sabitle.
       Metin girişi türleri; checkbox/radio/range hariç. Editör gibi özel alanlar kendi
       kuralıyla ezebilir (bu düşük özgüllüklü, !important yok). */
    .ui-input,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], input:not([type]), textarea, select { font-size: 16px; }
}