:root {
      --bg:       #0a0a0a;
      --surface:  #111111;
      --pink:     #e8197a;
      --pink-dim: #9b1152;
      --crimson:  #8b0038;
      --white:    #f0f0f0;
      --gray:     #444444;
      --font-display: 'Helvetica Neue', Arial, sans-serif;
      --font-body:    'Helvetica Neue', Arial, sans-serif;
    }

    @font-face {
      font-family: 'DisplayFont';
      src: url('fonts/YourDisplayFont.woff2') format('woff2');
      font-weight: 700;
    }
    @font-face {
      font-family: 'BodyFont';
      src: url('fonts/YourBodyFont.woff2') format('woff2');
      font-weight: 400;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--font-body);
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* Bu sınıfı verdiğin görseller asla yakalanamaz, tıklanamaz */
    .no-touch {
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* Sitedeki tüm img'lere genel bir önlem */
    img {
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
    }

    /* ===== LOADING ===== */
    #loading-screen {
      position: fixed; inset: 0;
      background: var(--bg);
      z-index: 9999;
    }

    #loading-center-bg {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 300px; /* ya da uygun bir ölçü */
      opacity: 0.15;
      pointer-events: none;
      animation: bgPulse 4s ease-in-out infinite;
    }

    @keyframes bgPulse {
      0%, 100% { opacity: 0.1; scale: 0.95; }
      50% { opacity: 0.25; scale: 1.05; }
    }
    #loading-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
    }
    #loading-ui {
      position: absolute;
      bottom: 72px;
      left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    #loading-bar-wrap {
  width: 240px; 
  height: 14px; /* Biraz daha ince XP tarzı */
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2px;
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
}

.xp-seg {
  flex: 1;
  height: 100%;
  background: var(--pink);
  opacity: 0; /* JS ile yönetilecek */
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5); /* İç derinlik */
}

/* Kayan ışığın CSS'i JS'te opacity ile yönetiliyor, burası temel renk */
.xp-seg.on {
  background: var(--pink);
}
    #enter-btn {
      position: absolute;
      bottom: 72px;
      left: 50%; transform: translateX(-50%);
      border: 1px solid var(--pink);
      color: var(--pink); background: transparent;
      font-family: var(--font-display);
      font-size: 13px; letter-spacing: 4px;
      text-transform: uppercase;
      padding: 10px 36px;
      cursor: pointer; display: none; white-space: nowrap;
      transition: background 0.2s, color 0.2s;
    }
    #enter-btn:hover { background: var(--pink); color: var(--bg); }

    /* ===== MAIN ===== */
   

    /* ===== TOP STRIP ===== */
    #top-strip {
      width: 100%; overflow: hidden;
      height: 120px;
    }

    #bot-strip {
	    width: 100%; overflow: hidden;
	    height: 120px;
	}
    .strip-track { display: flex; width: max-content; height: 100%; }
    .strip-track img { height: 120px; width: auto; flex-shrink: 0; }
    
    /* ===== GALLERY ===== */
    #gallery { 
   padding: 0;
   margin: 0;
    background: var(--bg); 
    width: 100%;
    height: 100vh; /* Ekranı tam kaplamalı ki pinning çalışsın */
    overflow: hidden; /* Dikey taşmaları gizle */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Galeriyi dikeyde ortalar */
}
#gallery-viewport { 
    width: 100%; 
    overflow: hidden;
    flex: 1; /* Kalan tüm alanı kapla */
    display: flex;
    align-items: center 
}

#gallery-track {
    display: flex; 
    flex-wrap: nowrap;
    /* Konteynerin içeriğe göre genişlemesini sağlar */
    width: max-content; 
    min-width: 100%;
    align-items: center; /* Görselleri dikeyde ortalar */
    gap: 80px;
    padding: 0 50vw; 
    will-change: transform;
}

.gallery-item { 
    position: relative; 
    /* Büzülmeyi (shrink) ve büyümeyi (grow) tamamen kapatıyoruz */
    flex: 0 0 auto; 
    width: auto;
    height: auto;
    display: block;
}

.gallery-item img {
    /* Yüksekliği sabit tutuyoruz */
    height: 60vh; 
    /* Genişliğin yüksekliğe göre otomatik hesaplanmasını zorunlu kılıyoruz */
    width: auto !important; 
    
    /* Mobildeki o sinir bozucu kısıtlamaları kaldırıyoruz */
    max-width: none !important; 
    max-height: 60vh !important;
    
    /* Görselin oranını korumasını garanti ediyoruz */
    object-fit: contain; 
    flex-shrink: 0;
}

