body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: black;
    font-family: 'Love', sans-serif;
    }

    video {
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 1;
    }


    .darken {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.45);
      z-index: 2;
      pointer-events: none;
    }


    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.05) 0px,
          rgba(0,0,0,0.1) 2px,
          transparent 4px
        );
      animation: flicker 0.15s infinite;
      z-index: 3;
      pointer-events: none;
    }


    @keyframes flicker {
      0% { opacity: 0.1; }
      50% { opacity: 0.4; }
      100% { opacity: 0.1; }
    }


    .noise {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url('retro.gif');
      opacity: 0.07;
      mix-blend-mode: screen;
      z-index: 4;
      pointer-events: none;
    }


@font-face {
  font-family: 'Love'; /* senin vereceğin isim */
  src: url('Love.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.baslangic {
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: center;
    text-shadow: 0 0 30px black;
}

.kalp {
    font-size: 100px;
    line-height: 1.05;
    letter-spacing: .5px;
    background: conic-gradient(from 90deg, #FF9800, #CDDC39, #ffd166, #FF5722);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px rgb(255 105 180 / 0%);
    animation: glow 2.2s ease-in-out infinite alternate;
}

.baslik {
    font-size: 37px;
    color: white;
    text-align: center;
}

.aciklama {
    color: wheat;
    padding-top: 15px;
    font-size: 18px;
}
.aciklama2 {
    color: wheat;
    padding-top: 15px;
    font-size: 18px;
}

.aciklama2 {
    display: none; 
    opacity: 0;
    transition: opacity 1s;
}

.baslik, .kalp, .aciklama {
    opacity: 1;
    transition: opacity 1s;
}

.zamanlayici {
    text-align: center;
    position: absolute;
    z-index: 9;
    bottom: 0;
    font-size: 14px;
    color: white;
    padding: 10px;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.album {
    display: none;
    z-index: 9;
    position: relative;
    background: #00000075;
    height: 100%;
    width: 100%;
}

.album-resim {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 20px;
  align-items: center;
    animation: scrollUp 200s linear infinite; 
}

.frame {
  position: relative;
  width: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  animation: tvShake 0.3s infinite alternate;
}

.photo {
  width: 100%;
  display: block;
  filter: brightness(0.9) contrast(1.1) saturate(0.8); 
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.05; 
  pointer-events: none; 
  animation: jitter 0.15s infinite; 
}

@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } 

}
  
@keyframes tvShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(0.5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(-0.5px); }
  100% { transform: translateX(0); }
}

.bilgi {
    position: absolute;
    bottom: 0;
    z-index: 9999999999;
    background: #000000db;
    width: 100%;
    color: white;
    text-align: center;
    box-shadow: 0px -6px 13px 9px #000000db;
    padding-bottom: 10px;
}