/* =====================================================================
   SpyCloud — Tema katmanı
   ---------------------------------------------------------------------
   Sitenin tüm görünümü buradan yönetilir. Orijinal Next.js/Tailwind
   CSS'ine dokunulmaz; bu dosya onun üstüne yüklenir.

   HIZLI DEĞİŞİKLİK İÇİN SADECE "1. AYARLAR" BÖLÜMÜNÜ DÜZENLE.
   ===================================================================== */


/* =====================================================================
   1. AYARLAR  (renk, arka plan, yuvarlaklık, animasyon)
   ===================================================================== */
:root {
  /* --- Marka renkleri (Nodesty stili: siyah-beyaz + indigo vurgu) ----- */
  --brand-1: #ffffff;          /* Ana renk: butonlar (beyaz zemin)       */
  --brand-2: #d4d4d8;          /* Gradyanın diğer ucu                    */
  --brand-3: #a1a3ad;          /* Arka plan ışıkları (gri)               */
  --brand-text: #000000;       /* Açık renkli butonların yazı rengi      */
  --accent-1: #b4b6c0;         /* Vurgu: açık gümüş gri                  */
  --accent-2: #8e909b;         /*        orta gri                        */
  --accent-3: #6b6d77;         /*        koyu gri                        */

  /* --- Durum renkleri (canlı tespit, çevrimiçi noktası) --------------- */
  --ok: #4ade80;               /* Çevrimiçi / onay                       */
  --warn: #fbbf24;             /* Kick                                   */
  --danger: #f87171;           /* Ban / canlı                            */
  --accent: #e4e4e7;           /* Plan çarkındaki nokta ve numara        */

  /* --- Arka plan ve yüzeyler ---------------------------------------- */
  --bg: #0b0b0c;               /* Sayfa arka planı (grimsi siyah)        */
  --surface: rgba(10, 10, 10, .6);    /* Kartlar (yarı saydam cam)      */
  --surface-solid: #121214;    /* Kart içleri, koyu kutular              */
  --surface-2: #1a1a1d;        /* İkincil kutular, rozetler              */
  --line: rgba(255, 255, 255, .06); /* Yumuşak ayırıcı çizgiler     */
  --border: rgba(255, 255, 255, .08); /* Kenarlık                  */
  --border-hover: rgba(255, 255, 255, .16); /* Üzerine gelince     */

  /* --- Yazı renkleri -------------------------------------------------- */
  --text: #f5f5f7;             /* Ana yazı                               */
  --text-muted: #a3a3aa;       /* Açıklama yazıları                      */
  --text-dim: #6e6e76;         /* Soluk yazılar                          */

  /* --- Şekil ---------------------------------------------------------- */
  --radius: 24px;              /* Kart köşe yuvarlaklığı                 */
  --radius-sm: 999px;          /* Buton yuvarlaklığı (kapsül)            */
  --blur: 16px;                /* Cam efekti bulanıklığı                 */

  /* --- Arka plan efektleri (0 = kapalı, 1 = tam) ----------------------- */
  --aurora-opacity: 0;         /* Hareketli renkli ışık bulutları        */
  --grid-opacity: 0;           /* Kareli ızgara deseni (kapalı)          */
  --noise-opacity: .025;       /* Film greni dokusu (çok hafif)          */

  /* --- Animasyon ------------------------------------------------------ */
  --dur-fast: .2s;             /* Hover geçişleri                        */
  --dur: .8s;                  /* Kaydırınca belirme süresi              */
  --dur-aurora: 22s;           /* Arka plan ışıklarının dönme süresi     */
  --dur-float: 6s;             /* Hero kartlarının süzülme süresi        */
  --dur-shimmer: 6s;           /* Başlıktaki parıltının süresi           */
  --reveal-distance: 20px;     /* Belirirken ne kadar aşağıdan gelsin    */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* --- Türetilmiş değerler (genelde dokunmana gerek yok) -------------- */
  --gradient: linear-gradient(120deg, #ffffff, var(--brand-1) 40%, var(--brand-2));
  --accent-gradient: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  --glow: 0 0 0 1px rgba(255, 255, 255, .1),
          0 12px 40px -10px color-mix(in oklab, var(--accent-1) 45%, transparent);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset,
                 0 20px 50px -20px rgba(0, 0, 0, .8);
}


/* =====================================================================
   2. TEMEL
   ===================================================================== */
html.dark { color-scheme: dark; scroll-behavior: smooth; }

html.dark body {
  background: var(--bg) !important;
  color: var(--text) !important;
  position: relative;
}

html.dark ::selection { background: color-mix(in oklab, var(--brand-1) 45%, transparent); color: #fff; }

html.dark ::-webkit-scrollbar { width: 10px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg); }
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand-1), var(--brand-2));
  border-radius: 10px; border: 3px solid var(--bg);
}

