/* ==========================================================================
   pages/team.css — Ekip Listesi ve Avukat Profili
   Kaya & Yılmaz Hukuk Bürosu

   Yükleme sırası: variables.css → main.css → components.css → pages/team.css

   Bölümler:
     1. Ekip Yayılımı (/ekibimiz §02) — editoryal dergi düzeni
     2. Portre Plakası — CSS gradient + SVG doku placeholder
     3. Profil Hero (/ekibimiz/{slug} §01)
     4. Profil İçerik Blokları (uzmanlık, eğitim, deneyim, diller, üyelikler)
     5. Profil İletişim
     6. Duyarlı Davranış
   ========================================================================== */


/* ==========================================================================
   1. EKİP YAYILIMI — §02
   Düz grid değil: her figür tam genişlikte bir "yayılım" satırıdır. Tek
   numaralı satırlar portre solda, çift numaralı satırlar portre sağda
   görünür. Satırlar arasında hairline ayırıcı bulunur.
   ========================================================================== */

.team-spread__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-block);
}

.team-figure {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.team-figure:first-child {
    border-top: 0;
    padding-top: var(--space-lg);
}

/* Çift satırlar: portre sağa geçer (kaynak sırası korunur, görsel ters). */
.team-figure--right {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
}

.team-figure--right .team-figure__plate {
    grid-column: 2;
    grid-row: 1;
}

.team-figure--right .team-figure__body {
    grid-column: 1;
    grid-row: 1;
}

/* Gövde metni satır uzunluğu kontrolü ve dikey ritim. */
.team-figure__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 56ch;
}

.team-figure__role {
    margin: 0 0 var(--space-xs);
    color: var(--surface-accent);
}

.team-figure__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: var(--weight-light);
    line-height: 1.06;
    letter-spacing: 0.01em;
    /* Editoryal small caps — isimler için */
    font-variant-caps: small-caps;
    text-transform: lowercase;
}

.team-figure__name-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--surface-accent), var(--surface-accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--border-hairline);
    transition: background-size var(--duration-medium) var(--ease-out),
                color var(--duration-base) var(--ease-subtle);
}

.team-figure__name-link:hover,
.team-figure__name-link:focus-visible {
    color: var(--surface-accent);
    background-size: 100% var(--border-hairline);
}

.team-figure__rule {
    margin-block: var(--space-md) var(--space-md);
}

.team-figure__bio {
    margin: 0;
    color: var(--surface-text-muted);
    font-size: var(--text-body);
    line-height: var(--text-body-leading);
}

/* --- Künye çiftleri (uzmanlık / e-posta) --- */

.team-figure__facts {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-md);
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: var(--border-hairline) solid var(--surface-border);
    width: 100%;
}

.team-figure__facts-label {
    margin: 0;
    color: var(--surface-text-muted);
    padding-top: 0.2em;
}

.team-figure__facts-value {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--surface-text);
    /* E-posta/uzun kelime değerleri dar ekranda satırı taşırmasın. */
    overflow-wrap: break-word;
}

.team-figure__cue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-lg);
    padding-bottom: 2px;
    font-family: var(--font-body);
    font-size: var(--text-reference);
    font-weight: var(--weight-medium);
    letter-spacing: var(--text-reference-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--surface-text);
    border-bottom: var(--border-hairline) solid var(--surface-border);
    transition: var(--transition-color), var(--transition-border);
}

.team-figure__cue:hover,
.team-figure__cue:focus-visible {
    color: var(--surface-accent);
    border-bottom-color: var(--surface-accent);
}

.team-figure__arrow {
    transition: var(--transition-transform);
}

.team-figure__cue:hover .team-figure__arrow {
    transform: translateX(4px);
}

