/* ============================================================
   Digiras Plus — Brand Motion
   Animasyonlu logo (digirasLogoAnimated) + hero ilk-izlenim.
   GPU-only: yalnızca transform + opacity anime. prefers-reduced-motion saygılı.
   Yüklendiği yerler: index.php (landing) + renderAppLayout (app shell).
   ============================================================ */

:root{
  --dp-logo-ink:#0B1E3F;                 /* "Digiras" wordmark — açık tema / cream */
  --dp-ease:cubic-bezier(.2,.7,.2,1);    /* birincil easing (mevcut konvansiyon) */
  --dp-pop:cubic-bezier(.2,1.4,.4,1);    /* overshoot pop (bn-pop ile aynı) */
}
[data-theme="dark"]{ --dp-logo-ink:#FFFFFF; }

/* ---------- Animasyonlu logo ---------- */
/* Boy: helper'a verilen height attribute'u sürer (CSS height YOK ki çağrı başına ölçeklenebilsin). */
.dp-logo{
  display:block; width:auto; overflow:visible;
  transition:transform .18s var(--dp-ease);
}
.dp-logo .dp-wordmark{
  fill:var(--dp-logo-ink);
  font-family:'Geist','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-weight:800; letter-spacing:-2.5px;
  transform-box:fill-box;
}
.dp-logo .dp-plus{
  fill:#fff;
  font-family:'Geist','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-weight:800; letter-spacing:4px;
}
.dp-logo .dp-pill-grp{ transform-box:fill-box; transform-origin:center; }
.dp-logo .dp-pill-inner{ transform-box:fill-box; transform-origin:center; }
.dp-logo .dp-glow{ transform-box:fill-box; transform-origin:center; }
.dp-logo .dp-shine{ transform:translateX(-90px) skewX(-18deg); } /* rest: pill dışında */

/* entrance — wordmark sol→sağ kayarak gelir (1 kez) */
.dp-logo--anim .dp-wordmark{
  opacity:0;
  animation:dpWordIn .7s var(--dp-ease) .05s forwards;
}
@keyframes dpWordIn{
  from{ opacity:0; transform:translateX(-14px); }
  to  { opacity:1; transform:translateX(0); }
}

/* entrance — PLUS pill overshoot pop (1 kez) */
.dp-logo--anim .dp-pill-grp{
  opacity:0;
  animation:dpPillPop .6s var(--dp-pop) .38s forwards;
}
@keyframes dpPillPop{
  0%  { opacity:0; transform:scale(.45); }
  70% { opacity:1; transform:scale(1.06); }
  100%{ opacity:1; transform:scale(1); }
}

/* continuous — coral glow nabzı (cesur ton, loop) */
.dp-logo--anim .dp-glow{
  opacity:.32;
  will-change:opacity, transform;
  animation:dpGlow 2.8s ease-in-out 1.1s infinite;
}
@keyframes dpGlow{
  0%,100%{ opacity:.30; transform:scale(1); }
  50%    { opacity:.68; transform:scale(1.08); }
}

/* continuous — shimmer sweep pill üstünde (cesur ton, loop) */
.dp-logo--anim .dp-shine{
  will-change:transform;
  animation:dpShine 4.6s ease-in-out 1.5s infinite;
}
@keyframes dpShine{
  0%   { transform:translateX(-90px) skewX(-18deg); }
  20%  { transform:translateX(240px)  skewX(-18deg); }
  100% { transform:translateX(240px)  skewX(-18deg); }
}

/* hover — logo kalkar, pill zıplar */
a:hover > .dp-logo, .dp-logo:hover{ transform:translateY(-1px); }
a:hover > .dp-logo .dp-pill-inner, .dp-logo:hover .dp-pill-inner{
  animation:dpPillBounce .42s var(--dp-pop);
}
@keyframes dpPillBounce{
  0%  { transform:scale(1)    rotate(0); }
  45% { transform:scale(1.12) rotate(-3deg); }
  100%{ transform:scale(1)    rotate(0); }
}

/* ============================================================
   Hero ilk-izlenim — landing (.hero) giriş animasyonu
   Element başına stagger; hepsi 1 kez oynar (forwards).
   ============================================================ */
.hero .eyebrow{ opacity:0; animation:dpRise .6s var(--dp-ease) .05s forwards; }
.hero .hero-h1{ opacity:0; animation:dpRise .7s var(--dp-ease) .16s forwards; }
.hero .hero-sub{ opacity:0; animation:dpRise .7s var(--dp-ease) .30s forwards; }
.hero .hero-btns{ opacity:0; animation:dpRise .7s var(--dp-ease) .44s forwards; }
.hero .platform-summary{ opacity:0; animation:dpRise .8s var(--dp-ease) .58s forwards; }
@keyframes dpRise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0); }
}

