/* ==========================================================================
   Grey Enerji — UYGULAMA ALANLARI

   Bölüm iki sütunlu bir kafes: solda dizin, sağda kadraj. Kadraj bir kutu
   değil; bölümün tam yüksekliğini kaplıyor, üst ve alt çizgilere dayanıyor,
   sağda ekranın kenarına kadar gidiyor. Çerçeve, gölge, yuvarlatma yok —
   bölümün duvarı gibi okunması gerekiyor.

   MARKA KURALI
   Dört karenin de Grey Group logosu sol yarıda. Bu yüzden:
     · metin hiçbir zaman görselin üstüne binmiyor, kendi sütununda duruyor
     · künye yalnızca sağ alt köşede
     · kırpma daima soldan tutuluyor (object-position her karede ayrı)
   Denetimi tools/marka-denetim.mjs yapıyor.
   ========================================================================== */

.alan {
  position: relative;
  background: var(--void);
  border-block: 1px solid var(--hair);
  overflow: clip;
  --bekle: 5.4s;
}

.alan__kafes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  align-items: stretch;
  min-height: clamp(520px, 74vh, 780px);
}

/* Sol sütun, sayfanın kafesine hizalanır: iç kenar boşluğu .shell ile aynı
   noktadan başlar, sağ kenarı kadrajın çizgisine dayanır. */
.alan__sol {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Dizin tek bir blok olarak ortada durur. Sütun yüksekliği kadrajla aynı
     olduğu için bölüm uzarsa boşluk metnin etrafına değil, kadraja gider. */
  justify-content: center;
  gap: clamp(22px, 2.8vh, 34px);
  --ic: clamp(30px, 3.4vw, 58px);
  padding: clamp(44px, 6vh, 76px) var(--ic) clamp(40px, 5.4vh, 66px)
           max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}

.alan__ust { color: var(--steel-2); }

/* --- dizin -------------------------------------------------------------- */
.alan__dizin { display: grid; }

.alan__satir {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 22px);
  width: 100%;
  padding: clamp(15px, 1.9vh, 24px) 0;
  border: 0;
  border-top: 1px solid var(--hair);
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--steel);
  transition: color 0.4s var(--ease);
}
.alan__dizin .alan__satir:last-child { border-bottom: 1px solid var(--hair); }
.alan__satir:hover { color: var(--chalk); }
.alan__satir:focus-visible { outline: 2px solid var(--live-bright); outline-offset: 3px; }
.alan__satir[aria-selected='true'] { color: var(--white); }

/* 11px mono, koyu zemin: --steel 4,19:1 veriyor, AA'nın altında. Sitedeki
   diğer küçük etiketler gibi --steel-2 kullanılıyor. */
.alan__no {
  grid-row: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--steel-2);
  transition: color 0.4s var(--ease);
}
.alan__satir[aria-selected='true'] .alan__no { color: var(--live-bright); }

.alan__ad {
  grid-row: 1;
  font-size: clamp(1.35rem, 2.55vw, 2.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  transition: transform 0.5s var(--ease-snap);
}
.alan__satir[aria-selected='true'] .alan__ad { transform: translateX(clamp(4px, 0.6vw, 10px)); }

/* Açıklama yalnızca aktif satırda açılır; grid-template-rows ile animasyon
   ediliyor, max-height tahmini gerektirmiyor. */
.alan__not {
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.36s var(--ease),
              padding-top 0.5s var(--ease);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--steel-2);
  max-width: 42ch;
}
.alan__not > span { overflow: hidden; min-height: 0; }
.alan__satir[aria-selected='true'] .alan__not {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 10px;
}

/* Köprü: aktif satırdan kadrajın kenarına uzanan tek bir saç teli. Listeyi
   görselle fiziksel olarak bağlar; aynı zamanda otomatik geçişin sayacıdır. */
.alan__kopru {
  position: absolute;
  left: 0;
  right: calc(-1 * var(--ic));
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  overflow: visible;
}
.alan__kopru::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--live), var(--live-bright));
  transform: scaleX(0);
  transform-origin: left center;
}
/* Kadrajın kenarına oturan tescil işareti: sitenin sol kenarındaki ölçü
   şeridiyle aynı dille, nokta değil çizgi. */