/* Tailwind renk değişkenlerini temaya bağla */
html.dark {
  --color-zinc-300: var(--text-muted);
  --color-zinc-400: var(--text-muted);
  --color-zinc-500: var(--text-dim);
  --color-zinc-600: var(--text-dim);
  --color-zinc-700: var(--surface-2);
  --color-zinc-800: var(--border);
  --color-indigo-400: var(--brand-1);
  --color-indigo-600: var(--brand-1);
  --color-indigo-700: var(--brand-1);
}


/* =====================================================================
   3. ARKA PLAN KATMANLARI  (aurora + ızgara + gren)
   ===================================================================== */
.fx-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.fx-bg::before {                       /* aurora */
  content: ""; position: absolute; inset: -30%;
  opacity: var(--aurora-opacity);
  background:
    radial-gradient(40% 35% at 20% 25%, color-mix(in oklab, var(--brand-1) 55%, transparent), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, color-mix(in oklab, var(--brand-3) 45%, transparent), transparent 70%),
    radial-gradient(40% 35% at 65% 80%, color-mix(in oklab, var(--brand-2) 35%, transparent), transparent 70%);
  filter: blur(60px);
  animation: fx-aurora var(--dur-aurora) linear infinite;
}
.fx-bg::after {                        /* ızgara */
  content: ""; position: absolute; inset: 0;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: top center;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 45%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 45%, transparent 95%);
}
.fx-noise {                            /* gren */
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* İçerik arka plan katmanlarının üstünde kalsın */
html.dark body > nav,
html.dark body > main,
html.dark body > footer,
html.dark body > section { position: relative; z-index: 2; }
html.dark body > nav { position: sticky; z-index: 50; }

/* Fare ışığı */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-1) 7%, transparent), transparent 65%);
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
  transition: opacity .4s;
}

/* Sayfa üstü kaydırma çubuğu */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: var(--accent-gradient); transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); pointer-events: none;
  box-shadow: 0 0 12px var(--accent-1);
}


/* =====================================================================
   4. ORİJİNAL RENKLERİ TEMAYA EŞLE
   (Tailwind'in sabit renkli sınıfları → yukarıdaki değişkenler)
   ===================================================================== */

