/* css/cesmenu.css - Çeşmenü: modern/animasyonlu yapım aşamasında */

/* ========= Temel renkler ========= */
:root{
  --cesmenu-turquoise:#00B8D9;
  --cesmenu-navy:#003B5C;
  --cesmenu-bg-soft:#E0F7FB;
  --text-on-dark:#f7fbff;
  --text-muted:#c9d7e5;
}

html,body{ height:100%; }

body.cesmenu-bg{
  min-height:100vh;
  color:var(--text-on-dark);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0,184,217,.22), transparent),
    radial-gradient(1000px 700px at 90% 20%, rgba(0,59,92,.22), transparent),
    linear-gradient(135deg, var(--cesmenu-navy) 0%, #012e45 40%, #01556f 70%, var(--cesmenu-turquoise) 100%);
  background-size: 140% 140%;
  animation: bgShift 16s ease-in-out infinite alternate;
}

@keyframes bgShift{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 100% 100%; }
}

/* ========= Intro (ilk açılış animasyonu) ========= */
.intro{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 50;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(0,184,217,.22), transparent),
    radial-gradient(1000px 700px at 90% 20%, rgba(0,59,92,.22), transparent),
    linear-gradient(135deg, var(--cesmenu-navy) 0%, #012e45 40%, #01556f 70%, var(--cesmenu-turquoise) 100%);
  background-size: 140% 140%;
  animation: bgShift 16s ease-in-out infinite alternate;
}

/* INTRO: logo çok büyüyerek içinden geçer gibi yaklaşır */
.intro-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 2vw, 16px);
  animation: introFlyThrough 2.4s ease-out forwards;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.25));
}

@keyframes introFlyThrough{
  0%   { transform: scale(.80); opacity: 0; filter: blur(0px); }
  12%  { transform: scale(.95); opacity: 1; filter: blur(0px); }
  55%  { transform: scale(1.8); opacity: 1; filter: blur(2px); }
  80%  { transform: scale(3.6); opacity: 1; filter: blur(8px) saturate(1.1) brightness(1.05); }
  100% { transform: scale(7);   opacity: 0; filter: blur(22px) saturate(1.2) brightness(1.1); }
}

/* İçinden geçme hissini güçlendiren radial flash overlay */
.intro::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.65) 16%,
      rgba(255,255,255,.15) 34%,
      rgba(255,255,255,0) 52%);
  transform: scale(0);
  opacity: 0;
  pointer-events:none;
  animation: flashBloom 1.5s ease-out .6s forwards;
}

@keyframes flashBloom{
  0%   { transform: scale(0);   opacity: 0; }
  40%  { transform: scale(1.1); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ========= Hero (ana içerik) ========= */
.hero{
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: clamp(32px, 6vw, 72px) 16px;
}

/* Logo grubu */
.logo-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(14px, 2.5vw, 22px);
  margin-bottom: clamp(18px, 3.2vw, 28px);
}

/* ÇEŞ / ME / NÜ kart logo — SOLA HİZALI */
.cesmenu-logo-icon{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;   /* sola yapışık */
  text-align:left;          /* sola hizalı metin */
  border-radius: 24px;
  border: 3px solid var(--cesmenu-turquoise);
  padding: clamp(10px, 1.5vw, 16px) clamp(18px, 2.6vw, 28px);
  line-height:1.1;
  font-weight:800;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  will-change: transform, opacity;
}

.cesmenu-logo-icon .line{
  letter-spacing: 0.08em;
  font-size: clamp(18px, 2.4vw, 30px);
}
.cesmenu-logo-icon .line:nth-child(1){ color:#daf0f8; }
.cesmenu-logo-icon .line:nth-child(2){ color:var(--cesmenu-turquoise); }
.cesmenu-logo-icon .line:nth-child(3){ color:#e9f7fb; }

/* “çeşmenü” wordmark */
.logo-wordmark{
  font-weight:800;
  text-transform: lowercase;
  font-size: clamp(34px, 6.2vw, 72px);
  line-height:1;
  letter-spacing:.01em;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.25));
}
.logo-wordmark .nv{ color:#eaf6fb; }
.logo-wordmark .me{ color: var(--cesmenu-turquoise); }

/* Başlık & açıklama */
.hero-title{
  margin-top: clamp(6px, 1.6vw, 12px);
  margin-bottom: clamp(8px, 1.8vw, 14px);
  font-weight:800;
  font-size: clamp(18px, 2.8vw, 28px);
  color:#f3faff;
  letter-spacing:.01em;
}
.hero-lead{
  max-width: 900px;
  margin-inline:auto;
  color: var(--text-muted);
  font-size: clamp(14px, 1.8vw, 18px);
}

/* CTA buton */
.cta-wrap{ margin-top: clamp(18px, 3.2vw, 28px); }
.btn-x{
  --bs-btn-padding-y: .7rem;
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-font-weight: 700;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background: #0f1419;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-x:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0,0,0,.34);
  color:#fff;
}
.btn-x .dot{
  width: .6rem; height:.6rem; border-radius:50%;
  background: var(--cesmenu-turquoise);
  box-shadow: 0 0 10px rgba(0,184,217,.8);
}

/* Header / Footer */
header .btn{ box-shadow: 0 6px 18px rgba(0,0,0,.25); }
footer{ color: rgba(255,255,255,.65); }
footer .container{ opacity:.9; }

/* ========= Reveal (introdan sonra içerik animasyonla gelsin) ========= */
[data-reveal]{ opacity:0; transform: translateY(24px); }
body.page-enter [data-reveal]{
  animation: revealUp .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes revealUp{
  to{ opacity:1; transform: translateY(0); }
}

/* Hareketi azalt ayarı */
@media (prefers-reduced-motion: reduce){
  body.cesmenu-bg{ animation:none; }
  .intro, .intro-logo{ animation:none; }
  .intro::after{ animation:none; opacity:0; }
  [data-reveal]{ opacity:1; transform:none; }
  .btn-x{ transition:none; }
}