/* ── Ana sayfa girişi ── (şablon tools/yama/ana-sayfa.html, davranış assets/ana-giris.js, README → "Ana sayfa girişi")
   Emir, 15.10.2026: "Ana sayfada 10101 olamayacak farklı renklerle inisiyatif almana güvenerek yukarıdan aşağı çizgiler insin. Flow'un
   akışını temsil eden akışta olduğumuzu belirten site tasarımına uygun çizgiler inip çıksın."
   - Siyah zemin, beyaz yazı; akış alanı (tuval, aria-hidden) sitenin ışık çizgileridir: inip çıkan ince, renkli ışık çizgileri (palet:
     turuncu, pembe, eflatun, mor, çivit, Turan mavisi, camgöbeği, buz mavisi; yeşil yok). Kelime markası filmdeki SVG'dir (assets/flovey-marka.svg),
     altında "Web Design & Software Developing" (& Instrument Serif italik), Turan mavisi "Başlayalım" (→ abonelikler.html#plan) ve sessiz bir kaydırma işareti.
   - Bu dosyadaki kurallar son hâldir: betik yoksa, hareketi azaltta ve giriş bitince böyle görünür. Giriş oynayacaksa <head>'deki küçük
     betik html.ag-oynar koyar (sayfa-uret.py → AG_BAS): öğeler ve başlık hapları gizli başlar, ana-giris.js onları zaman çizelgesiyle açar,
     sonunda ag-oynar'ı kaldırır. Betik hiç çalışmazsa öğeler 3 sn sonra kendiliğinden görünür (ag-emniyet). */
.ag { position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 440px; overflow: hidden;
  background: var(--zemin); color: var(--murekkep); isolation: isolate; }
