/* =====================================================================
   Kuruyemiş tasarım sistemi — temel öğeler ve yüzeyler
   tokenlar.css'ten SONRA yüklenir. Bootstrap'in üzerine oturur.
   ===================================================================== */

/* ---------- Temel ---------- */
html,
body {
    font-family: var(--yazi-aile);
}

body {
    font-weight: var(--kalinlik-normal);
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

/* Tema kökü: bir öğeye data-tema verilince kendi zeminini ve metin rengini alır */
[data-tema] {
    background-color: var(--renk-zemin);
    color: var(--renk-metin);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--yazi-aile);
    font-weight: var(--kalinlik-kalin);
    line-height: var(--satir-baslik);
    letter-spacing: var(--harf-baslik);
    color: var(--renk-metin);
    text-wrap: balance;
}

h1, .h1 { font-size: var(--yazi-3xl); }
h2, .h2 { font-size: var(--yazi-2xl); }
h3, .h3 { font-size: var(--yazi-xl); }
h4, .h4 { font-size: var(--yazi-lg); }
h5, .h5, h6, .h6 { font-size: var(--yazi-md); }

p {
    text-wrap: pretty;
}

a,
.btn-link {
    color: var(--renk-birincil-metin);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a:hover,
.btn-link:hover {
    color: var(--renk-birincil-hover);
}

strong, b {
    font-weight: var(--kalinlik-kalin);
}

small, .small {
    font-size: var(--yazi-sm);
}

code, kbd, samp, .font-monospace {
    font-family: var(--yazi-aile-es);
}

::selection {
    background: var(--renk-birincil-zayif);
    color: var(--renk-birincil-zayif-metin);
}

hr {
    border-color: var(--renk-cizgi);
    opacity: 1;
}

/* Görünür odak halkası: klavye ile gezinmede her zaman */
:where(a, button, input, select, textarea, summary, [tabindex], .btn):focus-visible {
    outline: 3px solid var(--odak-halka-renk);
    outline-offset: 2px;
}

/* ---------- Metin yardımcıları ---------- */
.rakam {
    font-variant-numeric: tabular-nums;
}

.rakam-orantili {
    font-variant-numeric: proportional-nums;
}

.metin-ikincil { color: var(--renk-metin-ikincil); }
.metin-soluk { color: var(--renk-metin-soluk); }
.metin-birincil { color: var(--renk-birincil-metin); }
.metin-vurgu { color: var(--renk-vurgu-metin); }

.ust-etiket {
    font-size: var(--yazi-2xs);
    font-weight: var(--kalinlik-yari-kalin);
    letter-spacing: var(--harf-etiket);
    text-transform: uppercase;
    color: var(--renk-metin-ikincil);
}

.kod {
    font-family: var(--yazi-aile-es);
    font-size: 0.92em;
    letter-spacing: 0;
    /* LOT-2026-000001 tirelerden bölünmesin */
    white-space: nowrap;
}

/* Bootstrap yardımcıları (.text-secondary, .text-muted, .text-danger …) tokenlar.css'teki
   --bs-*-rgb ve --bs-secondary-color eşlemesiyle zaten token renklerini alır. */

/* ---------- Yükselti sınıfları (yalnızca gölge) ---------- */
.yukselti-0 { box-shadow: var(--yukselti-0); }
.yukselti-1 { box-shadow: var(--yukselti-1); }
.yukselti-2 { box-shadow: var(--yukselti-2); }
.yukselti-3 { box-shadow: var(--yukselti-3); }
.yukselti-4 { box-shadow: var(--yukselti-4); }
.yukselti-basili { box-shadow: var(--yukselti-basili); }

/* ---------- Yüzeyler ---------- */
.yuzey {
    background-color: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-1);
}

.yuzey-yukselmis {
    background-color: var(--renk-yuzey-yukselmis);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-3);
}

.yuzey-cukur {
    background-color: var(--renk-yuzey-cukur);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--yaricap-lg);
    box-shadow: var(--yukselti-cukur);
}

/* ---------- Kart ---------- */
/* Bootstrap .card ve kendi .kart sınıfımız aynı görünür. */
.card,
.kart {
    --bs-card-bg: var(--renk-yuzey);
    --bs-card-color: var(--renk-metin);
    --bs-card-border-color: var(--renk-cizgi);
    --bs-card-border-radius: var(--yaricap-lg);
    --bs-card-inner-border-radius: calc(var(--yaricap-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--renk-metin);
    --bs-card-spacer-y: var(--bosluk-4);
    --bs-card-spacer-x: var(--bosluk-4);
    --bs-card-cap-padding-y: var(--bosluk-3);
    --bs-card-cap-padding-x: var(--bosluk-4);
    box-shadow: var(--yukselti-2);
}

.kart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--bs-card-bg);
    color: var(--bs-card-color);
    border: 1px solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

.card-header,
.kart-baslik {
    font-weight: var(--kalinlik-yari-kalin);
    border-bottom: 1px solid var(--renk-cizgi);
}

.kart-baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-3) var(--bosluk-4);
}

.kart-govde {
    padding: var(--bosluk-4);
}

.card-footer,
.kart-alt {
    background-color: color-mix(in srgb, var(--renk-yuzey-cukur) 55%, transparent);
    border-top: 1px solid var(--renk-cizgi);
}

.kart-alt {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    padding: var(--bosluk-3) var(--bosluk-4);
    border-radius: 0 0 calc(var(--yaricap-lg) - 1px) calc(var(--yaricap-lg) - 1px);
}

