/* Acvoria Site — açılış efekti (TASK-SITE-PWA-INTRO-1018 · T-417)
 * İşletme isterse açılır (varsayılan KAPALI). Firmanın logosu (yoksa baş harfleri) + adı, sitenin tema renkleriyle.
 * ⭐ Görünürlük `<html class="acv-intro-play">` ile gelir; sınıfı yalnız intro.js koyar → betik çalışmazsa intro HİÇ görünmez
 *    (site her zaman kullanılabilir). Betik takılsa bile en geç süre + 2,5 sn'de kendiliğinden kaybolur (acv-i-guard).
 * ⭐ Yalnız transform/opacity (kapanışta "daire" için clip-path). Hareketi azalt / "animasyonları durdur" → kısa solma.
 * ⛔ CSP: satır içi stil yok; süre `--acv-intro-d` ile CSSOM'dan gelir. */

.acv-intro{
  --d:var(--acv-intro-d, 2s);
  --ib:var(--acv-intro-bg, var(--bg));
  display:none;
  animation:acv-i-guard 0s linear calc(var(--d) + 2.5s) forwards;
}
html.acv-intro-play .acv-intro{
  position:fixed; inset:0; z-index:2147483000;
  display:grid; place-items:center;
  background:var(--ib); color:var(--text);
  overflow:hidden; contain:layout paint; touch-action:none;
}
.acv-intro.is-out{ pointer-events:none; animation:acv-i-out .55s var(--ease-std, ease) forwards; }
@keyframes acv-i-guard{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
@keyframes acv-i-out{ to{ opacity:0; visibility:hidden; } }

.acv-intro__stage{
  position:relative; z-index:2; display:grid; justify-items:center; gap:clamp(14px, 2.6vmin, 22px);
  padding:24px; text-align:center; max-width:min(90vw, 760px);
}
.acv-intro__mark{
  position:relative; display:grid; place-items:center;
  width:clamp(76px, 18vmin, 120px); height:clamp(76px, 18vmin, 120px);
  animation:acv-i-pop calc(var(--d) * .42) var(--ease-out, ease-out) both;
}
.acv-intro__mark img{ width:100%; height:100%; object-fit:contain; }
.acv-intro__mark--mono{
  border-radius:28%;
  background:linear-gradient(135deg, var(--btn-1), var(--btn-2));
  box-shadow:0 18px 48px -18px color-mix(in oklab, var(--btn-1) 70%, transparent);
}
.acv-intro__mark--mono b{
  font-family:var(--font-display); font-weight:var(--display-weight, 700); font-size:clamp(28px, 7vmin, 46px);
  line-height:1; color:var(--on-btn); letter-spacing:-.02em;
}
.acv-intro__name{
  font-family:var(--font-display); font-weight:var(--display-weight, 700); letter-spacing:var(--display-tracking, -.02em);
  font-size:clamp(20px, 4.6vmin, 36px); line-height:1.15; color:var(--text);
  animation:acv-i-rise calc(var(--d) * .42) var(--ease-out, ease-out) calc(var(--d) * .12) both;
}
.acv-intro__name i{ display:inline-block; font-style:normal; white-space:pre; }
.acv-intro__bar{
  display:none; position:relative; width:min(220px, 52vw); height:2px; border-radius:2px; overflow:hidden;
  background:color-mix(in oklab, var(--text) 14%, transparent);
}
.acv-intro__bar::after{
  content:""; position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--g1), var(--g2));
  animation:acv-i-bar var(--d) linear forwards;
}
.acv-intro__fx{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.acv-intro__fx i{ position:absolute; display:none; }

.acv-intro__skip{
  position:absolute; z-index:3;
  right:max(16px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  min-width:44px; min-height:44px; padding:10px 18px; border-radius:999px; cursor:pointer;
  font:600 14px/1 var(--font-body, system-ui, sans-serif); color:var(--text);
  background:color-mix(in oklab, var(--surface-solid, var(--surface)) 72%, transparent);
  border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:acv-i-fade .4s ease-out calc(var(--d) * .2) both;
}
.acv-intro__skip:hover{ background:var(--surface-solid, var(--surface)); }
.acv-intro__skip:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; }

@keyframes acv-i-pop{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }
@keyframes acv-i-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes acv-i-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes acv-i-bar{ to{ transform:scaleX(1); } }
@keyframes acv-i-spin{ to{ transform:rotate(1turn); } }

/* ── 1. Logonuzla — logo yumuşak hâleyle belirir, kapanışta hafifçe yaklaşır ────────────────── */
.acv-intro--logo .acv-intro__mark::after{
  content:""; position:absolute; inset:-34%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 38%, transparent), transparent);
  animation:acv-i-glow calc(var(--d) * .9) var(--ease-out, ease-out) both;
}
.acv-intro--logo .acv-intro__mark{ animation-duration:calc(var(--d) * .55); }
.acv-intro--logo.is-out .acv-intro__stage{ transition:transform .55s var(--ease-std, ease); transform:scale(1.08); }
@keyframes acv-i-glow{ 0%{ opacity:0; transform:scale(.6); } 60%{ opacity:1; } 100%{ opacity:.75; transform:scale(1); } }