/* Mobil için ekstra güvenlik önlemi */
@media (max-width: 768px) {
    .gallery-item img {
        height: 50vh; /* Mobilde biraz daha az yer kaplasın */
        width: auto !important;
        max-width: none !important;
    }
    #gallery-track {
        gap: 40px; /* Mobilde boşluğu biraz daralt */
    }
}

/* Intro ve Outro Tasarımı */
.gallery-intro {
  flex-shrink: 0;
  width: 40vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 5vw;
}
.gallery-intro h2 { font-size: 5rem; line-height: 0.9; margin: 0; margin-top: 200px; }

/* Mobil Düzeltmeleri */
@media (max-width: 768px) {
  #gallery-track {
    padding: 0 10vw 60px; /* Mobilde kenar boşluğunu azalttık */
    gap: 30px;
  }
  .gallery-item img {
    height: 45vh; /* Mobilde sabit yükseklik vererek geniş görsellerin ezilmesini önlüyoruz */
    width: auto;
    max-width: 85vw;
  }
  .gallery-intro h2 { font-size: 2.5rem; }
}

/* Mobil için özel blur ve genişlik düzeltmesi */
@media (max-width: 768px) {
    .gallery-item img {
        max-height: 50vh;
    }
    #gallery-track {
        gap: 40px;
        padding-left: 20vw; /* Mobilde başlangıç mesafesi */
    }
}
    #gallery-footer { display: flex; justify-content: center; padding: 0 auto;}
    #gallery-footer img{width: 300px; height:auto;}

    /* ===== BADGES ===== */
    #badges {
      position: relative; min-height: 620px;
      overflow: hidden; background: var(--surface);
      border-top: 1px solid var(--gray);
      border-bottom: 1px solid var(--gray);
    }
    #badge-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; opacity: 0.12; pointer-events: none;
    }
    #badge-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: all;
    }
    #badge-top {
      position: relative; z-index: 4;
      text-align: center; padding: 50px 20px 10px;
      pointer-events: none;
    }
    #badge-number-wrap { position: relative; display: inline-block; }
    #badge-number {
      font-family: var(--font-display);
      font-size: clamp(80px, 14vw, 150px);
      font-weight: 900; line-height: 1; color: var(--white);
      cursor: pointer; pointer-events: all; user-select: none;
      display: inline-block;
    }
    #proud-img {
      position: absolute; right: -75px; top: 50%;
      transform: translateY(-50%);
      width: 65px; opacity: 0; transition: opacity 0.5s;
      pointer-events: none;
    }
    #badge-arrows {
      color: var(--pink); font-size: 22px;
      display: flex; justify-content: center; gap: 16px;
      margin-top: 4px; pointer-events: none;
    }
    #badge-label {
      font-size: 12px; letter-spacing: 3px;
      text-transform: uppercase; color: var(--gray); margin-top: 6px;
    }
    #badge-label.revealed { color: var(--pink); }

    #mobile-scroll-helper {
  display: none; /* Desktopta gizli */
}
    @media (max-width: 768px) {
  #mobile-scroll-helper {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px; /* Kullanıcının parmağının rahatça sığacağı alan */
    height: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.03); /* Çok hafif bir belirginlik */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
    justify-content: center;
    pointer-events: all; /* Canvas'ın dokunmatiğini engeller */
    touch-action: pan-y; /* Sadece dikey kaydırmaya izin verir */
  }

  .scroll-bar-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--pink);
    font-size: 10px;
    font-weight: bold;
    gap: 5px;
    opacity: 0.6;
  }

  .arrow-down {
    font-size: 18px;
    animation: bounce 2s infinite;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(10px);}
    60% {transform: translateY(5px);}
  }
}
    
    /* ===== ME ===== */
#me {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #471F37;
}

#me-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Yan yana kalmalarını garanti eder */
  height: 100%;
  width: max-content; /* İçerik kadar genişlemesini sağlar */
  will-change: transform;
}

#me-inner img {
  height: 100vh; /* Ekran boyuna eşitle */
  width: auto;   /* Genişliği oranla */
  flex-shrink: 0; /* Küçülmelerini engelle */
  display: block;
}

@media (max-width: 768px) {
  #me-plans {
    content: url('../assets/plans-mobile.png');}
}

