/* 23.09 · AÇILIŞ SAHNESİ v3 — "kabuk değişiyor, sistem aynı" (Faruk). Stil referanstan (Opus 5.5 sunumu, kare kare
   incelendi: üç panel → orta açılır → başlık ufukta belirir → yan paneller ince şerit kalır → logo simgeden yazıya açılır).
   Hikâye bize ait: sol = gece kapalı gonca · orta = gece mavisinden şafağa ufuk · sağ = sabah açmış çiçek.
   Aşama 1: yalnız RAYNSIS · Aşama 2: ana mesaj (H1) ufukta. Masaüstünde kaydırmayla, telefonda zamanla (takılma yok).
   Döngü yok · kırmızı yok · betik kapalıyken ve hareket azaltmada iki aşama birlikte görünür. */

.acilis { position: relative; height: 170vh; background: #000; color: #F5F5F7; --e: 0; }
.acilis-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.acilis-panel { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.acilis-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acilis-sol { left: 0; width: 27%; transform: translateX(calc(var(--e) * -88.9%)); }
.acilis-sag { right: 0; width: 27%; transform: translateX(calc(var(--e) * 88.9%)); }
.acilis-orta { inset: 0; clip-path: inset(0 calc(27% - 24% * var(--e))); }
.acilis-ufuk { position: absolute; inset: 0;
  background: linear-gradient(180deg, #070D1F 0%, #0F2247 22%, #2B4C80 36%, #7894BD 45%, #B9B2A4 49.5%,
    #D69A52 51.2%, #6B3F1C 52.4%, #1A120C 56%, #060505 72%, #000 100%); }
.acilis-gren { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }

/* aşama 1: marka (referanstaki "Introducing" yeri) */
.acilis-bir { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-120%); text-align: center; z-index: 2; }
.acilis-marka { margin: 0; font-size: clamp(28px, 3.6vw, 52px); color: #F5F5F7; text-shadow: 0 1px 24px rgba(7, 13, 31, .35); }
.acilis-marka span { display: inline-block; }
/* aşama 2: ana mesaj ufukta */
.acilis-iki { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-78%); text-align: center; z-index: 2; padding: 0 24px; }
.acilis-is { margin: 0 0 18px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 245, 247, .74); }
.acilis-baslik { margin: 0 auto; max-width: 1100px; color: #F5F5F7; font-size: clamp(30px, 4vw, 64px); line-height: 1.02;
  letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(7, 13, 31, .45); }
.acilis-baslik .s { display: block; }
@media (min-width: 761px) { .acilis-baslik .s { white-space: nowrap; } }

/* giriş + aşama geçişleri (yalnız betik açıkken) */
.raynsis-js .acilis .acilis-sol, .raynsis-js .acilis .acilis-sag { transition: clip-path 1900ms cubic-bezier(.22, 1, .36, 1); }
.raynsis-js .acilis .acilis-sag { transition-delay: 280ms; }
.raynsis-js .acilis:not(.acik) .acilis-sol, .raynsis-js .acilis:not(.acik) .acilis-sag { clip-path: inset(100% 0 0 0); }
.raynsis-js .acilis .acilis-ufuk { transition: opacity 2400ms ease 120ms; }
.raynsis-js .acilis:not(.acik) .acilis-ufuk { opacity: 0; }
.raynsis-js .acilis .acilis-marka span { transition: opacity 1500ms ease, filter 1500ms ease, letter-spacing 2000ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(900ms + var(--i, 0) * 120ms); }
.raynsis-js .acilis:not(.acik) .acilis-marka span { opacity: 0; filter: blur(8px); letter-spacing: .6em; }
.raynsis-js .acilis .acilis-bir { transition: opacity 1100ms ease, filter 1100ms ease; }
.raynsis-js .acilis.iki .acilis-bir { opacity: 0; filter: blur(6px); }
.raynsis-js .acilis .acilis-iki > * { opacity: 0; filter: blur(10px); transform: translateY(10px);
  transition: opacity 1500ms ease, filter 1500ms ease, transform 1700ms cubic-bezier(.22, 1, .36, 1); }
.raynsis-js .acilis.iki .acilis-iki .acilis-alt { transition-delay: 1700ms; }   /* selam önce tek başına kalır, cümle sonra */
.raynsis-js .acilis.iki .acilis-iki > * { opacity: 1; filter: none; transform: none; }
/* betik yoksa aşama 2 görünür, aşama 1 gizli (mesaj önde) */
html:not(.raynsis-js) .acilis-bir { display: none; }

/* üst çubuk logosu: "R" simgesinden RAYNSIS yazısına açılır (yalnız açılışlı sayfada) */
.acilis-var .nav .logo .marka span { display: inline-block; overflow: hidden; vertical-align: bottom;
  transition: max-width 1500ms cubic-bezier(.22, 1, .36, 1), opacity 1200ms ease; transition-delay: calc(var(--i, 0) * 80ms); max-width: 1em; }
.acilis-var:not(.logo-acik) .nav .logo .marka span:not(:first-child) { max-width: 0; opacity: 0; }

/* karşılama: saate göre selam + hikâyenin cümlesi */
.acilis-selam { margin: 0; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.05; letter-spacing: -.035em; color: #F5F5F7; text-shadow: 0 2px 30px rgba(7, 13, 31, .45); }
.acilis-alt { margin: 18px auto 0; max-width: 640px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(245, 245, 247, .84); }

/* telefon: sahne tek ekran, yan paneller yok, kaydırmaya bağlı hareket yok */
@media (max-width: 720px), (hover: none) {
  .acilis { height: 100vh; height: 100svh; min-height: 560px; }
  .acilis-sahne { position: relative; height: 100%; }
  .acilis-sol, .acilis-sag { display: none; }
  .acilis-orta { clip-path: none; }
  .acilis-selam { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .acilis { height: 100vh; height: 100svh; }
  .acilis-sahne { position: relative; }
  .acilis * { transition: none !important; }
  .raynsis-js .acilis:not(.acik) .acilis-sol, .raynsis-js .acilis:not(.acik) .acilis-sag { clip-path: none; }
  .raynsis-js .acilis:not(.acik) .acilis-ufuk, .raynsis-js .acilis:not(.acik) .acilis-marka span { opacity: 1; filter: none; letter-spacing: normal; }
}

/* ── MAKRO KUBBELER (23.09 · HIKAYE_KABUK + Faruk "scroll bu şekilde"): görsel, önceki bölümün zemininden
   kubbe gibi yükselir ve bir sonraki bölümün rengine erir. Tek imge + tek satır; döngü yok. ── */
.makro { position: relative; margin: 0; height: clamp(340px, 62vh, 640px); overflow: hidden; color: #F5F5F7;
  background: linear-gradient(180deg, transparent 0, var(--ust, #F5F5F7) 88px, var(--ust, #F5F5F7) 26%, var(--alt, #000) 84%, var(--alt, #000) 100%);
  margin-top: -88px; }   /* 05:4x: üst kenar da erir — önceki bölümün ışık lekesi üstünden yumuşak geçiş, çizgi yok */
/* 05:2x Faruk "geçiş bir anda olamaz": görsel alt kenarda tamamen erir, zeminin son %16'sı sonraki bölümün rengi (renkleri betik komşudan okur) */
.makro-kubbe { position: absolute; left: -12%; right: -12%; top: 16%; bottom: 0; overflow: hidden;
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  transform: translateY(calc((1 - var(--m, .5)) * 22%)); will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 86%); }
.makro-kubbe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.makro-kubbe::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
.raynsis-js @media (max-width: 720px) {
  .makro { height: 300px; }
  .makro-kubbe { left: -30%; right: -30%; top: 20%; border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
  }
@media (prefers-reduced-motion: reduce) {
  .makro-kubbe { transform: none; }
  .raynsis-js }

/* RAYNSIS müdahalesi (Faruk: "yaprakta RAYNSIS ile gelen yeşillenme, tekrar canlandırma"):
   ikinci kare, başlangıç noktasından yayılan bir halkayla açılır. Kaydırmaya bağlı DEĞİL — görünce bir kez, 2,4 sn. */
@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.makro-sonra { --r: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--r) - 8%), transparent var(--r));
          mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #000 calc(var(--r) - 8%), transparent var(--r));
  transition: --r 4200ms cubic-bezier(.45, 0, .2, 1) 600ms; }
.makro.gorundu .makro-sonra { --r: 160%; }
html:not(.raynsis-js) .makro-sonra { --r: 160%; }

/* ── MOBİL (Faruk: "desktop etkisi mobilde takılma yarattı · yan görseller sıkışmış") ──
   telefonda kaydırmaya bağlı hareket yok; açılış tek panel (ufuk + marka), kubbe durağan */
@media (max-width: 720px) {
  .makro-kubbe { transform: none; will-change: auto; }
}

/* ── ANLATIM RİTMİ (23.09 05:0x, tüm sayfalar): cümle cümle gelir, her biri okunacak kadar tek başına kalır.
   Sınıfları betik ekler; betiksiz hiçbir şey gizlenmez. Düzen değişmez, yalnız zaman. ── */
.anl-bekle .anl-satir { opacity: 0; filter: blur(9px);
  transition: opacity 1300ms ease, filter 1600ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--gec, 0ms); }
.anl-bekle.anl-gor .anl-satir { opacity: 1; filter: none; }
.anl-sonra { opacity: 0; transform: translateY(10px);
  transition: opacity 1200ms ease, transform 1400ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--gec, 0ms); }
.anl-sonra.anl-gor { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .anl-bekle .anl-satir, .anl-sonra { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; } }

/* ── SAYFA BAŞI UFKU (neden · ödeme): açılışın ufku, sahnesiz. Aynı ışık, aynı gren; hikâye tek. ── */
.ufuk-bas, .ekran.koyu.ufuk-bas { position: relative; overflow: hidden; isolation: isolate; color: #F5F5F7;
  background: linear-gradient(180deg, #070D1F 0%, #0F2247 30%, #2B4C80 52%, #7894BD 66%, #B9B2A4 72%, #D69A52 74.5%, #6B3F1C 76.5%, #1A120C 84%, #000 100%) #0F2247; }
.ufuk-bas::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
.ufuk-bas h1, .ufuk-bas h2 { color: #F5F5F7; text-shadow: 0 2px 30px rgba(7, 13, 31, .45); }
.ufuk-bas .alt, .ufuk-bas .alt a { color: rgba(245, 245, 247, .84); }
.ufuk-bas.ekran { padding-bottom: 22vh; }
.odeme-ufuk { padding: 96px 0 72px; margin-bottom: 8px; }
.odeme-ufuk h1 { margin: 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.odeme-ufuk .alt { margin: 16px 0 0; max-width: 40rem; }

/* ── TEK CANLI (05:2x Faruk: "minimal; bir kelimenin bir köşesi spot ışığıyla parlasın, insan tepkisine göre, 'evet tek canlıyım'").
   Açılışın cümlesindeki RAYNSIS: binadaki tek yanık pencere gibi. Boşta 11 sn'de bir ışık kelimeden geçer ve sağ üst köşede
   kısa bir parıltı bırakır; imleç yaklaşınca ışık imlece döner. Hareket azaltmada durağan. ── */
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: -30%; }
@property --sy { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
.canli { position: relative; display: inline-block; color: #F5F5F7;
  background: radial-gradient(circle at var(--sx) var(--sy), #FFF4DC 0%, #F2C98A 14%, rgba(245,245,247,.96) 34%, rgba(245,245,247,.96) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.canli::after { content: ""; position: absolute; right: -.18em; top: -.12em; width: .42em; height: .42em; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,236,200,.95) 0%, rgba(242,201,138,.45) 22%, transparent 60%); filter: blur(.5px); transform: scale(.4); }
.raynsis-js .acilis.iki .canli:not(.izliyor) { animation: canli-tara 11s cubic-bezier(.45, 0, .25, 1) 3.4s infinite; }
.raynsis-js .acilis.iki .canli:not(.izliyor)::after { animation: canli-parilti 11s ease 3.4s infinite; }
.canli.izliyor { transition: --sx 700ms cubic-bezier(.22, 1, .36, 1), --sy 700ms cubic-bezier(.22, 1, .36, 1); }
@keyframes canli-tara { 0%, 58% { --sx: -30%; --sy: 30%; } 80% { --sx: 96%; --sy: 16%; } 100% { --sx: 130%; --sy: 10%; } }
@keyframes canli-parilti { 0%, 74% { opacity: 0; transform: scale(.4); } 81% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .canli, .canli::after { animation: none !important; } }

/* ── ARA GEÇİŞ VİDEOSU (05:3x Faruk: "geçiş bir anda olamaz, minimal algıda premium"): halka maskesi yerine motorun
   çektiği 5 sn'lik yavaş dönüşüm. Önce durağan kare, video yumuşakça üstüne gelir, bir kez oynar, son karede kalır; sonra
   gerçek son kare 1,6 sn'de erir (motor bitiş karesini birebir tutmayabilir). Video yoksa eski halka yedektir. ── */
.makro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0;
  transition: opacity 1400ms ease; pointer-events: none; }
.makro.oynuyor .makro-video, .makro.bitti .makro-video { opacity: 1; }
.makro.videolu .makro-sonra { --r: 160%; opacity: 0; transition: opacity 1600ms ease; -webkit-mask-image: none; mask-image: none; }
.makro.videolu.bitti .makro-sonra { opacity: 1; }

/* ── TEK SORU ŞEMASI v2 (05:5x Faruk: "kablo görselinin kalitesi kadar alttaki şablon da şirkete yakışmalı").
   Gerçek HTML (telefonda okunur), gece mavisi RAYNSIS düğümü + ince kehribar halka, yumuşak eğriler; görününce çizgiler
   bir kez çizilir ve her birinden tek bir ışık geçer. Döngü yok. Betiksiz: eğriler yok, düzen yine okunur. ── */
.akis2 { position: relative; max-width: 60rem; margin: 48px auto 0; padding: 48px 40px; border-radius: 28px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66)); border: 1px solid rgba(29,29,31,.07);
  box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 24px 60px -32px rgba(15,34,71,.28); }
.a2-hatlar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.a2-hatlar path { fill: none; stroke: rgba(29,29,31,.16); stroke-width: 1.2; }
.a2-hatlar path.isik { stroke: #D69A52; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.a2-soru { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: #1D1D1F; color: #F5F5F7; font-size: 15px; font-weight: 500; }
.a2-ray { position: relative; z-index: 1; justify-self: center; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #2B4C80 0%, #0F2247 48%, #070D1F 100%) #0F2247;
  box-shadow: 0 0 0 1px rgba(214,154,82,.55), 0 0 0 9px rgba(214,154,82,.07), 0 18px 40px -12px rgba(7,13,31,.55); }
.a2-ray span { color: #F5F5F7; font: 400 15px/1 "Tenor Sans", Georgia, serif; letter-spacing: .196em; padding-left: .196em; }
.a2-bolumler { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.a2-bolumler li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(29,29,31,.08); font-size: 15px; color: #1D1D1F; white-space: nowrap; box-shadow: 0 1px 2px rgba(29,29,31,.04); }
.a2-bolumler li i { width: 6px; height: 6px; border-radius: 50%; background: #D69A52; flex: none; opacity: .85; }
/* giriş: kartlar sırayla, çizgiler çizilir, ışık bir kez geçer (yalnız betik açıkken) */
.raynsis-js .akis2 .a2-bolumler li { opacity: 0; transform: translateX(-8px); transition: opacity 900ms ease, transform 1100ms cubic-bezier(.22,1,.36,1); }
.raynsis-js .akis2.goster .a2-bolumler li { opacity: 1; transform: none; }
.raynsis-js .akis2.goster .a2-bolumler li:nth-child(1) { transition-delay: 900ms; } .raynsis-js .akis2.goster .a2-bolumler li:nth-child(2) { transition-delay: 1050ms; }
.raynsis-js .akis2.goster .a2-bolumler li:nth-child(3) { transition-delay: 1200ms; } .raynsis-js .akis2.goster .a2-bolumler li:nth-child(4) { transition-delay: 1350ms; }
.raynsis-js .akis2.goster .a2-bolumler li:nth-child(5) { transition-delay: 1500ms; }
.akis2 .a2-hatlar path.taban { stroke-dasharray: var(--l, 400); stroke-dashoffset: var(--l, 400); transition: stroke-dashoffset 1400ms cubic-bezier(.45,0,.2,1); transition-delay: var(--g, 0ms); }
.akis2.goster .a2-hatlar path.taban { stroke-dashoffset: 0; }
.akis2.goster .a2-hatlar path.isik { animation: a2-isik 1800ms cubic-bezier(.45,0,.2,1) forwards; animation-delay: calc(var(--g, 0ms) + 1300ms); }
@keyframes a2-isik { 0% { opacity: 0; stroke-dashoffset: var(--l); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: calc(var(--l) * -1 + 28); } }
@media (max-width: 760px) {
  .akis2 { grid-template-columns: 1fr; justify-items: center; padding: 32px 20px; gap: 28px; }
  .a2-hatlar { display: none; }
  .a2-ray { width: 120px; height: 120px; }
  .a2-bolumler { width: 100%; }
  .a2-bolumler li { white-space: normal; }
  .akis2 .a2-ray::before, .akis2 .a2-ray::after { content: ""; position: absolute; left: 50%; width: 1px; height: 28px; background: linear-gradient(#D69A52, rgba(214,154,82,0)); }
  .akis2 .a2-ray::before { top: -28px; transform: rotate(180deg); } .akis2 .a2-ray::after { bottom: -28px; }
}
@media (prefers-reduced-motion: reduce) { .akis2 .a2-hatlar path { transition: none !important; animation: none !important; stroke-dashoffset: 0 !important; } .akis2 .a2-hatlar path.isik { display: none; } }