/* =============================================================================
   cx_giris.css — Tanıtım sayfası açılış animasyonu (www/cx_giris.js)
   Renkler tasarım sisteminden: altın #A49160, kırık beyaz #E8E8E8, 305 C #4FC3E5.
   ============================================================================= */
html.cx-giris-acik, html.cx-giris-acik body { overflow: hidden; }

:is(#cx-giris, #cx-opt-uzay) {
  position: fixed; inset: 0; z-index: 10000; cursor: pointer; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 28% 32%, rgba(164,145,96,.18), transparent 70%),
    radial-gradient(ellipse 55% 40% at 74% 70%, rgba(79,195,229,.11), transparent 70%),
    radial-gradient(ellipse 35% 25% at 62% 22%, rgba(134,89,198,.08), transparent 70%),
    radial-gradient(circle at 50% 50%, #121218 0%, #08080b 70%);
  transition: opacity .6s ease;
}
:is(#cx-giris, #cx-opt-uzay) canvas { position: absolute; inset: 0; display: block; }
:is(#cx-giris, #cx-opt-uzay).cx-g-kapan { opacity: 0; pointer-events: none; }

.cx-giris-sahne { position: absolute; inset: 0; opacity: 0; }
:is(#cx-giris, #cx-opt-uzay).cx-g-hazir .cx-giris-sahne { opacity: 1; }

/* Katmanlar: .cx-giris-genis (sahne 3'te büyüyüp söner) > .cx-giris-donen (döner) */
.cx-giris-genis, .cx-giris-donen { position: absolute; inset: 0; transform-origin: 50% 50%; }
.cx-giris-genis { transition: transform 1s cubic-bezier(.55,0,.8,.2), opacity .8s ease; }
:is(#cx-giris, #cx-opt-uzay).cx-g-don .cx-giris-donen { animation: cx-g-don 6s linear infinite; }
@keyframes cx-g-don { to { transform: rotate(360deg); } }
:is(#cx-giris, #cx-opt-uzay).cx-g-s3 .cx-giris-genis { transform: scale(2.6); opacity: 0; }

/* CIRCLE harfleri */
.cx-giris-harf {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  font-family: 'Urbanist', sans-serif; font-style: italic; font-weight: 800;
  font-size: clamp(28px, 5.2vmin, 64px); letter-spacing: .02em; line-height: 1;
  color: #E8E8E8; opacity: 0;
  text-shadow: 0 0 18px rgba(232,232,232,.25);
  transition: transform 1.1s cubic-bezier(.65,0,.25,1), opacity .7s ease;
}
:is(#cx-giris, #cx-opt-uzay).cx-g-s1 .cx-giris-harf { opacity: 1; }
:is(#cx-giris, #cx-opt-uzay).cx-g-s2 .cx-giris-harf { color: #F1EBD8; text-shadow: 0 0 14px rgba(164,145,96,.55); }
.cx-giris-harf:nth-of-type(2) { transition-delay: .04s; } .cx-giris-harf:nth-of-type(3) { transition-delay: .08s; }
.cx-giris-harf:nth-of-type(4) { transition-delay: .12s; } .cx-giris-harf:nth-of-type(5) { transition-delay: .16s; }
.cx-giris-harf:nth-of-type(6) { transition-delay: .20s; }

/* Altın halka: dairenin çevresi çizgiyle çizilir */
.cx-giris-halka { position: absolute; overflow: visible; }
.cx-giris-halka circle {
  fill: none; stroke: url(#cx-g-altin); stroke-width: .7;
  stroke-dasharray: 316; stroke-dashoffset: 316;
  filter: drop-shadow(0 0 3px rgba(164,145,96,.8));
  transition: stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1);
}
:is(#cx-giris, #cx-opt-uzay).cx-g-halka .cx-giris-halka circle { stroke-dashoffset: 0; }

/* X: dış kutu konumlanır (JS), iç harf büyür (CSS) */
.cx-giris-x { position: absolute; left: 0; top: 0; opacity: 0;
  transition: transform 1.1s cubic-bezier(.65,0,.25,1), opacity .7s ease; }
:is(#cx-giris, #cx-opt-uzay).cx-g-s1 .cx-giris-x { opacity: 1; }
.cx-giris-x-ic {
  display: block; font-family: 'Urbanist', sans-serif; font-style: italic; font-weight: 900;
  font-size: clamp(34px, 6.4vmin, 80px); line-height: 1;
  background: linear-gradient(135deg, #F4E9C8 0%, #A49160 55%, #6E6040 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(164,145,96,.6));
  transform-origin: 50% 55%;
  transition: transform .9s cubic-bezier(.45,0,.2,1), filter .9s ease;
}
:is(#cx-giris, #cx-opt-uzay).cx-g-s2 .cx-giris-x-ic { transform: scale(1.7); filter: drop-shadow(0 0 26px rgba(164,145,96,.85)); }
/* X kameranın içinden geçer: hızla büyür ve son anda söner (bulanıklık yok; ölçekle büyüyordu) */
:is(#cx-giris, #cx-opt-uzay).cx-g-s3 .cx-giris-x-ic {
  transform: scale(70); opacity: 0; filter: drop-shadow(0 0 40px rgba(214,222,40,.35));
  transition: transform 1s cubic-bezier(.7,0,.95,.4), opacity .3s ease .62s, filter 1s ease;
}

/* Atlama düğmesi */
.cx-giris-gec {
  position: absolute; right: 22px; bottom: 20px; z-index: 2;
  font-family: 'Urbanist', sans-serif; font-size: 13px; letter-spacing: .08em;
  color: rgba(232,232,232,.65); background: rgba(255,255,255,.04);
  border: 1px solid rgba(232,232,232,.2); border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.cx-giris-gec:hover, .cx-giris-gec:focus-visible { color: #E8E8E8; border-color: #A49160; outline: none; }

@media (prefers-reduced-motion: reduce) { :is(#cx-giris, #cx-opt-uzay) { display: none !important; } }

/* Optimizasyon beklemesi (#cx-opt-uzay, www/cx_giris.js): alt yazı + Shiny ilerleme kutusu gizli */
.cx-opt-yazi {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: 'Urbanist', sans-serif; font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(232,232,232,.7); opacity: 0; transition: opacity .5s ease .3s;
  animation: cx-opt-nabiz 1.6s ease-in-out infinite;
}
:is(#cx-giris, #cx-opt-uzay).cx-g-s1 .cx-opt-yazi { opacity: 1; }
:is(#cx-giris, #cx-opt-uzay).cx-g-s3 .cx-opt-yazi { opacity: 0; transition-delay: 0s; }
@keyframes cx-opt-nabiz { 50% { color: rgba(164,145,96,.95); } }
html.cx-opt-acik .shiny-notification { visibility: hidden; }