/* Scroll Container: Animasyonun ne kadar süreceğini belirleyen alan */
.scroll-container {
  min-height: 100vh; /* Artık 500vh yapmana gerek yok, GSAP 'end' değeri kadar yolu kendi açacak */
  position: relative;
  background: #05050500;
}

/* Scene: Artık position: fixed değil! GSAP bunu sabitleyecek. */
.scene {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative; /* Fixed'i sildik */
}

      /* Background Grid */
      .bg-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
        background-size: 50px 50px;
        pointer-events: none;
      }

      /* Floating Particles */
      .particles {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(59, 130, 246, 0.5);
        border-radius: 50%;
        animation: float 8s infinite ease-in-out;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.5;
        }
        50% {
          transform: translateY(-100px) scale(1.5);
          opacity: 1;
        }
      }

      /* heroo Section */
      .heroo {
        position: absolute;
        text-align: center;
        transition: all 0.5s ease-out;
      }

      .heroo h1 {
        font-size: clamp(2rem, 8vw, 5rem);
        font-weight: 800;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        letter-spacing: -0.02em;
      }

      .heroo p {
        font-size: 1.25rem;
        color: #94a3b8;
        max-width: 600px;
        margin: 0 auto;
      }

      .heroo .badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 9999px;
        font-size: 0.875rem;
        color: #3b82f6;
        margin-bottom: 1.5rem;
      }

      /* Editor Container */
      .editor-container {
        position: absolute;
        width: 90%;
        max-width: 1200px;
        height: 70vh;
        background: #1e293b;
        border-radius: 16px;
        border: 1px solid rgba(59, 130, 246, 0.2);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        opacity: 0;
        transform: scale(0.9) translateY(50px);
        transition: all 0.5s ease-out;
      }

      /* Editor Header */
      .editor-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: #0f172a;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      }

      .window-controls {
        display: flex;
        gap: 8px;
      }

      .window-btn {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      .window-btn.red {
        background: #ef4444;
      }
      .window-btn.yellow {
        background: #eab308;
      }
      .window-btn.green {
        background: #22c55e;
      }

      .editor-title {
        font-size: 0.875rem;
        color: #64748b;
      }

      .editor-actions {
        display: flex;
        gap: 8px;
      }

      .action-btn {
        padding: 0.375rem 0.75rem;
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 6px;
        color: #3b82f6;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
      }

      .action-btn:hover {
        background: rgba(59, 130, 246, 0.2);
      }

      /* Editor Body */
      .editor-body {
        display: flex;
        height: calc(100% - 45px);
      }

      /* Sidebar */
      .sidebar {
        width: 60px;
        background: #0f172a;
        border-right: 1px solid rgba(59, 130, 246, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
        gap: 1rem;
      }

      .sidebar-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s;
      }

      .sidebar-icon:hover,
      .sidebar-icon.active {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      /* Main Editor */
      .main-editor {
        flex: 1;
        display: flex;
      }

      /* Preview Panel */
      .preview-panel {
        flex: 1;
        background: #f8fafc;
        position: relative;
        overflow: hidden;
      }

      .preview-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .preview-placeholder {
        text-align: center;
        color: #64748b;
      }

      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* Code Panel */
      .code-panel {
        width: 350px;
        background: #0f172a;
        border-left: 1px solid rgba(59, 130, 246, 0.1);
        padding: 1rem;
        overflow: hidden;
      }

      .code-header {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
      }

      .code-tab {
        padding: 0.375rem 0.75rem;
        background: rgba(59, 130, 246, 0.1);
        border-radius: 6px;
        font-size: 0.75rem;
        color: #64748b;
        cursor: pointer;
      }

      .code-tab.active {
        background: #3b82f6;
        color: white;
      }

      .code-content {
        font-family: "Fira Code", "Monaco", monospace;
        font-size: 0.75rem;
        line-height: 1.6;
        color: #94a3b8;
      }

      .code-line {
        display: flex;
        gap: 1rem;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.3s ease-out;
      }

      .code-line.visible {
        opacity: 1;
        transform: translateX(0);
      }

      .line-number {
        color: #475569;
        user-select: none;
        width: 20px;
        text-align: right;
      }

      .code-text .tag {
        color: #f472b6;
      }
      .code-text .attr {
        color: #a78bfa;
      }
      .code-text .string {
        color: #34d399;
      }
      .code-text .keyword {
        color: #60a5fa;
      }

      /* Cursor */
      .cursor {
        position: absolute;
        width: 24px;
        height: 24px;
        pointer-events: none;
        z-index: 100;
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .cursor svg {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      }

      /* Click Effect */
      .click-effect {
        position: absolute;
        width: 40px;
        height: 40px;
        border: 2px solid #3b82f6;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transform: scale(0);
        z-index: 99;
      }

      .click-effect.animate {
        animation: clickPulse 0.6s ease-out forwards;
      }

      @keyframes clickPulse {
        0% {
          transform: scale(0);
          opacity: 1;
        }
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }

      /* Generate Button */
      .generate-btn {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 1rem 2rem;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border: none;
        border-radius: 12px;
        color: white;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        opacity: 0;
        transition: all 0.3s;
        box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
      }

      .generate-btn.visible {
        opacity: 1;
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0%,
        100% {
          box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
        }
        50% {
          box-shadow: 0 10px 60px rgba(59, 130, 246, 0.6);
        }
      }

      /* Dashboard */
      .dashboard {
        position: absolute;
        width: 80%;
        max-width: 1400px;
        height: 75vh;
        background: #1e293b;
        border-radius: 16px;
        border: 1px solid rgba(59, 130, 246, 0.2);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.5s ease-out;
         margin-top: 50px;
      }

      .dashboard-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        background: #0f172a;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
      }

      .dashboard-logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .dashboard-logo-icon {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dashboard-nav {
        display: flex;
        gap: 1.5rem;
      }

      .dashboard-nav a {
        color: #64748b;
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.2s;
      }

      .dashboard-nav a:hover,
      .dashboard-nav a.active {
        color: #f8fafc;
      }

      .dashboard-body {
        display: flex;
        height: calc(100% - 65px);
      }

      .dashboard-sidebar {
        width: 62px;
        background: #0f172a;
        border-right: 1px solid rgba(59, 130, 246, 0.1);
        padding: 1.5rem 1rem;
      }

      .sidebar-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 0.25rem;
      }

      .sidebar-menu-item:hover,
      .sidebar-menu-item.active {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      .dashboard-content {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .stat-card {
        background: #0f172a;
        border-radius: 12px;
        padding: 1.25rem;
        border: 1px solid rgba(59, 130, 246, 0.1);
      }

      .stat-label {
        font-size: 0.75rem;
        color: #64748b;
        margin-bottom: 0.5rem;
      }

      .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #f8fafc;
      }

      .stat-change {
        font-size: 0.75rem;
        color: #22c55e;
        margin-top: 0.25rem;
      }

      .stat-change.negative {
        color: #ef4444;
      }

      .charts-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .chart-card {
        background: #0f172a;
        border-radius: 12px;
        padding: 1.25rem;
        border: 1px solid rgba(59, 130, 246, 0.1);
      }

      .chart-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: white;
      }

      .chart-placeholder {
        height: 200px;
        background: linear-gradient(
          180deg,
          rgba(59, 130, 246, 0.1) 0%,
          transparent 100%
        );
        border-radius: 8px;
        position: relative;
        overflow: hidden;
      }

      .chart-bars {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        padding: 0 1rem;
        height: 100%;
      }

      .chart-bar {
        width: 30px;
        background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
        border-radius: 4px 4px 0 0;
        transition: height 0.5s ease-out;
      }

      .donut-chart {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        background: conic-gradient(
          #3b82f6 0% 35%,
          #8b5cf6 35% 60%,
          #06b6d4 60% 80%,
          #22c55e 80% 100%
        );
        position: relative;
      }

      .donut-chart::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: #0f172a;
        border-radius: 50%;
      }

      .table-card {
        background: #0f172a;
        border-radius: 12px;
        padding: 1.25rem;
        border: 1px solid rgba(59, 130, 246, 0.1);
      }

      .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }

      .data-table {
        width: 100%;
        border-collapse: collapse;
      }

      .data-table th,
      .data-table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
        color: white;
      }

      .data-table th {
        font-size: 0.75rem;
        color: #64748b;
        font-weight: 500;
      }

      .data-table td {
        font-size: 0.875rem;
        color: white;
      }

      .status-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.75rem;
      }

      .status-badge.success {
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
      }

      .status-badge.pending {
        background: rgba(234, 179, 8, 0.1);
        color: #eab308;
      }

      /* Progress Bar */
      .progress-container {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        z-index: 200;
      }

      .progress-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.3);
        transition: all 0.3s;
      }

      .progress-dot.active {
         background: #3b82f600;
        transform: scale(1.2);
      }

      /* Floating Labels */
      .floating-label {
        position: absolute;
        padding: 0.75rem 1rem;
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 8px;
        font-size: 0.875rem;
        color: #f8fafc;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease-out;
        backdrop-filter: blur(10px);
      }

      .floating-label.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .floating-label.left {
        left: 2rem;
        top: 50%;
      }

      .floating-label.right {
        right: 2rem;
        top: 50%;
      }

