/* ==========================================================================
   KeyDesignArt — Yerleşim katmanı
   Sayfa kabuğu, üst bilgi (navbar), tam ekran menü ve alt bilgi.
   ========================================================================== */

@layer layout {

    /* Kabuk
       ---------------------------------------------------------------------- */
    .kda-shell {
        width: 100%;
        max-width: var(--kda-shell);
        margin-inline: auto;
        padding-inline: var(--kda-gutter);
    }

    .kda-main {
        display: block;
        width: 100%;
        max-width: var(--kda-shell);
        margin-inline: auto;
        padding: calc(var(--kda-header-height) + var(--kda-space-8)) var(--kda-gutter) var(--kda-space-10);
    }

    .kda-main--bleed {
        max-width: none;
        padding: 0 0 var(--kda-space-8);
    }

    .kda-section {
        padding-block: var(--kda-space-9);
    }

    .kda-section + .kda-section {
        border-top: 1px solid var(--kda-line);
    }

    /* Sayfa başlığı bandı
       İç sayfaların açılışı: büyük başlık, altında sayfa yolu kutusu.
       Zemin alt bilgiyle aynı dilde — sönen ızgara, köşe ışıkları, kılcal gren.
       Sabit üst bilginin altına girmemesi için kendi üst boşluğunu taşır.
       ---------------------------------------------------------------------- */
    .kda-pagehead {
        --kda-pagehead-grid: 4.5rem;

        position: relative;
        isolation: isolate;
        display: grid;
        overflow: hidden;
        min-height: clamp(12.5rem, 5rem + 20vw, 19rem);
        margin-top: calc(var(--kda-header-height) + var(--kda-space-4));
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-bg-deep);
    }

    .kda-pagehead::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(46% 96% at 86% -18%, var(--kda-glass) 0%, transparent 62%),
            radial-gradient(52% 88% at 6% -12%, var(--kda-glass) 0%, transparent 66%),
            linear-gradient(180deg, var(--kda-surface) 0%, var(--kda-bg-deep) 58%);
    }

    .kda-pagehead::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 18px var(--kda-accent-glow);
        pointer-events: none;
    }

    .kda-pagehead__grid {
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        background-image:
            repeating-linear-gradient(to right,
                color-mix(in srgb, var(--kda-line) 85%, transparent) 0 1px,
                transparent 1px var(--kda-pagehead-grid)),
            repeating-linear-gradient(to bottom,
                color-mix(in srgb, var(--kda-line) 85%, transparent) 0 1px,
                transparent 1px var(--kda-pagehead-grid));
        mask-image: radial-gradient(126% 118% at 50% 0%, #000 0%, #000 46%, transparent 96%);
    }

    .kda-pagehead__grain {
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        background-image: var(--kda-noise);
        opacity: 0.035;
        mix-blend-mode: overlay;
    }

    .kda-pagehead__inner {
        position: relative;
        z-index: 1;
        display: grid;
        align-content: center;
        justify-items: start;
        gap: var(--kda-space-5);
        padding: var(--kda-space-7) var(--kda-space-6);
    }

    /* Başlığın üstündeki ikonlu meta satırı — yazar, tarih, okuma süresi
       ---------------------------------------------------------------------- */
    .kda-pagehead__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3) var(--kda-space-6);
        max-width: none;
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

    .kda-pagehead__meta-item {
        display: inline-flex;
        align-items: center;
        gap: var(--kda-space-2);
    }

    .kda-pagehead__meta-item::before {
        content: "";
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        background: var(--kda-accent);
    }

    .kda-pagehead__meta-item--author::before {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.4 20.4a7.8 7.8 0 0 1 15.2 0'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-pagehead__meta-item--date::before {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='2.2'/%3E%3Cpath d='M3.2 9.6h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-pagehead__meta-item--time::before {
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-pagehead__title {
        max-width: min(100%, 40ch);
        margin: 0;
        font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem);
        font-weight: var(--kda-weight-medium);
        line-height: 1.14;
        letter-spacing: 0.004em;
        text-transform: uppercase;
        text-wrap: pretty;
    }

    /* Sayfa yolu — referans düzendeki gibi kendi saydam kutusunda
       ---------------------------------------------------------------------- */
    .kda-pagehead__crumbs ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3);
        margin: 0;
        padding: 0.5rem 0.9rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        list-style: none;
    }

    .kda-pagehead__crumbs li {
        display: flex;
        align-items: center;
        gap: var(--kda-space-3);
        max-width: none;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
        line-height: 1.4;
        text-transform: uppercase;
    }

    .kda-pagehead__crumbs li:first-child::before {
        content: "";
        flex: 0 0 auto;
        width: 0.9rem;
        height: 0.9rem;
        background: var(--kda-accent);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 10.4 12 3.4l8.4 7a1 1 0 0 1 .35.77V20a1 1 0 0 1-1 1h-4.9v-6.1H9.15V21H4.25a1 1 0 0 1-1-1v-8.83a1 1 0 0 1 .35-.77z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-pagehead__crumbs li + li::before {
        content: "";
        flex: 0 0 auto;
        width: 0.6rem;
        height: 0.6rem;
        background: var(--kda-ink-faint);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .kda-pagehead__crumbs a {
        color: var(--kda-ink-muted);
        text-decoration: none;
    }

    .kda-pagehead__crumbs a:hover {
        color: var(--kda-accent-bright);
    }

    .kda-pagehead__crumbs [aria-current] {
        color: var(--kda-ink);
    }

    @media (min-width: 64rem) {
        .kda-pagehead__inner {
            gap: var(--kda-space-6);
            padding: var(--kda-space-8);
        }
    }

    @media (forced-colors: active) {
        .kda-pagehead__grid,
        .kda-pagehead__grain {
            display: none;
        }
    }

    /* Üst bilgi
       ---------------------------------------------------------------------- */
    .kda-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: var(--kda-z-header);
        height: var(--kda-header-height);
        display: flex;
        align-items: center;
        border-bottom: 1px solid transparent;
        transition: background-color var(--kda-dur-base) var(--kda-ease),
                    border-color var(--kda-dur-base) var(--kda-ease),
                    backdrop-filter var(--kda-dur-base) var(--kda-ease);
    }

    .kda-header.is-stuck {
        background: color-mix(in srgb, var(--kda-bg) 82%, transparent);
        border-bottom-color: var(--kda-line);
        backdrop-filter: saturate(160%) blur(14px);
    }

    .kda-header.is-hidden {
        transform: translateY(-100%);
        transition: transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-header__inner {
        display: flex;
        align-items: center;
        gap: var(--kda-space-5);
    }

    /* Marka
       ---------------------------------------------------------------------- */
    .kda-logo {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: baseline;
        color: var(--kda-ink);
        font-family: var(--kda-font-sans);
        font-size: 1.2rem;
        font-weight: var(--kda-weight-bold);
        letter-spacing: -0.045em;
        line-height: 1;
        text-decoration: none;
    }

    .kda-logo:hover {
        color: var(--kda-ink);
    }

    .kda-logo__accent {
        color: var(--kda-ink);
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-logo:hover .kda-logo__accent {
        color: var(--kda-accent);
    }

    .kda-logo__dot {
        color: var(--kda-accent);
    }

    /* Ana menü
       ---------------------------------------------------------------------- */
    .kda-nav {
        display: none;
        flex: 1 1 auto;
        justify-content: center;
    }

    .kda-nav ul {
        display: flex;
        align-items: center;
        gap: var(--kda-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-nav li {
        max-width: none;
    }

    .kda-nav a {
        position: relative;
        display: block;
        padding: var(--kda-space-2) var(--kda-space-3);
        border-radius: var(--kda-radius-pill);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-medium);
        text-decoration: none;
        white-space: nowrap;
    }

    .kda-nav a::after {
        content: "";
        position: absolute;
        left: var(--kda-space-3);
        right: var(--kda-space-3);
        bottom: 0.3rem;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-nav a:hover {
        color: var(--kda-ink);
    }

    .kda-nav a:hover::after {
        transform: scaleX(1);
    }

    .kda-nav a[aria-current="page"] {
        color: var(--kda-accent);
    }

    .kda-nav a[aria-current="page"]::after {
        transform: scaleX(1);
    }

    /* Sağ aksiyonlar
       ---------------------------------------------------------------------- */
    .kda-header__actions {
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--kda-space-3);
    }

    .kda-header__cta {
        display: none;
        height: var(--kda-control-height);
        padding: 0 1.15rem;
        font-size: var(--kda-text-md);
    }

    /* Dil seçici — açılır menü (details/summary, betiksiz de çalışır)
       ---------------------------------------------------------------------- */
    .kda-lang {
        display: flex;
        align-items: center;
    }

    .kda-langdrop {
        position: relative;
        display: block;
    }

    .kda-langdrop__trigger {
        position: relative;
        display: flex;
        width: fit-content;
        align-items: center;
        gap: 0.375rem;
        height: var(--kda-control-height);
        padding-inline: var(--kda-space-2) 0.375rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink);
        cursor: pointer;
        list-style: none;
        user-select: none;
        -webkit-user-select: none;
        transition: background-color var(--kda-dur-fast) var(--kda-ease),
                    border-color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-langdrop__trigger::-webkit-details-marker {
        display: none;
    }

    .kda-langdrop__trigger::after,
    .kda-menu-toggle::after {
        content: "";
        position: absolute;
        inset: -5px;
    }

    .kda-langdrop__trigger:hover {
        background: var(--kda-glass-strong);
        border-color: var(--kda-ink-faint);
    }

    .kda-langdrop[open] > .kda-langdrop__trigger {
        background: var(--kda-glass-strong);
        border-color: color-mix(in srgb, var(--kda-accent) 40%, transparent);
    }

    .kda-langdrop__globe {
        flex: 0 0 auto;
        width: 0.9375rem;
        height: 0.9375rem;
        color: var(--kda-ink-faint);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.2;
        stroke-linecap: round;
        transition: color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-langdrop__trigger:hover .kda-langdrop__globe {
        color: var(--kda-ink-muted);
    }

    .kda-langdrop[open] .kda-langdrop__globe {
        color: var(--kda-accent);
    }

    .kda-langdrop__code {
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-base);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: 0.06em;
        line-height: 1;
        text-transform: uppercase;
    }

    .kda-langdrop__caret {
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        margin-inline-start: 0.125rem;
        color: var(--kda-ink-faint);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-langdrop[open] .kda-langdrop__caret {
        transform: rotate(180deg);
    }

    .kda-langdrop__panel {
        position: absolute;
        top: calc(100% + var(--kda-space-2));
        inset-inline-end: 0;
        z-index: var(--kda-z-sticky);
        min-width: 10.5rem;
        max-height: min(60vh, 18rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--kda-space-1);
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-sm);
        background: var(--kda-surface-2);
        box-shadow: var(--kda-shadow-md);
        transform-origin: top right;
    }

    .kda-langdrop[open] .kda-langdrop__panel {
        animation: kda-langdrop-reveal var(--kda-dur-fast) var(--kda-ease) both;
    }

    @keyframes kda-langdrop-reveal {
        from {
            opacity: 0;
            transform: translateY(-0.375rem) scale(0.97);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .kda-langdrop__list {
        display: grid;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-langdrop__list li {
        max-width: none;
    }

    .kda-langdrop__option {
        display: flex;
        align-items: center;
        gap: var(--kda-space-3);
        min-height: 2.75rem;
        padding-inline: var(--kda-space-2);
        border-radius: var(--kda-radius-xs);
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-medium);
        line-height: 1.2;
        text-decoration: none;
        transition: background-color var(--kda-dur-fast) var(--kda-ease),
                    color var(--kda-dur-fast) var(--kda-ease);
    }

    a.kda-langdrop__option:hover {
        background: var(--kda-glass-strong);
        color: var(--kda-ink);
    }

    .kda-langdrop__option:focus-visible {
        outline-offset: -2px;
    }

    .kda-langdrop__option.is-current {
        background: var(--kda-glass);
        color: var(--kda-ink);
        cursor: default;
    }

    .kda-langdrop__flag {
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-pill);
        object-fit: cover;
    }

    .kda-langdrop__name {
        flex: 1 1 auto;
    }

    .kda-langdrop__mark {
        flex: 0 0 auto;
        width: 5px;
        height: 5px;
        border-radius: var(--kda-radius-pill);
        background: var(--kda-accent);
        box-shadow: 0 0 0 3px var(--kda-accent-ghost);
    }

    /* Menü düğmesi
       ---------------------------------------------------------------------- */
    .kda-menu-toggle {
        position: relative;
        width: var(--kda-control-height);
        height: var(--kda-control-height);
        display: grid;
        place-items: center;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink);
        transition: background-color var(--kda-dur-fast) var(--kda-ease),
                    border-color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-menu-toggle:hover {
        background: var(--kda-glass-strong);
        border-color: var(--kda-ink-faint);
    }

    .kda-menu-toggle__bars {
        position: relative;
        display: block;
        width: 1.05rem;
        height: 0.5rem;
    }

    .kda-menu-toggle__bars span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform var(--kda-dur-base) var(--kda-ease),
                    opacity var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-menu-toggle__bars span:first-child {
        top: 0;
    }

    .kda-menu-toggle__bars span:last-child {
        bottom: 0;
        width: 65%;
    }

    .kda-menu-toggle:hover .kda-menu-toggle__bars span:last-child {
        width: 100%;
    }

    .kda-menu-toggle[aria-expanded="true"] .kda-menu-toggle__bars span:first-child {
        transform: translateY(3.25px) rotate(45deg);
    }

    .kda-menu-toggle[aria-expanded="true"] .kda-menu-toggle__bars span:last-child {
        width: 100%;
        transform: translateY(-3.25px) rotate(-45deg);
    }

    /* Tam ekran menü
       ---------------------------------------------------------------------- */
    /* ⚠️ İçerik `justify-content: center` ile ortalanırsa, taşan içerik üstten
       kırpılıp başlığın altına giriyordu. Ortalama `margin-block: auto` ile
       yapılır: yer varsa ortalar, yoksa üst dolgudan başlar.
       ---------------------------------------------------------------------- */
    .kda-menu {
        position: fixed;
        inset: 0;
        z-index: var(--kda-z-overlay);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(var(--kda-header-height) + var(--kda-space-6)) 0 var(--kda-space-8);
        background: var(--kda-bg-deep);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--kda-dur-base) var(--kda-ease),
                    visibility 0s linear var(--kda-dur-base);
    }

    .kda-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(80% 60% at 82% 12%, var(--kda-accent-ghost) 0%, transparent 70%);
        pointer-events: none;
    }

    .kda-menu.is-open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .kda-menu[hidden] {
        display: none;
    }

    .kda-menu__inner {
        position: relative;
        margin-block: auto;
        display: grid;
        gap: var(--kda-space-8);
        grid-template-columns: 1fr;
    }

    .kda-menu__side {
        display: grid;
        gap: var(--kda-space-7);
        align-content: start;
    }

    .kda-menu__group-title {
        margin: 0 0 var(--kda-space-4);
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wider);
        text-transform: uppercase;
    }

    .kda-menu__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-menu__list li {
        max-width: none;
        overflow: hidden;
    }

    .kda-menu__list a {
        display: flex;
        align-items: baseline;
        gap: var(--kda-space-4);
        padding-block: var(--kda-space-2);
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-medium);
        letter-spacing: var(--kda-tracking-display);
        line-height: 1.25;
        text-decoration: none;
        transform: translateY(120%);
        transition: transform var(--kda-dur-slow) var(--kda-ease),
                    color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-menu.is-open .kda-menu__list a {
        transform: none;
    }

    .kda-menu__list li:nth-child(1) a { transition-delay: 40ms; }
    .kda-menu__list li:nth-child(2) a { transition-delay: 80ms; }
    .kda-menu__list li:nth-child(3) a { transition-delay: 120ms; }
    .kda-menu__list li:nth-child(4) a { transition-delay: 160ms; }
    .kda-menu__list li:nth-child(5) a { transition-delay: 200ms; }
    .kda-menu__list li:nth-child(6) a { transition-delay: 240ms; }
    .kda-menu__list li:nth-child(n+7) a { transition-delay: 280ms; }

    .kda-menu__list a:hover {
        color: var(--kda-accent);
    }

    .kda-menu__list a[aria-current="page"] {
        color: var(--kda-accent);
    }

    .kda-menu__index {
        flex: 0 0 auto;
        color: var(--kda-ink-faint);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-xs);
        letter-spacing: 0;
    }

    .kda-menu__secondary a {
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-regular);
        color: var(--kda-ink-soft);
    }

    /* Menünün sağ tarafı — iletişim kartı ve yararlı bağlantılar
       ---------------------------------------------------------------------- */
    .kda-menu__card {
        position: relative;
        display: grid;
        gap: var(--kda-space-5);
        overflow: hidden;
        padding: var(--kda-space-6);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-menu__card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 18px var(--kda-accent-glow);
        pointer-events: none;
    }

    .kda-menu__card .kda-menu__group-title {
        margin: 0;
    }

    .kda-menu__phone {
        justify-self: start;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-bold);
        line-height: 1;
        letter-spacing: var(--kda-tracking-display);
        text-decoration: none;
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-menu__phone:hover {
        color: var(--kda-accent);
    }

    .kda-menu__cta {
        justify-self: start;
    }

    .kda-menu__secondary .kda-iconlist__item a {
        font-size: var(--kda-text-md);
    }

    /* Alt bilgi
       Dört sütun: hakkımızda · iletişim · yararlı bağlantılar · mesaj formu.
       Altında logo ve telif satırı. Zeminde dekoratif geometri.
       ---------------------------------------------------------------------- */
    .kda-footer {
        --kda-footer-grid: 4.5rem;

        position: relative;
        isolation: isolate;
        overflow: hidden;
        border-top: 1px solid var(--kda-line);
        background: var(--kda-bg-deep);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

    /* Zemin — kahraman bölümünün ızgarasını yankılayan derinlik.
       Sert kenarlı şekil yok: ince ızgara aşağı doğru sönüyor, üstüne sağ üstten
       sarı, sol üstten soğuk bir ışık iniyor, en üstte kılcal bir grenle bitiyor.
       ---------------------------------------------------------------------- */
    .kda-footer__shapes {
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        background-color: transparent;
        background-image:
            repeating-linear-gradient(to right,
                color-mix(in srgb, var(--kda-line) 62%, transparent) 0 1px,
                transparent 1px var(--kda-footer-grid)),
            repeating-linear-gradient(to bottom,
                color-mix(in srgb, var(--kda-line) 62%, transparent) 0 1px,
                transparent 1px var(--kda-footer-grid));
        mask-image: radial-gradient(120% 92% at 50% 0%, #000 0%, #000 42%, transparent 88%);
    }

    .kda-footer::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(46% 74% at 86% -6%, var(--kda-accent-ghost) 0%, transparent 62%),
            radial-gradient(52% 66% at 8% -4%, var(--kda-glass) 0%, transparent 66%),
            linear-gradient(180deg, var(--kda-surface) 0%, var(--kda-bg-deep) 46%);
    }

    .kda-footer::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0 0 auto;
        height: 22rem;
        pointer-events: none;
        background-image: var(--kda-noise);
        opacity: 0.035;
        mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
    }

    .kda-footer__inner {
        display: grid;
        gap: var(--kda-space-8);
        padding-block: var(--kda-space-9) var(--kda-space-6);
    }

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

    .kda-footer a {
        text-decoration: none;
    }

    /* Sütunlar
       ---------------------------------------------------------------------- */
    .kda-footer__columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kda-space-8) var(--kda-space-7);
    }

    .kda-footer__col {
        display: grid;
        align-content: start;
        gap: var(--kda-space-4);
    }

    .kda-footer__col-title {
        margin: 0;
        color: var(--kda-accent);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xl);
        font-weight: var(--kda-weight-bold);
        line-height: var(--kda-leading-snug);
        letter-spacing: var(--kda-tracking-display);
        text-transform: uppercase;
    }

    .kda-footer__about {
        margin: 0;
        color: var(--kda-ink-soft);
        font-weight: var(--kda-weight-light);
        line-height: var(--kda-leading-normal);
    }

    .kda-footer__col > .kda-arrow-link {
        justify-self: start;
    }

    /* İletişim
       ---------------------------------------------------------------------- */
    .kda-footer__phone {
        justify-self: start;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-bold);
        line-height: 1;
        letter-spacing: var(--kda-tracking-display);
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-footer__phone:hover {
        color: var(--kda-accent);
    }

    .kda-footer__social {
        margin-top: var(--kda-space-1);
    }

    /* Mesaj formu
       ---------------------------------------------------------------------- */
    .kda-footer__form {
        display: grid;
        gap: var(--kda-space-3);
    }

    .kda-footer__field {
        margin: 0;
    }

    .kda-footer__field input,
    .kda-footer__field textarea {
        width: 100%;
        max-width: none;
        padding: 0.7rem 0.9rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink);
        font-size: var(--kda-text-md);
        transition: border-color var(--kda-dur-fast) var(--kda-ease),
                    background-color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-footer__field input::placeholder,
    .kda-footer__field textarea::placeholder {
        color: var(--kda-ink-faint);
    }

    .kda-footer__field textarea {
        min-height: 6.5rem;
        resize: vertical;
    }

    .kda-footer__field input:hover,
    .kda-footer__field textarea:hover {
        border-color: var(--kda-ink-faint);
    }

    /* Odakta yalnız odak halkası görünür; kenarlığı da sarıya çevirmek
       iki katmanlı bir çerçeve yaratıyordu.
       ---------------------------------------------------------------------- */
    .kda-footer__field input:focus,
    .kda-footer__field textarea:focus {
        background: var(--kda-surface);
    }

    .kda-footer__field input:focus-visible,
    .kda-footer__field textarea:focus-visible {
        outline-offset: 0;
    }

    .kda-footer__form .kda-btn {
        justify-self: start;
        margin-top: var(--kda-space-1);
    }

    /* Alt satır — solda logo, sağda telif
       ---------------------------------------------------------------------- */
    .kda-footer__bottom {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--kda-space-4);
        padding-top: var(--kda-space-6);
        border-top: 1px solid var(--kda-line);
        font-size: var(--kda-text-sm);
    }

    .kda-footer__legal {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-4);
    }

    .kda-footer__bottom p {
        margin: 0;
    }


    /* Duyarlı davranış
       ---------------------------------------------------------------------- */
    @media (min-width: 48rem) {
        .kda-header__cta {
            display: inline-flex;
        }

        .kda-menu__inner {
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
            gap: var(--kda-space-9);
        }
    }

    @media (min-width: 48rem) {
        .kda-footer__columns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        :root {
            --kda-header-height: 5.5rem;
        }

        .kda-footer__inner {
            gap: var(--kda-space-9);
            padding-block: var(--kda-space-10) var(--kda-space-6);
        }

        .kda-footer__columns {
            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, 1fr)
                minmax(0, 0.9fr)
                minmax(0, 1.15fr);
            gap: var(--kda-space-8);
        }
    }

    /* ⚠️ Yatay menünün eşiği sitenin genel 64rem'inden AYRI ve bilerek daha
       yüksek; 75rem (1200 px) altında menü düğmesine döner.
       Eski 64rem eşiği SIĞMIYORDU: başlık satırı 1047,1 px istiyor, 1024 px'te
       kabuk 1014 px veriyordu. Sağdaki grup taşıyor, MENÜ DÜĞMESİ ekranın
       67,5 px dışında kalıyordu — `.kda-header` sabit konumlu olduğu için de
       kırpılıyor, kaydırmayla ulaşılamıyordu (1024–1094 px arası menüsüzdü).
       Bu bloğa başka kural ekleme — yalnız gezinme eşiği burada. */
    @media (min-width: 75rem) {
        .kda-nav {
            display: flex;
        }
    }

}