/* ==========================================================================
   KeyDesignArt — Bileşen katmanı
   Sayfadan bağımsız, yeniden kullanılabilir parçalar.
   ========================================================================== */

@layer components {

    /* Etiket / göz üstü başlık
       ---------------------------------------------------------------------- */
    .kda-eyebrow {
        display: flex;
        align-items: center;
        gap: var(--kda-space-3);
        margin: 0 0 var(--kda-space-4);
        max-width: none;
        color: var(--kda-ink-muted);
        font-size: 0.8125rem;
        font-weight: var(--kda-weight-bold);
        letter-spacing: var(--kda-tracking-wider);
        text-transform: uppercase;
    }

    /* Rozet: sarı disk + içinde koyu `</>` ikonu.
       Disk `background-color`'dan, ikon `background-image`'daki SVG'den gelir;
       maske kullanılsaydı diskin kendisi de kesilirdi. İkon yazı tipi değil,
       vektör — her ölçüde keskin kalır ve ek dosya indirilmez.
       ⚠️ SVG içindeki `%230a0a0b`, `--kda-on-accent` belirtecinin ta kendisi.
       Veri adresi CSS değişkeni okuyamadığı için renk elle yazılı: o belirteç
       değişirse buradaki de elle güncellenmeli (`EyebrowBadgeTests` sınıyor).
       ⚠️ 18 px, etiketin satır kutusundan (13 px × 1.65 ≈ 21,5 px) küçük;
       büyütülürse göz üstü etiketi bulunan 24 yerde satır yüksekliği artar. */
    .kda-eyebrow::before {
        content: "";
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: var(--kda-accent);
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8.4 5.2 12 9 15.6M15 8.4 18.8 12 15 15.6M13.5 6.2 10.5 17.8'/%3E%3C/svg%3E"),
            radial-gradient(120% 120% at 30% 24%,
                color-mix(in srgb, var(--kda-accent) 55%, #ffffff) 0%,
                var(--kda-accent) 48%,
                var(--kda-accent-deep) 100%);
        background-size: 62%, cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 5px var(--kda-accent-ghost),
                    0 3px 10px -3px var(--kda-accent-glow);
    }

    /* Durum rozeti — "Yayında / Live"
       ⚠️ `products.css`'ten BURAYA taşındı (19.08): artık ana sayfadaki ürün
       kartında da kullanılıyor ve ana sayfa `products.css` yüklemiyor. Tek
       rozet için oraya koca bir bölüm dosyası eklemek yerine ortak katmana alındı.

       Baştaki yuvarlak, göz üstü etiketinin (`.kda-eyebrow::before`) diskiyle
       AYNI dili konuşur — aynı sarı, aynı radyal parlama, aynı halka + gölge —
       ama İKON TAŞIMAZ: bu disk 9 px ve 18 px'lik rozetin yarısı; içine `</>`
       konsaydı o ölçüde lekeye dönerdi (kullanıcı kararı).
       ⚠️ Halka oranı da ölçekli: göz üstü rozetinde 5/18 (%28), burada 3/9
       (%33). Eskiden 4/6 (%67) idi ve nokta değil hale gibi okunuyordu.
       ---------------------------------------------------------------------- */
    .kda-status {
        display: inline-flex;
        align-items: center;
        gap: var(--kda-space-2);
        padding: 0.22rem 0.5rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        color: var(--kda-ink-soft);
        letter-spacing: var(--kda-tracking-wide);
    }

    .kda-status::before {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-image: radial-gradient(120% 120% at 30% 24%,
            color-mix(in srgb, var(--kda-accent) 55%, #ffffff) 0%,
            var(--kda-accent) 48%,
            var(--kda-accent-deep) 100%);
        box-shadow: 0 0 0 3px var(--kda-accent-ghost),
                    0 2px 6px -2px var(--kda-accent-glow);
    }

    .kda-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--kda-space-2);
        padding: 0.3rem 0.7rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-pill);
        background: var(--kda-glass);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-xs);
        font-weight: var(--kda-weight-medium);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
        text-decoration: none;
    }

    /* Butonlar
       ---------------------------------------------------------------------- */
    .kda-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--kda-space-2);
        padding: 0.75rem 1.4rem;
        border: 1px solid transparent;
        border-radius: var(--kda-radius-button);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-semibold);
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--kda-dur-fast) var(--kda-ease),
                    border-color var(--kda-dur-fast) var(--kda-ease),
                    color var(--kda-dur-fast) var(--kda-ease),
                    transform var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-btn:active {
        transform: translateY(1px);
    }

    .kda-btn--solid {
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        box-shadow: 0 0 28px -6px var(--kda-accent-glow);
    }

    .kda-btn--solid:hover {
        background: var(--kda-accent-bright);
        color: var(--kda-on-accent);
        box-shadow: 0 0 40px -4px var(--kda-accent-glow);
    }

    .kda-btn--light {
        background: var(--kda-ink);
        color: var(--kda-bg);
    }

    .kda-btn--light:hover {
        background: var(--kda-ink-soft);
        color: var(--kda-bg);
    }

    .kda-btn--ghost {
        border-color: var(--kda-line-strong);
        background: var(--kda-glass);
        color: var(--kda-ink);
    }

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

    .kda-btn--sm {
        padding: 0.5rem 1rem;
        font-size: var(--kda-text-sm);
    }

    /* Bağlantı oku
       ---------------------------------------------------------------------- */
    /* İkonlu liste — iletişim satırları ve yararlı bağlantılar
       İkonlar satır içi SVG; renk SVG'nin içinde gömülü (belirteç okuyamıyor).
       ---------------------------------------------------------------------- */
    .kda-iconlist {
        display: grid;
        gap: var(--kda-space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-iconlist__item {
        max-width: none;
        padding-left: var(--kda-space-6);
        background-position: left 0.2rem;
        background-repeat: no-repeat;
        background-size: 1.05rem 1.05rem;
        line-height: var(--kda-leading-normal);
    }

    .kda-iconlist__item a {
        color: var(--kda-ink-soft);
        text-decoration: none;
        transition: color var(--kda-dur-base) var(--kda-ease);
    }

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

    .kda-iconlist__item address {
        margin: 0;
        color: var(--kda-ink-soft);
        font-style: normal;
    }

    .kda-iconlist__item--address {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--phone {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 3 5.2 2 2 0 0 1 5 3Z'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--mail {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--search {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--blog {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5Z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5Z'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--faq {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.3a2.5 2.5 0 1 1 3.4 2.3c-.7.3-1 .9-1 1.6v.3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--doc {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5M8.5 13h7M8.5 16.5h4.5'/%3E%3C/svg%3E");
    }

    /* Hizmet ikonları
       ⚠️ Glifler `sections/services.css`'tekilerin aynısı ama kopyaları burada
       durmak zorunda: alt bilgi her sayfada basılıyor, o bölüm dosyası ise
       yalnız hizmet sayfalarında yükleniyor.
       ---------------------------------------------------------------------- */
    .kda-iconlist__item--code {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.9' y='4.2' width='18.2' height='15.6' rx='2.2'/%3E%3Cpath d='M2.9 8.9h18.2M6.2 6.5h.01M8.9 6.5h.01'/%3E%3Cpath d='m10.6 12.6-1.9 1.9 1.9 1.9M14 12.6l1.9 1.9-1.9 1.9'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--api {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.4' cy='5.8' r='2.6'/%3E%3Ccircle cx='5.4' cy='18.2' r='2.6'/%3E%3Ccircle cx='18.6' cy='12' r='2.6'/%3E%3Cpath d='M7.7 7.1 16.3 10.7M7.7 16.9l8.6-3.6'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--cloud {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19.2h10.3a4.1 4.1 0 0 0 .5-8.2 6.1 6.1 0 0 0-11.7-1.4A4.4 4.4 0 0 0 7 19.2Z'/%3E%3Cpath d='M12 16.4v-5.2m0 0-2 2m2-2 2 2'/%3E%3C/svg%3E");
    }

    .kda-iconlist__item--palette {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c-5 0-9.2 4-9.2 9.2s4.2 9.2 9.2 9.2a2.2 2.2 0 0 0 1.7-3.6 2.2 2.2 0 0 1 1.7-3.6h2a4.4 4.4 0 0 0 4.4-4.4c0-3.8-4.4-6.8-9.8-6.8Z' fill='none' stroke='%23ffe600' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='7.4' cy='12.9' r='1.25' fill='%23ffe600'/%3E%3Ccircle cx='8.6' cy='8.5' r='1.25' fill='%23ffe600'/%3E%3Ccircle cx='12.6' cy='6.6' r='1.25' fill='%23ffe600'/%3E%3Ccircle cx='16.5' cy='8.9' r='1.25' fill='%23ffe600'/%3E%3C/svg%3E");
    }

    /* Sosyal düğmeler
       ---------------------------------------------------------------------- */
    .kda-social {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kda-space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

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

    .kda-social__link {
        display: grid;
        place-items: center;
        width: var(--kda-control-height);
        height: var(--kda-control-height);
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-glass);
        text-decoration: none;
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-social__link::before {
        content: "";
        width: 1.05rem;
        height: 1.05rem;
        background: var(--kda-ink-soft);
        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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-social__link:hover {
        border-color: var(--kda-accent);
        background: var(--kda-accent-ghost);
    }

    .kda-social__link:hover::before {
        background: var(--kda-accent);
    }

    .kda-social__link--linkedin::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3zM9.5 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.6c0-1.34-.03-3.07-1.95-3.07-1.96 0-2.26 1.46-2.26 2.97V21h-4z'/%3E%3C/svg%3E");
    }

    .kda-social__link--instagram::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
    }

    .kda-social__link--twitter::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.1-5.8 6.1H1.5l7.5-8.6L1.2 3h6.6l4.5 5.6zm-1.1 16.1h1.8L7.7 4.8H5.8z'/%3E%3C/svg%3E");
    }

    .kda-social__link--facebook::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3-.04-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23V9.9H7.4V13h2.72v8z'/%3E%3C/svg%3E");
    }

    .kda-social__link--whatsapp::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.74.46 3.44 1.32 4.94L2.1 22l5.36-1.4a9.8 9.8 0 0 0 4.58 1.16h.01c5.43 0 9.84-4.4 9.84-9.84 0-2.63-1.02-5.1-2.88-6.96A9.78 9.78 0 0 0 12.04 2Zm0 18a8.2 8.2 0 0 1-4.16-1.14l-.3-.18-3.1.81.83-3.02-.2-.31a8.13 8.13 0 0 1-1.25-4.32c0-4.52 3.68-8.2 8.2-8.2a8.15 8.15 0 0 1 8.18 8.2c0 4.52-3.68 8.16-8.2 8.16Zm4.5-6.11c-.25-.13-1.46-.72-1.69-.8-.22-.09-.39-.13-.55.12s-.63.8-.77.96c-.14.17-.28.19-.53.06a6.7 6.7 0 0 1-1.97-1.21 7.4 7.4 0 0 1-1.36-1.7c-.14-.24 0-.37.11-.5.11-.11.25-.28.37-.43.12-.14.16-.24.25-.41.08-.17.04-.31-.02-.44-.06-.12-.55-1.33-.76-1.82-.2-.48-.4-.41-.55-.42h-.47c-.16 0-.42.06-.64.31-.22.25-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.17 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.5.58.19 1.1.16 1.51.1.46-.07 1.46-.6 1.66-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.17-.47-.29Z'/%3E%3C/svg%3E");
    }

    .kda-social__link--youtube::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8ZM10 15.2V8.8l5.2 3.2z'/%3E%3C/svg%3E");
    }

    .kda-arrow-link {
        display: inline-flex;
        align-items: center;
        gap: var(--kda-space-2);
        color: var(--kda-accent);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-semibold);
        text-decoration: none;
    }

    .kda-arrow-link::after {
        content: "";
        width: 0.85em;
        height: 0.85em;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-arrow-link:hover {
        color: var(--kda-accent-bright);
    }

    .kda-arrow-link:hover::after {
        transform: translate(2px, -2px);
    }

    /* Kartlar
       ---------------------------------------------------------------------- */
    .kda-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--kda-space-3);
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-lg);
        background: var(--kda-surface);
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease),
                    transform var(--kda-dur-base) var(--kda-ease);
    }

    .kda-card:hover {
        border-color: var(--kda-line-strong);
        background: var(--kda-surface-2);
        transform: translateY(-3px);
    }

    .kda-card h2,
    .kda-card h3 {
        margin: 0;
        font-size: var(--kda-text-lg);
        letter-spacing: var(--kda-tracking-tight);
    }

    .kda-card p {
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

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

    /* İçerik listeleri
       ---------------------------------------------------------------------- */
    .kda-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
        gap: var(--kda-space-4);
        margin: var(--kda-space-6) 0;
        padding: 0;
        list-style: none;
    }

    .kda-list > li {
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: var(--kda-space-3);
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-lg);
        background: var(--kda-surface);
        transition: border-color var(--kda-dur-base) var(--kda-ease),
                    background-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-list > li:hover {
        border-color: var(--kda-line-strong);
        background: var(--kda-surface-2);
    }

    .kda-list h2,
    .kda-list h3 {
        margin: 0;
        font-size: var(--kda-text-lg);
    }

    .kda-list p {
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
    }

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

    .kda-meta {
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-sm);
        letter-spacing: var(--kda-tracking-wide);
    }

    .kda-empty {
        color: var(--kda-ink-muted);
        font-style: italic;
    }

    /* Formlar
       ---------------------------------------------------------------------- */
    .kda-field {
        display: grid;
        gap: var(--kda-space-2);
        margin-bottom: var(--kda-space-4);
    }

    .kda-contact-form label,
    .kda-field label {
        color: var(--kda-ink);
        font-size: var(--kda-text-sm);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
    }

    .kda-contact-form label {
        display: block;
        margin-bottom: var(--kda-space-2);
    }

    .kda-contact-form input,
    .kda-contact-form textarea,
    .kda-contact-form select,
    .kda-field input,
    .kda-field textarea,
    .kda-field select {
        width: 100%;
        max-width: 34rem;
        padding: 0.7rem 0.9rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink);
        transition: border-color var(--kda-dur-fast) var(--kda-ease),
                    background-color var(--kda-dur-fast) var(--kda-ease);
    }

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

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

    .kda-contact-form input:focus,
    .kda-contact-form textarea:focus,
    .kda-contact-form select:focus {
        background: var(--kda-surface-2);
    }

    /* Yerel ok yerine kendi işaretimiz: tarayıcının varsayılan oku koyu temada
       sistem rengini alıyor ve alanın kenarlığıyla uyuşmuyor. */
    .kda-contact-form select {
        appearance: none;
        padding-right: 2.4rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.85rem center;
        background-size: 1rem;
    }

    .kda-contact-form .field-validation-error,
    .kda-errors {
        display: block;
        margin-top: var(--kda-space-2);
        color: var(--kda-danger);
        font-size: var(--kda-text-sm);
    }

    .kda-errors:empty {
        display: none;
    }

    .kda-contact-form button[type="submit"] {
        margin-top: var(--kda-space-3);
        padding: 0.8rem 1.6rem;
        border-radius: var(--kda-radius-button);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-contact-form button[type="submit"]:hover {
        background: var(--kda-accent-bright);
    }

    /* Form aydınlatma bildirimi — KVKK md. 10 "veri toplama anında bilgilendirme"
       Onay kutusu DEĞİL: hukuki sebep açık rıza değil, sözleşme hazırlığı ve meşru menfaat.
       ---------------------------------------------------------------------- */
    .kda-formnote {
        max-width: none;
        margin: 0 0 var(--kda-space-4);
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-xs);
        line-height: 1.65;
    }

    .kda-formnote a {
        color: var(--kda-ink-muted);
    }

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

    .kda-hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .kda-sent {
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-left: 3px solid var(--kda-accent);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink);
    }

    /* İletişim bilgileri
       ---------------------------------------------------------------------- */
    .kda-contact-info {
        margin-bottom: var(--kda-space-7);
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-lg);
        background: var(--kda-surface);
    }

    .kda-contact-info h2 {
        margin: 0 0 var(--kda-space-3);
        font-size: var(--kda-text-lg);
    }

    .kda-contact-info ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-contact-info li {
        max-width: none;
    }

    .kda-contact-info li + li {
        margin-top: var(--kda-space-2);
    }

    .kda-contact-info-label {
        display: inline-block;
        min-width: 6.5rem;
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-sm);
        letter-spacing: var(--kda-tracking-wide);
    }

    /* Arama formu
       ---------------------------------------------------------------------- */
    .kda-search-form p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3);
        max-width: none;
    }

    .kda-search-form label {
        flex: 1 0 100%;
        color: var(--kda-ink);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-search-form input[type="search"] {
        flex: 1 1 20rem;
        min-width: 0;
        padding: 0.7rem 1rem;
        border: 1px solid var(--kda-line-strong);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink);
    }

    .kda-search-form button {
        padding: 0.7rem 1.5rem;
        border-radius: var(--kda-radius-button);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-search-form button:hover {
        background: var(--kda-accent-bright);
    }

    /* Sayfalama
       ---------------------------------------------------------------------- */
    .kda-pagination ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--kda-space-3);
        margin: var(--kda-space-7) 0 0;
        padding: 0;
        list-style: none;
    }

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

    .kda-pagination a {
        display: grid;
        place-items: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0 0.75rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-medium);
        font-variant-numeric: tabular-nums;
        text-decoration: none;
        transition: border-color var(--kda-dur-fast) var(--kda-ease),
                    background-color var(--kda-dur-fast) var(--kda-ease),
                    color var(--kda-dur-fast) var(--kda-ease);
    }

    .kda-pagination a:hover {
        border-color: var(--kda-line-strong);
        background: var(--kda-surface-2);
        color: var(--kda-ink);
    }

    /* Bulunulan sayfa: dolu vurgu. Bağlantı olarak kalıyor ki klavye sırası
       bozulmasın, ama aria-current ekran okuyucuya durumu söylüyor.
       ---------------------------------------------------------------------- */
    .kda-pagination [aria-current="page"] {
        border-color: var(--kda-accent);
        background: var(--kda-accent);
        color: var(--kda-on-accent);
        font-weight: var(--kda-weight-bold);
    }

    .kda-pagination [aria-current="page"]:hover {
        border-color: var(--kda-accent-bright);
        background: var(--kda-accent-bright);
        color: var(--kda-on-accent);
    }

    .kda-pagination a.kda-pagination__step {
        font-size: var(--kda-text-sm);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
    }

    /* İlgili içerikler
       ---------------------------------------------------------------------- */
    .kda-related {
        margin-top: var(--kda-space-9);
        padding-top: var(--kda-space-6);
        border-top: 1px solid var(--kda-line);
    }

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

    .kda-related img {
        aspect-ratio: 16 / 9;
        width: 100%;
        object-fit: cover;
        border-radius: var(--kda-radius-md);
        margin-bottom: var(--kda-space-3);
    }

    /* Çerez tercihleri düğmesi
       ---------------------------------------------------------------------- */
    .kda-cookie-prefs {
        color: inherit;
        font: inherit;
        text-align: left;
    }

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

    /* Görünüme girince açılma
       Yalnızca betik çalıştığında gizlenir; betik yoksa içerik her zaman görünür.
       ---------------------------------------------------------------------- */
    .kda-js [data-kda-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--kda-dur-slow) var(--kda-ease),
                    transform var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-js [data-kda-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-js [data-kda-reveal] {
            opacity: 1;
            transform: none;
        }
    }

}