.ag-tuval { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.ag-icerik { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 16px; text-align: center;
  transform: translateY(-1.2vh); }
.ag-baslik { margin: 0; font-size: 0; line-height: 0; }
.ag-marka { display: block; width: min(62vw, 1020px); height: auto; aspect-ratio: 5.27 / 1; overflow: visible; color: var(--murekkep); }
.ag-nokta { transform-box: fill-box; transform-origin: center; }
.ag-alt { margin: clamp(24px, 4.2vh, 46px) 0 0; font: 350 clamp(17px, 1.6vw, 28px)/1.3 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: .012em; text-wrap: balance;
  color: rgba(245, 248, 250, .88); }
.ag-ve { margin: 0 .05em; font: italic 400 1.24em/1 'Instrument Serif', Georgia, serif; letter-spacing: 0; color: var(--murekkep); }
/* yazının çözülmesi (ana-giris.js): harf yerinde dururken önce ince bir ışık çizgisi iner (data-d="a") ya da çıkar ("y"), harfin renginde
   (--ag-hr), sonra harf belirir (yerleşim kaymaz) */
.ag-h { position: relative; }
.ag-h[data-d] { color: transparent; }
.ag-h[data-d]::after { content: ''; position: absolute; left: 50%; top: 2%; width: 1.5px; height: 96%; margin-left: -.75px; border-radius: 1px;
  background: linear-gradient(to bottom, transparent, var(--ag-hr, #19B4EE) 62%, #fff); box-shadow: 0 0 .5em var(--ag-hr, #19B4EE);
  transform: scaleY(var(--ag-p, 1)); transform-origin: 50% 0; }
.ag-h[data-d="y"]::after { background: linear-gradient(to top, transparent, var(--ag-hr, #19B4EE) 62%, #fff); transform-origin: 50% 100%; }
/* Başlayalım: Turan mavisi hap, yazı beyaz (mavi zeminde yazı beyaz, 07.10). Hap ve ışığı ayrı katmanlardır: ::before düz hap (doğuşta
   ölçeklenir, rengi parlak buz mavisinden Turan mavisine döner), ::after dıştaki mavi ışık (ölçeklenmez, yalnız saydamlığı değişir).
   Doğuş (ana-giris.js, --ag-sx, --ag-sy, --ag-renk, --ag-isik): noktadan çizgiye, çizgiden hapa. */
.ag-dugme { --ag-sx: 1; --ag-sy: 1; --ag-renk: var(--turan); --ag-isik: 1; position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 12px;
  height: 56px; margin-top: clamp(30px, 5vh, 54px); padding: 0 26px 0 30px; border-radius: 999px; color: var(--beyaz); font: 600 17px/1 'Archivo', sans-serif;
  letter-spacing: .005em; text-decoration: none; }
.ag-dugme::before, .ag-dugme::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ag-dugme::before { z-index: -1; background: var(--ag-renk); transform: scale(var(--ag-sx), var(--ag-sy));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .24); transition: background-color .25s var(--egri); }
.ag-dugme::after { z-index: -2; box-shadow: 0 14px 44px -14px rgba(0, 163, 224, .85); opacity: var(--ag-isik); transition: box-shadow .4s var(--egri); }
.ag-dugme-yazi, .ag-dugme .ok { display: block; }
.ag-dugme .ok { width: 20px; height: 12px; flex: none; transition: transform .3s var(--egri); }
.ag-dugme:hover::before, .ag-dugme:focus-visible::before { background: var(--turan-parlak); }
.ag-dugme:hover::after, .ag-dugme:focus-visible::after { box-shadow: 0 16px 56px -12px rgba(25, 180, 238, 1); }
.ag-dugme:hover .ok, .ag-dugme:focus-visible .ok { transform: translateX(4px); }
.ag-dugme:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 5px; }
/* giriş boyunca düğme ve başlık hapları ayrı katmandır: ısınmada (görünmeden) boyanan katman doğuşta yeniden boyanmaz, yalnız saydamlığı değişir */
html.ag-oynar:not(.ag-bitti) .ag-dugme, html.ag-oynar:not(.ag-bitti) .ag-dugme::before, html.ag-oynar:not(.ag-bitti) .ag-dugme-yazi,
html.ag-oynar:not(.ag-bitti) .ag-dugme .ok { will-change: transform, opacity; }
html.ag-oynar .ust > .hap { will-change: transform, opacity; }

/* giriş oynarken: öğeler ve başlık hapları gizli başlar (ana-giris.js açar); haplar giriş bitince ya da imleç üste gelince iner.
   ag-canli: betik çalışıyor · ag-bitti: giriş bitti ya da atlandı (ag-oynar kısa bir süre sonra kalkar) · ag-ust: haplar göründü */
html.ag-oynar:not(.ag-bitti) .ag-marka, html.ag-oynar:not(.ag-bitti) .ag-alt, html.ag-oynar:not(.ag-bitti) .ag-dugme { opacity: 0; }
html.ag-oynar.ag-canli:not(.ag-bitti) .ag-dugme { pointer-events: none; }
html.ag-oynar:not(.ag-ust) .ust > .hap { opacity: 0; visibility: hidden; transform: translateY(-16px); }
html.ag-oynar:not(.menu-acik):not(.menu-kapaniyor) .ust > .hap { transition: background-color .4s var(--egri), color .4s var(--egri), box-shadow .5s var(--egri),
  opacity .7s var(--egri), transform .9s var(--egri), visibility 0s; }
@keyframes ag-emniyet { to { opacity: 1; visibility: visible; transform: none; } }
html.ag-oynar:not(.ag-canli) .ag-marka, html.ag-oynar:not(.ag-canli) .ag-alt, html.ag-oynar:not(.ag-canli) .ag-dugme,
html.ag-oynar:not(.ag-canli):not(.ag-ust) .ust > .hap { animation: ag-emniyet .5s 3s both; }
/* giriş tıklama, kaydırma ya da tuşla atlanınca kalan öğeler kısa bir geçişle yerine gelir */
html.ag-atladi .ag-marka, html.ag-atladi .ag-alt, html.ag-atladi .ag-h, html.ag-atladi .ag-dugme, html.ag-atladi .ag-dugme-yazi, html.ag-atladi .ag-dugme .ok { transition: opacity .35s ease, transform .35s var(--egri), color .35s ease; }

@media (max-width: 640px) {
  .ag-marka { width: 86vw; }
  .ag-alt { margin-top: 22px; font-size: clamp(12.5px, 3.7vw, 16px); padding: 0 4px; }
  .ag-dugme { height: 52px; margin-top: 30px; padding: 0 22px 0 26px; font-size: 16px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .ag-icerik { transform: translateY(2vh); }
  .ag-marka { width: min(52vw, 560px); }
  .ag-alt { margin-top: 16px; font-size: 15px; }
  .ag-dugme { height: 46px; margin-top: 20px; }
}
@media (forced-colors: active) { .ag-tuval { display: none; } }