/* SU AGENCY — referans siteleri (Sections/site-frames)

   Alt alta dizüstü çerçeveleri. Logo şeridi "bu markalarla çalıştık"
   der; bu bölüm işi GÖSTERİR: her çerçevede markanın yayındaki
   sitesinin gerçek ekran görüntüsü var ve satır siteye bağlanıyor.

   ÇERÇEVE HTML/CSS. Fotoğrafa gömülü bir dizüstü maketi kullanmak,
   ekran görüntüsünü o maketin perspektifine oturtmayı gerektirirdi ve
   her görselde ayrı ayrı bozulurdu. Burada ekran düz, oran sabit.

   ANİMASYON: satırlar sırayla belirir, tek seferlik. Referans bölümü
   bir vitrin; sürekli dönen bir hareket dikkati işten çalardı. */

.rfs {
    display: grid;
    gap: clamp(var(--sp-10), 6vw, var(--sp-16));
    margin: clamp(var(--sp-8), 4vw, var(--sp-12)) 0 0;
    padding: 0;
    list-style: none;
}

.rfs__satir {
    opacity: 0;
    animation: rfs-belir 0.6s var(--ease-out) forwards;
    animation-delay: calc(var(--sira) * 0.12s + 0.1s);
}

@keyframes rfs-belir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ Bilgi */

.rfs__bilgi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
}

.rfs__marka {
    font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.rfs__not {
    flex: 1 1 320px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

.rfs__baglanti {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    /* brand-700 · beyaz = 5,36:1 */
    color: var(--brand-700);
    text-decoration: none;
    white-space: nowrap;
}

.rfs__baglanti svg { width: 13px; height: 13px; }

.rfs__baglanti:hover { text-decoration: underline; }

/* ----------------------------------------------------------- Cihaz */

.rfs__cihaz { display: grid; justify-items: center; }

.rfs__ekran {
    position: relative;
    width: 100%;
    padding: 12px 12px 14px;
    border-radius: 14px 14px 6px 6px;
    /* Kapak: üstte açık, altta koyu — metal kalınlık hissi */
    background: linear-gradient(165deg, #334155 0%, #1e293b 58%, #0f172a 100%);
    box-shadow:
        0 26px 52px rgba(15, 23, 42, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Kamera: cihaz olduğunu tek noktayla söyler */
.rfs__kamera {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.30);
    transform: translateX(-50%);
}

.rfs__cam {
    /* Ekran görüntüleri 1280×800 — oran sabit, kırpma yok */
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.rfs__cam img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/*
 * Taban. Kapaktan biraz geniş; gerçek bir dizüstünde gövde de öyle.
 * Ortadaki tırnak (i) açma girintisi.
 */
.rfs__taban {
    position: relative;
    display: block;
    width: 104%;
    max-width: 100vw;
    height: 13px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #475569 0%, #334155 44%, #1e293b 100%);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
}

.rfs__taban i {
    position: absolute;
    top: 0;
    left: 50%;
    width: 84px;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: rgba(15, 23, 42, 0.55);
    transform: translateX(-50%);
}

/* ------------------------------------------------------------- Alt */

.rfs__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: clamp(var(--sp-8), 4vw, var(--sp-10));
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.rfs__alt-not {
    flex: 1 1 380px;
    max-width: 76ch;
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--ink-600);
}

/* Koyu zeminde */
.section--deep .rfs__marka    { color: #fff; }
.section--deep .rfs__not,
.section--deep .rfs__alt-not  { color: var(--ink-300); }
.section--deep .rfs__baglanti { color: var(--brand-300); }
.section--deep .rfs__alt      { border-top-color: rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------- Ölçüler */

@media (max-width: 640px) {
    .rfs        { gap: var(--sp-10); }
    .rfs__ekran { padding: 8px 8px 10px; border-radius: 10px 10px 4px 4px; }
    .rfs__taban { width: 100%; height: 10px; }
    .rfs__taban i { width: 56px; height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .rfs__satir { animation: none; opacity: 1; transform: none; }
}