/* ============================================================
   kapi.css — Stargate açılış sahnesi
   ============================================================ */

.kapi-sahne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 186px;
  gap: 16px;
  align-items: center;
  min-height: 0;
  padding: 10px 0;
}

#kapiYildiz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- geçit ---------- */

.kapi-merkez {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
}

.kapi-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  max-height: 58vh;
  overflow: visible;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .55));
}

/* Sembol halkası: yavaş dönerken hafif parlar */
.kapi-halka { transform-origin: 200px 200px; }

/*
 * Geçit açıldıktan sonra halka ağır ağır dönmeyi sürdürür.
 * Kilitlenme sırasındaki transform inline yazıldığı için burada
 * ayrı bir katman (kapi-yavas) kullanılır; ikisi çakışmaz.
 */
.kapi-sahne.acik .kapi-yavas {
  transform-origin: 200px 200px;
  animation: yavasDon 96s linear infinite;
}
@keyframes yavasDon { to { transform: rotate(360deg); } }
.kapi-semboller .sembol {
  fill: #10161c;
  stroke: #10161c;
  stroke-width: 0;
  transition: fill .5s;
}
.kapi-sahne.donuyor .kapi-semboller .sembol { fill: #1b262f; }
.kapi-sahne.acik .kapi-semboller .sembol {
  fill: #2a4a63;
  animation: sembolNefes 4s ease-in-out infinite;
}
@keyframes sembolNefes {
  0%, 100% { fill: #24404f; }
  50%      { fill: #3a6a8c; }
}

/* Chevron kilitleri */
.chevron .cv-govde {
  fill: #232c35;
  stroke: #10161c;
  stroke-width: 1.5;
}
.chevron .cv-isik {
  fill: #171f26;
  transition: fill .4s, filter .4s;
}
.chevron.kilitli .cv-isik {
  fill: #f6851b;
  filter: drop-shadow(0 0 7px rgba(246, 133, 27, .9));
  animation: chevronYan .55s ease-out;
}
.chevron.kilitli .cv-govde { fill: #2e3944; }
@keyframes chevronYan {
  0%   { fill: #fff8ec; filter: drop-shadow(0 0 22px rgba(255, 255, 255, .95)); }
  100% { fill: #f6851b; filter: drop-shadow(0 0 7px rgba(246, 133, 27, .9)); }
}

/* Olay ufku: açılınca beliren dalgalı su yüzeyi */
.kapi-ufuk {
  transition: opacity 1.1s ease-out;
  animation: ufukDalga 7s ease-in-out infinite;
  transform-origin: 200px 200px;
  mix-blend-mode: screen;
}
/* Yüzeyde dolanan ince halkalar — su yüzeyi izlenimi */
.kapi-dalga {
  fill: none;
  stroke: rgba(190, 232, 255, .22);
  stroke-width: 1.2;
  opacity: 0;
  transform-origin: 200px 200px;
}
.kapi-sahne.acik .kapi-dalga {
  animation: dalgaYayil 5.5s ease-out infinite;
}
.kapi-sahne.acik .kapi-dalga:nth-of-type(2) { animation-delay: 1.8s; }
.kapi-sahne.acik .kapi-dalga:nth-of-type(3) { animation-delay: 3.6s; }
@keyframes dalgaYayil {
  0%   { r: 22; opacity: .55; }
  100% { r: 130; opacity: 0; }
}
@keyframes ufukDalga {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
.kapi-patlama { pointer-events: none; }

/* Halkanın ortasındaki modül kartı */
.kapi-kart {
  position: absolute;
  inset: auto;
  /* Halkanın iç çapının içinde kalmalı: yarıçap 146/400 → %60 güvenli */
  width: 52%;
  max-width: 210px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.kapi-kart.gir { animation: kartBelir 3.1s ease-out forwards; }
@keyframes kartBelir {
  0%   { opacity: 0; transform: scale(.9) translateY(6px); filter: blur(4px); }
  14%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
.kapi-kart .material-symbols-rounded {
  font-size: 27px;
  display: block;
  height: 30px;
  overflow: hidden;
  color: #bfe9ff;
  text-shadow: 0 0 16px rgba(122, 205, 255, .75);
}
.kapi-kart b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
  letter-spacing: -.2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.kapi-kart > span {
  display: block;
  font-size: 10.5px;
  color: #a9d6f2;
  margin-top: 2px;
}
.kapi-kart em {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: #7ba7c4;
  margin-top: 5px;
  line-height: 1.45;
  /* Uzun açıklamalar halkanın dışına taşmasın */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- modül listesi ---------- */

.kapi-liste {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
  overflow: hidden;
}
.kl-oge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(16, 22, 28, .55);
  opacity: .4;
  transform: translateX(10px);
  transition: opacity .5s, transform .5s, border-color .3s, background .3s;
}
.kl-oge.acik {
  opacity: 1;
  transform: none;
  border-color: rgba(246, 133, 27, .3);
}
.kl-oge.vurgu {
  border-color: var(--accent);
  background: rgba(246, 133, 27, .1);
}
.kl-oge > .material-symbols-rounded {
  font-size: 15px;
  color: var(--muted-2);
  /*
   * Genişlik sabitlenir: ikon fontu yüklenemezse (ağ kesik, kurumsal
   * güvenlik duvarı) ligatür adı düz metin olarak görünür ve satırı
   * dağıtırdı. Sabit kutu bunu engeller.
   */
  flex: 0 0 16px;
  width: 16px;
  overflow: hidden;
  transition: color .3s;
}
.kl-oge.acik > .material-symbols-rounded { color: var(--accent); }
.kl-oge > div { flex: 1; min-width: 0; overflow: hidden; }
.kl-oge b {
  display: block;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kl-oge > div > span {
  display: block;
  font-size: 9px;
  color: var(--muted-2);
  line-height: 1.35;
  /* İki satırdan uzun açıklama listeyi şişirmesin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kl-tik {
  font-size: 14px !important;
  color: var(--muted-2) !important;
  flex: 0 0 15px;
  width: 15px;
  overflow: hidden;
}
.kl-oge.acik .kl-tik { color: var(--ok) !important; }

/* ---------- durum şeridi ---------- */

.kapi-durum {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(10, 14, 18, .7);
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
  backdrop-filter: blur(6px);
}
.kapi-durum .material-symbols-rounded {
  font-size: 13px;
  flex: 0 0 14px;
  width: 14px;
  overflow: hidden;
  color: var(--accent);
  animation: radarDon 3s linear infinite;
}
@keyframes radarDon { to { transform: rotate(360deg); } }
.kapi-sahne.acik .kapi-durum {
  border-color: rgba(34, 197, 94, .35);
  color: var(--ok);
}
.kapi-sahne.acik .kapi-durum .material-symbols-rounded {
  color: var(--ok);
  animation: none;
}

/* ---------- duyarlılık ---------- */

@media (max-width: 1080px) {
  .kapi-sahne { grid-template-columns: 1fr; }
  .kapi-liste {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    display: grid;
  }
  .kapi-svg { max-height: 40vh; }
}
@media (max-width: 720px) {
  .kapi-sahne { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kapi-halka, .kapi-ufuk, .kapi-kart, .kapi-durum .material-symbols-rounded,
  .kapi-sahne.acik .kapi-semboller .sembol {
    animation: none !important;
    transition: none !important;
  }
  .kapi-kart { opacity: 1; }
}