/* ============================================================
   FIMAK — hakkimizda.css
   Yalnizca hakkimizda.php'de yuklenir; style.css'i tamamlar.

   Bolumler
   1. Giris bolumu (iki kart: degerler + fabrika gorseli)
   2. Hikaye bolumu (basliklar + video bandi + sayaclar)
   3. Responsive (tum media query'ler burada)
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir.

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur.
   ============================================================ */


/* ------------------------------------------------------------
   1. Giris bolumu
   ------------------------------------------------------------ */
.about-intro {
    --radius: 10px;
    --card-fill: rgb(0 0 0 / 0.06);
    --btn-fill: rgb(0 0 0 / 0.05);

    /* --pad-section: clamp(30px, 2px + 7.45vw, 120px); */
    --gap: clamp(15px, 11.4px + 0.97vw, 30px);
    --grid-mt: clamp(30px, 5.7px + 6.47vw, 130px);
    --card-pad: clamp(15px, 4.1px + 2.91vw, 60px);
    --title-size: clamp(24px, 17.2px + 1.81vw, 52px);
    --title-mt: clamp(15px, 11.4px + 0.97vw, 30px);

    position: relative;
    z-index: 10;
    overflow: hidden;
    padding-block: var(--pad-section);
    background-color: var(--surface-alt);
    color: var(--text);

    /* style.css'teki govde degerlerini notrle; olculer bolum icinde verilir */
    letter-spacing: normal;
    line-height: normal;
}

/* Arka plandaki ince cizgi motifi; icerigi etkilemez */
.about-intro__line {
    position: absolute;
    top: 22%;
    left: -7%;
    width: 33%;
    height: auto;
    opacity: 0.7;
    pointer-events: none;
}

.about-intro__container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 40px;
}

.about-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin-top: var(--grid-mt);
}


/* ---------- Sol kart: degerler ---------- */
.about-values {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 700px;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--card-fill);
    padding: var(--card-pad);
}

.about-values__eyebrow {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.72px;
}

.about-values__eyebrow span:first-child { color: var(--brand); }

.about-values__title {
    position: relative;
    z-index: 10;
    max-width: 700px;
    margin-top: var(--title-mt);
    font-size: var(--title-size);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.about-values__body {
    position: relative;
    z-index: 10;
    max-width: 460px;
    margin-top: clamp(12px, 8.4px + 0.97vw, 20px);
    font-size: clamp(16px, 15.1px + 0.24vw, 19px);
    line-height: 1.45;
    letter-spacing: -0.022em;
    color: var(--text-secondary);
}

/* 3D sahne: fareyi takip eden egim (js/hakkimizda.js) */
.about-values__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 375px;
    perspective: 900px;
    transform-style: preserve-3d;
}

.about-values__object {
    width: 520px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 369 / 393;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform, filter;
    filter: drop-shadow(rgb(0 0 0 / 0) 0 24px 22px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fare uzerindeyken anlik takip; ayrilinca yumusak geri donus */
.about-values__stage.is-active .about-values__object {
    transition: transform 0.12s linear, filter 0.4s ease;
}

.about-values__object img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-values__actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
}

.about-btn {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 280px;
    margin-top: 15px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: var(--btn-fill);
    font-size: 15px;
    color: inherit;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.about-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-btn__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Yazi yukari yuvarlanir: ikinci kopya ::after ile alttan gelir */
.about-btn__roll {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    line-height: 1.2em;
    vertical-align: top;
}

.about-btn__roll span {
    position: relative;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-btn__roll span::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 0;
}

.about-intro .about-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}


/* ---------- Sag kart: fabrika gorseli ---------- */
.about-media {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--text);
}

.about-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-media__shade {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.2);
}


/* ------------------------------------------------------------
   Uzerine gelme (yalnizca fareli cihazlar)
   ------------------------------------------------------------ */
@media (hover: hover) and (min-width: 768px) {
    .about-btn:hover {
        background-color: var(--brand);
        color: #fff;
    }

    .about-btn:hover .about-btn__roll span { transform: translateY(-100%); }
    .about-btn:hover .about-btn__icon { transform: rotate(90deg); }

    .about-story__play:hover { background-color: var(--brand); }
}


/* ------------------------------------------------------------
   2. Hikaye bolumu (basliklar + video bandi + sayaclar)
   Sayac kartlari ile sagdaki aciklama panelleri eslesir: hangi sayac
   etkinse o panel gorunur. Rakamlar makara gibi yukari donerek sayar.
   Davranis: js/hakkimizda.js
   ------------------------------------------------------------ */
.about-story {
    --story-pad: clamp(30px, 10.6px + 5.18vw, 110px);
    --story-gap: clamp(30px, 15.5px + 3.88vw, 90px);
    --head-size: clamp(28px, 23.2px + 1.29vw, 48px);
    --lead-size: clamp(16px, 15.1px + 0.26vw, 20px);
    --num-size: clamp(36px, 30.2px + 1.55vw, 60px);

    padding-block: var(--story-pad);
    background-color: var(--surface);
    color: var(--text);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.about-story__container {
    width: 100%;
    max-width: 1550px;
    margin-inline: auto;
    padding-inline: 40px;
}

/* ---------- Baslik satiri ---------- */
.about-story__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 592px);
    gap: var(--story-gap);
}

