/* ==========================================================================
   CYBERZ — The Energy Pact (basılı tut etkileşimi)
   HTML : index.html → "THE ENERGY PACT" bölümü
   CSS  : css/home/04-pact.css
   ========================================================================== */

.pact{ position:relative; overflow:hidden; }
.pact::before{
    content:''; position:absolute; inset:auto 0 0 0; height:1px;
    background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}

/* --- the rig --- */
.rig{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(150px,.62fr) minmax(0,1fr);
    gap:clamp(16px,2.6vw,40px);
    align-items:center;
    max-width:1120px; margin-inline:auto;
}
.rig__side{ text-align:center; }

/* Operator levhalari: sahne goruntusu degil, dosya plakasi gibi cerceveli.
   Kesik kose ve ic vinyet, iki gorselin de kasitli durmasini sagliyor. */
.rig__body{
    position:relative;
    max-width:300px; margin:0 auto 18px;
    border:1px solid var(--line-2);
    background:var(--bg-2);
    overflow:hidden;
    clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
    transition:filter 420ms var(--ease), transform 420ms var(--ease),
               border-color 420ms var(--ease);
}
.rig__body img{
    width:100%; aspect-ratio:1/1; object-fit:cover;
    display:block;
}
.rig__body::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top,rgba(4,6,10,.7),transparent 52%);
    pointer-events:none;
}
.rig.is-live .rig__side--giver .rig__body{ border-color:var(--danger-hard); }
.rig.is-live .rig__side--taker .rig__body{ border-color:var(--energy); }

.rig__role{
    font-family:var(--font-display); font-size:.75rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--fg); margin-bottom:5px;
    transition:color 420ms var(--ease);
}
.rig__state{
    font-family:var(--font-mono); font-size:.6875rem;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--fg-3); margin-bottom:12px;
    min-height:1.2em;
}
/* Sayilar bu bolumun basligi kadar onemli: 50 ve 150 akilda kalan sey. */
.rig__num{
    margin-top:10px;
    font-size:clamp(1.5rem,3vw,2.25rem);
    font-weight:600; line-height:1;
    color:var(--fg-2);
    transition:color 420ms var(--ease), transform 420ms var(--ease);
}

/* Verici zayifliyor: rengi cekiliyor, hafifce geri cekiliyor. */
.rig.is-live .rig__side--giver .rig__body{ filter:saturate(.35) brightness(.72); transform:scale(.965); }
.rig.is-live .rig__side--giver .rig__role{ color:var(--fg-3); }
.rig.is-live .rig__side--giver .rig__num{ color:var(--danger); }

/* Alici asiri yukleniyor: isiniyor, buyuyor. */
.rig.is-live .rig__side--taker .rig__body{ filter:saturate(1.15) brightness(1.1); transform:scale(1.035); }
.rig.is-live .rig__side--taker .rig__role{ color:var(--energy-hot); }
.rig.is-live .rig__side--taker .rig__num{ color:var(--energy-hot); transform:scale(1.06); }
.rig.is-done .rig__side--taker .rig__body{
    filter:saturate(1.2) brightness(1.16) drop-shadow(0 0 26px rgba(0,212,200,.45));
}

/* --- meters: her iki cubuk da 0-150 olcegi, ayni yerde tavan isareti --- */
.meter{
    position:relative;
    height:6px; background:var(--bg-3);
    border:1px solid var(--line);
    overflow:hidden;
}
.meter__fill{
    position:absolute; inset:0 auto 0 0; width:66.667%;
    transition:width 120ms linear, background 300ms var(--ease);
}
.meter__fill--giver{ background:var(--fg-3); }
.meter__fill--taker{ background:var(--energy); }
.rig.is-live .meter__fill--giver{ background:var(--danger); }
.rig.is-live .meter__fill--taker{
    background:linear-gradient(90deg,var(--energy),var(--energy-hot));
    box-shadow:0 0 12px rgba(0,212,200,.65);
}
/* Normal tavan. Alici bunu gecince "Overcharged" oluyor. */
.rig .meter::after{
    content:''; position:absolute; left:66.667%; top:-3px; bottom:-3px;
    width:1px; background:var(--fg-3); opacity:.65;
}

/* --- the wire --- */
.rig__link{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    height:120px;
}
/* Kablonun oturdugu kanal — iki ucta baglanti agzi. Bos bir cizgi yerine
   gercekten bir sey tasiyan bir hat gibi okunuyor. */