.team-spread__note {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.team-spread__note p {
    margin: 0;
    font-size: var(--text-small);
}


/* ==========================================================================
   2. PORTRE PLAKASI
   Stok fotoğraf yok. Katmanlar:
     · taban  → çapraz gradient (siyah-beyaz izlenimi)
     · texture → inline SVG ince tarama dokusu
     · silhouette → radial gradient ile omuz/baş izlenimi
     · initials → filigran baş harfler
     · plate-ref → köşede §XX referansı
   ========================================================================== */

.team-figure__plate {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: var(--color-charcoal);
    background-image: linear-gradient(150deg, #3a3a37 0%, #1f1f1d 52%, #101010 100%);
    border: var(--border-hairline) solid var(--surface-border);
    isolation: isolate;
}

.team-figure--tall .team-figure__plate {
    aspect-ratio: 4 / 5;
}

/* Varyantlar: aynı sistem, farklı ışık açısı ve doku yoğunluğu. */
.team-figure__plate--a { background-image: linear-gradient(150deg, #3d3d3a 0%, #202020 54%, #0e0e0e 100%); }
.team-figure__plate--b { background-image: linear-gradient(205deg, #43423e 0%, #232322 50%, #121211 100%); }
.team-figure__plate--c { background-image: linear-gradient(120deg, #38383a 0%, #1e1e20 56%, #0f0f11 100%); }
.team-figure__plate--d { background-image: linear-gradient(235deg, #46443f 0%, #26251f 48%, #111110 100%); }

/* İnce tarama dokusu — arşiv baskısı izlenimi. */
.team-figure__texture {
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23E8E1D4' stroke-opacity='0.09' stroke-width='0.6'/%3E%3C/svg%3E");
    background-size: 6px 6px;
}

/* Omuz ve baş izlenimi veren yumuşak radial katman. */
.team-figure__silhouette {
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    background-image:
        radial-gradient(ellipse 26% 20% at 50% 30%, rgba(232, 225, 212, 0.16), transparent 72%),
        radial-gradient(ellipse 52% 34% at 50% 100%, rgba(232, 225, 212, 0.12), transparent 70%);
}

.team-figure__initials {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: calc(var(--z-decor) + 1);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: var(--weight-light);
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-stone);
    opacity: 0.22;
    user-select: none;
}

.team-figure__plate-ref {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: calc(var(--z-decor) + 1);
    font-family: var(--font-body);
    font-size: var(--text-reference);
    font-weight: var(--weight-medium);
    letter-spacing: var(--text-reference-tracking);
    color: var(--color-light-alpha-70);
}

/* Hover: yalnızca ince bir ışık kayması — hareket azaltmada devre dışı. */
.team-figure__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-decor) + 2);
    background: linear-gradient(160deg, var(--color-light-alpha-06), transparent 60%);    opacity: 0;
    transition: var(--transition-opacity);
}

.team-figure:hover .team-figure__plate::after {
    opacity: 1;
}

/* --- Gerçek fotoğraf yüklenmişse (img, hem team listesi hem profil) --- */
.team-figure__photo {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-decor) + 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Archival Codex estetiği: siyah-beyaz + kontrast. */
    filter: grayscale(1) contrast(1.04);
}


/* ==========================================================================
   3. PROFİL HERO — /ekibimiz/{slug} §01
   Sol: büyük portre plakası. Sağ: unvan, isim, kısa biyografi, künye.
   ========================================================================== */

.profile-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.profile-hero__breadcrumb {
    grid-column: 1 / -1;
    margin-bottom: var(--space-lg);
}

.profile-hero__plate {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: var(--color-charcoal);
    border: var(--border-hairline) solid var(--surface-border);
    isolation: isolate;
}

.profile-hero__ref {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--surface-text-muted);
}

.profile-hero__role {
    margin: 0 0 var(--space-xs);
    color: var(--surface-accent);
}

.profile-hero__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--weight-light);
    line-height: 1.04;
    letter-spacing: 0.01em;
    font-variant-caps: small-caps;
    text-transform: lowercase;
}

.profile-hero__rule {
    margin-block: var(--space-md);
}

.profile-hero__bio {
    margin: 0;
    max-width: var(--max-line-length);
    color: var(--surface-text-muted);
    font-size: var(--text-body);
    line-height: var(--text-body-leading);
}

.profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
    margin: var(--space-xl) 0 0;
    padding-top: var(--space-md);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.profile-hero__meta-item {
    min-width: 8rem;
}

.profile-hero__meta-label {
    margin: 0 0 var(--space-3xs);
    color: var(--surface-text-muted);
}

.profile-hero__meta-value {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-regular);
    line-height: 1.3;
}

.profile-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}


/* ==========================================================================
   4. PROFİL İÇERİK BLOKLARI
   ========================================================================== */

/* --- Uzun biyografi --- */

.profile-prose {
    max-width: var(--max-line-length);
    margin-top: var(--space-block);
}

.profile-prose p {
    margin: 0 0 var(--space-paragraph);
    font-size: var(--text-body);
    line-height: var(--text-body-leading);
}

.profile-prose p:last-child {
    margin-bottom: 0;
}

/* İlk paragraf editoryal giriş olarak biraz daha büyük. */
.profile-prose p:first-child {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: var(--weight-light);
    line-height: 1.45;
    color: var(--surface-text);
}

/* --- Uzmanlık alanları (link kartları) --- */

.profile-areas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0;
    margin-top: var(--space-block);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.profile-areas__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
    border-bottom: var(--border-hairline) solid var(--surface-border);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-bg), padding-left var(--duration-base) var(--ease-subtle);
}

.profile-areas__item:hover,
.profile-areas__item:focus-visible {
    background-color: var(--surface-bg-alt);
    padding-left: var(--space-sm);
}

.profile-areas__ref {
    font-family: var(--font-body);
    font-size: var(--text-reference);
    font-weight: var(--weight-medium);
    letter-spacing: var(--text-reference-tracking);
    color: var(--surface-accent);
}

.profile-areas__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    line-height: 1.2;
}

