/* ==========================================================================
   KeyDesignArt — Proje detayı (vaka dosyası)
   Kapak, iki sütun (anlatı + yapışkan künye), kabuk genişliğinde ekran
   görüntüsü yığını, diğer projeler. Ölçüler hizmet detayıyla aynı ama
   service.css'e bağlanmaz; bölüm CSS'i kuralı gereği burada tekrar yazılır.
   Gövde tipografisi prose.css'ten, kapanış çağrısı cta.css'ten gelir.
   ========================================================================== */

@layer sections {

    .kda-case {
        display: grid;
        gap: var(--kda-space-8);
    }

    /* Kapak — sayfanın LCP'si. Kırpılmaz: ekran görüntüsünün kenarı kesilmesin. */
    .kda-case__cover {
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-case__cover img {
        display: block;
        width: 100%;
        height: auto;
    }

    .kda-case__layout {
        display: grid;
        gap: var(--kda-space-7);
    }

    .kda-case__main {
        display: grid;
        align-content: start;
        gap: var(--kda-space-6);
        min-width: 0;
    }

    .kda-case__lead {
        max-width: none;
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-light);
        line-height: 1.68;
    }

    /* Ölçü sınırı yok: kenar çubuğu sütunu zaten daraltıyor, üstüne bir de
       uygulanınca sağda ölü alan kalıyor (hizmet detayında öğrenildi). */
    .kda-prose.kda-case__body {
        max-width: none;
        min-width: 0;
    }

    /* Müşteri sözü
       ---------------------------------------------------------------------- */
    .kda-case__quote {
        position: relative;
        margin: 0;
        padding: var(--kda-space-6);
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-case__quote::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);
    }

    .kda-case__quote blockquote {
        margin: 0 0 var(--kda-space-4);
        padding: 0;
        border: 0;
        color: var(--kda-ink);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-light);
        line-height: 1.7;
    }

    .kda-case__quote figcaption {
        display: grid;
        gap: 0.15rem;
    }

    .kda-case__quote-author {
        color: var(--kda-ink);
        font-size: var(--kda-text-md);
        font-weight: var(--kda-weight-semibold);
    }

    .kda-case__quote-role {
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-sm);
    }

    /* Kenar çubuğu — künye ve teklif paneli
       ---------------------------------------------------------------------- */
    /* Dar ekranda künye anlatının ÜSTÜNE gelir: bu sayfanın ana bilgisi künye,
       en sona atılırsa kimse görmez. Geniş ekranda kaynak sırasına döner. */
    .kda-case__aside {
        order: -1;
        display: grid;
        align-content: start;
        gap: var(--kda-space-4);
        min-width: 0;
    }

    .kda-case__panel {
        position: relative;
        overflow: hidden;
        padding: var(--kda-space-5);
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
    }

    .kda-case__panel-title {
        margin: 0 0 var(--kda-space-4);
        padding-bottom: var(--kda-space-3);
        border-bottom: 1px solid var(--kda-line);
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-lg);
        font-weight: var(--kda-weight-medium);
        letter-spacing: 0.012em;
        text-transform: uppercase;
    }

    /* Künye satırları — etiket üstte küçük, değer altında
       ---------------------------------------------------------------------- */
    .kda-case__facts {
        display: grid;
        gap: 0;
        margin: 0;
    }

    .kda-case__fact {
        display: grid;
        gap: 0.2rem;
        padding-block: var(--kda-space-3);
    }

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

    .kda-case__fact dt {
        color: var(--kda-ink-faint);
        font-size: var(--kda-text-2xs);
        font-weight: var(--kda-weight-semibold);
        letter-spacing: var(--kda-tracking-wide);
        text-transform: uppercase;
    }

    .kda-case__fact dd {
        margin: 0;
        color: var(--kda-ink-soft);
        font-size: var(--kda-text-md);
        line-height: 1.5;
    }

    .kda-case__fact dd a {
        color: var(--kda-ink-soft);
        text-decoration: none;
        border-bottom: 1px solid var(--kda-line-strong);
        transition: color var(--kda-dur-base) var(--kda-ease),
                    border-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-case__fact dd a:hover {
        color: var(--kda-accent);
        border-color: var(--kda-accent);
    }

    .kda-case__services {
        display: grid;
        gap: 0.3rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

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

    .kda-case__tech {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin: 0.15rem 0 0;
        padding: 0;
        list-style: none;
    }

    .kda-case__tech li {
        max-width: none;
        padding: 0.2rem 0.5rem;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-bg);
        color: var(--kda-ink-muted);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-2xs);
    }

    .kda-case__site {
        font-size: var(--kda-text-md);
    }

    .kda-case__fact dd .kda-case__site {
        border-bottom: 0;
        color: var(--kda-accent);
    }

    /* Teklif paneli — hayalet buton; kapanış çağrısındaki dolu butonla
       birlikte sarı merdiven oluşmasın.
       ---------------------------------------------------------------------- */
    .kda-case__panel--offer {
        isolation: isolate;
        display: grid;
        justify-items: start;
        gap: var(--kda-space-3);
    }

    .kda-case__panel--offer::before {
        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-case__offer-beam {
        position: absolute;
        z-index: 0;
        inset: 0;
        background: radial-gradient(58% 72% at 100% 0%, var(--kda-accent-ghost) 0%, transparent 64%);
        pointer-events: none;
    }

    .kda-case__panel--offer .kda-case__panel-title {
        position: relative;
        z-index: 1;
        width: 100%;
    }

    .kda-case__offer-text {
        position: relative;
        z-index: 1;
        max-width: none;
        margin: 0;
        color: var(--kda-ink-muted);
        font-size: var(--kda-text-md);
        line-height: 1.7;
    }

    .kda-case__panel--offer .kda-btn {
        position: relative;
        z-index: 1;
        margin-top: var(--kda-space-2);
    }

    /* Ekran görüntüleri — iki sütun kapandıktan sonra kabuğun tamamı
       ---------------------------------------------------------------------- */
    .kda-case__section-title {
        margin: 0 0 var(--kda-space-5);
        padding-top: var(--kda-space-6);
        border-top: 1px solid var(--kda-line);
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-2xl);
        font-weight: var(--kda-weight-medium);
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    /* Diğer projeler
       ---------------------------------------------------------------------- */
    .kda-case__more-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kda-space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kda-case__more-item {
        position: relative;
        max-width: none;
        display: grid;
        align-content: end;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border: 1px solid var(--kda-line);
        border-radius: var(--kda-radius-button);
        background: var(--kda-surface);
        isolation: isolate;
        transition: border-color var(--kda-dur-base) var(--kda-ease);
    }

    .kda-case__more-item:hover {
        border-color: var(--kda-line-strong);
    }

    .kda-case__more-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 2.25rem;
        height: 2px;
        background: var(--kda-accent);
        box-shadow: 0 0 14px var(--kda-accent-glow);
        pointer-events: none;
        transition: width var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-case__more-item:hover::before,
    .kda-case__more-item:has(a:focus-visible)::before {
        width: 100%;
    }

    .kda-case__more-shot {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--kda-dur-slow) var(--kda-ease);
    }

    .kda-case__more-item:hover .kda-case__more-shot {
        transform: scale(1.05);
    }

    .kda-case__more-body {
        display: grid;
        gap: var(--kda-space-2);
        padding: var(--kda-space-8) var(--kda-space-5) var(--kda-space-5);
        background: linear-gradient(to top,
            rgba(5, 5, 6, 0.95) 0%,
            rgba(5, 5, 6, 0.78) 46%,
            rgba(5, 5, 6, 0) 100%);
    }

    .kda-case__more-meta {
        margin: 0;
        max-width: none;
        color: var(--kda-accent);
        font-family: var(--kda-font-mono);
        font-size: var(--kda-text-2xs);
        letter-spacing: var(--kda-tracking-wide);
    }

    .kda-case__more-title {
        margin: 0;
        color: var(--kda-ink);
        font-family: var(--kda-font-display);
        font-size: var(--kda-text-xl);
        font-weight: var(--kda-weight-medium);
        line-height: 1.15;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .kda-case__more-title a {
        color: inherit;
        text-decoration: none;
    }

    .kda-case__more-title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .kda-case__more-title a:focus-visible {
        outline: none;
    }

    .kda-case__more-item:has(a:focus-visible) {
        outline: 2px solid var(--kda-accent-bright);
        outline-offset: 3px;
    }

    .kda-case__all {
        margin-top: var(--kda-space-6);
    }

    /* Duyarlı yerleşim
       ---------------------------------------------------------------------- */
    @media (min-width: 56rem) {
        .kda-case__more-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .kda-case__layout {
            grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
            gap: var(--kda-space-8);
            align-items: start;
        }

        .kda-case__aside {
            order: 0;
            position: sticky;
            top: calc(var(--kda-header-height) + var(--kda-space-5));
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .kda-case__more-shot,
        .kda-case__more-item:hover .kda-case__more-shot {
            transform: none;
            transition: none;
        }
    }

}