/* ════════════════════════════════════════════════════════════════════════════
   AbellPro.Web — TEMEL: tasarım değişkenleri, sıfırlama, ortak öğeler.
   Her sayfa önce bunu, sonra kendi stilini yükler. Renk/ölçü değeri sayfalarda
   ELLE YAZILMAZ; hepsi buradaki değişkenlerden gelir, açık/koyu tema da böylece
   tek yerden döner.
   Marka renkleri WinUI paletiyle aynıdır (Palette.xaml → BrandPrimary #0D47A1).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* Marka */
    --marka: #0D47A1;
    --marka-koyu: #0A3A82;
    --marka-derin: #072a5e;
    --marka-acik: #42A5F5;
    --marka-yumusak: #E3EDFB;

    /* Yüzeyler */
    --zemin: #F3F6FB;
    --yuzey: #FFFFFF;
    --yuzey-alt: #F5F8FC;
    --kenar: #DCE3EE;
    --kenar-guclu: #C3CDDD;

    /* Yazı */
    --yazi: #0F1B2D;
    --yazi-ikincil: #4A5A72;
    --yazi-soluk: #7C8AA0;
    --yazi-markada: #FFFFFF;

    /* Durum */
    --hata: #C62828;
    --hata-zemin: #FDECEC;
    --uyari: #B25E00;
    --uyari-zemin: #FFF4E5;
    --bilgi: #0D47A1;
    --bilgi-zemin: #E8F0FC;

    /* Biçim */
    --yaricap-kucuk: 10px;
    --yaricap: 14px;
    --yaricap-buyuk: 24px;
    --golge: 0 1px 2px rgb(15 27 45 / .06), 0 12px 32px -12px rgb(15 27 45 / .18);
    --golge-odak: 0 0 0 4px rgb(13 71 161 / .16);
    --gecis: 180ms cubic-bezier(.2, .7, .2, 1);

    /* Yazı tipi: sistem yazıları. Kasa ağları çoğu zaman internete kapalı;
       dışarıdan yazı tipi çekmek sayfayı oraya bağlardı. */
    --yazi-tipi: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                 "Helvetica Neue", Arial, sans-serif;
}

/* Koyu tema — sistem tercihi (kullanıcı açıkça "açık" seçmediyse) */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        color-scheme: dark;
        --marka-yumusak: #13233D;
        --zemin: #0B1017;
        --yuzey: #121922;
        --yuzey-alt: #18212C;
        --kenar: #26313F;
        --kenar-guclu: #364354;
        --yazi: #E7EDF6;
        --yazi-ikincil: #A3B1C6;
        --yazi-soluk: #77869C;
        --hata: #FF8A80;
        --hata-zemin: #3A1A1A;
        --uyari: #FFB74D;
        --uyari-zemin: #352812;
        --bilgi: #90CAF9;
        --bilgi-zemin: #14253D;
        --golge: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -16px rgb(0 0 0 / .7);
        --golge-odak: 0 0 0 4px rgb(66 165 245 / .28);
    }
}

/* Koyu tema — sayfanın açık seçimi: <html data-tema="koyu"> */
:root[data-tema="koyu"] {
    color-scheme: dark;
    --marka-yumusak: #13233D;
    --zemin: #0B1017;
    --yuzey: #121922;
    --yuzey-alt: #18212C;
    --kenar: #26313F;
    --kenar-guclu: #364354;
    --yazi: #E7EDF6;
    --yazi-ikincil: #A3B1C6;
    --yazi-soluk: #77869C;
    --hata: #FF8A80;
    --hata-zemin: #3A1A1A;
    --uyari: #FFB74D;
    --uyari-zemin: #352812;
    --bilgi: #90CAF9;
    --bilgi-zemin: #14253D;
    --golge: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -16px rgb(0 0 0 / .7);
    --golge-odak: 0 0 0 4px rgb(66 165 245 / .28);
}

/* ── Sıfırlama ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--zemin);
    color: var(--yazi);
    font-family: var(--yazi-tipi);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--marka); text-decoration: none; }
:root[data-tema="koyu"] a { color: var(--marka-acik); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) a { color: var(--marka-acik); } }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input { font: inherit; color: inherit; }

img, svg { display: block; }

:focus-visible { outline: 2px solid var(--marka-acik); outline-offset: 2px; }

/* Yalnız ekran okuyucuya görünen metin */
.gizli {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Tema geçişi: verilen noktadan yayılan daire (View Transitions, js/tema-gecisi.js) ── */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-new(root) {
    animation: tema-ac .85s cubic-bezier(.65, 0, .25, 1);
}
@keyframes tema-ac {
    from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
    to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}