/* ==========================================================================
   CYBERZ — Combat loop (pinlenmiş 3 adım)
   HTML : index.html → "COMBAT LOOP" bölümü
   CSS  : css/home/03-loop.css
   ========================================================================== */

.loop{
    background:var(--bg-1);
    border-block:1px solid var(--line);
    padding-block:var(--section-y);
}
.loop__grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    gap:clamp(28px,4vw,64px);
    align-items:center;
}
.loop__stage{ display:flex; flex-direction:column; gap:16px; }
.loop__shot{
    position:relative;
    border:1px solid var(--line);
    overflow:hidden;
    clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.loop__shot img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.steps{ list-style:none; display:flex; flex-direction:column; gap:26px; }
.step{
    padding-left:22px;
    border-left:2px solid var(--line-2);
    transition:border-color var(--t-slow) var(--ease);
}
.step__no{ display:block; color:var(--fg-3); margin-bottom:8px; }
.step h3{ margin-bottom:9px; font-size:clamp(1.2rem,2vw,1.55rem); }
.step p{ color:var(--fg-2); font-size:.9688rem; }
.step.is-on{ border-left-color:var(--energy); }
.step.is-on .step__no{ color:var(--energy); }
/* Sinematik hal disinda uc adim da ayni anda okunuyor; birini "guncel" diye
   isaretlemek anlamsiz olurdu, hepsi ayni agirlikta. */
.loop:not(.is-cinematic) .step{ border-left-color:var(--energy); }
.loop:not(.is-cinematic) .step__no{ color:var(--energy); }

/* --- sinematik (pinlenmis) hal --- */
.loop.is-cinematic{ padding-block:0; }
.loop.is-cinematic .loop__sticky{
    min-height:100svh;
    display:flex; align-items:center;
    padding-block:clamp(64px,9vh,120px);
}
.loop.is-cinematic .loop__stage{
    position:relative; display:block;
    aspect-ratio:16/9;
}
.loop.is-cinematic .loop__shot{
    position:absolute; inset:0;
    opacity:0; transform:scale(1.03);
    transition:opacity 520ms var(--ease), transform 900ms var(--ease);
}
.loop.is-cinematic .loop__shot.is-on{ opacity:1; transform:none; }
.loop.is-cinematic .loop__shot img{ height:100%; aspect-ratio:auto; }
.loop.is-cinematic .step{
    opacity:.3;
    transition:opacity var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.loop.is-cinematic .step.is-on{ opacity:1; }

@media (max-width:900px){
    .loop__grid{ grid-template-columns:1fr; }
    .loop.is-cinematic{ padding-block:var(--section-y); }
    .loop.is-cinematic .loop__sticky{ min-height:0; display:block; padding-block:0; }
    .loop.is-cinematic .loop__stage{ display:flex; aspect-ratio:auto; }
    .loop.is-cinematic .loop__shot{
        position:relative; inset:auto; opacity:1; transform:none;
    }
    .loop.is-cinematic .loop__shot img{ aspect-ratio:16/9; }
    .loop.is-cinematic .step{ opacity:1; }
}