/* ==========================================================================
   CYBERZ — Battlefields (yatay kaydırmalı ekran görüntüleri)
   HTML : index.html → "BATTLEFIELDS" bölümü
   CSS  : css/home/08-fields.css
   ========================================================================== */

.fields{ overflow:hidden; }
.fields__nav{ display:flex; gap:10px; flex-shrink:0; }
.fnav{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px;
    border:1px solid var(--line-2);
    color:var(--fg-2); cursor:pointer;
    transition:border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.fnav svg{ width:19px; height:19px; }
.fnav:hover{ border-color:var(--energy); color:var(--energy); background:var(--energy-a); }
.fnav:disabled{ opacity:.3; cursor:not-allowed; }
.fnav:disabled:hover{ border-color:var(--line-2); color:var(--fg-2); background:none; }

.fields__rail{
    list-style:none;
    display:flex; gap:clamp(14px,2vw,24px);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    padding:4px var(--gutter) 26px;
    scrollbar-width:thin;
}
.field{ flex:0 0 min(46vw,620px); scroll-snap-align:start; }
.field figure{
    border:1px solid var(--line);
    background:var(--bg-1);
    overflow:hidden;
    clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
    height:100%;
}
.field img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.field figcaption{
    display:flex; flex-direction:column; gap:6px;
    padding:18px 20px 20px;
}
.field figcaption b{
    font-family:var(--font-display); font-size:.9375rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--fg);
}
.field figcaption .mono{ color:var(--fg-3); }

.fields__say{
    max-width:none; margin-top:clamp(22px,3vw,38px);
    font-family:var(--font-display);
    font-size:clamp(1.2rem,3vw,2.1rem); font-weight:700;
    line-height:1.3; color:var(--fg-3);
}
.fields__say b{ color:var(--fg); }

@media (max-width:760px){
    .field{ flex:0 0 86vw; }
    .fields__nav{ display:none; }   /* dokunmatikte kaydirma zaten dogal */
}