/* ── 2. Sade — logo, ad ve ince ilerleme çizgisi ─────────────────────────────────────────── */
.acv-intro--minimal .acv-intro__bar{ display:block; animation:acv-i-fade .3s ease-out both; }

/* ── 3. Perde — iki kanat ortadan açılır ─────────────────────────────────────────────────── */
.acv-intro--curtain, .acv-intro--shutter, .acv-intro--split{ background:transparent !important; }
.acv-intro--curtain .acv-intro__fx i:nth-child(-n+2){ display:block; top:0; bottom:0; width:50.5%; background:var(--ib); }
.acv-intro--curtain .acv-intro__fx i:nth-child(1){ left:0; box-shadow:inset -1px 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
.acv-intro--curtain .acv-intro__fx i:nth-child(2){ right:0; box-shadow:inset 1px 0 0 color-mix(in oklab, var(--accent) 45%, transparent); }
.acv-intro--curtain.is-out, .acv-intro--shutter.is-out, .acv-intro--split.is-out{ animation:acv-i-hold .9s linear forwards; }
.acv-intro--curtain.is-out .acv-intro__fx i{ transition:transform .8s cubic-bezier(.7,0,.2,1) .12s; }
.acv-intro--curtain.is-out .acv-intro__fx i:nth-child(1){ transform:translateX(-101%); }
.acv-intro--curtain.is-out .acv-intro__fx i:nth-child(2){ transform:translateX(101%); }
.acv-intro--curtain.is-out .acv-intro__stage, .acv-intro--shutter.is-out .acv-intro__stage, .acv-intro--split.is-out .acv-intro__stage,
.acv-intro.is-out .acv-intro__skip{ transition:opacity .25s ease-out; opacity:0; }
@keyframes acv-i-hold{ 99%{ visibility:visible; } to{ visibility:hidden; } }

/* ── 4. Daire — vurgu halkası yayılır; kapanışta ekran merkeze doğru daralır ──────────────── */
.acv-intro--iris .acv-intro__fx i:nth-child(1){
  display:block; left:50%; top:50%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; border-radius:50%;
  background:radial-gradient(closest-side, transparent 62%, color-mix(in oklab, var(--accent) 14%, transparent) 63%, transparent 70%);
  animation:acv-i-wave calc(var(--d) * .9) var(--ease-out, ease-out) both;
}
.acv-intro--iris.is-out{ animation:acv-i-iris .7s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes acv-i-wave{ from{ opacity:0; transform:scale(.1); } 40%{ opacity:1; } to{ opacity:0; transform:scale(1); } }
@keyframes acv-i-iris{ from{ clip-path:circle(75% at 50% 50%); } to{ clip-path:circle(0% at 50% 50%); visibility:hidden; } }

/* ── 5. Aurora — tema renklerinde süzülen ışık bulutları ─────────────────────────────────── */
.acv-intro--aurora .acv-intro__fx i:nth-child(-n+3){ display:block; width:70vmax; height:70vmax; border-radius:50%; opacity:.55; }
.acv-intro--aurora .acv-intro__fx i:nth-child(1){ left:-20vmax; top:-24vmax; background:radial-gradient(closest-side, var(--g1), transparent); animation:acv-i-drift1 calc(var(--d) * 1.6) ease-in-out both; }
.acv-intro--aurora .acv-intro__fx i:nth-child(2){ right:-24vmax; top:-10vmax; background:radial-gradient(closest-side, var(--g2), transparent); animation:acv-i-drift2 calc(var(--d) * 1.6) ease-in-out both; }
.acv-intro--aurora .acv-intro__fx i:nth-child(3){ left:10vmax; bottom:-34vmax; background:radial-gradient(closest-side, var(--g3), transparent); animation:acv-i-drift1 calc(var(--d) * 1.8) ease-in-out reverse both; }
.acv-intro--aurora.is-out{ animation-duration:.7s; }
.acv-intro--aurora.is-out .acv-intro__stage{ transition:transform .7s var(--ease-std, ease); transform:translateY(-10px) scale(1.03); }
@keyframes acv-i-drift1{ from{ opacity:0; transform:translate(-6vmax, 4vmax) scale(.9); } to{ opacity:.55; transform:translate(4vmax, -2vmax) scale(1.08); } }
@keyframes acv-i-drift2{ from{ opacity:0; transform:translate(6vmax, -3vmax) scale(1.1); } to{ opacity:.5; transform:translate(-5vmax, 3vmax) scale(.95); } }

/* ── 6. Işık çizgileri — iki ince çizgi ortadan açılır, ad aralarında belirir ────────────────── */
.acv-intro--lines .acv-intro__fx i:nth-child(-n+2){
  display:block; left:8vw; right:8vw; height:1px; transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:acv-i-line calc(var(--d) * .5) var(--ease-out, ease-out) both;
}
.acv-intro--lines .acv-intro__fx i:nth-child(1){ top:calc(50% - clamp(92px, 17vmin, 132px)); }
.acv-intro--lines .acv-intro__fx i:nth-child(2){ top:calc(50% + clamp(92px, 17vmin, 132px)); animation-delay:calc(var(--d) * .08); }
.acv-intro--lines.is-out .acv-intro__fx i{ transition:transform .45s var(--ease-std, ease), opacity .45s; transform:scaleX(0); opacity:0; }
@keyframes acv-i-line{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }

/* ── 7. Harf harf — ad harf harf yükselir (harfleri intro.js böler) ──────────────────────────── */
.acv-intro--letters .acv-intro__name{ animation:none; }
.acv-intro--letters .acv-intro__name i{
  animation:acv-i-letter calc(var(--d) * .3) var(--ease-spring, ease-out) both;
  animation-delay:calc(var(--d) * .18 + var(--i, 0) * min(45ms, calc(var(--d) * .3 / var(--n, 12))));
}
.acv-intro--letters .acv-intro__mark{ animation-duration:calc(var(--d) * .3); }
.acv-intro--letters.is-out .acv-intro__name{ transition:transform .5s var(--ease-std, ease), opacity .5s; transform:translateY(-12px); opacity:0; }
@keyframes acv-i-letter{ from{ opacity:0; transform:translateY(.6em) rotate(6deg); } to{ opacity:1; transform:none; } }

/* ── 8. Panjur — altı şerit sırayla kalkar ───────────────────────────────────────────────── */
.acv-intro--shutter .acv-intro__fx i{ display:block; top:0; bottom:0; width:calc(100% / 6 + 1px); background:var(--ib); transform-origin:50% 0; }
.acv-intro--shutter .acv-intro__fx i:nth-child(1){ left:0; }
.acv-intro--shutter .acv-intro__fx i:nth-child(2){ left:calc(100% / 6); }
.acv-intro--shutter .acv-intro__fx i:nth-child(3){ left:calc(200% / 6); }
.acv-intro--shutter .acv-intro__fx i:nth-child(4){ left:calc(300% / 6); }
.acv-intro--shutter .acv-intro__fx i:nth-child(5){ left:calc(400% / 6); }
.acv-intro--shutter .acv-intro__fx i:nth-child(6){ left:calc(500% / 6); }
.acv-intro--shutter.is-out .acv-intro__fx i{ transition:transform .5s cubic-bezier(.7,0,.3,1); transform:scaleY(0); }
.acv-intro--shutter.is-out .acv-intro__fx i:nth-child(2){ transition-delay:.05s; }
.acv-intro--shutter.is-out .acv-intro__fx i:nth-child(3){ transition-delay:.1s; }
.acv-intro--shutter.is-out .acv-intro__fx i:nth-child(4){ transition-delay:.15s; }
.acv-intro--shutter.is-out .acv-intro__fx i:nth-child(5){ transition-delay:.2s; }
.acv-intro--shutter.is-out .acv-intro__fx i:nth-child(6){ transition-delay:.25s; }

/* ── 9. Hâle — logonun çevresinde dönen ışık halkası ─────────────────────────────────────── */
.acv-intro--halo .acv-intro__mark::before{
  content:""; position:absolute; inset:-26%; border-radius:50%;
  background:conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), transparent 72%, var(--g1));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:acv-i-fade calc(var(--d) * .3) ease-out both, acv-i-spin 1.6s linear infinite;
}
.acv-intro--halo.is-out .acv-intro__stage{ transition:transform .55s var(--ease-std, ease); transform:scale(.92); }

