/* =========================================================
   emirsahin.net.tr — Global Stylesheet
   Tailwind CSS (CDN) tamamlayıcı özel stiller
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #09090b;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Seçim rengi */
::selection {
  background: rgba(99, 102, 241, 0.35);
  color: #ffffff;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
#site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
#site-header.scrolled {
  background: rgba(9, 9, 11, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(63, 63, 70, 0.6);
}

.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transition: width .3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active {
  color: #fafafa;
}

.lang-option {
  color: #71717a;
  transition: color .2s ease, font-weight .2s ease;
}
.lang-option.active-lang {
  color: #ffffff;
  font-weight: 700;
}

#mobile-menu {
  display: none;
  flex-direction: column;
}
#mobile-menu.open {
  display: flex;
}

/* ---------------------------------------------------------
   Glass / kart efektleri
   --------------------------------------------------------- */
.glass {
  background: rgba(24, 24, 27, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card-hover {
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 24px 48px -24px rgba(99, 102, 241, 0.35);
}

.gradient-text {
  background: linear-gradient(120deg, #818cf8, #6366f1 45%, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------
   Animasyonlar
   --------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
}
.animate-fade-up {
  animation: fadeInUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.animate-float {
  animation: floatY 6s ease-in-out infinite;
}

@keyframes blobPulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.15); opacity: .75; }
}
.animate-blob {
  animation: blobPulse 8s ease-in-out infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* ---------------------------------------------------------
   Yetenek çubukları
   --------------------------------------------------------- */
.skill-bar-track {
  background: #27272a;
  border-radius: 9999px;
  overflow: hidden;
  height: 6px;
  width: 100%;
}
.skill-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */
.form-input {
  background: rgba(24, 24, 27, 0.6);
  border: 1px solid #3f3f46;
  color: #fafafa;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.form-input::placeholder {
  color: #71717a;
}
.form-input:focus {
  outline: none;
  border-color: #6366f1;
  background: rgba(24, 24, 27, 0.9);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* ---------------------------------------------------------
   Badge / rozet
   --------------------------------------------------------- */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  padding: .3rem .7rem;
  border-radius: 9999px;
  background: rgba(39, 39, 42, 0.7);
  border: 1px solid rgba(63, 63, 70, 0.7);
  color: #d4d4d8;
  font-family: 'JetBrains Mono', monospace;
}

/* ---------------------------------------------------------
   Grid dekor deseni
   --------------------------------------------------------- */
.grid-pattern {
  background-image:
    linear-gradient(rgba(250, 250, 250, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 250, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------------------------------------------------------
   3D Hero Canvas (Three.js)
   --------------------------------------------------------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

/* ---------------------------------------------------------
   3D Tilt Kartlar (JS destekli)
   --------------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease-out, border-color .35s ease, box-shadow .35s ease;
}
.tilt-card:hover {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 28px 55px -22px rgba(99, 102, 241, 0.4);
}
.tilt-card-inner {
  transform: translateZ(30px);
}

/* ---------------------------------------------------------
   Saf CSS 3D döner küp (dekoratif)
   --------------------------------------------------------- */
.cube-3d-scene {
  perspective: 800px;
}
.cube-3d {
  width: 56px;
  height: 56px;
  position: relative;
  transform-style: preserve-3d;
  animation: cubeSpin 14s linear infinite;
}
.cube-3d .face {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.06);
}
.cube-3d .face.cyan {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(34, 211, 238, 0.06);
}
.cube-3d .face.front  { transform: translateZ(28px); }
.cube-3d .face.back   { transform: translateZ(-28px) rotateY(180deg); }
.cube-3d .face.right  { transform: rotateY(90deg) translateZ(28px); }
.cube-3d .face.left   { transform: rotateY(-90deg) translateZ(28px); }
.cube-3d .face.top    { transform: rotateX(90deg) translateZ(28px); }
.cube-3d .face.bottom { transform: rotateX(-90deg) translateZ(28px); }

@keyframes cubeSpin {
  from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.cube-3d.small {
  width: 34px;
  height: 34px;
  animation-duration: 10s;
  animation-direction: reverse;
}
.cube-3d.small .face {
  width: 34px;
  height: 34px;
}
.cube-3d.small .face.front  { transform: translateZ(17px); }
.cube-3d.small .face.back   { transform: translateZ(-17px) rotateY(180deg); }
.cube-3d.small .face.right  { transform: rotateY(90deg) translateZ(17px); }
.cube-3d.small .face.left   { transform: rotateY(-90deg) translateZ(17px); }
.cube-3d.small .face.top    { transform: rotateX(90deg) translateZ(17px); }
.cube-3d.small .face.bottom { transform: rotateX(-90deg) translateZ(17px); }

/* ---------------------------------------------------------
   Genişletilmiş reveal varyantları
   --------------------------------------------------------- */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes flipUp {
  from { opacity: 0; transform: perspective(700px) rotateX(35deg) translateY(20px); }
  to { opacity: 1; transform: perspective(700px) rotateX(0deg) translateY(0); }
}
.animate-fade-left { animation: fadeInLeft .8s cubic-bezier(.22,1,.36,1) forwards; }
.animate-fade-right { animation: fadeInRight .8s cubic-bezier(.22,1,.36,1) forwards; }
.animate-zoom-in { animation: zoomIn .7s cubic-bezier(.22,1,.36,1) forwards; }
.animate-flip-up { animation: flipUp .8s cubic-bezier(.22,1,.36,1) forwards; }

/* ---------------------------------------------------------
   İstatistik / sayaç şeritleri
   --------------------------------------------------------- */
.stat-pill {
  transition: transform .3s ease, border-color .3s ease;
}
.stat-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.5);
}

/* ---------------------------------------------------------
   Süreç zaman çizelgesi (timeline)
   --------------------------------------------------------- */
.timeline-line {
  background: linear-gradient(180deg, #6366f1, #22d3ee);
}
.timeline-node {
  transition: transform .3s ease, box-shadow .3s ease;
}
.timeline-node:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .cube-3d, .animate-blob, .animate-float, .animate-spin-slow {
    animation: none !important;
  }
}