/* ==========================================================================
   CYBERZ — Operators (büyük panel + kart rayı)
   HTML : index.html → "OPERATORS" bölümü
   CSS  : css/home/06-operators.css
   ========================================================================== */

.ops{ display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); }

.ops__feature{
    display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    gap:clamp(24px,4vw,60px);
    align-items:center;
    border:1px solid var(--line);
    background:linear-gradient(135deg,var(--bg-1),var(--bg-0) 60%);
    padding:clamp(20px,3vw,40px);
    clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.ops__art{
    position:relative; overflow:hidden; border:1px solid var(--line);
    background:var(--bg-1);
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
}
/* Sanat dosyalarinin orani degisken (0.85 dikey, 1.0, 1.83 yatay). cover ile
   kafa ve kenarlar kesiliyordu; contain ile tamami gorunur, bosluk koyu zemin. */
.ops__art img{
    width:100%; height:100%; object-fit:contain;
    transition:opacity 320ms var(--ease);
}
.ops__art.is-swapping img{ opacity:0; }
.ops__empty{
    position:absolute; inset:0; margin:0;
    display:flex; align-items:center; justify-content:center;
    letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3);
    background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.025) 14px 15px);
}
.opcard__empty{
    display:flex; align-items:center; justify-content:center; text-align:center;
    width:100%; aspect-ratio:1/1;
    line-height:1.6; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3);
    background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.03) 12px 13px);
}
.ops__info{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.ops__info h3{ font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:900; }
.ops__spec{ color:var(--energy); letter-spacing:.12em; text-transform:uppercase; }
.ops__info > p:not(.ops__spec):not(.eyebrow){ color:var(--fg-2); }

.kit{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:1px; background:var(--line);
    border:1px solid var(--line);
    width:100%;
}
.kit div{ background:var(--bg-0); padding:14px 16px; }
.kit dt{
    font-family:var(--font-mono); font-size:.625rem;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--fg-3); margin-bottom:5px;
}
.kit dd{ font-size:.9063rem; color:var(--fg); }

.ops__rail{
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
}
.opcard{
    position:relative; display:block; width:100%; padding:0;
    border:1px solid var(--line);
    background:var(--bg-1);
    overflow:hidden; cursor:pointer; text-align:left;
    transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.opcard img{
    width:100%; aspect-ratio:1/1; object-fit:contain; display:block;
    filter:grayscale(.55) brightness(.72);
    transition:filter var(--t-slow) var(--ease);
}
.opcard__t{
    position:absolute; inset:auto 0 0 0;
    display:flex; flex-direction:column; gap:2px;
    padding:12px 12px 11px;
    background:linear-gradient(to top,rgba(4,6,10,.95),transparent);
}
.opcard__t b{
    font-family:var(--font-display); font-size:.75rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--fg);
}
.opcard__t i{
    font-style:normal;
    font-family:var(--font-mono); font-size:.5938rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}
.opcard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.opcard:hover img{ filter:grayscale(.15) brightness(.95); }
.opcard.is-on{ border-color:var(--energy); }
.opcard.is-on img{ filter:none; }
.opcard.is-on .opcard__t i{ color:var(--energy); }
.opcard--z.is-on{ border-color:var(--danger); }
.opcard--z.is-on .opcard__t i{ color:var(--danger); }

@media (max-width:980px){
    .ops__feature{ grid-template-columns:1fr; }
    .ops__art{ max-width:400px; }
    .ops__rail{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:460px){
    .ops__rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}