.about-story__title {
    font-size: var(--head-size);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

/* Destek paragrafi geri planda kalir */
.about-story__lead p + p {
    color: var(--text-muted);
}

.about-story__lead {
    font-size: var(--lead-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.about-story__lead p + p { margin-top: 22px; }


/* ---------- Video bandi ---------- */
.about-story__media {
    position: relative;
    margin-top: clamp(45px, 41.4px + 0.97vw, 65px);
    aspect-ratio: 1780 / 740;
    overflow: hidden;
    background-color: var(--text);
}

/* Gorsel cerceveden buyuk: scroll ile kayarken bosluk kalmaz */
.about-story__media img {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    object-fit: cover;
    will-change: transform;
}

.about-story__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(70px, 59px + 2.93vw, 125px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background-color 0.5s ease;
}

.about-story__play svg {
    width: 34%;
    height: auto;
    /* Ucgenin gorsel agirligi sola kaciyor; optik olarak ortalar */
    margin-left: 8%;
    fill: currentColor;
}

.about-story .about-story__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}


/* ---------- Sayaclar ve paneller ---------- */
.about-story__figures {
    display: grid;
    grid-template-columns: minmax(0, 736px) minmax(0, 606px);
    gap: clamp(50px, 43.7px + 1.68vw, 85px);
    margin-top: clamp(55px, 48.5px + 1.74vw, 90px);
}

.about-counters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-counter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: clamp(230px, 208px + 5.86vw, 350px);
    padding-inline: clamp(10px, 6.4px + 0.97vw, 30px);
    border: 0;
    border-right: 1px solid rgb(0 0 0 / 0.1);
    background: none;
    text-align: left;
    color: var(--text-secondary);
    cursor: default;
    transition: color 0.5s ease;
}

.about-counter:last-child { border-right: 0; }
.about-counter.is-current { color: var(--brand); }

.about-counter__icon {
    width: clamp(40px, 36.7px + 0.88vw, 58px);
    height: auto;
    align-self: flex-start;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-counter__value {
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-size: var(--num-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.about-counter__label {
    margin-top: 9px;
    font-size: clamp(12px, 11.3px + 0.19vw, 16px);
    letter-spacing: -0.01em;
    color: var(--text-tertiary);
    transition: color 0.5s ease;
}

.about-counter.is-current .about-counter__label { color: var(--text); }

.about-story .about-counter:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

/* Makara: 0-9 sutunu yukari kayarak hedef rakamda durur */
.about-odo {
    display: inline-flex;
    height: 1em;
    overflow: hidden;
}

.about-odo__col {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--delay, 0s);
}

.about-odo__col span {
    height: 1em;
    line-height: 1;
}

/* Paneller ust uste durur; yalnizca etkin olan gorunur */
.about-panels {
    position: relative;
    min-height: clamp(240px, 218px + 5.86vw, 350px);
}

.about-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.about-panel.is-current {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.3s;
}

.about-panel h3 {
    font-size: clamp(19px, 17.6px + 0.39vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: var(--brand);
}

.about-panel p {
    margin-top: clamp(30px, 27.8px + 0.58vw, 40px);
    font-size: var(--lead-size);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-muted);
}

.about-panel p + p {
    margin-top: 20px;
    color: var(--text);
}


/* ---------- Video penceresi ---------- */
.about-video {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background-color: #000;
}

.about-video[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-video::backdrop { background-color: #000; }

.about-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
}

.about-video__close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(66 66 69 / 0.72);
    color: #fff;
    cursor: pointer;
}

.about-video__close svg {
    width: 44px;
    height: 44px;
}

.about-video__close:hover { background-color: rgb(86 86 89 / 0.8); }


/* ------------------------------------------------------------
   3. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1279px) {
    .about-media { min-height: 500px; }
}

@media (max-width: 1023px) {

    .about-story__container { padding-inline: 30px; }

    .about-intro__line { display: none; }
    .about-values { min-height: 570px; }
}

@media (max-width: 767px) {
    /* Dar ekranda her sey tek sutun ve ortali; paneller ust uste degil
       alt alta dizilir, boylece hepsi okunabilir kalir */
    .about-story__head,
    .about-story__figures {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .about-story__media {
        aspect-ratio: 16 / 9;
        margin-top: 35px;
    }

    .about-story__play {
        background-color: rgb(0 0 0 / 0.25);
    }

    .about-counters {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }

    .about-counter {
        align-items: center;
        gap: 20px;
        min-height: 0;
        padding-block: 24px;
        border-right: 0;
        border-bottom: 1px solid rgb(0 0 0 / 0.1);
        text-align: center;
    }

    .about-counter:last-child { border-bottom: 0; }
    .about-counter__icon { align-self: center; }
    .about-counter__value { justify-content: center; }

    .about-panels {
        display: grid;
        gap: 40px;
        min-height: 0;
    }

    .about-panel {
        position: static;
        opacity: 1;
        visibility: visible;
    }

    .about-intro__grid { grid-template-columns: 1fr; }

    .about-values__title { max-width: none; }

    .about-values__stage {
        height: 300px;
        margin-top: 20px;
    }

    .about-values__object { width: 240px; }

    .about-values__actions { flex-direction: column; }

    .about-media {
        min-height: 0;
        height: auto;
        aspect-ratio: 10 / 6;
    }
}

@media (max-width: 639px) {
    .about-story__container { padding-inline: 20px; }

    .about-intro__container { padding-inline: 20px; }
    .about-values { min-height: 500px; }
    .about-btn { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {

    .about-odo__col,
    .about-panel,
    .about-counter,
    .about-counter__label,
    .about-story__play { transition: none; }

    .about-values__object,
    .about-btn,
    .about-btn__icon,
    .about-btn__roll span { transition: none; }
}