/* ==========================================================================
   AR-GE — teknik yuzey
   Fikir: sayfa bir olcum cihazinin arayuzu gibi okunsun. Ince izgara, kose
   isaretleri, mono etiketler, tek vurgu rengi. Sus yok; her hareket bir ise yariyor.
   ========================================================================== */

/* — kahraman: muhendislik izgarasi + kose isaretleri — */
.ar-band{position:relative;isolation:isolate}
.ar-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(143,220,152,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(143,220,152,.09) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.9),transparent 72%)}
.ar-kose{position:absolute;width:20px;height:20px;border:1px solid rgba(143,220,152,.5);
  pointer-events:none;z-index:1}
.ar-kose.sol-ust{left:22px;top:126px;border-right:0;border-bottom:0}
.ar-kose.sag-ust{right:22px;top:126px;border-left:0;border-bottom:0}
.ar-kose.sol-alt{left:22px;bottom:22px;border-right:0;border-top:0}
.ar-kose.sag-alt{right:22px;bottom:22px;border-left:0;border-top:0}
.ar-koordinat{position:absolute;right:26px;bottom:26px;z-index:1;
  font:500 .68rem var(--mono);letter-spacing:.12em;color:rgba(143,220,152,.75)}

/* — kahraman yetenek cipleri — */
.ar-cip{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.ar-cip span{font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(143,220,152,.45);color:#8fdc98;padding:7px 12px}

/* — yetenek matrisi — */
.ar-arac{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  border-block:1px solid var(--rule);padding-block:14px;margin-bottom:0}
.ar-arac .sayi{margin-left:auto;font:500 .78rem var(--mono);letter-spacing:.07em;color:var(--muted)}
.ar-matris{border-top:2px solid var(--ink)}
.ar-matris .satir{display:grid;grid-template-columns:62px minmax(0,1fr) 210px 34px;gap:22px;
  align-items:center;padding:17px 0;border-bottom:1px solid var(--rule);
  transition:background .18s,padding-left .18s}
.ar-matris .satir:hover{background:#f7faf6;padding-left:8px}
.ar-matris .satir[hidden]{display:none}
.ar-matris .no{font:500 .82rem var(--mono);color:var(--green);letter-spacing:.05em}
.ar-matris h3{font-size:1.02rem;font-weight:700;font-stretch:94%;line-height:1.35}
/* Rozet metni sutuna sigmalidir: nowrap uzun olcum adlarinda (ozellikle EN)
   satiri disari tasiriyordu. Sarmaya izin ver, sutunun disina cikma. */
.ar-matris .tur{font:500 .7rem var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--rule);padding:4px 9px;justify-self:start;
  background:#fff;max-width:100%;overflow-wrap:anywhere;line-height:1.45}
.ar-matris .tur.test{border-color:var(--green);color:var(--green-d);background:var(--green-l)}
.ar-matris .isaret{justify-self:end;width:9px;height:9px;border:2px solid var(--rule);
  transform:rotate(45deg);transition:border-color .2s,transform .3s}
.ar-matris .satir:hover .isaret{border-color:var(--green);transform:rotate(135deg)}
.ar-bos{padding:36px 0;color:var(--muted);border-bottom:1px solid var(--rule)}

/* — gelistirme akisi (kaydirmayla dolan cizgi) — */
.ar-akis{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
  padding-top:44px}
.ar-akis::before{content:"";position:absolute;left:0;right:0;top:16px;height:1px;background:var(--rule)}
.ar-akis::after{content:"";position:absolute;left:0;top:16px;height:1px;background:var(--green);
  width:var(--akis,0%);transition:width .25s linear}
.ar-adim{position:relative;padding-top:34px}
.ar-adim::before{content:"";position:absolute;left:0;top:11px;width:11px;height:11px;
  background:#fff;border:2px solid var(--rule);transform:rotate(45deg);transition:.25s}
.ar-adim.gecti::before{border-color:var(--green);background:var(--green)}
.ar-adim b{display:block;font:500 .72rem var(--mono);letter-spacing:.12em;color:var(--green-d);
  margin-bottom:9px}
.ar-adim h3{font-size:1.08rem;font-weight:700;font-stretch:92%;margin-bottom:8px}
.ar-adim p{font-size:.92rem;color:var(--muted);line-height:1.65}

/* — Ar-Ge alanlari (acilir) — */
.ar-alan{border-top:2px solid var(--ink)}
.ar-alan details{border-bottom:1px solid var(--rule)}
.ar-alan summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:62px minmax(0,1fr) 34px;gap:22px;align-items:center;padding:20px 0;
  transition:padding-left .18s}
.ar-alan summary::-webkit-details-marker{display:none}
.ar-alan summary:hover{padding-left:8px}
.ar-alan .no{font:500 .82rem var(--mono);color:var(--green);letter-spacing:.05em}
.ar-alan h3{font-size:1.12rem;font-weight:700;font-stretch:92%}
.ar-alan .arti{justify-self:end;font:400 1.5rem/1 var(--mono);color:var(--green);
  transition:transform .25s}
.ar-alan details[open] .arti{transform:rotate(45deg)}
.ar-alan .govde{padding:0 0 24px 84px;color:var(--ink-2);line-height:1.8;max-width:78ch}

/* — laboratuvar galerisi (koyu) — */
.ar-galeri{background:var(--ink);color:#fff;margin-top:84px;position:relative;overflow:hidden}
.ar-galeri::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px}
.ar-galeri .pk-wrap{position:relative;padding-block:72px 76px}
.ar-galeri .ust{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 26px;margin-bottom:30px}
.ar-galeri h2{font:900 clamp(1.7rem,2.9vw,2.4rem)/1.04 var(--display);font-stretch:74%;
  text-transform:uppercase}
.ar-galeri .sayac{margin-left:auto;font:500 .82rem var(--mono);letter-spacing:.1em;color:#8fdc98}
.ar-sahne{display:grid;grid-template-columns:minmax(0,1fr) 186px;gap:20px;align-items:start}
.ar-buyuk{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a1712;
  border:1px solid rgba(255,255,255,.14)}
/* Kaynak kareler 1:1; kirpmak yerine tam kare gosterilir (koyu zemin cerceve gibi calisir) */
.ar-buyuk picture,.ar-buyuk img{width:100%;height:100%;object-fit:contain;display:block}
.ar-buyuk figure{margin:0;width:100%;height:100%;opacity:0;position:absolute;inset:0;
  transition:opacity .35s}
.ar-buyuk figure.aktif{opacity:1;position:relative}
.ar-buyuk .ok{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  display:grid;place-items:center;background:rgba(8,20,15,.62);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;transition:.18s}
.ar-buyuk .ok:hover{background:var(--green);border-color:var(--green)}
.ar-buyuk .ok.geri{left:14px}
.ar-buyuk .ok.ileri{right:14px}
.ar-serit{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:430px;
  overflow-y:auto;scrollbar-width:thin}
.ar-serit button{appearance:none;padding:0;border:1px solid rgba(255,255,255,.16);background:none;
  cursor:pointer;aspect-ratio:1;overflow:hidden;opacity:.55;transition:.2s}
.ar-serit button:hover{opacity:.85}
.ar-serit button[aria-current="true"]{opacity:1;border-color:var(--green)}
.ar-serit img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1080px){
  .ar-matris .satir{grid-template-columns:46px minmax(0,1fr) 24px;gap:16px}
  .ar-matris .tur{grid-column:2;justify-self:start;margin-top:6px}
  .ar-akis{grid-template-columns:1fr 1fr;gap:30px 26px}
  .ar-akis::before,.ar-akis::after{display:none}
  .ar-adim{padding-top:28px;border-top:1px solid var(--rule)}
  .ar-adim::before{top:-6px}
  .ar-sahne{grid-template-columns:1fr}
  .ar-serit{grid-template-columns:repeat(5,1fr);max-height:none}
  .ar-alan .govde{padding-left:0}
}
@media (max-width:640px){
  .ar-akis{grid-template-columns:1fr}
  .ar-serit{grid-template-columns:repeat(4,1fr)}
  .ar-alan summary{grid-template-columns:40px minmax(0,1fr) 24px;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .ar-buyuk figure,.ar-akis::after,.ar-matris .satir,.ar-adim::before{transition:none}
}