/* ============================================================
   NEXUSCORE SCALE-LOCK ENGINE - USTA SHIFU EXCLUSIVE
   ============================================================ */
/* 2. ADAPTIVE SCALING SYSTEM (Max 1100px) */
@media (max-width: 1100px) {
  
  /* Main Panels Scaling */
  .editor-container, .dashboard {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
    min-width: 1100px !important; /* Masaüstü hiyerarşisini dondurur */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    height: 700px;
  }

  /* TABLET MODE (769px - 1100px) */
  @media (min-width: 769px) {
    .editor-container, .dashboard {
      transform: translate(-50%, -50%) scale(0.75) !important;
    }
    
    .floating-label {
      transform: scale(0.85) !important;
      opacity: 1 !important;
      z-index: 50;
    }
    
    .floating-label.left { left: 2rem !important; top: 20% !important; }
    .floating-label.right { right: 2rem !important; top: 80% !important; }
  }

  /* MOBILE MODE (768px and Below) */
  @media (max-width: 768px) {
    .heroo h1 {
      font-size: 2.8rem !important;
      white-space: nowrap;
    }
    
    .heroo p {
      font-size: 1rem !important;
      width: 90%;
      margin: 0 auto;
    }

    /* Ana Yapı Ölçekleme */
    .editor-container, .dashboard {
      transform: translate(-50%, -50%) scale(0.38) !important; 
    }

    /* Masaüstü Bileşenlerini Koru */
    .code-panel { display: block !important; width: 300px !important; }
    .sidebar, .dashboard-sidebar { display: flex !important; width: 62px !important; }

    /* Floating Labels: Köşelere Çivileme (Fixed) */
    .floating-label {
      position: fixed !important;
      width: auto;
      min-width: 140px;
      padding: 0.5rem 0.8rem !important;
      backdrop-filter: blur(15px) !important;
      background: rgba(15, 23, 42, 0.8) !important;
      border: 1px solid rgba(59, 130, 246, 0.4) !important;
      z-index: 100 !important;
      opacity: 1 !important;
      transform: none !important; /* Ölçekleme çakışmasını temizler */
    }

    .floating-label strong { font-size: 0.75rem !important; display: block; }
    .floating-label span { font-size: 0.65rem !important; white-space: nowrap; }

    .floating-label.left { 
      left: 10px !important; 
      top: 15% !important; 
    }
    .floating-label.right { 
      right: 10px !important; 
      bottom: 20% !important; 
      top: auto !important; 
    }

    /* Mobile Interaction Button */
    .generate-btn {
      transform: translateX(-50%) scale(1.8) !important;
      bottom: 5% !important;
      z-index: 110 !important;
    }
  }

  /* ULTRA-NARROW DEVICES (Under 400px) */
  @media (max-width: 400px) {
    .editor-container, .dashboard {
      transform: translate(-50%, -50%) scale(0.32) !important;
    }

    .heroo h1 { font-size: 2.2rem !important; }

    .floating-label.left { top: 20% !important; }
    .floating-label.right { bottom: 20% !important; }
    
    .floating-label { min-width: 120px; }
  }
}