/* ==========================================================================
   CYBERZ — Video facade — Gameplay ve Cinematic bölümleri + brief şeridi
   HTML : index.html → "GAMEPLAY PROOF / CINEMATIC" bölümü
   CSS  : css/home/05-feed.css
   ========================================================================== */

.feed{
    position:relative;
    aspect-ratio:16/9;
    background:var(--bg-2);
    border:1px solid var(--line);
    overflow:hidden;
    clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
}
.feed__media{ position:absolute; inset:0; }
.feed__poster,
.feed__media iframe{
    position:absolute; inset:0;
    width:100%; height:100%; border:0;
    object-fit:cover;
}
.feed__frame{
    position:absolute; inset:14px;
    border:1px solid rgba(0,212,200,.22);
    pointer-events:none;
}
.feed__frame::before,
.feed__frame::after{
    content:''; position:absolute; width:20px; height:20px;
    border:solid var(--energy); opacity:.85;
}
.feed__frame::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.feed__frame::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.feed--amber .feed__frame{ border-color:rgba(233,166,60,.22); }
.feed--amber .feed__frame::before,
.feed--amber .feed__frame::after{ border-color:var(--amber); }

.feed__meta{
    position:absolute; left:0; bottom:0;
    display:flex; gap:14px; align-items:center;
    padding:11px 16px;
    background:linear-gradient(to right,rgba(4,6,10,.9),transparent);
    color:var(--fg-2);
}
.feed__meta span:first-child{ color:var(--energy); }
.feed--amber .feed__meta span:first-child{ color:var(--amber); }
.feed__meta span:last-child{ color:var(--fg-3); }

.feed__play{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    width:100%; cursor:pointer;
    color:var(--fg);
    background:radial-gradient(60% 60% at 50% 50%,rgba(4,6,10,.34),rgba(4,6,10,.66));
    font-family:var(--font-display); font-size:.75rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    transition:background var(--t) var(--ease);
}
.feed__play svg{
    padding:19px 17px 19px 23px;
    border:1px solid var(--energy);
    border-radius:50%;
    background:rgba(0,212,200,.14);
    box-sizing:content-box;
    transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.feed--amber .feed__play svg{ border-color:var(--amber); background:rgba(233,166,60,.14); }
.feed__play:hover{ background:radial-gradient(60% 60% at 50% 50%,rgba(4,6,10,.2),rgba(4,6,10,.55)); }
.feed__play:hover svg{ background:var(--energy); color:var(--bg-0); transform:scale(1.06); }
.feed--amber .feed__play:hover svg{ background:var(--amber); }

.feed.is-playing .feed__play,
.feed.is-playing .feed__meta,
.feed.is-playing .feed__frame{ display:none; }

.brief{
    list-style:none;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:1px; background:var(--line);
    border:1px solid var(--line); border-top:0;
    margin-top:-1px;
}
.brief li{
    background:var(--bg-1);
    padding:20px 18px;
    display:flex; flex-direction:column; gap:4px;
}
.brief b{
    font-family:var(--font-display); font-size:1.05rem; font-weight:900;
    letter-spacing:.02em; color:var(--fg);
}
.brief span{
    font-family:var(--font-mono); font-size:.6875rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}