@import "tailwindcss";

:root {
  --bg: oklch(98% 0.012 55);
  --bg-alt: oklch(95.5% 0.02 50);
  --surface: oklch(100% 0 0);
  --text: oklch(20% 0.02 40);
  --text-muted: oklch(46% 0.02 40);
  --accent: oklch(58% 0.225 18);
  --accent-dark: oklch(47% 0.2 16);
  --accent-2: oklch(58% 0.2 335);
  --ink: oklch(16% 0.02 30);
  --border: oklch(90% 0.015 50);
}

@theme inline {
  --color-bg: var(--bg);
  --color-bg-alt: var(--bg-alt);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-accent: var(--accent);
  --color-accent-dark: var(--accent-dark);
  --color-accent-2: var(--accent-2);
  --color-ink: var(--ink);
  --color-border: var(--border);
  --font-heading: var(--font-poppins);
  --font-sans: var(--font-jakarta);
}

body {
  background: var(--bg);
  color: var(--text);
}

h1,
h2,
h3 {
  font-family: var(--font-heading), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

@keyframes eq-bounce {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

.eq-bar {
  animation: eq-bounce 0.9s ease-in-out infinite;
  transform-origin: bottom;
}

@keyframes story-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.story-progress-fill {
  width: 0%;
  animation-name: story-fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fade-up 0.7s ease both;
}

.fade-up-d1 {
  animation-delay: 0.08s;
}

.fade-up-d2 {
  animation-delay: 0.18s;
}

.fade-up-d3 {
  animation-delay: 0.28s;
}

/* İnce nokta deseni — düz arka planlara doku katmak için */
.bg-dot-grid {
  background-image: radial-gradient(circle, oklch(55% 0.02 40 / 0.14) 1px, transparent 1px);
  background-size: 24px 24px;
}

.btn-glow {
  box-shadow: 0 10px 28px oklch(58% 0.225 18 / 0.35);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.btn-glow:hover {
  box-shadow: 0 14px 34px oklch(58% 0.225 18 / 0.45);
  transform: translateY(-1px);
}

/* Tüm kartlarda kullanılan tutarlı, belirgin hover kaldırma sistemi */
.card-lift {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s;
}

.card-lift:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 8px 16px rgba(30, 15, 8, 0.1),
    0 28px 56px rgba(30, 15, 8, 0.18);
  border-color: var(--accent);
}

/* Fotoğrafsız gradyan fallback'lere doku katan çapraz çizgi deseni */
.pattern-diagonal {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0px,
    rgba(255, 255, 255, 0.14) 1.5px,
    transparent 1.5px,
    transparent 9px
  );
}

/* Instagram tarzı çok renkli, sürekli dönen durum halkası arka planı. Dönüş `transform: rotate()`
   İLE DEĞİL, gradyanın kendi başlangıç açısını taşıyan bir CSS custom property (--ring-angle) ile
   yapılıyor — çünkü sürekli çalışan bir `transform: rotate()` animasyonunu, üstünde/altında
   border-radius+overflow-hidden kırpması olan bir katmanla birlikte kullanmak, GPU katman
   birleştirmesinde (compositing) gradyanın belirli açı aralıklarında hiç boyanmamasına (arka
   planın şeffaf/boş görünmesine) yol açan, ölçülüp doğrulanmış gerçek bir tarayıcı hatasıydı.
   Açıyı doğrudan boyama (paint) aşamasında değiştirmek bu hatayı tamamen ortadan kaldırıyor. */
@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.story-ring {
  background: conic-gradient(from var(--ring-angle), var(--accent), var(--accent-2), oklch(70% 0.18 60), var(--accent));
  animation: story-ring-spin 3.2s linear infinite;
}

@keyframes story-ring-spin {
  to {
    --ring-angle: 360deg;
  }
}

/* Halkanın arkasında nabız gibi atan yumuşak parıltı — dış (hover'da büyüyen) sarmalayıcıda kullanılır */
@keyframes story-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 oklch(58% 0.22 18 / 0.35);
  }
  50% {
    box-shadow: 0 0 0 7px oklch(58% 0.22 18 / 0);
  }
}

.story-glow {
  animation: story-glow-pulse 2.6s ease-out infinite;
}

.font-serif-quote {
  font-family: Georgia, "Times New Roman", serif;
}

/* Hero'daki dekoratif öğeler için organik, sürekli yüzen hareket */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(1.5deg);
  }
}

.float-anim {
  animation: float-y 5s ease-in-out infinite;
}

@keyframes blob-pulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.14;
  }
  50% {
    transform: scale(1.08) rotate(4deg);
    opacity: 0.22;
  }
}

.blob-pulse {
  animation: blob-pulse 7s ease-in-out infinite;
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin-slow {
  animation: spin-slow 14s linear infinite;
}

@keyframes ping-soft {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  70%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.ping-soft {
  animation: ping-soft 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}