/**
 * RestoAI Dark Luxury — paylaşılan stiller
 * Tailwind CDN + bu dosya = tüm sayfaların görsel temeli.
 */

:root { color-scheme: dark; }
html, body {
  background: #0A0118;
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Display serif (Fraunces) — daha dolgun/belirgin başlık ve logo.
   Eski Instrument Serif tek ağırlık (400) olduğu için çok ince görünüyordu;
   Fraunces değişken ağırlık + optik boyut ile daha güçlü duruyor. */
.font-display {
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* Grain overlay — film noise */
.grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18; mix-blend-mode: overlay;
}

/* Animated mesh gradient */
.mesh { position: fixed; pointer-events: none; filter: blur(100px); z-index: 0; }
.mesh-a { background: radial-gradient(closest-side, #7c3aed 0%, transparent 70%); width: 60vw; height: 60vw; top: -10%; left: -10%; opacity: 0.65; }
.mesh-b { background: radial-gradient(closest-side, #4f46e5 0%, transparent 70%); width: 55vw; height: 55vw; top: 15%; right: -10%; opacity: 0.55; }
.mesh-c { background: radial-gradient(closest-side, #d946ef 0%, transparent 70%); width: 40vw; height: 40vw; bottom: -15%; left: 30%; opacity: 0.35; }

/* Body z-index lift — content above mesh. skip-link ve .fixed işaretli öğeler
   (login/register geri butonu, floating nav header) kendi position + z-index'ini
   korumalı, exclude ediyoruz — aksi halde bu kuralın özgüllüğü (0,2,1) Tailwind
   utility'lerini (0,1,0) ezip fixed öğeleri relative/z-2'ye düşürüyor ve main
   altında kalan yarıları tıklanamaz oluyor. */
body > *:not(.mesh):not(.skip-link):not(.fixed) { position: relative; z-index: 2; }
footer { z-index: 2; }

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* Hairline divider */
.hairline {
  background: linear-gradient(to right, transparent, rgba(167,139,250,0.35) 50%, transparent);
  height: 1px;
}

/* Custom focus ring */
*:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 3px; border-radius: 6px; }

/* Skip-to-content — klavye kullanıcıları için. Focus alınana kadar görsel olarak gizli.
   NOT: Tailwind CDN preflight transform değerini sıfırladığı için !important şart. */
.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 100;
  background: #C4B5FD; color: #0A0118; font-weight: 600;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  text-decoration: none; font-size: 0.875rem;
  transform: translateY(-150%) !important;
  transition: transform .25s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 8px 32px rgba(196,181,253,0.4);
}
.skip-link:focus { transform: translateY(0) !important; outline: 2px solid #fff; outline-offset: 3px; }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: linear-gradient(to right, transparent, #A78BFA, transparent);
  transform: scaleX(0); transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Glassmorphism form input — login/register/contact ortak */
.glass-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #F5F3FF;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.glass-input:hover { border-color: rgba(167,139,250,0.4); }
.glass-input:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(167,139,250,0.7);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.15);
  outline: none;
}
.glass-input::placeholder { color: rgba(245,243,255,0.35); }

/* Label placeholder gibi davranır: boşken input içinde, yazı girilince kaybolur (yukarı uçan çip yok) */
.field-wrap { position: relative; }
.field-wrap label.floating {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: rgba(245,243,255,0.5);
  transition: opacity 0.15s ease;
  font-size: 0.95rem;
}
.field-wrap textarea ~ label.floating { top: 1rem; transform: none; }
.field-wrap input:not(:placeholder-shown) ~ label.floating,
.field-wrap textarea:not(:placeholder-shown) ~ label.floating { opacity: 0; }
/* Odakta da gizle: tarayıcı/şifre yöneticisi ÖNİZLEMESİ metni alanın içine çizer ama değeri
   henüz "commit" etmediği için :placeholder-shown TRUE kalır — etiket önizlenen yazının
   üstüne biner. Odak, önizlemenin göründüğü tek an olduğu için sorunu kökten kapatır. */
.field-wrap input:focus ~ label.floating,
.field-wrap textarea:focus ~ label.floating { opacity: 0; }
/* Autofill seçicileri AYRI kurallarda: birini tanımayan tarayıcı listenin tamamını atardı. */
.field-wrap input:-webkit-autofill ~ label.floating { opacity: 0; }
.field-wrap input:autofill ~ label.floating { opacity: 0; }

/* Otomatik doldurmada Chrome kendi zeminini basar. Opak bir zeminle üzerine yazmak yerine
   sayfaya koyu şema bildiriyoruz (aşağıdaki :root color-scheme) — Chrome o zaman koyu temaya
   uygun, saydamlığı bozmayan kendi stilini kullanır. Burada yalnız TİPOGRAFİYİ sabitliyoruz:
   Chrome otomatik doldurulan alanı kendi UA fontuna düşürüp yazıyı küçültebiliyor. */
.glass-input:-webkit-autofill,
.glass-input:-webkit-autofill:hover,
.glass-input:-webkit-autofill:focus,
.glass-input:autofill {
  -webkit-text-fill-color: #F5F3FF;
  caret-color: #F5F3FF;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: normal;
}
/* Normal durumla otomatik doldurma durumu AYNI boyutta olsun diye ölçü burada da açıkça yazılı
   (tarayıcı varsayılanı ~13.33px; iki durum arasında zıplamayı bu ikili sabitliyor). */
.glass-input { font-size: 1rem; line-height: 1.5; }

/* Dokunmatik cihazlarda küçük pill butonlar (Yenile/Kaldır ~30px) parmakla ıskalanıyor.
   Asgari 44px YALNIZCA coarse pointer'da uygulanır — masaüstündeki yoğun düzen bozulmaz. */
@media (pointer: coarse) {
  button, a.inline-flex { min-height: 44px; }
}
/* Eski floating-label düzeni için verilen asimetrik pt-5/pb-2 padding'i ortala (toplam yükseklik aynı kalır) */
.field-wrap input.glass-input { padding-top: 0.875rem; padding-bottom: 0.875rem; }

/* Pulse ring */
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.animate-pulse-ring { animation: pulse-ring 2.2s cubic-bezier(0,0,0.2,1) infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}