/* ===================== Temel Ayarlar & Değişkenler ===================== */
:root{
  --bg:#0b0b0b;
  --fg:#c9d2db;
  --grad-start:#38d7c1; /* turkuaz */
  --grad-mid:#5aa8ff;   /* mavi */
  --grad-end:#8056e5;   /* mor */
  --maxw: 960px;

  /* Gradient akışı */
  --grad-size: 300% 100%;
  --anim-dur: 18s;   /* akış hızı (isteğe göre değiştir) */
}

*{ box-sizing: border-box; }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI,
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ===================== Ana Yerleşim ===================== */
.hero{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:start center;
  padding:clamp(20px,5vw,48px);
  overflow:hidden;
}

/* Yazılar üst katmanda */
.copy{
  width:100%;
  max-width:var(--maxw);
  text-align:center;
  margin-top:min(18vh, 220px);
  position:relative;
  z-index:2;
}

/* ===================== Tek Akışkan Gradient Tüm Metne ===================== */
/* .sync kapsayıcısındaki tüm .g öğelerine aynı animasyon uygulanır.
   Böylece satırlar arası renk geçişi birbirinin devamı gibi görünür. */
.sync .g{
  background: linear-gradient(90deg, var(--grad-start), var(--grad-mid), var(--grad-end));
  background-size: var(--grad-size);
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: flow var(--anim-dur) linear infinite;
  /* küçük gecikmelerle doğal akış */
}
.sync .headline.g{ animation-delay: 0s; }
.sync .lead.g{     animation-delay: -1.2s; }
.sync .sub.g{      animation-delay: -2s; }

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

/* Hareket tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .sync .g{ animation: none; background-size: 100% 100%; }
}

/* ===================== Tipografi ===================== */
.headline{
  margin: 0 0 16px 0;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: .2px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.2));
}

.lead{
  margin: 0 auto 8px;
  max-width: 60ch;
  font-size: clamp(16px, 2.3vw, 22px);
  line-height: 1.55;
  opacity: .95;
}

.lead strong{ font-weight: 800; }

.sub{
  margin: 0 auto;
  max-width: 65ch;
  font-size: clamp(14px, 1.9vw, 20px);
  line-height: 1.55;
  opacity: .9;
}

/* ===================== Çiçek Görseli (2×) ===================== */
.flower{
  position:absolute;
  left:50%;
  bottom:-10%;
  transform: translateX(-50%);
  width: min(94vw, 936px); /* eski 720px → 1.3 kat büyütüldü */
  height:auto;
  pointer-events:none;
  user-select:none;
  z-index:1; /* metnin altında */
  filter:
    drop-shadow(0 18px 36px rgba(0,0,0,.65))
    saturate(1.05)
    contrast(1.06);
}

/* Responsive düzeltme */
@media (max-width: 480px){
  .flower{ width: min(110vw, 980px); bottom:-18%; }
}
@media (max-width: 480px){
  .headline{ font-size: clamp(26px, 9vw, 38px); }
  .flower{ width: min(170vw, 1500px); bottom:-22%; }
}