.rig__link::before{
    content:''; position:absolute; left:0; right:0; top:50%;
    height:26px; margin-top:-13px;
    border-block:1px solid var(--line);
    background:linear-gradient(to bottom,rgba(19,27,38,.55),rgba(4,6,10,.2));
}
.rig__wire{ position:relative; width:100%; height:120px; overflow:visible; }
.rig__wire-track{ stroke:var(--line-2); stroke-width:2; fill:none; }
.rig__wire-live{
    stroke:var(--energy-hot); stroke-width:3.5; fill:none;
    stroke-linecap:round;
    filter:drop-shadow(0 0 9px rgba(0,212,200,.95));
    stroke-dasharray:1 1;      /* JS gercek uzunlukla degistiriyor */
    stroke-dashoffset:1;
}
.rig__spark{
    position:absolute; top:50%; left:0;
    width:9px; height:9px; margin-top:-4.5px; margin-left:-4.5px;
    background:var(--energy-hot);
    border-radius:50%;
    box-shadow:0 0 16px 3px rgba(124,255,232,.85);
    opacity:0;
}
.rig.is-live .rig__spark{ opacity:1; }

@media (max-width:720px){
    .rig{ grid-template-columns:1fr 1fr; gap:20px 14px; }
    .rig__link{ grid-column:1 / -1; grid-row:1; height:58px; }
    .rig__wire{ height:58px; }
    .rig__body{ max-width:170px; }
}

/* --- the control --- */
.pact__control{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:center; gap:clamp(20px,4vw,52px);
    margin-top:clamp(34px,4vw,54px);
}
.hold{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    min-height:64px; padding:18px 44px;
    border:1px solid var(--energy);
    background:var(--energy-a);
    color:var(--fg);
    font-family:var(--font-display); font-size:.8125rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    cursor:pointer;
    touch-action:none;                 /* basili tutarken sayfa kaymasin */
    -webkit-user-select:none; user-select:none;
    clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
    transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.hold:hover{ background:rgba(0,212,200,.22); }
.hold__label{ position:relative; z-index:2; }
/* Basili tutma ilerlemesi butonun kendi zemininde dolar. */
.hold__ring{
    position:absolute; inset:0 auto 0 0; width:0%;
    background:var(--energy); opacity:.9;
    transition:width 90ms linear;
}
.hold.is-held{ color:var(--bg-0); }
.hold.is-done{ background:var(--energy); color:var(--bg-0); border-color:var(--energy-hot); }
.hold.is-done .hold__ring{ width:100%; }

.pact__aside{
    display:flex; flex-direction:column; gap:9px;
    max-width:40ch;
}
.pact__aside .mono{ line-height:1.6; }
.pact__read{ color:var(--fg-2); min-height:2.4em; }
.pact__read.is-done{ color:var(--energy-hot); }

.mute{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px; padding:6px 0;
    font-family:var(--font-mono); font-size:.6875rem;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-3); cursor:pointer;
    border-bottom:1px solid var(--line-2);
}
.mute:hover{ color:var(--energy); border-color:var(--energy); }
.mute[aria-pressed="true"]{ color:var(--energy); border-color:var(--energy); }

.pact__say{
    max-width:64ch; margin:clamp(34px,4vw,52px) auto 0;
    text-align:center; color:var(--fg-2);
    font-size:clamp(1rem,1.5vw,1.125rem); line-height:1.65;
}
.pact__say b{ color:var(--fg); }

/* --- the five costs --- */
.pillars{
    list-style:none;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
    gap:1px; background:var(--line);
    border:1px solid var(--line);
    margin-top:clamp(40px,5vw,68px);
}
/* "Kilitli" hal opaklikla degil renkle anlatiliyor: metni soluklastirmak
   kontrasti AA sinirina dusuruyordu ve sozlesmeyi tamamlamayan ziyaretci
   icerigi hic okuyamiyordu. Simdi metin her zaman tam kontrastta; degisen
   sey basligin rengi ve sol kenardaki akim cizgisi. */
.pillars li{
    position:relative;
    background:var(--bg-0);
    padding:24px 22px;
    display:flex; flex-direction:column; gap:7px;
    transition:background 520ms var(--ease);
}
.pillars li::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--line-2);
    transition:background 520ms var(--ease);
}
.pillars.is-open li{ background:var(--bg-1); }
.pillars.is-open li::before{ background:var(--energy); }
.pillars li b{
    font-family:var(--font-display); font-size:.75rem; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-3);
    transition:color 520ms var(--ease);
}
.pillars.is-open li b{ color:var(--energy); }
.pillars li span{ font-size:.9063rem; color:var(--fg-2); line-height:1.55; }