/* ═══════════════════════════════════════════════════════════════════════
   SOLİMPO — "Yeni sitemiz yakında yayında"
   Tek ekran, JavaScript'siz. Tüm hareket CSS.
   Renkler oklch kaynaklıdır; sRGB karşılıkları yazıldı (eski Safari için).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Yüzeyler */
  --zemin:#060C14;          /* oklch(15.2% .021 258.5) */
  --kart:#0F1520;           /* oklch(19.6% .024 259.2) */
  --kenar:rgba(255,255,255,.10);

  /* Metin */
  --metin:#F1F5F8;          /* oklch(96.8% .006 247.9) */
  --soluk:#939BA8;          /* oklch(68.8% .021 257.4) */

  /* Marka spektrumu — turuncudan lacivere */
  --solar:#FC6B2A;
  --amber:#F9A82E;
  --yesil:#05A06E;
  --nane:#4FBE99;
  --mavi:#35A6DE;
  --derin:#1B3CA2;

  --dsp:"Sora",-apple-system,"Segoe UI",sans-serif;
  --snf:"Manrope",-apple-system,"Segoe UI",sans-serif;

  /* Giriş animasyonunun ortak eğrisi (ease-out-quint) */
  --egri:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--zemin);
  color:var(--metin);
  font-family:var(--snf);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ── Sahne ─────────────────────────────────────────────────────────────
   Dikey ritmin TEK kaynağı öğelerin kendi margin-top değerleri. Sahneye
   ayrıca gap verilirse ikisi toplanır ve boşluklar iki katına çıkar
   (bu projede bir kez ölçüldü: 1440×900'de ~160 px fazladan yer).     */
.sahne{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100svh;
  padding:80px 24px;
  text-align:center;
  overflow:hidden;
}

/* ── Arka plan ─────────────────────────────────────────────────────── */
.fon{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.kure{
  position:absolute;
  border-radius:50%;
  animation:suruklen 18s ease-in-out infinite;
  will-change:transform;
}
/* Üstte güneş turuncusu — sayfanın ana ışık kaynağı */
.k-solar{
  top:-192px; left:50%;
  width:640px; height:640px;
  margin-left:-320px;
  background:rgba(252,107,42,.25);
  filter:blur(150px);
}
.k-yesil{
  bottom:-224px; left:12%;
  width:576px; height:576px;
  background:rgba(5,160,110,.22);
  filter:blur(160px);
  animation-delay:-6s;
}
.k-mavi{
  right:-160px; bottom:6%;
  width:576px; height:576px;
  background:rgba(53,166,222,.20);
  filter:blur(160px);
  animation-delay:-11s;
}
.k-derin{
  left:-128px; top:28%;
  width:448px; height:448px;
  background:rgba(27,60,162,.40);
  filter:blur(150px);
  animation-delay:-3s;
}

/* ── Akan marka çizgileri ──────────────────────────────────────────────
   Giriş animasyonları bitene kadar DOM'da ama görünmez (opacity:0).
   Yol animasyonları ilk andan itibaren döner; katman belirdiğinde
   çizgiler çoktan akış hâlindedir, böylece "başlangıç sıçraması" olmaz.

   Belirme zamanı içeriğin son animasyonuna bağlı:
     açılış sahnesi varsa  → telif 2.13 sn + 0.9 sn = 3.03 sn  → 3.05'te
     açılış yoksa (JS'siz) → telif 0.84 sn + 0.9 sn = 1.74 sn  → 1.76'da   */
.cizgiler{
  position:absolute; inset:0;
  width:100%; height:100%;
  fill:none;
  stroke-linecap:round;
  opacity:0;
  animation:cizgi-ac 1.3s ease-out 1.76s forwards;
}
.acilis-hazir .cizgiler{animation-delay:3.05s}

.cizgiler path{
  animation-name:akis;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  /* süre, faz gecikmesi ve dasharray her yolda ayrı — index.html'de */
}

/* Bir tam tur dashoffset 0→1; desen periyodu 1 olduğu için başa
   dönüşte görünür bir kesinti olmaz. */
@keyframes akis{
  from{stroke-dashoffset:0}
  to  {stroke-dashoffset:1}
}

@keyframes cizgi-ac{
  from{opacity:0; filter:blur(6px)}
  to  {opacity:1; filter:blur(0)}
}

/* Dar ekranda yoğunluğu yarıya indir. Yollar iki yön dönüşümlü
   yazıldığı için baştan 8 tanesi her iki yönü de dengeli kapsar. */
@media (max-width:768px){
  .cizgiler path:nth-child(n+9){display:none}
}

/* Kenarları zemine geri çekip gözü merkeze kilitler */
.vinyet{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,transparent 20%,var(--zemin) 85%);
}

/* ── Marka işareti ─────────────────────────────────────────────────── */
/* --ay / --ao: açılış sahnesinde markın ekran ortasına giden dikey farkı
   ve büyütme oranı. Betik çalışmazsa varsayılanlar kimlik dönüşümü verir,
   yani hiçbir şey kaymaz. */
.mark{
  --ay:0px;
  --ao:1;
  display:block;
  height:112px;
  width:auto;
  filter:drop-shadow(0 12px 40px rgba(252,107,42,.18));
}

/* Kıvılcım yalnızca açılışta görünür */
.kivilcim{opacity:0}

/* ── Logotype ──────────────────────────────────────────────────────────
   Geniş harf aralığı son harften SONRA da uygulanır ve yazıyı sağa
   kaydırır; aynı değerde text-indent bunu optik olarak geri alır.     */
.logotype{
  margin-top:40px;
  font-family:var(--dsp);
  font-weight:600;
  font-size:36px;
  line-height:1.1;
  letter-spacing:.32em;
  text-indent:.32em;
  color:var(--metin);
}

.ustyazi{
  margin-top:16px;
  font-weight:500;
  font-size:.7rem;
  line-height:1.4;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--soluk);
}