/* eyebrow nokta nabzı (cesur) */
.hero .eyebrow-dot{ animation:dpDot 2.4s ease-in-out 1s infinite; }
@keyframes dpDot{
  0%,100%{ box-shadow:0 0 0 3px rgba(232,98,61,.18); }
  50%    { box-shadow:0 0 0 6px rgba(232,98,61,.06); }
}

/* serif "sonra" accent — dikkat çekici settle */
.hero .hero-h1 .serif{ display:inline-block; animation:dpAccent .9s var(--dp-pop) .9s both; }
@keyframes dpAccent{
  0%  { transform:scale(1); }
  40% { transform:scale(1.06); }
  100%{ transform:scale(1); }
}

/* primary CTA vurgusu — shine sweep + coral glow nabzı (dönüşüm noktası) */
.dp-cta-emphasis{ position:relative; overflow:hidden; isolation:isolate;
  animation:dpCtaGlow 3.2s ease-in-out 1.4s infinite; }
.dp-cta-emphasis::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
  will-change:transform;
  animation:dpCtaShine 4.6s ease-in-out 1.8s infinite;
}
@keyframes dpCtaShine{
  0%  { transform:translateX(-120%); }
  22% { transform:translateX(120%); }
  100%{ transform:translateX(120%); }
}
@keyframes dpCtaGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,98,61,0); }
  50%    { box-shadow:0 6px 22px rgba(232,98,61,.34); }
}

/* aurora — hero arkası yumuşak renk driftı (cesur, dikkat dağıtmaz) */
.hero{ position:relative; }
.dp-aurora{
  position:absolute; inset:-10% -5% auto -5%; height:120%; z-index:0;
  pointer-events:none; filter:blur(60px); opacity:.5; will-change:transform;
  background:
    radial-gradient(40% 55% at 25% 30%, rgba(232,98,61,.28), transparent 70%),
    radial-gradient(38% 50% at 78% 22%, rgba(255,138,92,.22), transparent 72%);
  animation:dpAurora 14s ease-in-out infinite;
}
.hero .container{ position:relative; z-index:1; }
@keyframes dpAurora{
  0%,100%{ transform:translate3d(0,0,0)    scale(1); }
  50%    { transform:translate3d(2%,-2%,0) scale(1.08); }
}

/* ============================================================
   Nav buton grubu — sağ üst (Giriş Yap + Ücretsiz Başla)
   Logo ile uyumlu premium + hover affordance. Tek primary CTA (coral).
   ============================================================ */
.dp-nav-cta{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:44px;                 /* WCAG 2.5.5 dokunma hedefi */
  background:var(--accent) !important; color:var(--accent-fg,#fff) !important;
  border-color:transparent !important;
  box-shadow:0 2px 8px rgba(232,98,61,.28);
  transition:transform .18s var(--dp-ease), box-shadow .22s var(--dp-ease), background .2s ease;
}
.dp-nav-cta:hover{
  transform:translateY(-1px);
  background:#E8512B !important;
  box-shadow:0 7px 20px rgba(232,98,61,.42);
}
.dp-nav-cta:active{ transform:translateY(0) scale(.98); }
.dp-nav-cta:focus-visible{ outline:2px solid #0B1E3F; outline-offset:3px; } /* navy ring — coral üstünde de cream üstünde de görünür */
.dp-nav-cta > *{ position:relative; z-index:2; }
.dp-nav-cta::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);
}
.dp-nav-cta:hover::after{ animation:dpCtaShine 1.05s var(--dp-ease); } /* hover'da 1 kez — loop değil */
.dp-nav-cta svg{ transition:transform .18s var(--dp-ease); }
.dp-nav-cta:hover svg{ transform:translateX(3px); }

.dp-nav-ghost{
  min-height:44px;
  transition:transform .18s var(--dp-ease), border-color .2s ease, background .2s ease, color .2s ease;
}
.dp-nav-ghost:hover{ transform:translateY(-1px); background:rgba(20,19,15,.07); border-color:var(--fg,#14130F); }
.dp-nav-ghost:focus-visible{ outline:2px solid #0B1E3F; outline-offset:3px; }

/* ============================================================
   Erişilebilirlik — hareketi azalt
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .dp-logo--anim .dp-wordmark,
  .dp-logo--anim .dp-pill-grp,
  .dp-logo--anim .dp-pill-inner,
  .dp-logo--anim .dp-glow,
  .dp-logo--anim .dp-shine,
  .hero .eyebrow, .hero .hero-h1, .hero .hero-sub, .hero .hero-btns,
  .hero .platform-summary, .hero .eyebrow-dot, .hero .hero-h1 .serif,
  .dp-cta-emphasis, .dp-cta-emphasis::after, .dp-aurora,
  .dp-nav-cta::after{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .dp-logo--anim .dp-glow{ opacity:.4 !important; }
  .dp-logo--anim .dp-shine{ opacity:0 !important; }
  .dp-cta-emphasis::after, .dp-nav-cta::after{ display:none !important; }
  .dp-aurora{ opacity:.4 !important; }
}