/* 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; }
}


/* ═══════════════════════════════════════════════════════════════════
   SAĞLI SOLLU — örnek mağazalar (site-frames · zigzag)

   Her satır: bir yanda masaüstü monitörü, öbür yanda anlatım. İlk
   satırda ekran SOLDA. Taraf değişimi yalnız ızgara yerleşimiyle;
   DOM sırası (metin → ekran) sabit.

   Monitör HTML/CSS: ince çerçeve, çene yok, boyun + taban. Ekran oranı
   16:10 (görüntüler 1440×900), kırpma yok.
   ═══════════════════════════════════════════════════════════════════ */

.rfz {
    display: grid;
    gap: clamp(var(--sp-16), 9vw, 7.5rem);
    margin: clamp(var(--sp-10), 5vw, var(--sp-16)) 0 0;
    padding: 0;
    list-style: none;
}

.rfz__satir {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "metin cihaz";
    align-items: center;
    gap: clamp(var(--sp-8), 5vw, var(--sp-16));
}

/* İlk satır: ekran SOLDA. Tek satırlar (0, 2, 4) ekranı sola alır. */
.rfz__satir:not(.rfz__satir--ters) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "cihaz metin";
}

.rfz__metin { grid-area: metin; min-width: 0; }
.rfz__cihaz { grid-area: cihaz; min-width: 0; }

/* ------------------------------------------------------------ Metin */

.rfz__sira {
    display: block;
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--brand-700);
}

.rfz__sira i { font-style: normal; font-weight: var(--fw-regular); color: var(--ink-500); }

.rfz__etiket {
    display: inline-block;
    margin-bottom: var(--sp-3);
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    color: var(--ink-700);
}

.rfz__marka {
    margin: 0 0 var(--sp-4);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ink-900);
}

.rfz__not {
    max-width: 44ch;
    margin: 0 0 var(--sp-8);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-600);
}

.rfz__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
}

.rfz__dugme { display: inline-flex; align-items: center; gap: 10px; }
.rfz__dugme svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease-out); }
.rfz__dugme:hover svg { transform: translate(2px, -2px); }

.rfz__alan {
    font-size: var(--fs-sm);
    color: var(--ink-500);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------- Monitör */

.rfz__cihaz {
    display: grid;
    justify-items: center;
    /* Arkadaki yumuşak hale: ekranı zeminden ayırır, çerçeve çizmeden */
    position: relative;
    isolation: isolate;
}

.rfz__cihaz::before {
    content: "";
    position: absolute;
    inset: 6% 4% 18%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(8, 145, 178, 0.16), transparent);
    filter: blur(28px);
}

.rfz__ekran {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 18px;
    /* Çerçeve: koyu, üstten hafif ışık — metal kenar */
    background: linear-gradient(180deg, #1f2937 0%, #0b1220 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 30px 60px -18px rgba(15, 23, 42, 0.45),
        0 12px 24px -12px rgba(15, 23, 42, 0.25);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

a.rfz__ekran:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 44px 80px -22px rgba(15, 23, 42, 0.5),
        0 16px 30px -14px rgba(15, 23, 42, 0.28);
}

.rfz__cam {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}

.rfz__cam img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.9s var(--ease-out);
}

a.rfz__ekran:hover .rfz__cam img { transform: scale(1.03); }

/* Cam yansıması: sol üstten ince ışık */
.rfz__cam::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%);
    pointer-events: none;
}

/* Üzerine gelince: "Detaylı incele" */
.rfz__ortu {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: rgba(2, 6, 23, 0.42);
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
}

.rfz__ortu span {
    padding: 12px 22px;
    border-radius: var(--r-full);
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
    transform: translateY(8px);
    transition: transform 0.35s var(--ease-out);
}

a.rfz__ekran:hover .rfz__ortu      { opacity: 1; }
a.rfz__ekran:hover .rfz__ortu span { transform: none; }

/* Ayak: boyun (i) ve taban (span) */
.rfz__ayak {
    position: relative;
    display: block;
    width: 30%;
    height: 14px;
    margin-top: 44px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    box-shadow: 0 14px 22px -10px rgba(15, 23, 42, 0.35);
}

.rfz__ayak i {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 22%;
    height: 44px;
    background: linear-gradient(90deg, #94a3b8 0%, #e2e8f0 50%, #94a3b8 100%);
    transform: translateX(-50%);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

/* Koyu zeminde */
.section--deep .rfz__marka  { color: #fff; }
.section--deep .rfz__not    { color: var(--ink-300); }
.section--deep .rfz__alan   { color: var(--ink-400); }
.section--deep .rfz__etiket { background: rgba(255, 255, 255, 0.08); color: var(--ink-200); }
.section--deep .rfz__sira   { color: var(--brand-300); }

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

/* Dar ekranda tek sütun: önce ekran, sonra metin (her satırda aynı) */
@media (max-width: 900px) {
    .rfz__satir,
    .rfz__satir:not(.rfz__satir--ters) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "cihaz" "metin";
        gap: var(--sp-8);
    }

    .rfz__not { max-width: none; margin-bottom: var(--sp-6); }
}

@media (max-width: 640px) {
    .rfz          { gap: var(--sp-16); }
    .rfz__ekran   { padding: 6px; border-radius: 12px; }
    .rfz__cam     { border-radius: 7px; }
    .rfz__ayak    { height: 9px; margin-top: 26px; }
    .rfz__ayak i  { height: 26px; }
    .rfz__sira    { margin-bottom: var(--sp-3); }
}

/* Dokunmatikte üzerine gelme yok: örtü hiç görünmesin */
@media (hover: none) {
    .rfz__ortu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rfz__ekran,
    .rfz__cam img,
    .rfz__ortu,
    .rfz__ortu span,
    .rfz__dugme svg { transition: none; }
    a.rfz__ekran:hover,
    a.rfz__ekran:hover .rfz__cam img { transform: none; }
}