/* ── 10. Çapraz — ekran çapraz ikiye ayrılır ─────────────────────────────────────────────── */
.acv-intro--split .acv-intro__fx i:nth-child(-n+2){ display:block; inset:0; background:var(--ib); }
.acv-intro--split .acv-intro__fx i:nth-child(1){ clip-path:polygon(0 0, 100% 0, 0 100%); }
.acv-intro--split .acv-intro__fx i:nth-child(2){ clip-path:polygon(100% 0, 100% 100%, 0 100%); }
.acv-intro--split .acv-intro__fx i:nth-child(3){
  display:block; left:-10%; right:-10%; top:50%; height:1px; transform:rotate(calc(atan2(-100vh, 100vw)));
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:acv-i-line calc(var(--d) * .6) var(--ease-out, ease-out) calc(var(--d) * .2) both;
}
.acv-intro--split.is-out .acv-intro__fx i{ transition:transform .8s cubic-bezier(.7,0,.2,1) .1s, opacity .3s; }
.acv-intro--split.is-out .acv-intro__fx i:nth-child(1){ transform:translate(-100%, -100%); }
.acv-intro--split.is-out .acv-intro__fx i:nth-child(2){ transform:translate(100%, 100%); }
.acv-intro--split.is-out .acv-intro__fx i:nth-child(3){ opacity:0; }

