/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/* ==========================================================================
   VINYL GALLERY SYSTEM (CSS AYRILMIŞ SÜRÜM)
   ========================================================================== */

/* Tüm galeri elemanlarının varsayılan stillerini sıfırla */
#vinyl-gallery * {
  all: unset;
  box-sizing: border-box;
}

/* Ana Galeri Kutusu */
#vinyl-gallery {
  all: initial !important;
  width: 100% !important;
  height: 240px !important;
  margin: 20px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
  font-family: 'MS PGothic', sans-serif;
  justify-content: center;
}

/* Her Bir Albüm ve Başlığın Kapsayıcısı */
#vinyl-gallery .vinyl-item {
  display: block !important;
  position: relative !important;
}

/* Plak/Kapak Kapsayıcısı (Mouse gelince genişleyen yer) */
#vinyl-gallery .vinyl {
  all: unset !important;
  perspective: 500px !important;
  width: 22px !important; 
  transition: width 0.5s !important;
  display: block !important;
  cursor: pointer;
}

/* Üzerine gelindiğinde kartın genişlemesi */
#vinyl-gallery .vinyl:hover {
  width: 155px !important;
}

/* Albüm Kapak Resmi */
#vinyl-gallery img {
  all: unset !important;
  transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s !important;
  width: 180px !important;
  height: 180px !important;
  transform: rotateX(0deg) rotateY(25deg) !important;
  transform-style: preserve-3d !important;
  border-radius: 4px !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Üzerine gelindiğinde kapağın düzleşip büyümesi */
#vinyl-gallery .vinyl:hover img {
  transform: rotateX(0deg) rotateY(10deg) !important;
  width: 188px !important;
  height: 188px !important;
  margin-top: -4px !important;
}

/* Şarkı/Albüm İsmi */
#vinyl-gallery .title {
  color: #000000;
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0;
  text-align: center;
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  transition: opacity 0.3s;
}

/* Sadece mouse ile üzerine gelinen albümün altındaki yazıyı göster */
#vinyl-gallery .vinyl-item:hover .title {
  visibility: visible;
  opacity: 1;
}