.alan__kopru i {
  position: absolute;
  right: -1px;
  top: -8px;
  width: 1px;
  height: 17px;
  background: var(--live-bright);
  opacity: 0;
  transform: scaleY(0.2);
  transition: opacity 0.45s var(--ease) 0.12s, transform 0.45s var(--ease-snap) 0.12s;
  box-shadow: 0 0 10px rgba(74, 168, 240, 0.7);
}
.alan__satir[aria-selected='true'] .alan__kopru::before {
  animation: alan-ilerle var(--bekle) linear forwards;
}
.alan__satir[aria-selected='true'] .alan__kopru i { opacity: 1; transform: scaleY(1); }
@keyframes alan-ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Fareyle üstündeyken ya da odaktayken sayaç durur — okurken geçmesin. */
.alan[data-durdu='true'] .alan__kopru::before { animation-play-state: paused; }

.alan__dip { margin: 0; }

/* --- kadraj ------------------------------------------------------------- */
.alan__sahne {
  position: relative;
  overflow: clip;
  border-left: 1px solid var(--hair);
  background: var(--ground);
}

/* Çok yavaş süzülme: kadraj yaşıyor gibi dursun diye, fark edilmeyecek kadar
   az. Kırpma payı olsun diye çerçeve dışa taşırılıyor. */
.alan__akis {
  position: absolute;
  inset: -2.5%;
  animation: alan-suzul 26s ease-in-out infinite alternate;
}
@keyframes alan-suzul {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1.6%, -1%, 0); }
}

.alan__kare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.055);
  transition: opacity 0.9s var(--ease), transform 1.8s var(--ease);
  will-change: opacity, transform;
}
.alan__kare[data-on='true'] { opacity: 1; transform: scale(1); }

/* Künye sağ alt köşede: dört karenin de markalı alanı sol yarıda olduğu için
   burası güvenli. Perde de yalnızca bu köşede. */
.alan__kunye {
  position: absolute;
  right: clamp(20px, 2.4vw, 40px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
  max-width: 46%;
}
.alan__sayac {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--steel-2);
}
.alan__sayac b { color: var(--live-bright); font-weight: 400; }
.alan__baslik {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-2);
}

/* Üst ve alt kenarı bölümün çizgilerine bağlayan ince geçiş. Logo bandına
   (sol yarı, %36–%93 yükseklik) ulaşmayacak kadar dar. */
.alan__sahne::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 18, 29, 0.5), transparent 52px),
    linear-gradient(to top, rgba(4, 18, 29, 0.45), transparent 44px);
}

@media (prefers-reduced-motion: reduce) {
  .alan__akis { animation: none; }
  .alan__satir[aria-selected='true'] .alan__kopru::before { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   TABLET / MOBİL
   Kadraj üstte yapışık kalır, dizin altından akar: satıra dokunulduğunda
   değişen kare her zaman ekranda olur.
   ========================================================================== */
@media (max-width: 980px) {
  /* Flex sırası: kadraj üstte. Akışta yapışkan durduğu için dizin altından
     kayarken kare ekranda kalıyor — satıra dokunan kişi neyin değiştiğini
     görüyor. */
  .alan__kafes { display: flex; flex-direction: column; min-height: 0; }

  .alan__sahne {
    order: -1;
    position: sticky;
    /* Sabit başlık 72px; kadraj onun altına kilitleniyor ki üst şeridi
       gizlenmesin. */
    top: 72px;
    flex: none;
    height: clamp(260px, 40vh, 380px);
    border-left: 0;
    border-bottom: 1px solid var(--hair);
    z-index: 1;
  }
  .alan__sol {
    position: relative;
    z-index: 2;
    background: var(--void);
    gap: clamp(22px, 4vw, 34px);
    padding: clamp(34px, 6vw, 54px) var(--gutter);
    --ic: var(--gutter);
  }
  /* Dar ekranda işaret edilecek bir kenar yok; köprü yalnızca sayaç. */
  .alan__kopru { right: 0; }
  .alan__kopru i { display: none; }
  .alan__ad { font-size: clamp(1.3rem, 5.4vw, 1.9rem); }
  .alan__not { font-size: 0.875rem; }
}

@media (max-width: 560px) {
  .alan__sahne { height: clamp(230px, 36vh, 300px); }
  .alan__kunye { max-width: 60%; }
}