/* ==========================================================================
   KeyDesignArt — Temel katman
   Sıfırlama, kök tipografi, bağlantılar, medya, form öğeleri,
   erişilebilirlik yardımcıları ve odak halkası.
   ========================================================================== */

@layer base {

    /* Sıfırlama
       ---------------------------------------------------------------------- */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--kda-header-height) + var(--kda-space-5));
    }

    body {
        margin: 0;
        min-height: 100dvh;
        background: var(--kda-bg);
        color: var(--kda-ink-soft);
        font-family: var(--kda-font-sans);
        font-size: var(--kda-text-base);
        font-weight: var(--kda-weight-regular);
        line-height: var(--kda-leading-normal);
        letter-spacing: var(--kda-tracking-tight);
        font-synthesis-weight: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
    }

    body.is-locked {
        overflow: hidden;
    }

    /* Başlıklar
       ---------------------------------------------------------------------- */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 var(--kda-space-4);
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-weight: var(--kda-weight-semibold);
        line-height: var(--kda-leading-snug);
        letter-spacing: var(--kda-tracking-display);
        text-wrap: balance;
    }

    h1 {
        font-size: var(--kda-text-3xl);
    }

    h2 {
        font-size: var(--kda-text-2xl);
    }

    h3 {
        font-size: var(--kda-text-xl);
    }

    h4 {
        font-size: var(--kda-text-lg);
    }

    h5,
    h6 {
        font-size: var(--kda-text-base);
    }

    /* Metin akışı
       ---------------------------------------------------------------------- */
    p,
    ul,
    ol,
    dl,
    blockquote,
    figure,
    pre,
    table {
        margin: 0 0 var(--kda-space-4);
    }

    p,
    li {
        max-width: var(--kda-measure);
        text-wrap: pretty;
    }

    strong,
    b {
        color: var(--kda-ink);
        font-weight: var(--kda-weight-semibold);
    }

    small {
        font-size: var(--kda-text-sm);
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--kda-font-mono);
        font-size: 0.9em;
    }

    blockquote {
        padding-left: var(--kda-space-5);
        border-left: 2px solid var(--kda-accent);
        color: var(--kda-ink);
    }

    hr {
        height: 0;
        margin: var(--kda-space-7) 0;
        border: 0;
        border-top: 1px solid var(--kda-line);
    }

    ::selection {
        background: var(--kda-accent);
        color: var(--kda-on-accent);
    }

    /* Bağlantılar
       ---------------------------------------------------------------------- */
    a {
        color: inherit;
        text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
        text-underline-offset: 0.22em;
        text-decoration-thickness: from-font;
        transition: color var(--kda-dur-fast) var(--kda-ease),
                    text-decoration-color var(--kda-dur-fast) var(--kda-ease);
    }

    a:hover {
        color: var(--kda-accent-bright);
        text-decoration-color: currentColor;
    }

    /* Medya
       ---------------------------------------------------------------------- */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    svg {
        fill: currentColor;
    }

    /* Form öğeleri
       ---------------------------------------------------------------------- */
    button,
    input,
    select,
    textarea {
        font: inherit;
        letter-spacing: inherit;
        color: inherit;
    }

    button {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    textarea {
        resize: vertical;
    }

    /* Tablolar
       ---------------------------------------------------------------------- */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        padding: var(--kda-space-3) var(--kda-space-4);
        border-bottom: 1px solid var(--kda-line);
        text-align: left;
        vertical-align: top;
    }

    th {
        color: var(--kda-ink);
        font-weight: var(--kda-weight-semibold);
    }

    /* Odak halkası
       ---------------------------------------------------------------------- */
    :focus-visible {
        outline: 2px solid var(--kda-accent-bright);
        outline-offset: 3px;
        border-radius: var(--kda-radius-xs);
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    /* Kaydırma çubuğu
       ---------------------------------------------------------------------- */
    @supports (scrollbar-color: auto) {
        html {
            scrollbar-color: var(--kda-surface-3) var(--kda-bg);
            scrollbar-width: thin;
        }
    }

    /* Hareket tercihi
       ---------------------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

}

@layer utilities {

    /* Erişilebilirlik
       ---------------------------------------------------------------------- */
    .kda-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .kda-skip {
        position: fixed;
        top: var(--kda-space-3);
        left: var(--kda-space-3);
        z-index: var(--kda-z-skip);
        padding: var(--kda-space-3) var(--kda-space-5);
        border-radius: var(--kda-radius-pill);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        font-size: var(--kda-text-sm);
        font-weight: var(--kda-weight-bold);
        text-decoration: none;
        transform: translateY(-200%);
        transition: transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-skip:focus-visible {
        transform: none;
    }

    /* Genel yardımcılar
       ---------------------------------------------------------------------- */
    .kda-measure {
        max-width: var(--kda-measure);
    }

    .kda-no-measure,
    .kda-no-measure p,
    .kda-no-measure li {
        max-width: none;
    }

}