/* Bölüm: profesyonel özellikler.

   Üstte metin + yan görsel, altında sağdan sola SÜREKLİ kayan iki etiket şeridi.
   Etiketlerin çevresinde ince turkuaz bir ışık halkası döner. */

.pf-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(var(--sp-6), 4vw, var(--sp-10));
    align-items: center;
}

.pf-top--solo { grid-template-columns: minmax(0, 1fr); }
.pf-top--solo .pf-intro { max-width: 68ch; }

.pf-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
    background: var(--surface-soft);
}

/* ------------------------------------------------------------ Kayan şeritler */

.pf-marquee {
    display: grid;
    gap: clamp(var(--sp-3), 1.2vw, var(--sp-4));
    /* DİKKAT: ölçekte --sp-7 ve --sp-9 YOK (1,2,3,4,5,6,8,10,12,16,20,24).
       Olmayan bir değişken clamp() içinde kuralın tamamını düşürür; burada
       şerit görselin dibine yapışmıştı. Yalnızca tanımlı adımlar kullanılır. */
    margin-block: clamp(var(--sp-8), 4vw, var(--sp-16));
    /* Kenarlarda yumuşak kayboluş: etiketler kesilerek bitmez */
    -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.pf-row {
    display: flex;
    overflow: hidden;
}

/* İki özdeş şerit yan yana durur ve birlikte %100 sola kayar; birincisi
   ekrandan çıktığında ikincisi tam onun yerine oturduğu için döngüde
   sıçrama olmaz. */
.pf-track {
    display: flex;
    flex: none;
    gap: clamp(var(--sp-3), 1vw, var(--sp-4));
    padding-right: clamp(var(--sp-3), 1vw, var(--sp-4));
    animation: pf-slide var(--pf-sure, 24s) linear infinite;
}

@keyframes pf-slide {
    to { transform: translateX(-100%); }
}

/* Okumak isteyen dursun diye */
.pf-row:hover .pf-track,
.pf-row:focus-within .pf-track { animation-play-state: paused; }

/* ------------------------------------------------------------------ Etiket */

.pf-chip {
    position: relative;
    flex: none;
    padding: 11px 20px;
    border-radius: var(--r-full);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    color: var(--ink-800);
    white-space: nowrap;
}

.pf-chip__label { position: relative; z-index: 1; }

/* Dönen turkuaz çerçeve.

   Halka, maskeyle oyulmuş 1 px'lik bir çerçevedir; içindeki ışık huzmesi
   TRANSFORM ile döner. Konik degradenin açısını canlandırmak her karede
   yeniden boyama demek olurdu; dönen çocuk öğe ise birleştirme aşamasında
   çalışır, 20+ etikette bile kare düşmez. */
.pf-chip__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--border);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.pf-chip__ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(
        transparent 0 66%,
        var(--brand-400) 79%,
        var(--brand-600) 85%,
        transparent 93%
    );
    animation: pf-ring 3.4s linear infinite;
}

/* Şeritler aynı anda parlamasın diye halkalar kaydırmalı başlar */
.pf-chip:nth-child(3n + 2) .pf-chip__ring::before { animation-delay: -1.1s; }
.pf-chip:nth-child(3n + 3) .pf-chip__ring::before { animation-delay: -2.2s; }

@keyframes pf-ring {
    to { rotate: 1turn; }
}

/* Koyu zeminde */
.section--deep .pf-chip {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: none;
}

.section--deep .pf-chip__ring { background: rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------- Kırılımlar */

@media (max-width: 900px) {
    .pf-top { grid-template-columns: minmax(0, 1fr); }
    .pf-visual { order: -1; }
    .pf-visual img { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
    .pf-chip { padding: 9px 16px; font-size: var(--fs-xs); }
}

/* Hareket azaltılmışsa: şeritler durur, etiketler normal liste gibi sarar.
   Sadece animasyonu durdurmak yetmez — ekrandan taşan etiketler görünmez
   kalırdı. */
@media (prefers-reduced-motion: reduce) {
    .pf-marquee {
        -webkit-mask: none;
                mask: none;
    }

    .pf-row { overflow: visible; }

    .pf-track {
        flex-wrap: wrap;
        animation: none;
        padding-right: 0;
    }

    /* Kopya şerit VE şerit içindeki tekrar eden etiketler gizlenir; yoksa
       duran listede her özellik iki kez görünür. */
    .pf-track[aria-hidden="true"],
    .pf-chip[aria-hidden="true"] { display: none; }

    .pf-chip__ring::before { animation: none; }
}