/* ── 11. Yakınlaşma — logo uzaktan gelir; kapanışta içinden geçilir ──────────────────────── */
.acv-intro--zoom .acv-intro__mark{ animation-name:acv-i-zoomin; animation-duration:calc(var(--d) * .5); }
.acv-intro--zoom.is-out{ animation-duration:.6s; }
.acv-intro--zoom.is-out .acv-intro__stage{ transition:transform .6s cubic-bezier(.6,0,.4,1), opacity .5s; transform:scale(4); opacity:0; }
@keyframes acv-i-zoomin{ from{ opacity:0; transform:scale(1.7); } to{ opacity:1; transform:none; } }

/* ── 12. Buzlu cam — site arkada buğulu görünür, logo cam kart üstünde ────────────────────── */
html.acv-intro-play .acv-intro--glass{
  background:color-mix(in oklab, var(--ib) 55%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.25); backdrop-filter:blur(22px) saturate(1.25);
}
.acv-intro--glass .acv-intro__stage{
  padding:clamp(26px, 5vmin, 44px) clamp(30px, 7vmin, 64px); border-radius:28px;
  background:color-mix(in oklab, var(--surface-solid, var(--surface)) 46%, transparent);
  border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  box-shadow:0 30px 80px -30px color-mix(in oklab, var(--shadow) 55%, transparent);
  animation:acv-i-rise calc(var(--d) * .4) var(--ease-out, ease-out) both;
}
.acv-intro--glass.is-out .acv-intro__stage{ transition:transform .55s var(--ease-std, ease); transform:translateY(-14px) scale(.98); }

/* ── Hareketi azalt / "animasyonları durdur": yalnız kısa solma ──────────────────────────── */
html.acv-intro-calm .acv-intro *, html.acv-intro-calm .acv-intro *::before, html.acv-intro-calm .acv-intro *::after{
  animation:none !important; transition:none !important;
}
html.acv-intro-calm .acv-intro.is-out{ animation:acv-i-out .3s linear forwards !important; }
html.acv-intro-calm .acv-intro--curtain .acv-intro__fx i, html.acv-intro-calm .acv-intro--shutter .acv-intro__fx i,
html.acv-intro-calm .acv-intro--split .acv-intro__fx i:nth-child(-n+2){ transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .acv-intro *, .acv-intro *::before, .acv-intro *::after{ animation:none !important; transition:none !important; }
  .acv-intro.is-out{ animation:acv-i-out .3s linear forwards !important; }
  .acv-intro .acv-intro__fx i{ transform:none !important; }
}
@media (forced-colors: active){ .acv-intro__skip{ border:1px solid ButtonText; } }
.acv-intro--letters .acv-intro__name:not(.is-split){ visibility:hidden; }
@media print{ .acv-intro{ display:none !important; } }
