/* Hero görseli: influencer anlaşmaları.

   Üstte mağazanın teklifi, ortada kabul ve otomatik üretilen kod, altta
   ölçülen sipariş / ciro / komisyon. Üç parça bilerek kayık.

   ANİMASYON KURALI (bkz. aihero.css, upsellhero.css): döngüyü paylaşan her
   öğenin KENDİ keyframe'i vardır — tek keyframe + delay ile `infinite`
   çalışırken ilk turdan sonra faz kayar.

   Ortak döngü: 8 sn. */

.ifh {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 32rem;
    margin-left: auto;
    padding: var(--sp-10) var(--sp-6) var(--sp-10) var(--sp-10);
}

/* ---------------------------------------------------------- teklif kartı */

.ifh__teklif {
    width: 86%;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
}

.ifh__teklif-baslik {
    margin-bottom: var(--sp-3);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    /* Beyaz üstünde ink-900 → 17,9:1 */
    color: var(--ink-900);
}

.ifh__sartlar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ifh__sart {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 9px;
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    box-shadow: inset 0 0 0 1px var(--border);
    opacity: 0;
}

.ifh__sart-deger {
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1;
    /* surface-soft üstünde brand-800 → 6,7:1 */
    color: var(--brand-800);
}

.ifh__sart-etiket {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: var(--fw-semibold);
    /* surface-soft üstünde ink-600 → 6,9:1 */
    color: var(--ink-600);
}

.ifh__sart--1 { animation: ifh-sart-1 8s var(--ease-out) infinite; }
.ifh__sart--2 { animation: ifh-sart-2 8s var(--ease-out) infinite; }
.ifh__sart--3 { animation: ifh-sart-3 8s var(--ease-out) infinite; }

/* ------------------------------------------------------------ kabul satırı */

.ifh__kabul {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 94%;
    margin: calc(var(--sp-3) * -1) 0 0 auto;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: ifh-kabul 8s var(--ease-out) infinite;
}

/* Profil yer tutucusu — gerçek bir kişi fotoğrafı iddia edilmiyor */
.ifh__avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.ifh__kabul-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.ifh__kabul-etiket {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Koyu bant üstünde → 9:1 üstü */
    color: rgba(255, 255, 255, 0.78);
}

.ifh__kabul-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: #fff;
}

/* Otomatik üretilen kod: kabul edilince beliren tek şey */
.ifh__kod {
    flex: none;
    padding: 6px 11px;
    border-radius: var(--r-sm);
    background: #fff;
    font-family: "Courier New", monospace;
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    /* Beyaz üstünde brand-800 → 7,3:1 */
    color: var(--brand-800);
    opacity: 0;
    animation: ifh-kod 8s var(--ease-out) infinite;
}

/* ----------------------------------------------------------- ölçüm kartı */

.ifh__olcum {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 82%;
    margin: calc(var(--sp-3) * -1) auto 0 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38);
    opacity: 0;
    animation: ifh-olcum 8s var(--ease-out) infinite;
}

.ifh__olcum-baslik {
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    /* Beyaz üstünde ink-500 → 7,4:1 */
    color: var(--ink-500);
}

.ifh__olcum-satir { display: flex; gap: var(--sp-4); }

.ifh__metrik {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.ifh__metrik-deger {
    font-size: 17px;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--ink-900);
}

/* Ciro ve komisyon marka renginde: sonucu gözle ayırt ettirir */
.ifh__metrik--2 .ifh__metrik-deger,
.ifh__metrik--3 .ifh__metrik-deger { color: var(--brand-800); }

.ifh__metrik-etiket {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: var(--fw-semibold);
    /* Beyaz üstünde ink-600 → 7,2:1 */
    color: var(--ink-600);
}

/* -------------------------------------------------------------- animasyon */