.trail-dot {
  position: fixed;
  top: -500px; /* Ekranın tamamen dışında başlat */
  left: -500px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0; /* Başlangıçta görünmez yap */
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.trail-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

    /* ===== PROJECTS ===== */
    #projects { background: var(--bg); border-top: 1px solid var(--gray); }
    .project-row {
      border-bottom: 1px solid var(--gray);
      position: relative; overflow: hidden;
      cursor: pointer; height: 130px;
    }
    .project-row-inner {
      position: absolute; inset: 0; z-index: 2;
      display: flex; align-items: center; justify-content: center;
    }
    .project-name {
      font-family: var(--font-display);
      font-size: clamp(22px, 3.5vw, 46px);
      font-weight: 300; letter-spacing: 2px; color: var(--white);
      transition: color 0.3s;
    }
    .project-row.hovered .project-name {
    opacity: 0;
    pointer-events: none; /* Tıklamayı engellemek için */
    transition: opacity 0.3s ease; /* Yumuşak geçiş için */
}
.project-row.panel-is-open .project-name {
    display: none; 
    /* Veya yumuşak geçiş istiyorsanız: opacity: 0; visibility: hidden; */
}

    .project-row.hovered .project-name,
    .project-row.mobile-revealed .project-name { color: var(--bg); }
    .project-marquee-overlay {
      position: absolute; inset: 0; z-index: 1; overflow: hidden;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.5s cubic-bezier(0.77,0,0.18,1);
      background: var(--pink);
      display: flex; align-items: center;
    }
    .project-row.hovered .project-marquee-overlay,
    .project-row.mobile-revealed .project-marquee-overlay { clip-path: inset(0 0% 0 0); }
    .pm-track { display: flex; width: max-content; height: 100%; align-items: center; }
    .pm-track img { height: 130px; width: auto; flex-shrink: 0; }

    /* ===== FUN ===== */
    

    /* ===== PROJECTS expanded panel ===== */
    .project-panel {
      height: 0; overflow: hidden;
      background: var(--surface);
      border-bottom: 1px solid var(--gray);
    }
    .project-panel-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; height: 100%;
    }
    .panel-images {
      overflow: hidden; position: relative;
      border-right: 1px solid var(--gray);
      display: flex; align-items: center; justify-content: center;
      background: #0d0d0d;
    }
    /* horizontal strip of project images that auto-scrolls */
    .panel-img-track {
      display: flex; height: 100%; align-items: center;
      gap: 20px; padding: 24px;
      overflow: hidden; width: 100%;
    }
    .panel-img-track img {
      height: calc(100% - 48px); width: auto;
      flex-shrink: 0; object-fit: contain;
    }
    .panel-info {
      padding: 40px 48px;
      display: flex; flex-direction: column;
      justify-content: center; gap: 20px;
      overflow-y: auto;
    }
    .panel-info .panel-num {
      font-size: 11px; letter-spacing: 4px;
      text-transform: uppercase; color: var(--pink);
    }
    .panel-info .panel-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 700; line-height: 1.05;
    }
    .panel-info .panel-desc {
      font-size: 14px; line-height: 1.8;
      color: rgba(240,240,240,0.65);
      max-width: 440px;
    }
    .panel-info .panel-tags {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .panel-tag {
      font-size: 10px; letter-spacing: 2px;
      text-transform: uppercase;
      border: 1px solid var(--gray);
      color: var(--gray); padding: 4px 10px;
    }
    .panel-info .panel-link {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
      color: var(--pink); border-bottom: 1px solid var(--pink);
      padding-bottom: 2px; width: fit-content;
      transition: opacity 0.2s;
    }
    .panel-info:hover .panel-link:hover { opacity: 0.7; }

/* ===== CONTACT ===== */
    #b2b {
      position: relative; overflow: hidden;
      background-color: #5C58C8;
    }

    /* top accent bar */
    #b2b-topbar {
      height: 3px;
      background: linear-gradient(90deg, var(--pink), transparent);
      transform: scaleX(0); transform-origin: left;
    }
    #b2b-tagline {
      padding: 16px;
    }
    #b2b-tagline h2 {
      font-family: var(--font-display);
      font-weight: 900; line-height: 1;
      letter-spacing: -1px;
      color: rgb(68, 16, 29);
      margin-bottom: 35px;
    }
    #b2b-tagline p {
      font-size: 16px; letter-spacing: 2px;
      font-weight: 600;
      text-transform: uppercase;
      color: rgb(68, 16, 29);
      margin-top: 10px;
    }

    /* ===== CONTACT ===== */
    #contact {
      position: relative; overflow: hidden;
      background: var(--crimson);
    }
    #contact-bg-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      opacity: 0; pointer-events: none;
      mix-blend-mode: multiply;
    }

    /* top accent bar */
    #contact-topbar {
      height: 3px;
      background: linear-gradient(90deg, var(--pink), transparent);
      transform: scaleX(0); transform-origin: left;
    }

    /* big avatar strip across top */
    #contact-avatar-wrap {
      position: relative; z-index: 2;
      display: flex; align-items: flex-end;
      padding: 56px 56px 0;
      gap: 40px;
    }
    #contact-avatar {
      width: 160px; height: 200px;
      object-fit: cover; object-position: top;
      flex-shrink: 0;
      opacity: 0; transform: translateY(24px);
      filter: grayscale(20%);
    }
    #contact-tagline {
      padding-bottom: 16px;
      opacity: 0; transform: translateY(16px);
    }
    #contact-tagline h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 5vw, 64px);
      font-weight: 900; line-height: 1;
      letter-spacing: -1px;
    }
    #contact-tagline p {
      font-size: 13px; letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-top: 10px;
    }

    /* grid of links/actions */
    #contact-grid {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1px 1fr 1px 1fr;
      margin: 40px 56px 56px;
      border: 1px solid rgba(255,255,255,0.12);
    }
    .c-divider {
      background: rgba(255,255,255,0.12);
      width: 1px; align-self: stretch;
    }
    .c-cell {
      padding: 36px 32px;
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .c-cell-label {
      font-size: 9px; letter-spacing: 4px;
      text-transform: uppercase; color: rgba(255,255,255,0.35);
      margin-bottom: 4px;
    }

    /* social links */
    .c-cell.socials a {
      font-size: 15px; font-weight: 400;
      letter-spacing: 0.5px;
      opacity: 0; transform: translateX(-10px);
      display: block;
      transition: color 0.2s;
    }
    .c-cell.socials a:hover { color: var(--pink); opacity: 1 !important; }

    /* hire cell */
    .c-cell.hire-cell {
      align-items: flex-start; justify-content: center; gap: 20px;
    }
    .hire-availability {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,0.55);
      opacity: 0;
    }
    .hire-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #4cff91; flex-shrink: 0;
      box-shadow: 0 0 8px #4cff91;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    #hire-btn {
      border: 1px solid rgba(255,255,255,0.5);
      background: transparent; color: var(--white);
      font-family: var(--font-display);
      font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
      padding: 14px 32px; cursor: pointer; opacity: 0;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      align-self: flex-start;
    }
    #hire-btn:hover { background: var(--white); color: var(--crimson); border-color: var(--white); }

    /* downloads cell */
    .c-cell.downloads { gap: 14px; }
    .c-cell.downloads a {
      font-size: 13px; letter-spacing: 0.5px;
      opacity: 0; transform: translateX(10px);
      display: flex; align-items: center; gap: 8px;
      transition: color 0.2s;
    }
    .c-cell.downloads a:hover { color: var(--pink); opacity: 1 !important; }
    .new-badge {
      font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--pink); border: 1px solid var(--pink);
      padding: 2px 5px; border-radius: 2px; flex-shrink: 0;
    }

    /* modal */
    #hire-modal {
      display: none; position: fixed; inset: 0;
      z-index: 9998; background: rgba(0,0,0,0.82);
      align-items: center; justify-content: center;
      backdrop-filter: blur(2px);
    }
    #hire-modal.open { display: flex; }
    #hire-modal-inner {
      background: var(--surface); border: 1px solid #333;
      padding: 40px; width: 90%; max-width: 460px;
      animation: modalIn 0.3s forwards;
    }
    @keyframes modalIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
    #hire-modal h3 { font-size: 18px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 28px; }
    .form-field { margin-bottom: 16px; }
    .form-field label { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
    .form-field input, .form-field textarea {
      width: 100%; background: transparent; border: 1px solid var(--gray);
      color: var(--white); font-family: var(--font-body); font-size: 14px;
      padding: 10px 14px; outline: none; resize: none; transition: border-color 0.2s;
    }
    .form-field input:focus, .form-field textarea:focus { border-color: var(--pink); }
    #modal-submit {
      width: 100%; background: var(--pink); border: none; color: var(--white);
      font-family: var(--font-display); font-size: 12px; letter-spacing: 3px;
      text-transform: uppercase; padding: 14px; cursor: pointer; margin-top: 8px;
      transition: background 0.2s;
    }
    #modal-submit:hover { background: var(--pink-dim); }
    #modal-submit.sent { background: #2d7a4f; }
    #modal-close {
      float: right; background: none; border: none;
      color: var(--gray); font-size: 18px; cursor: pointer; margin-bottom: 8px; line-height: 1;
    }

    @media (max-width: 768px) {
      #contact-avatar-wrap { padding: 36px 24px 0; gap: 20px; }
      #contact-avatar { width: 100px; height: 130px; }
      #contact-grid { grid-template-columns: 1fr; margin: 24px; }
      .c-divider { display: none; }
      .project-panel-inner { grid-template-columns: 1fr; }
      .panel-images { height: 220px; }
    }