/* Gösterge kartı: büyük rakam + etiket. Rakam kart genişliğine göre küçülür (uzun tutarlar taşmasın). */
.kart-gosterge {
    container-type: inline-size;
}

.kart-gosterge .gosterge-deger {
    font-size: clamp(var(--yazi-lg), 11cqi, var(--yazi-2xl));
    overflow-wrap: anywhere;
    font-weight: var(--kalinlik-kalin);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--harf-baslik);
    line-height: var(--satir-siki);
}

.kart-gosterge .gosterge-birim {
    font-size: var(--yazi-sm);
    font-weight: var(--kalinlik-orta);
    color: var(--renk-metin-ikincil);
    margin-inline-start: var(--bosluk-1);
}

/* ---------- Eğilen kart (yalnızca fare/kalem, yalnızca hareket serbestse) ---------- */
/* Gölge büyümesi ::after'ın opaklığıyla yapılır; box-shadow canlandırılmaz. */
.kart-egik {
    position: relative;
    isolation: isolate;
}

.kart-egik::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    box-shadow: var(--yukselti-4);
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .kart-egik {
        transform: perspective(var(--egik-perspektif)) rotateX(0deg) translateY(0);
        transform-origin: 50% 100%;
        transition: transform var(--sure-orta) var(--egri-cikis);
        will-change: transform;
    }

    .kart-egik::after {
        transition: opacity var(--sure-orta) var(--egri-cikis);
    }

    .kart-egik:hover {
        transform: perspective(var(--egik-perspektif)) rotateX(var(--egik-aci)) translateY(var(--egik-yukari));
    }

    .kart-egik:hover::after {
        opacity: 1;
    }

    .kart-egik:active {
        transform: perspective(var(--egik-perspektif)) rotateX(0deg) translateY(0);
        transition-duration: var(--sure-anlik);
    }
}

/* ---------- Cam yüzey ---------- */
/* Yalnızca az sayıda yerde (üst çubuk, alt gezinme, yüzen panel). Desteklenmezse opak. */
.cam {
    background-color: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .cam {
        background-color: var(--cam-zemin);
        border-color: var(--cam-kenar);
        -webkit-backdrop-filter: blur(var(--cam-bulaniklik)) saturate(1.4);
        backdrop-filter: blur(var(--cam-bulaniklik)) saturate(1.4);
    }
}

/* ---------- Kavram renkleri (fason / iç işlem / girdi / çıktı / maliyet) ---------- */
/* Bir öğeye kavram sınıfı verilir; rozet, şerit ve 3B kutu bu değişkenleri kullanır. */
.kavram-fason   { --kavram-zemin: var(--renk-fason-zemin);   --kavram-ust: var(--renk-fason-ust);   --kavram-yan: var(--renk-fason-yan);   --kavram-metin: var(--renk-fason-metin);   --kavram-kenar: var(--renk-fason-kenar); }
.kavram-ic      { --kavram-zemin: var(--renk-ic-zemin);      --kavram-ust: var(--renk-ic-ust);      --kavram-yan: var(--renk-ic-yan);      --kavram-metin: var(--renk-ic-metin);      --kavram-kenar: var(--renk-ic-kenar); }
.kavram-girdi   { --kavram-zemin: var(--renk-girdi-zemin);   --kavram-ust: var(--renk-girdi-ust);   --kavram-yan: var(--renk-girdi-yan);   --kavram-metin: var(--renk-girdi-metin);   --kavram-kenar: var(--renk-girdi-kenar); }
.kavram-cikti   { --kavram-zemin: var(--renk-cikti-zemin);   --kavram-ust: var(--renk-cikti-ust);   --kavram-yan: var(--renk-cikti-yan);   --kavram-metin: var(--renk-cikti-metin);   --kavram-kenar: var(--renk-cikti-kenar); }
.kavram-maliyet { --kavram-zemin: var(--renk-maliyet-zemin); --kavram-ust: var(--renk-maliyet-ust); --kavram-yan: var(--renk-maliyet-yan); --kavram-metin: var(--renk-maliyet-metin); --kavram-kenar: var(--renk-maliyet-kenar); }

/* İzometrik kutu (SablonAkisi tekniği, token'lı): ön yüz + ::before üst + ::after yan */
.kup-3b {
    --d: 12px;
    position: relative;
    margin: var(--d) var(--d) 0 0;
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--kavram-zemin, var(--renk-yuzey));
    color: var(--kavram-metin, var(--renk-metin));
    box-shadow: 0 10px 18px -12px rgb(var(--golge-rgb) / calc(0.35 * var(--golge-carpan)));
}

.kup-3b::before,
.kup-3b::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.kup-3b::before {
    left: 0;
    top: calc(-1 * var(--d));
    width: 100%;
    height: var(--d);
    background: var(--kavram-ust, var(--renk-yuzey-yukselmis));
    transform-origin: 0 100%;
    transform: skewX(-45deg);
}

.kup-3b::after {
    top: 0;
    right: calc(-1 * var(--d));
    width: var(--d);
    height: 100%;
    background: var(--kavram-yan, var(--renk-cizgi));
    transform-origin: 0 0;
    transform: skewY(-45deg);
}

@media (prefers-contrast: more) {
    .kup-3b {
        outline: 1px solid var(--kavram-metin, var(--renk-metin));
    }
}