@keyframes ifh-sart-1 { 0%, 4%  { opacity: 0; transform: translateY(5px); } 12%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes ifh-sart-2 { 0%, 9%  { opacity: 0; transform: translateY(5px); } 17%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes ifh-sart-3 { 0%, 14% { opacity: 0; transform: translateY(5px); } 22%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(5px); } }

/* Kabul, şartlar göründükten sonra gelir */
@keyframes ifh-kabul {
    0%,  26%  { opacity: 0; transform: translateY(-8px); }
    36%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* Kod kabulden SONRA belirir — "otomatik üretildi" anlatımı bu sırayla durur */
@keyframes ifh-kod {
    0%,  42%  { opacity: 0; transform: scale(0.9); }
    50%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: scale(0.9); }
}

/* Ölçüm en son: kod paylaşıldıktan sonra sipariş gelir */
@keyframes ifh-olcum {
    0%,  56%  { opacity: 0; transform: translateY(8px); }
    66%, 92%  { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(8px); }
}

/* Hareket azaltma tercihi: kompozisyon TAMAMLANMIŞ hâlde durur.
   Animasyonu kapatmak yetmez — parçalar opacity: 0 ile başlıyor. */
@media (prefers-reduced-motion: reduce) {
    .ifh *,
    .ifh { animation: none !important; }

    .ifh__sart,
    .ifh__kabul,
    .ifh__kod,
    .ifh__olcum { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AFİŞ DÜZENİ — fotoğraf verilmişse

   Kompozisyonun zemini artık kart yığını değil, arka planı kesilmiş çoklu
   influencer fotoğrafı. Üç kart ince ŞERİDE dönüşüp fotoğrafın üstüne biner.

   YERLEŞİM KURALI: şeritler GÖVDE hizasında durur, yüz hizasında DURMAZ.
   Fotoğrafta baş ve eller üst %25'te; şeritler %30'dan aşağıda başlar.
   Yüzü kapatan bir kart, fotoğrafı koymanın sebebini yok ederdi.
   ═══════════════════════════════════════════════════════════════════════ */

.ifh--afis {
    max-width: none;
    padding: 0;
}

.ifh__foto {
    display: block;
    /* Sütunun 72px'lik boşluğuna doğru taşar: kap dışına ÇIKMAZ, yalnız
       metin sütunuyla arasındaki boşluğu kullanır. */
    width: 106%;
    max-width: 106%;
    height: auto;
    margin-left: -6%;
}

@media (min-width: 901px) {
    /*
     * Üç parça da TEK SATIRLIK ŞERİDE döner. Kart yığını denendi ve maket
     * üzerinde ölçüldü: üç kutu figürlerin %60'ını kapatıyor, afiş yerine
     * üst üste binmiş bloklar gibi duruyordu. Şeritler ~40px yüksekliğinde
     * olduğu için toplam kapanan alan %29'a iniyor ve gövdeler görünür
     * kalıyor. Teklifin ayrıntısı zaten aşağıdaki vitrinde ("Teklifi siz
     * yazarsınız") tam hâliyle anlatılıyor.
     */
    .ifh--afis .ifh__teklif,
    .ifh--afis .ifh__kabul,
    .ifh--afis .ifh__olcum {
        position: absolute;
        margin: 0;
    }

    /* ----- teklif şeridi: başlık + şartlar aynı satırda ----- */

    /*
     * Şeritler fotoğrafın TAM genişliğine oturur (-6% / 106%): fotoğraf
     * sütundan 6% dışarı taştığı için 100% genişlik sağda 30px'lik bir
     * hizasızlık bırakıyordu ve kaza gibi duruyordu.
     *
     * Üst şerit %30'da: %25'te ürün kavanozunu tutan elin altını kesiyordu
     * (kavanop ~%22-28 aralığında). Anlatının görünür kalması gereken tek
     * nesnesi o.
     */
    .ifh--afis .ifh__teklif {
        top: 30%;
        left: -6%;
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        width: 106%;
        padding: 9px var(--sp-4);
    }

    .ifh--afis .ifh__teklif-baslik {
        flex: none;
        margin-bottom: 0;
    }

    .ifh--afis .ifh__sartlar {
        display: flex;
        justify-content: space-between;
        gap: 0;
        flex: 1;
        min-width: 0;
    }

    /*
     * Eşit üçe bölme DEĞİL. Ölçüldü: "komisyon" 52px, "takipçi indirimi"
     * 60px — eşit sütunda uzun olan kırpılıyordu. Her şart kendi genişliğini
     * alır, artan boşluk aralara dağılır.
     */
    .ifh--afis .ifh__sart {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
        flex: 0 1 auto;
        min-width: 0;
        padding: 0 var(--sp-3);
        border-radius: 0;
        background: none;
        /* Kutu yerine ince ayraç: şerit içinde üç kutu ağır duruyordu */
        box-shadow: inset 1px 0 0 var(--border);
    }

    .ifh--afis .ifh__sart:first-child { box-shadow: none; padding-left: 0; }

    /* Beyaz şerit üstünde ton düzeltmesi: artık surface-soft zemin yok */
    .ifh--afis .ifh__sart-deger  { font-size: 13px; color: var(--brand-800); }
    .ifh--afis .ifh__sart-etiket { color: var(--ink-600); }

    /* ----- kabul şeridi ----- */

    .ifh--afis .ifh__kabul {
        top: 46%;
        left: 28%;
        width: auto;
        max-width: 72%;
        padding: 8px var(--sp-3);
        /* Fotoğrafın üstünde cam yerine dolu koyu bant: figürün deseni
           yazının arkasından geçerse okunmuyor. */
        background: rgba(9, 20, 40, 0.92);
        backdrop-filter: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
                    0 10px 26px rgba(2, 6, 23, 0.4);
    }

    .ifh--afis .ifh__kabul-metin { flex-direction: row; align-items: baseline; gap: 6px; }

    /* ----- ölçüm şeridi: figürlerin bastığı kaide ----- */

    .ifh--afis .ifh__olcum {
        right: auto;
        bottom: 0;
        left: -6%;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-4);
        width: 106%;
        padding: 10px var(--sp-4);
    }

    .ifh--afis .ifh__olcum-baslik {
        flex: none;
        max-width: 7.5rem;
        line-height: 1.25;
    }

    .ifh--afis .ifh__olcum-satir { flex: 1; min-width: 0; }
    .ifh--afis .ifh__metrik-deger { font-size: 16px; }
}

/* Kabul şeridindeki onay işareti — fotoğraf varken avatar dairesi yerine */
.ifh__tik {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-500, #38bdf8);
    color: #06121f;
}

/* ------------------------------------------------------------- duyarlılık */

@media (min-width: 901px) and (max-width: 1200px) {
    .ifh {
        max-width: 28rem;
        padding: var(--sp-8) var(--sp-4) var(--sp-8) var(--sp-6);
    }

    /* Afiş düzeninde daraltma yok: fotoğraf sütunu doldurur, şeritler
       yüzdelik olduğu için kendiliğinden küçülür. */
    .ifh--afis { max-width: none; padding: 0; }

    .ifh--afis .ifh__teklif { top: 30%; left: -6%; width: 106%; padding: 8px var(--sp-3); }
    .ifh--afis .ifh__kabul  { top: 46%; left: 22%; max-width: 84%; }
    .ifh--afis .ifh__olcum  { left: -6%; width: 106%; padding: 9px var(--sp-3); }
    .ifh--afis .ifh__sart   { padding: 0 9px; }

    .ifh__teklif { width: 92%; }
    .ifh__kabul  { width: 98%; padding-left: var(--sp-5); }
    .ifh__olcum  { width: 90%; }
    .ifh__olcum-satir { gap: var(--sp-3); }
}

@media (max-width: 900px) {
    .ifh { margin-left: 0; margin-right: auto; }

    /*
     * Dar ekranda bindirme bırakılır. Sebep ölçüm: 375px'te sütun 324px,
     * şerit %72 ise 233px kalıyor ve üç şart oraya sığmıyor — "takipçi
     * indirimi" kırpılıyordu. Fotoğraf üstte, şeritler altında akar.
     */
    .ifh--afis { display: flex; flex-direction: column; gap: var(--sp-4); }

    .ifh__foto { width: 100%; max-width: 100%; margin-left: 0; }

    .ifh--afis .ifh__teklif,
    .ifh--afis .ifh__kabul,
    .ifh--afis .ifh__olcum {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 560px) {
    .ifh { padding: 0 0 var(--sp-6); max-width: none; }

    .ifh--afis { padding: 0; }

    .ifh__teklif,
    .ifh__kabul,
    .ifh__olcum { width: 100%; }

    .ifh__kabul { margin-top: var(--sp-4); padding: var(--sp-4); }
    .ifh__olcum { margin-top: var(--sp-4); }
    .ifh__olcum-satir { gap: var(--sp-3); }
}