:root {
        --code-blue: #4cc9f0;
      }

      /* Lighthouse Kontrast İyileştirmesi */
      .text-white-50, .text-muted {
          color: #b0b3b8 !important; /* Saf gri yerine daha parlak bir gri */
          opacity: 1 !important; /* Şeffaflığı kaldırarak netliği artırır */
      }

      .lead.text-white-50 {
          color: #d1d4d9 !important; /* Hero kısmındaki açıklamayı daha da belirgin yap */
      }
      
      body { background-color: var(--space-dark); }

      /* Tüm sayfaya yayılan teknolojik grid */
      body::before {
        content: "";
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: 
          linear-gradient(rgba(255, 140, 66, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 140, 66, 0.02) 1px, transparent 1px);
        background-size: 50px 50px;
        z-index: -1;
      }

      /* Bölüm Başlıklarını Parlat */
      h2.fw-bold {
        color: white !important;
        text-shadow: 0 0 20px rgba(255, 140, 66, 0.2);
      }

      /* Mevcut Beyaz Sectionları Koyu Yap */
      section.bg-light, section#urunler {
        background: transparent !important;
      }

      /* Hero Section - Mobil Ayarlı */
      .hero-bg {
        background: 
          radial-gradient(
            circle at top right, 
            rgba(255, 140, 66, 0.05), 
            transparent
            ), 
          linear-gradient(
            180deg, 
            #0b0e14 0%, 
            #11141b 100%
            );
        padding: 160px 0;
        position: relative;
        overflow: hidden;
      }

      /* Canvas tam ekran arka plan olacak */
      #hero-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .hero-bg .container {
        position: relative;
        z-index: 2; /* Yazıların önde kalması için */
      }
      
      @media (max-width: 768px) {
        .hero-bg { padding: 60px 0; text-align: center; }
        .display-3 { font-size: 2.5rem; }
      }

      .hero-bg::after {
        content: ""; position: absolute; top: -10%; right: -5%;
        width: 300px; height: 300px;
        background: var(--venus-orange);
        filter: blur(150px); opacity: 0.15;
        z-index: 1;
      }

      /* Bölüm Ayırıcı Çizgi */
      .section-divider {
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, transparent, rgb(255, 255, 255), transparent);
        margin: 0;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
      }

      /* Mühendislik Kartları */
      .card-engineer {
        background: #11141b !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: white !important;
        border-bottom: 4px solid var(--space-dark);
        transition: 0.4s;
        height: 100%; /* Kartları eşitler */
      }

      .card-engineer .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
      }

      .card-engineer:hover {
        border-bottom: 4px solid var(--venus-orange);
        transform: translateY(-10px);
        border-color: var(--venus-orange) !important; /* Kenar çizgisinin turuncuya dönmesi */
        box-shadow: 0 10px 30px rgba(255, 140, 66, 0.25) !important; /* Dışarıya turuncu parlama (glow) efekti */
        background: rgba(255, 140, 66, 0.02) !important; /* Kartın içine çok hafif bir turuncu dokunuş */
      }
      
      .icon-box {
        width: 60px; height: 60px;
        background: var(--venus-orange);
        color: white;
        display: flex; align-items: center; justify-content: center;
        border-radius: 12px; margin-bottom: 20px;
      }
      
      /* Mobilde ikonları ortalamak gerekirse */
      @media (max-width: 768px) {
        .icon-box { margin-left: auto; margin-right: auto; }
      }

      .icon-box-python { background: #4cc9f0; }
      .icon-box-web { background: #7209b7; }
      .soft-transition-bg { transition: all 0.5s; background: transparent; }
      .feedback-box {
        border-left: 5px solid var(--venus-orange);
        font-weight: bold;
      }
      .guess-input {
        letter-spacing: 15px;
        border-radius: 10px;
      }
      .history-box {
        max-height: 120px;
        color: #666;
      }

      .btn-venus {
        background-color: var(--venus-orange);
        color: white; font-weight: 600; border-radius: 5px;
      }
      .btn-venus:hover { 
        background-color: #e67e35; 
        color: white; 
      }

      /* Butonları Görseldeki Gibi Belirginleştir */
      .btn-outline-dark {
        border-color: var(--venus-orange) !important;
        color: var(--venus-orange) !important;
      }

      .btn-outline-dark:hover {
        background-color: var(--venus-orange) !important;
        color: white !important;
      }

      .portfolio-section {
        position: relative;
      }

      .portfolio-section::before {
        content: "";
        position: absolute;
        inset: 8% 10% auto;
        height: 260px;
        background: radial-gradient(circle, rgba(255, 140, 66, 0.18) 0%, rgba(255, 140, 66, 0) 70%);
        pointer-events: none;
        filter: blur(30px);
      }

      .portfolio-intro-card {
        background: linear-gradient(180deg, rgba(17, 20, 27, 0.95) 0%, rgba(11, 14, 20, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 1.5rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
      }

      .portfolio-intro-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.9rem;
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        background: rgba(255, 140, 66, 0.12);
        color: var(--venus-orange);
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .project-card {
        position: relative;
        padding: 1.75rem;
        border-radius: 28px;
        height: 100%;
        background:
          linear-gradient(180deg, rgba(17, 20, 27, 0.96) 0%, rgba(11, 14, 20, 0.98) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
        overflow: hidden;
        transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      }

      .project-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 140, 66, 0.12), transparent 45%);
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
      }

      .project-card:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 140, 66, 0.45);
        box-shadow: 0 24px 55px rgba(255, 140, 66, 0.12);
      }

      .project-card:hover::after {
        opacity: 1;
      }

      .project-card-top,
      .project-actions,
      .project-tags {
        position: relative;
        z-index: 1;
      }

      .project-card-top,
      .project-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .project-card-top {
        margin-bottom: 1.25rem;
      }

      .project-chip,
      .project-year {
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .project-chip {
        display: inline-flex;
        padding: 0.42rem 0.78rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8f9fa;
        font-weight: 600;
      }

      .project-year {
        color: var(--venus-orange);
        font-weight: 700;
      }

      .project-title {
        position: relative;
        z-index: 1;
        margin-bottom: 0.9rem;
        color: white;
      }

      .project-copy {
        position: relative;
        z-index: 1;
        color: #b8bec8;
        margin-bottom: 1.5rem;
        min-height: 96px;
      }

      .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        margin-bottom: 1.75rem;
      }

      .project-tags span {
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        background: rgba(255, 140, 66, 0.08);
        border: 1px solid rgba(255, 140, 66, 0.16);
        color: #ffd6be;
        font-size: 0.88rem;
      }

      .project-link-note {
        color: #a7adb8;
        font-size: 0.9rem;
      }

      @media (max-width: 991.98px) {
        .project-copy {
          min-height: auto;
        }
      }

      @media (max-width: 767.98px) {
        .portfolio-section {
          padding-top: 3.4rem !important;
          padding-bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)) !important;
        }

        .portfolio-section .row.align-items-end {
          margin-bottom: 1.6rem !important;
        }

        .portfolio-intro-card {
          padding: 1.2rem;
          border-radius: 20px;
          background: linear-gradient(180deg, rgba(20, 24, 33, 0.98) 0%, rgba(11, 14, 20, 0.98) 100%);
          border-color: rgba(255, 140, 66, 0.16);
          box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
        }

        .project-card {
          padding: 1.25rem;
          border-radius: 22px;
          background: linear-gradient(180deg, rgba(19, 23, 31, 0.98) 0%, rgba(10, 13, 19, 0.99) 100%);
          border-color: rgba(255, 140, 66, 0.18);
          box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
        }

        .project-card::after {
          opacity: 0.28;
        }

        .project-card-top {
          flex-wrap: wrap;
          gap: 0.55rem;
          margin-bottom: 1rem;
        }

        .project-chip,
        .project-year {
          font-size: 0.76rem;
        }

        .project-title {
          margin-bottom: 0.8rem;
          font-size: 1.55rem;
          line-height: 1.14;
          text-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
          word-break: break-word;
        }

        .project-copy {
          margin-bottom: 1.15rem;
          color: #d2d8e0;
          font-size: 1rem;
          line-height: 1.65;
        }

        .project-tags {
          gap: 0.55rem;
          margin-bottom: 1.15rem;
        }

        .project-tags span {
          font-size: 0.82rem;
          color: #ffe3d1;
        }

        .project-actions {
          flex-direction: column;
          align-items: stretch;
          gap: 0.7rem;
        }

        .project-actions .btn {
          width: 100%;
          padding: 0.95rem 1rem;
          text-align: center;
        }

        .project-link-note {
          color: #d3dae3;
          font-size: 0.92rem;
          line-height: 1.5;
        }
      }

      /* Tech Stack Slider */
      .tech-slider {
        background: transparent !important;
        
        width: 100%;
        height: 100px;
        position: relative;
        display: flex;
        align-items: center;
      }

      .tech-track {
        display: flex;
        width: calc(250px * 14);
        animation: scroll 30s linear infinite;
      }

      .tech-item {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 1.5rem;
        font-weight: 600;
        color: white;
        opacity: 0.8;
      }

      /* Işık Yanıp Sönme Animasyonu */
      @keyframes hackSuccess {
        0% { background-color: #0b0e14; }
        50% { background-color: #ff8c42; }
        100% { background-color: #0b0e14; }
      }

      .hacking-effect {
        animation: hackSuccess 0.15s linear infinite; /* Hızlı yanıp sönme */
      }

      /* Oyun Kartı İçin Özel Font ve Stil */
      .terminal-card {
        background: #0d1117 !important;
        border: 1px solid var(--venus-orange) !important;
        box-shadow: 0 0 30px rgba(255, 140, 66, 0.1) !important;
        font-family: 'Courier New', Courier, monospace;
      }

      #guessInput:focus {
        background-color: #1a1f28 !important;
        border-color: #ff8c42 !important;
        box-shadow: 0 0 15px rgba(255, 140, 66, 0.3);
        color: #ff8c42 !important;
      }

      @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-250px * 7)); }
      }