/* ── Marka spektrumu + üzerinden geçen parlama ─────────────────────── */
.ayirac{
  position:relative;
  margin-top:40px;
  width:100%;
  max-width:448px;
  height:2px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(to right,
    transparent 0%,
    var(--solar) 14%,
    var(--amber) 30%,
    var(--yesil) 46%,
    var(--nane)  58%,
    var(--mavi)  72%,
    var(--derin) 86%,
    transparent 100%);
}
.parlama{
  position:absolute; top:0; bottom:0;
  width:33.333%;
  background:linear-gradient(to right,transparent,rgba(241,245,248,.8),transparent);
  animation:supur 4.5s ease-in-out infinite;
  will-change:transform;
}

/* ── Başlık ────────────────────────────────────────────────────────── */
.baslik{
  margin-top:48px;
  font-family:var(--dsp);
  font-weight:300;
  font-size:30px;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--metin);
  text-wrap:balance;
}
.baslik b{font-weight:600}

.ozet{
  margin-top:24px;
  max-width:512px;
  font-size:16px;
  line-height:1.625;
  color:var(--soluk);
  text-wrap:pretty;
}

/* ── İletişim düğmeleri ────────────────────────────────────────────── */
.iletisim{
  margin-top:56px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.iletisim a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;          /* dokunma hedefi alt sınırı */
  border:1px solid var(--kenar);
  border-radius:50%;
  background:rgba(15,21,32,.4);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  color:var(--soluk);
  transition:color .3s ease,border-color .3s ease,
             background-color .3s ease,transform .3s var(--egri);
}
.iletisim svg{width:19px;height:19px;display:block}

.iletisim a:hover,
.iletisim a:focus-visible{
  color:var(--solar);
  border-color:rgba(252,107,42,.5);
  background:rgba(15,21,32,.75);
  transform:translateY(-2px);
}
.iletisim a:focus-visible{outline:2px solid var(--solar);outline-offset:3px}

/* Opaklık .60 iken zemin üstünde 3.24:1 ölçüldü — 12 px metin için AA
   sınırının (4.5:1) altında. .78 ile 4.65:1 oluyor; satır yine gövde
   metninden (7.0:1) belirgin biçimde sönük kalıyor. */
.telif{
  margin-top:40px;
  font-size:12px;
  letter-spacing:.025em;
  color:rgba(147,155,168,.78);
}

/* ── Geniş ekran ölçekleri (sm: 640px) ─────────────────────────────── */
@media (min-width:640px){
  .mark{height:144px}
  .logotype{font-size:48px}
  .ustyazi{font-size:12px}
  .baslik{font-size:2.75rem}
  .ozet{font-size:18px}
}

/* ── Kısa ekranlar ─────────────────────────────────────────────────────
   İçerik yığını tam boşluklarla 739 px, 80+80 dolguyla 899 px eder —
   yani 900 px'lik görünüme tam 1 px payla sığar. Bu pay fazla ince
   olduğundan eşik 920'ye alındı: 920'nin üstünde orijinal ritim aynen
   korunur, altında dolgu ve blok araları oransal kısılıp sayfa her
   koşulda tek ekranda kalır.                                          */
@media (max-height:920px){
  .sahne{padding:48px 24px}
  .logotype{margin-top:28px}
  .ayirac{margin-top:28px}
  .baslik{margin-top:34px}
  .iletisim{margin-top:38px}
  .telif{margin-top:28px}
}
@media (max-height:760px){
  .sahne{padding:36px 24px}
  .mark{height:96px}
  .logotype{margin-top:22px}
  .ustyazi{margin-top:12px}
  .ayirac{margin-top:22px}
  .baslik{margin-top:26px}
  .ozet{margin-top:18px}
  .iletisim{margin-top:28px}
  .telif{margin-top:22px}
}

/* ── Animasyonlar ──────────────────────────────────────────────────────
   Öğelerin taban durumu GÖRÜNÜR; giriş animasyonu `backwards` ile
   yalnızca başlangıcı geriye taşır. Animasyon hiç çalışmazsa (eski
   tarayıcı, donmuş sekme) sayfa yine de tam görünür kalır.            */
.yukari{animation:yuksel .9s var(--egri) backwards}