/* Sayfa/bölüm arka planları şeffaf: aurora görünsün */
html.dark .dark\:bg-\[\#09090B\],
html.dark [class*="bg-[#FAFAFA]"]:not([class*="dark:bg-[#FAFAFA]"]) { background-color: transparent !important; }

/* Kartlar */
html.dark .dark\:bg-\[\#18181B\] {
  background-color: var(--surface) !important;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
html.dark .dark\:bg-\[\#121215\] { background-color: var(--surface-solid) !important; }
html.dark .dark\:bg-\[\#141418\],
html.dark .dark\:bg-\[\#1C1C22\],
html.dark .dark\:bg-\[\#1E1E22\],
html.dark .dark\:bg-\[\#27272A\] { background-color: var(--surface-2) !important; }

/* Kenarlıklar */
html.dark .dark\:border-\[\#27272A\],
html.dark .dark\:border-\[\#2E2E34\],
html.dark [class*="dark:border-zinc"] { border-color: var(--border) !important; }

/* Eski "kalın gölge" (brutalist) yerine yumuşak gölge */
html.dark [class*="dark:shadow-[4px"],
html.dark [class*="dark:shadow-[3px"],
html.dark [class*="dark:shadow-[2px"] { box-shadow: var(--card-shadow) !important; }

/* Yazılar */
html.dark .dark\:text-\[\#FAFAFA\] { color: var(--text) !important; }
html.dark .dark\:text-\[\#D4D4D8\],
html.dark [class*="dark:text-zinc-400"],
html.dark [class*="dark:text-zinc-500"] { color: var(--text-muted) !important; }

/* Beyaz butonlar / rozetler → marka gradyanı */
html.dark .dark\:bg-\[\#FAFAFA\] {
  background: var(--gradient) !important;
  background-size: 200% 100% !important;
  color: var(--brand-text) !important;
  box-shadow: var(--glow) !important;
}
html.dark .dark\:bg-\[\#FAFAFA\] * { color: inherit !important; }
html.dark .dark\:text-\[\#09090B\] { color: var(--brand-text) !important; }
html.dark img[src*="spycloud-black.png"] { filter: invert(1); }


/* =====================================================================
   5. BİLEŞENLER
   ===================================================================== */

/* --- Üst menü: kaydırınca cam görünüm ------------------------------- */
html.dark body > nav {
  transition: background-color var(--dur-fast), backdrop-filter var(--dur-fast), border-color var(--dur-fast);
  border-bottom: 1px solid transparent;
}
html.dark body > nav.fx-scrolled {
  background: color-mix(in oklab, var(--bg) 70%, transparent) !important;
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-bottom-color: var(--border);
}
html.dark body > nav a[href] { position: relative; }
html.dark body > nav .hidden a[href]:not([href^="http"])::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px;
  background: var(--gradient); border-radius: 2px;
  transform: scaleX(0); transition: transform var(--dur-fast) var(--ease);
}
html.dark body > nav .hidden a[href]:hover::after { transform: scaleX(1); }
html.dark body > nav .hidden a[href]:hover { opacity: 1 !important; }

/* Sağ üstteki menüler kaldırıldı (tüm sayfalar). Geri açmak için bu kuralı sil. */
html.dark body > nav > div > div:not(:first-child) { display: none !important; }

/* Mobil menü (theme.js ekler; şu an kapalı) */
.fx-menu-btn {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
@media (max-width: 767px) { .fx-menu-btn { display: inline-flex; } }
.fx-menu {
  position: fixed; top: 72px; right: 16px; left: 16px; z-index: 60;
  max-width: 360px; margin-left: auto; padding: 10px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-solid) 92%, transparent);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--card-shadow);
  display: grid; gap: 2px;
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.fx-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.fx-menu a {
  padding: 12px 14px; border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: background var(--dur-fast);
}
.fx-menu a:hover { background: var(--surface-2); }
.fx-menu a.fx-menu-cta { background: var(--gradient); color: var(--brand-text); text-align: center; margin-top: 6px; }

/* --- Butonlar: parlama + ışık süpürmesi ----------------------------- */
html.dark a.dark\:bg-\[\#FAFAFA\] {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), background-position .6s var(--ease) !important;
}
html.dark a.dark\:bg-\[\#FAFAFA\]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
}
html.dark a.dark\:bg-\[\#FAFAFA\]:hover {
  transform: translateY(-2px) !important;
  background-position: 100% 0 !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand-2) 50%, transparent),
              0 18px 50px -10px color-mix(in oklab, var(--brand-1) 75%, transparent) !important;
}
html.dark a.dark\:bg-\[\#FAFAFA\]:hover::before { transform: translateX(120%); transition: transform .8s var(--ease); }
html.dark a.dark\:bg-\[\#FAFAFA\]:active { transform: translateY(0) scale(.98) !important; }

/* --- Kartlar (theme.js .fx-card ekler) ------------------------------ */
.fx-card {
  isolation: isolate;                               /* konum (absolute/relative) orijinalden gelir */
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s !important;
}
.fx-card::after {                                   /* fare takip eden ışık */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in oklab, var(--brand-1) 18%, transparent), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.fx-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover) !important;
  box-shadow: 0 24px 60px -24px color-mix(in oklab, var(--brand-1) 55%, transparent) !important;
}
.fx-card:hover::after { opacity: 1; }

/* --- Hero ----------------------------------------------------------- */
/* Büyük daire → dönen parlak küre */
html.dark section > div[aria-hidden="true"].rounded-full {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--brand-1) 22%, transparent), transparent 60%),
    var(--surface-solid) !important;
  box-shadow: inset 0 0 120px color-mix(in oklab, var(--brand-1) 18%, transparent),
              0 0 120px -20px color-mix(in oklab, var(--brand-1) 30%, transparent);
  border: 1px solid var(--border);
  opacity: .85;
}
html.dark section > div[aria-hidden="true"].rounded-full::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from var(--fx-angle, 0deg), transparent 0 60%, var(--brand-1), var(--brand-2), transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-spin 10s linear infinite;
}

/* Ana başlık: hareketli gradyan yazı */
html.dark h1:not(.hero-title) {
  background: linear-gradient(100deg, var(--text) 20%, var(--brand-1) 40%, var(--brand-2) 50%, var(--text) 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  animation: fx-shimmer var(--dur-shimmer) var(--ease) infinite;
  filter: drop-shadow(0 8px 40px color-mix(in oklab, var(--brand-1) 35%, transparent));
}

/* Hero'daki yüzen kartlar */
.fx-float { animation: fx-float var(--dur-float) ease-in-out infinite; animation-delay: var(--float-delay, 0s); }
.fx-float:hover { animation-play-state: paused; }

/* --- Tablolar (karşılaştırma) --------------------------------------- */
html.dark main table tr { transition: background var(--dur-fast); }
html.dark main table tr:hover { background: color-mix(in oklab, var(--brand-1) 7%, transparent); }

/* --- Footer --------------------------------------------------------- */
html.dark body > footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--brand-1) 6%, transparent)) !important;
}
html.dark body > footer a { transition: color var(--dur-fast), transform var(--dur-fast); }
html.dark body > footer a:hover { color: var(--brand-2) !important; }

/* --- Discord topluluk bölümü --------------------------------------- */
.spicloud-discord {
  margin: clamp(3rem, 8vw, 8rem) auto 0; max-width: 1160px; padding: 0 1.25rem 5rem;
  display: grid; grid-template-columns: 1fr 350px; gap: 3.5rem; align-items: center;
}
.spicloud-discord-copy { padding: 2rem 0; }
.spicloud-discord-copy .eyebrow {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-hover); background: color-mix(in oklab, var(--brand-1) 12%, transparent);
  color: var(--text); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; font-weight: 700;
}
.spicloud-discord-copy h2 {
  font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.05em; max-width: 560px; margin: 1.2rem 0;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spicloud-discord-copy p { max-width: 490px; color: var(--text-muted); line-height: 1.7; }
.spicloud-widget {
  width: 350px; height: 500px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-hover); box-shadow: var(--glow);
  animation: fx-float var(--dur-float) ease-in-out infinite;
}
.spicloud-widget iframe { display: block; width: 100%; height: 100%; background: var(--surface-solid); }
@media (max-width: 760px) {
  .spicloud-discord { grid-template-columns: 1fr; gap: 1rem; }
  .spicloud-widget { width: 100%; max-width: 350px; margin: auto; }
}


/* =====================================================================
   6. KAYDIRINCA BELİRME (theme.js .fx-reveal ekler)
   ===================================================================== */
.fx-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(.985);
  filter: blur(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.fx-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* JavaScript çalışmazsa, Next.js'in gizli bıraktığı öğeler görünsün */
html.dark [style*="opacity:0"] { opacity: 1 !important; transform: none !important; }
html.dark [style*="blur(4px)"] { filter: none !important; }


/* =====================================================================
   7. ANİMASYONLAR
   ===================================================================== */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fx-spin    { to { --fx-angle: 360deg; } }
@keyframes fx-aurora  {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes fx-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
@keyframes fx-float   {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .fx-reveal { opacity: 1; transform: none; filter: none; }
  .fx-cursor { display: none; }
}