/* ==========================================================================
   FIBERKO — Uygulama alanları: dikey açılan fotoğraf panelleri (.fka)
   Koyu zemin; beş dar şerit, aktif olan genişler. Renkler tasarım değişkenlerinden.
   ========================================================================== */

.fka{
    position: relative;
    padding-block: clamp(72px, 8vw, 112px);
    background:
        radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--c-primary) 22%, transparent) 0%, transparent 70%),
        var(--c-ink);
    color: #fff;
    overflow: hidden;
}

/* ---------- Başlık ---------- */
.fka__head{
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end; gap: 20px 60px;
    margin-bottom: clamp(28px, 3vw, 40px);
}
.fka__eyebrow{
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--f-head); font-size: .78rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: color-mix(in srgb, var(--c-primary) 55%, #fff);
}
.fka__eyebrow::before{ content: ""; width: 34px; height: 2px; background: currentColor; border-radius: 2px; }
.fka__title{
    margin: 14px 0 0;
    font-family: var(--f-head); font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em;
    color: #fff;
}
.fka__text{ margin: 0; max-width: 480px; justify-self: end; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.62); }

/* ---------- Paneller ---------- */
.fka__panels{
    display: flex; gap: 10px;
    height: clamp(480px, 58vh, 570px);
}
.fka__p{
    position: relative; flex: 1 1 0; min-width: 0;
    border-radius: 24px; overflow: hidden;
    background: var(--c-ink-2);
    isolation: isolate;
    transition: flex-grow .75s cubic-bezier(.22, .8, .2, 1);
}
.fka__p.is-active{ flex-grow: 4.4; }

.fka__img{
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.12);
    filter: grayscale(.5) brightness(.5);
    transition: transform 1.1s cubic-bezier(.22, .8, .2, 1), filter .7s var(--ease);
}
.fka__img--none{ background: linear-gradient(160deg, var(--c-ink-soft), var(--c-ink)); }
.fka__p:hover .fka__img{ filter: grayscale(.2) brightness(.62); }
.fka__p.is-active .fka__img{ transform: scale(1); filter: grayscale(0) brightness(.78); }
.fka__shade{
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,0) 30%, rgba(11,11,13,.2) 50%, rgba(11,11,13,.92) 100%);
}
.fka__p::after{
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(255,255,255,.1);
    transition: border-color .5s var(--ease);
}
.fka__p.is-active::after{ border-color: color-mix(in srgb, var(--c-primary) 60%, rgba(255,255,255,.2)); }

/* Kapalı hâl: panelin tamamı düğme */
.fka__trigger{
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 26px 0 24px;
    background: none; border: 0; color: #fff; cursor: pointer; font: inherit;
    transition: opacity .35s var(--ease);
}
.fka__trigger:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: -4px; border-radius: 24px; }
.fka__rail-num{ font-family: var(--f-head); font-weight: 700; font-size: .85rem; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.fka__rail-t{
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--f-head); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; white-space: nowrap;
    max-height: 70%; overflow: hidden; text-overflow: ellipsis;
}
.fka__rail-ic{
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: .85rem;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06);
    backdrop-filter: blur(6px);
    transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
}
.fka__p:hover .fka__rail-ic{ background: var(--c-primary); border-color: var(--c-primary); transform: rotate(90deg); }
.fka__p.is-active .fka__trigger{ opacity: 0; pointer-events: none; }

/* Açık hâl */
.fka__body{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: clamp(24px, 3vw, 40px);
    max-width: 620px;
    opacity: 0; transform: translateY(24px);
    visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.fka__p.is-active .fka__body{
    opacity: 1; transform: none; visibility: visible;
    transition: opacity .6s var(--ease) .32s, transform .7s cubic-bezier(.22, .8, .2, 1) .32s, visibility 0s;
}
.fka__num{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px; border-radius: 999px;
    font-family: var(--f-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
}
.fka__num i{ color: color-mix(in srgb, var(--c-primary) 50%, #fff); letter-spacing: 0; }
.fka__t{
    margin: 16px 0 0;
    font-family: var(--f-head); font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.02; letter-spacing: -.03em;
    color: #fff;
}
.fka__d{ margin: 12px 0 0; max-width: 460px; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.78); }

.fka__links{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fka__chip{
    display: inline-flex; align-items: center; gap: 10px; min-height: 42px;
    padding: 6px 16px 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    color: #fff; text-decoration: none;
    font-family: var(--f-head); font-weight: 600; font-size: .9rem;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.fka__chip i{ font-size: .85rem; color: color-mix(in srgb, var(--c-primary) 50%, #fff); padding-inline-start: 4px; }
.fka__chip img{ width: 34px; height: 26px; object-fit: contain; }
.fka__chip:hover, .fka__chip:focus-visible{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }

.fka__cta{
    display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
    padding: 14px 16px 14px 24px; border-radius: 999px;
    background: var(--c-primary); color: #fff; text-decoration: none;
    font-family: var(--f-head); font-weight: 700; font-size: .95rem;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.fka__cta i{
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem;
    background: rgba(255,255,255,.18);
    transition: transform .35s var(--ease);
}
.fka__cta:hover, .fka__cta:focus-visible{ background: #fff; color: var(--c-ink); }
.fka__cta:hover i, .fka__cta:focus-visible i{ transform: rotate(-45deg); background: var(--c-primary); color: #fff; }

/* ---------- Sağdan sola ---------- */
[dir="rtl"] .fka__rail-t{ transform: none; }
[dir="rtl"] .fka__cta i{ transform: scaleX(-1); }
[dir="rtl"] .fka__cta:hover i{ transform: scaleX(-1) rotate(-45deg); }

/* ---------- Duyarlı ---------- */
@media (max-width: 991px){
    .fka__head{ grid-template-columns: 1fr; }
    .fka__text{ justify-self: start; }
    .fka__panels{ flex-direction: column; height: auto; gap: 8px; }
    .fka__p{ flex: none; height: 84px; transition: height .6s cubic-bezier(.22, .8, .2, 1); }
    .fka__p.is-active{ height: 460px; }
    .fka__trigger{ flex-direction: row; justify-content: flex-start; gap: 16px; padding: 0 20px; }
    .fka__rail-t{ writing-mode: horizontal-tb; transform: none; max-height: none; flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; }
    .fka__body{ padding: 22px; }
}
@media (max-width: 575px){
    .fka__p.is-active{ height: 500px; }
    .fka__rail-t{ font-size: 1.02rem; }
    .fka__t{ font-size: 1.75rem; }
    .fka__d{ font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce){
    .fka__p, .fka__img, .fka__body, .fka__p.is-active .fka__body, .fka__rail-ic{ transition: none; }
}