.profile-areas__summary {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--surface-text-muted);
}

/* --- Zaman çizelgesi: eğitim ve deneyim --- */

.profile-timeline {
    margin-top: var(--space-block);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.profile-timeline__item {
    display: grid;
    grid-template-columns: minmax(7rem, 14fr) minmax(0, 86fr);
    gap: var(--space-md) clamp(1.5rem, 4vw, 3.5rem);
    padding-block: var(--space-lg);
    border-bottom: var(--border-hairline) solid var(--surface-border);
}

.profile-timeline__period {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-reference);
    font-weight: var(--weight-medium);
    letter-spacing: 0.08em;
    line-height: 1.5;
    color: var(--surface-accent);
    padding-top: 0.35em;
}

.profile-timeline__content > * {
    margin: 0;
}

.profile-timeline__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    line-height: 1.25;
}

.profile-timeline__subtitle {
    margin-top: var(--space-3xs);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    color: var(--surface-text);
}

.profile-timeline__note {
    margin-top: var(--space-2xs);
    max-width: var(--max-line-length);
    font-size: var(--text-small);
    line-height: 1.7;
    color: var(--surface-text-muted);
}

/* --- Diller ve üyelikler: iki sütunlu künye bloğu --- */

.profile-registry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: var(--space-block);
}

.profile-registry__group > h3 {
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-2xs);
    border-bottom: var(--border-hairline) solid var(--surface-border);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: var(--weight-medium);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--surface-text-muted);
}

.profile-registry__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-registry__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: var(--border-hairline) solid var(--surface-border);
}

.profile-registry__item:last-child {
    border-bottom: 0;
}

.profile-registry__mark {
    flex: 0 0 auto;
    width: 1.25rem;
    height: var(--border-hairline);
    margin-top: 0.7em;
    background-color: var(--surface-accent);
}

.profile-registry__name {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-regular);
    line-height: 1.3;
}

.profile-registry__level {
    font-size: var(--text-small);
    color: var(--surface-text-muted);
}

.profile-registry__text {
    flex: 1 1 12rem;
    font-size: var(--text-body);
    line-height: 1.6;
}


/* ==========================================================================
   5. PROFİL İLETİŞİM
   ========================================================================== */

.profile-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 0;
    margin-top: var(--space-block);
    border-top: var(--border-hairline) solid var(--surface-border);
}

.profile-contact__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
    border-bottom: var(--border-hairline) solid var(--surface-border);
}

.profile-contact__label {
    margin: 0;
    color: var(--surface-text-muted);
}

.profile-contact__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-regular);
    line-height: 1.35;
    word-break: break-word;
}

.profile-contact__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: var(--border-hairline) solid var(--surface-border);
    transition: var(--transition-color), var(--transition-border);
}

.profile-contact__value a:hover,
.profile-contact__value a:focus-visible {
    color: var(--surface-accent);
    border-bottom-color: var(--surface-accent);
}

.profile-contact__note {
    margin-top: var(--space-xl);
    max-width: var(--max-line-length);
    font-size: var(--text-small);
    line-height: 1.7;
    color: var(--surface-text-muted);
}


/* ==========================================================================
   6. DUYARLI DAVRANIŞ
   ========================================================================== */

@media (max-width: 1024px) {
    .team-figure,
    .team-figure--right {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    }

    .profile-hero__inner {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    }
}

@media (max-width: 768px) {
    /* Tek sütun: portre üstte, gövde altta — her iki yayılım yönü için. */
    .team-figure,
    .team-figure--right {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .team-figure--right .team-figure__plate,
    .team-figure--right .team-figure__body {
        grid-column: 1;
        grid-row: auto;
    }

    .team-figure__plate,
    .team-figure--tall .team-figure__plate {
        aspect-ratio: 4 / 3;
        max-height: 22rem;
    }

    .team-figure__body {
        max-width: none;
    }

    .team-figure__initials {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .profile-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-hero__plate {
        aspect-ratio: 4 / 3;
        max-height: 24rem;
    }

    .profile-timeline__item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2xs);
    }

    .profile-timeline__period {
        padding-top: 0;
    }

    .profile-hero__meta {
        gap: var(--space-md) var(--space-lg);
    }
}

@media (max-width: 480px) {
    .team-figure__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3xs);
    }

    .team-figure__facts-label {
        padding-top: var(--space-2xs);
    }
}


/* --- Hareket azaltma: dekoratif geçişleri tamamen kapat --- */

@media (prefers-reduced-motion: reduce) {
    .team-figure__plate::after {
        display: none;
    }

    .team-figure__name-link,
    .team-figure__arrow,
    .profile-areas__item {
        transition: none;
    }

    .team-figure__cue:hover .team-figure__arrow {
        transform: none;
    }

    .profile-areas__item:hover,
    .profile-areas__item:focus-visible {
        padding-left: 0;
    }
}