/* ==========================================
   KADROMUZ SAYFASI
   Sarı eğik uzmanlık bandı, büyük lider kartı ve gri tonlu portre ızgarası.
   Portreler üzerine gelince renklenir (sarı stüdyo zemini ortaya çıkar),
   isim ve görev fotoğrafın koyu alt kısmında okunur.
   ========================================== */

/* --- Uzmanlık bandı --- */
.tp-band {
    position: relative;
    z-index: 2;
    margin: -8px 0 4px;
    overflow: hidden;
    padding: 14px 0;
}

/* Eğim sabit genişlikli şeride verilir; kayan iz dönerse ekran dışına kaçar */
.tp-band__strip {
    width: 104%;
    margin-left: -2%;
    overflow: hidden;
    background: var(--brand);
    rotate: -1.6deg;
}

.tp-band__track {
    display: flex;
    width: max-content;
    animation: tp-band 60s linear infinite;
}

.tp-band__group {
    display: flex;
    align-items: center;
    flex: none;
}

.tp-band__group span {
    padding: 16px 22px;
    font-size: clamp(1.1rem, 2.2vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--ink);
}

.tp-band__group i {
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--ink);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@keyframes tp-band {
    to { transform: translateX(-50%); }
}

/* --- Izgara --- */
.tp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
}

.tp-num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* --- Portre kartları --- */
.tp-card__media {
    position: absolute;
    inset: 0;
}

.tp-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.tp-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 22px;
    background: #d9d8d5;
    outline: none;
    transition: rotate 0.5s var(--ease), box-shadow 0.4s ease;
}

.tp-card__media img {
    filter: grayscale(1) contrast(1.04);
    transition: filter 0.5s ease, scale 0.9s var(--ease);
}

.tp-card:hover,
.tp-card:focus-visible {
    rotate: -1.2deg;
    box-shadow: 0 0 0 3px var(--brand), 0 24px 48px -24px rgba(0, 0, 0, 0.45);
}

.tp-card:nth-child(even):hover,
.tp-card:nth-child(even):focus-visible {
    rotate: 1.2deg;
}

.tp-card:hover .tp-card__media img,
.tp-card:focus-visible .tp-card__media img {
    filter: none;
    scale: 1.06;
}

.tp-card__info {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 16px 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.tp-card__name {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.tp-card__role {
    margin: 6px 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}

.tp-card__bio {
    display: -webkit-box;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    opacity: 0;
    transition: max-height 0.5s var(--ease), margin 0.5s var(--ease), opacity 0.3s ease;
}

.tp-card:hover .tp-card__bio,
.tp-card:focus-visible .tp-card__bio {
    max-height: 5em;
    margin-top: 8px;
    opacity: 1;
}

/* Ekip lideri: diğerleriyle aynı boyutta, renkli ve sarı çerçeveli */
.tp-card--lead {
    box-shadow: 0 0 0 3px var(--brand);
}

.tp-card--lead .tp-card__media img {
    filter: none;
}

.tp-card--lead .tp-num {
    background: var(--brand);
}

/* --- Sosyal bağlantılar --- */
.tp-social {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.tp-social a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.tp-social a:hover {
    background: var(--brand);
    color: var(--ink);
}

/* --- Ekibe katıl karesi --- */
.tp-join {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    aspect-ratio: 4 / 5;
    padding: 20px;
    border: 2px dashed rgba(13, 13, 13, 0.25);
    border-radius: 22px;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.tp-join__plus {
    position: absolute;
    top: 12px;
    left: 20px;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 1;
    color: var(--brand);
    -webkit-text-stroke: 2px var(--ink);
    transition: rotate 0.6s var(--ease);
}

.tp-join strong {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.tp-join > span:not([class]) {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
}

.tp-join__arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand);
}

.tp-join__arrow svg {
    width: 18px;
    height: 18px;
}

.tp-join:hover {
    background: var(--brand);
    border-color: var(--ink);
}

.tp-join:hover .tp-join__plus {
    rotate: 90deg;
    color: #fff;
}

/* --- Duyarlı düzen --- */
@media (max-width: 1100px) {
    .tp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .tp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tp-card {
        border-radius: 16px;
    }

    .tp-card__info {
        padding: 32px 12px 12px;
    }

    .tp-card__role {
        font-size: 0.6rem;
    }

    .tp-join {
        padding: 14px;
        border-radius: 16px;
    }

    .tp-join > span:not([class]) {
        display: none;
    }
}

/* Dokunmatik ekranlarda üzerine gelme yok: portreler renkli gösterilir */
@media (hover: none) {
    .tp-card__media img {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-band__track {
        animation: none;
    }
}