.mark     {animation-delay:.08s}
.logotype {animation-delay:.22s}
.ustyazi  {animation-delay:.32s}
.ayirac   {animation-delay:.42s}
.baslik   {animation-delay:.52s}
.ozet     {animation-delay:.62s}
.iletisim {animation-delay:.74s}
.telif    {animation-delay:.84s}

@keyframes yuksel{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:translateY(0)}
}

@keyframes suruklen{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(3%,-4%,0) scale(1.08)}
}

@keyframes supur{
  from{transform:translateX(-120%)}
  to  {transform:translateX(420%)}
}

/* ═══════════════════════════════════════════════════════════════════════
   AÇILIŞ SAHNESİ
   Yalnızca `html.acilis-hazir` altında çalışır; bu sınıfı body sonundaki
   betik, markın yerini ölçtükten sonra ekler.

   Zaman çizelgesi
     0.06 – 1.00 sn  kıvılcım doğar, sekiz üçgen ondan dışarı açılır
     1.00 – 1.05 sn  mark tam parlaklıkta bekler
     1.05 – 1.77 sn  mark küçülerek son yerine süzülür
     1.62 sn –       içerik alttan yükselerek gelir (uçuşun sonuyla bindirir)
   ═══════════════════════════════════════════════════════════════════════ */

/* Arka plan ışıkları logoyla birlikte açılır */
.acilis-hazir .fon{animation:fon-ac 1.6s ease-out backwards}

/* Mark: önce büyük ve ekran ortasında bekler, sonra yerine uçar.
   `.yukari` yükselme animasyonunun yerini alır (daha yüksek özgüllük). */
.acilis-hazir .mark{
  animation:acilis-ucus 1.77s cubic-bezier(.6,.02,.2,1) both,
            acilis-parilti 1.77s ease-out both;
}

.acilis-hazir .kivilcim{animation:kivilcim-dogus 1.45s ease-out .04s backwards}

/* Üçgenler markın merkezinden (viewBox'ta 90,0) dışarı doğru açılır */
.acilis-hazir .ucgenler polygon{
  transform-box:view-box;
  transform-origin:152px 210px;
  animation:ucgen-dogus .42s cubic-bezier(.22,1,.36,1) backwards;
}
.acilis-hazir .ucgenler polygon:nth-child(1){animation-delay:.08s}
.acilis-hazir .ucgenler polygon:nth-child(2){animation-delay:.15s}
.acilis-hazir .ucgenler polygon:nth-child(3){animation-delay:.22s}
.acilis-hazir .ucgenler polygon:nth-child(4){animation-delay:.29s}
.acilis-hazir .ucgenler polygon:nth-child(5){animation-delay:.36s}
.acilis-hazir .ucgenler polygon:nth-child(6){animation-delay:.43s}
.acilis-hazir .ucgenler polygon:nth-child(7){animation-delay:.50s}
.acilis-hazir .ucgenler polygon:nth-child(8){animation-delay:.57s}

/* İçerik uçuşun son çeyreğinde girmeye başlar */
.acilis-hazir .logotype{animation-delay:1.62s}
.acilis-hazir .ustyazi {animation-delay:1.70s}
.acilis-hazir .ayirac  {animation-delay:1.78s}
.acilis-hazir .baslik  {animation-delay:1.86s}
.acilis-hazir .ozet    {animation-delay:1.94s}
.acilis-hazir .iletisim{animation-delay:2.04s}
.acilis-hazir .telif   {animation-delay:2.13s}

@keyframes acilis-ucus{
  0%,59%{transform:translateY(var(--ay)) scale(var(--ao))}
  100%  {transform:translateY(0) scale(1)}
}

/* Oluşurken güçlü ışıma, yerine oturunca dinlenme durumuna döner */
@keyframes acilis-parilti{
  0%  {filter:drop-shadow(0 0 64px rgba(252,107,42,.70))}
  59% {filter:drop-shadow(0 0 48px rgba(252,107,42,.52))}
  100%{filter:drop-shadow(0 12px 40px rgba(252,107,42,.18))}
}

@keyframes kivilcim-dogus{
  0%  {opacity:0;  transform:scale(.15)}
  16% {opacity:1;  transform:scale(.5)}
  55% {opacity:.5; transform:scale(1)}
  100%{opacity:0;  transform:scale(1.35)}
}

@keyframes ucgen-dogus{
  from{opacity:0; transform:scale(.14)}
  60% {opacity:1}
  to  {opacity:1; transform:scale(1)}
}

@keyframes fon-ac{from{opacity:0}to{opacity:1}}

/* ── Hareket azaltma tercihi ───────────────────────────────────────── */
/* Betik bu tercihte `acilis-hazir` eklemez, yani açılış sahnesi hiç
   kurulmaz; aşağısı kalan sürekli hareketleri de durdurur. */
@media (prefers-reduced-motion:reduce){
  .yukari,.kure,.parlama{animation:none}
  .parlama{opacity:0}
  .iletisim a{transition-duration:.01ms}
  /* Çizgiler kalır ama akmaz: sabit, doğrudan görünür. */
  .cizgiler{animation:none; opacity:1; filter:none}
  .cizgiler path{animation:none}
}