/* Marka yazı tipi: Neue Haas Grotesk Display (Adobe Fonts kit qqj8ayc).
   Kit, includes/header.php içinde <link> ile yüklenir (Adobe embed yöntemi).
   Yüklenemezse yedek: system-ui. */

:root {
  --bg-ink-900: #0A0A0A;
  --bg-ink-800: #131313;
  --bg-ink-700: #1a1709;
  --bg-ink-600: #241f0d;
  --accent: #FDEA9C;
  --accent-neon: #FEF3C7;
  --accent-glow: rgba(253, 234, 156, 0.35);
  --foreground: #ededed;
  --muted: #9CA3AF;
  --border-glass: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-ink-900);
  color: var(--foreground);
  font-family: 'neue-haas-grotesk-display', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-ink-900);
}

.font-display {
  font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-synthesis: none;
}

h1.font-display,
h2.font-display {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

h3.font-display {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.font-body {
  font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
}

/* Layout Utilities */
.container-x {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-x {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-x {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.section-y {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .section-y {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

.bg-section-gradient {
  background: radial-gradient(ellipse 50% 60% at 15% 30%, rgba(253, 234, 156, 0.04), transparent 70%),
              linear-gradient(180deg, #0A0A0A 0%, #111111 50%, #0A0A0A 100%);
}

/* Glass & Card Systems */
.glass-pill {
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-elevated {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 40px -20px rgba(0, 0, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-elevated:hover {
  border-color: rgba(253, 234, 156, 0.25);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -20px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(253, 234, 156, 0.08);
  transform: translateY(-2px);
}

/* Grid Noise & Gradients */
.grid-noise {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(253, 234, 156, 0.12) 0%, rgba(253, 234, 156, 0.02) 45%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
}

.shadow-glow {
  box-shadow: 0 0 35px rgba(253, 234, 156, 0.35);
}

.shadow-glow-sm {
  box-shadow: 0 0 20px rgba(253, 234, 156, 0.25);
}

.shadow-glow:hover {
  box-shadow: 0 0 55px rgba(254, 243, 199, 0.5);
}

.text-gradient {
  background: linear-gradient(180deg, #FFFFFF 40%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-accent-gradient {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDEA9C 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
  background: #241f0d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FDEA9C;
}

/* Video Player Scrubber Animation */
@keyframes scrubber-scan {
  0% {
    left: 6%;
    width: 22%;
  }
  50% {
    left: 66%;
    width: 28%;
  }
  100% {
    left: 6%;
    width: 22%;
  }
}

.animate-scrubber {
  animation: scrubber-scan 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Scroll reveal — replash.info'daki Framer Motion "whileInView" karşılığı.
   Hareket azaltma tercihi açıkken animasyon uygulanmaz. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-ready [data-reveal="up"]    { transform: translateY(24px); }
.reveal-ready [data-reveal="left"]  { transform: translateX(-20px); }
.reveal-ready [data-reveal="right"] { transform: translateX(20px); }

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Masa başı (panel/yönetim) teması — site tasarımından bağımsız, renksiz =====
   header.php, iç araç sayfalarında <body class="theme-desk"> ekler. */
body.theme-desk { background:#f5f6f8 !important; color:#111827; }
.theme-desk, .theme-desk *, .theme-desk .font-display, .theme-desk .font-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal;
}
.theme-desk .font-display { font-weight: 600; }
.theme-desk .font-mono, .theme-desk code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.theme-desk [class*="shadow-glow"], .theme-desk .shadow-2xl, .theme-desk .shadow-lg, .theme-desk .shadow-xl { box-shadow: 0 1px 2px rgba(16,24,40,.06) !important; }
.theme-desk .backdrop-blur, .theme-desk .backdrop-blur-xl, .theme-desk .backdrop-blur-2xl, .theme-desk .backdrop-blur-md { backdrop-filter:none !important; }
.theme-desk [style*="background-clip:text"], .theme-desk [style*="background-clip: text"] { -webkit-text-fill-color: currentColor !important; background: none !important; }
.theme-desk .rounded-3xl { border-radius: 12px !important; }
.theme-desk .rounded-2xl { border-radius: 10px !important; }
.theme-desk input, .theme-desk select, .theme-desk textarea { background:#ffffff !important; color:#111827 !important; border-color:#d1d5db !important; }
.theme-desk input::placeholder, .theme-desk textarea::placeholder { color:#9ca3af !important; }
.theme-desk select option { background:#ffffff !important; color:#111827 !important; }
.theme-desk .animate-pulse, .theme-desk .animate-ping { animation:none !important; }
.theme-desk table thead { background:#f9fafb; }
.theme-desk ::selection { background:#e5e7eb; color:#111827; }
.theme-desk .bg-ink-900, .theme-desk .bg-ink-800, .theme-desk .bg-ink-950, .theme-desk .bg-ink-700, .theme-desk .bg-black, .theme-desk .bg-ink-900\/95, .theme-desk .bg-ink-900\/90, .theme-desk .bg-ink-900\/80, .theme-desk .bg-ink-900\/70, .theme-desk .bg-ink-900\/60, .theme-desk .bg-ink-950\/95, .theme-desk .bg-ink-950\/90, .theme-desk .bg-ink-800\/90, .theme-desk .bg-black\/40, .theme-desk .bg-black\/50, .theme-desk .bg-black\/60 { background-color:#ffffff !important; }
.theme-desk .bg-white\/\[0\.02\], .theme-desk .bg-white\/\[0\.025\], .theme-desk .bg-white\/\[0\.03\], .theme-desk .bg-white\/\[0\.04\], .theme-desk .bg-white\/5, .theme-desk .bg-white\/\[0\.06\] { background-color:#ffffff !important; }
.theme-desk .bg-white\/10, .theme-desk .bg-white\/8, .theme-desk .bg-white\/15 { background-color:#f3f4f6 !important; }
.theme-desk .hover\:bg-white\/5:hover, .theme-desk .hover\:bg-white\/10:hover, .theme-desk .hover\:bg-white\/\[0\.02\]:hover, .theme-desk .hover\:bg-white\/\[0\.04\]:hover, .theme-desk .hover\:bg-ink-800:hover, .theme-desk .hover\:bg-accent\/10:hover, .theme-desk .hover\:bg-accent\/20:hover { background-color:#f3f4f6 !important; }
.theme-desk .text-white { color:#111827 !important; }
.theme-desk .text-white\/5 { color:#9ca3af !important; }
.theme-desk .text-white\/8 { color:#9ca3af !important; }
.theme-desk .text-white\/10 { color:#9ca3af !important; }
.theme-desk .text-white\/15 { color:#9ca3af !important; }
.theme-desk .text-white\/20 { color:#5b6472 !important; }
.theme-desk .text-white\/25 { color:#5b6472 !important; }
.theme-desk .text-white\/30 { color:#5b6472 !important; }
.theme-desk .text-white\/35 { color:#5b6472 !important; }
.theme-desk .text-white\/40 { color:#5b6472 !important; }
.theme-desk .text-white\/45 { color:#5b6472 !important; }
.theme-desk .text-white\/50 { color:#4b5563 !important; }
.theme-desk .text-white\/55 { color:#4b5563 !important; }
.theme-desk .text-white\/60 { color:#4b5563 !important; }
.theme-desk .text-white\/65 { color:#4b5563 !important; }
.theme-desk .text-white\/70 { color:#374151 !important; }
.theme-desk .text-white\/75 { color:#374151 !important; }
.theme-desk .text-white\/80 { color:#374151 !important; }
.theme-desk .text-white\/85 { color:#374151 !important; }
.theme-desk .text-white\/90 { color:#374151 !important; }
.theme-desk .text-white\/95 { color:#374151 !important; }
.theme-desk .text-neutral-200, .theme-desk .text-neutral-300 { color:#374151 !important; }
.theme-desk .text-neutral-400 { color:#4b5563 !important; }
.theme-desk .text-neutral-500, .theme-desk .text-neutral-600 { color:#4b5563 !important; }
.theme-desk .hover\:text-white:hover, .theme-desk .hover\:text-accent:hover { color:#111827 !important; }
.theme-desk .border-white\/5, .theme-desk .border-white\/8, .theme-desk .border-white\/10, .theme-desk .border-white\/15, .theme-desk .border-white\/20, .theme-desk .border-white\/\[0\.06\], .theme-desk .border-white\/\[0\.08\], .theme-desk .border-accent\/20, .theme-desk .border-accent\/25, .theme-desk .border-accent\/30, .theme-desk .border-accent\/40, .theme-desk .border-accent\/50, .theme-desk .divide-white\/5, .theme-desk .divide-white\/\[0\.06\] { border-color:#e5e7eb !important; }
.theme-desk .hover\:border-accent:hover, .theme-desk .hover\:border-white\/20:hover, .theme-desk .hover\:border-white\/30:hover { border-color:#9ca3af !important; }
.theme-desk .focus\:border-accent:focus { border-color:#111827 !important; outline:none; }
.theme-desk .bg-accent { background-color:#111827 !important; color:#ffffff !important; }
.theme-desk .hover\:bg-accent:hover, .theme-desk .hover\:bg-accent-neon:hover { background-color:#1f2937 !important; }
.theme-desk .text-accent, .theme-desk .text-accent\/60, .theme-desk .text-accent\/70, .theme-desk .text-accent\/80, .theme-desk .text-accent\/90 { color:#111827 !important; }
.theme-desk .bg-accent\/5, .theme-desk .bg-accent\/10, .theme-desk .bg-accent\/15, .theme-desk .bg-accent\/\[0\.04\], .theme-desk .bg-accent\/\[0\.05\], .theme-desk .bg-accent\/\[0\.06\], .theme-desk .bg-accent\/\[0\.07\], .theme-desk .bg-accent\/\[0\.08\] { background-color:#f3f4f6 !important; }
.theme-desk .text-ink-900 { color:#ffffff !important; }
.theme-desk .text-emerald-200, .theme-desk .text-emerald-300, .theme-desk .text-emerald-400 { color:#047857 !important; }
.theme-desk .bg-emerald-400\/10, .theme-desk .bg-emerald-400\/15, .theme-desk .bg-emerald-500\/10, .theme-desk .bg-emerald-500\/20, .theme-desk .bg-emerald-400\/\[0\.04\] { background-color:#f0fdf4 !important; }
.theme-desk .border-emerald-400\/20, .theme-desk .border-emerald-400\/25, .theme-desk .border-emerald-400\/30, .theme-desk .border-emerald-500\/20, .theme-desk .border-emerald-500\/30 { border-color:#bbf7d0 !important; }
.theme-desk .text-red-200, .theme-desk .text-red-300, .theme-desk .text-rose-200, .theme-desk .text-rose-300 { color:#b91c1c !important; }
.theme-desk .bg-red-400\/10, .theme-desk .bg-red-400\/15, .theme-desk .bg-rose-500\/10, .theme-desk .bg-rose-500\/15 { background-color:#fef2f2 !important; }
.theme-desk .border-red-400\/30, .theme-desk .border-red-400\/40, .theme-desk .border-rose-500\/20, .theme-desk .border-rose-500\/30 { border-color:#fecaca !important; }
.theme-desk .text-amber-300, .theme-desk .text-amber-400, .theme-desk .text-sky-400 { color:#374151 !important; }
.theme-desk .bg-amber-500\/10, .theme-desk .bg-sky-500\/10 { background-color:#f3f4f6 !important; }
/* Masa başı teması: koyu zeminli öğelerde beyaz yazı korunur; seçili dil koyu */
.theme-desk .bg-gray-900, .theme-desk .bg-gray-900 * , .theme-desk .bg-gray-800 { color:#ffffff !important; }
.theme-desk .bg-gray-900 .text-gray-300 { color:#d1d5db !important; }
.theme-desk [aria-pressed="true"] { background:#111827 !important; color:#ffffff !important; }
.theme-desk [role="group"][aria-label="Language"] { background:#ffffff !important; border-color:#e5e7eb !important; }
.theme-desk [role="group"][aria-label="Language"] a:not([aria-pressed="true"]) { color:#6b7280 !important; }
.theme-desk dialog { color:#111827; }
/* Masa başı teması: eski işaretlemedeki renkli rakam/rozetler nötr */
.theme-desk .text-emerald-200, .theme-desk .text-emerald-300, .theme-desk .text-emerald-400,
.theme-desk .text-sky-400, .theme-desk .text-amber-300, .theme-desk .text-amber-400 { color:#111827 !important; }
.theme-desk .bg-emerald-400\/10, .theme-desk .bg-emerald-400\/15, .theme-desk .bg-emerald-500\/10, .theme-desk .bg-emerald-500\/20 { background-color:#f3f4f6 !important; }
.theme-desk .border-emerald-400\/20, .theme-desk .border-emerald-400\/25, .theme-desk .border-emerald-400\/30, .theme-desk .border-emerald-500\/20, .theme-desk .border-emerald-500\/30 { border-color:#e5e7eb !important; }
.theme-desk .bg-emerald-400, .theme-desk .bg-red-400, .theme-desk .bg-rose-500, .theme-desk .bg-amber-400 { background-color:#9ca3af !important; }

/* Oynatıcı tam ekranda: video ve klip düğmeleri birlikte görünür (telefonda da) */
html.rp-fs-lock, html.rp-fs-lock body { overflow: hidden; }
html.rp-fs-lock header, html.rp-fs-lock footer, html.rp-fs-lock a[href*="wa.me"] { display: none !important; }
#rp-stage.rp-fs {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding-top: env(safe-area-inset-top);
}
#rp-stage.rp-fs, #rp-stage:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
}
#rp-stage.rp-fs #rp-frame, #rp-stage:fullscreen #rp-frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
#rp-stage.rp-fs #rp-controls, #rp-stage:fullscreen #rp-controls {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: rgba(10, 10, 10, 0.92);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
#rp-stage.rp-fs details, #rp-stage:fullscreen details { display: none; }
/* Tam ekranda "Bu anı kes" tam genişlik, süre düğmeleri altında */
#rp-stage.rp-fs #rp-quick-cut, #rp-stage:fullscreen #rp-quick-cut { flex: 1 0 100%; }
#rp-stage.rp-fs #rp-clip-info, #rp-stage:fullscreen #rp-clip-info { margin-left: 0; }

/* Tam ekran: video ekranı doldurur, kontroller videonun ÜSTÜNDE alt köşelerde durur.
   Oyuncu izlemeye devam ederken kesebilsin diye kontroller videoyu kısaltmaz. */
#rp-stage.rp-fs, #rp-stage:fullscreen { position: fixed; justify-content: flex-start; }
#rp-stage.rp-fs #rp-frame, #rp-stage:fullscreen #rp-frame {
  position: absolute;
  inset: 0;
  flex: none;
  height: 100%;
  width: 100%;
}
#rp-stage.rp-fs #rp-controls, #rp-stage:fullscreen #rp-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: linear-gradient(to top, rgba(6,6,6,0.92) 45%, rgba(6,6,6,0.55) 75%, transparent);
  padding: 2.5rem 1rem max(0.75rem, env(safe-area-inset-bottom));
}
/* Kesme düğmesi ve süreler sol altta kalsın, aralık bilgisi sağa yaslansın */
#rp-stage.rp-fs #rp-clip-info, #rp-stage:fullscreen #rp-clip-info { margin-left: auto; }
/* Hazırlanma rozeti: sağ altta, kontrol şeridinin hemen üstünde */
#rp-stage.rp-fs #rp-fs-status, #rp-stage:fullscreen #rp-fs-status { bottom: 8.5rem; }

/* Telefon yatay tutulduğunda: ekran alçak, kontroller videoyu yiyordu.
   Tek satıra sıkıştırılır, ipucu gizlenir; video ekranın çoğunu alır. */
@media (max-height: 520px) and (orientation: landscape) {
  #rp-stage.rp-fs #rp-controls, #rp-stage:fullscreen #rp-controls {
    padding-top: 2rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
  }
  #rp-stage.rp-fs #rp-fs-status, #rp-stage:fullscreen #rp-fs-status { bottom: 6.5rem; }
  /* Yatay tam ekran: büyük "Bu anı kes" yerine oynat düğmesinin yanında makas */
  #rp-stage.rp-fs #rp-quick-cut, #rp-stage:fullscreen #rp-quick-cut { display: none; }
  #rp-stage.rp-fs #rp-quick-cut-mini, #rp-stage:fullscreen #rp-quick-cut-mini {
    display: grid;
    width: 52px;          /* süre düğmeleriyle aynı ölçü */
    height: 2.5rem;
  }
  /* "Bu anı kes" artık tam satır kaplamasın, süre düğmeleriyle yan yana dursun */
  #rp-stage.rp-fs #rp-quick-cut, #rp-stage:fullscreen #rp-quick-cut {
    flex: 1 1 auto;
    min-width: 12rem;
    height: 2.5rem;
  }
  #rp-stage.rp-fs .rp-len, #rp-stage:fullscreen .rp-len,
  #rp-stage.rp-fs .rp-len-custom, #rp-stage:fullscreen .rp-len-custom,
  #rp-stage.rp-fs #rp-len-custom-wrap, #rp-stage:fullscreen #rp-len-custom-wrap {
    height: 2.5rem;
  }
  #rp-stage.rp-fs .rp-len-custom, #rp-stage:fullscreen .rp-len-custom { width: 2.5rem; }
  /* ipucu ve boşluklar yatayda gereksiz yer kaplıyor */
  #rp-stage.rp-fs #rp-quick-hint, #rp-stage:fullscreen #rp-quick-hint { display: none; }
  #rp-stage.rp-fs #rp-controls > div, #rp-stage:fullscreen #rp-controls > div { gap: 0.4rem; }
}

/* Animasyon güvencesi (main.js): 2,5 sn sonra gizli kalan her şey görünür olur */
.reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }


/* Panel / yönetim: gri metinler açık gri zeminde de okunur (WCAG AA kontrast) */
.theme-desk .text-gray-500 { color: #4b5563; }
.theme-desk .text-gray-400 { color: #5f6b7a; }
.theme-desk .text-gray-300 { color: #7a8494; }