*{
  margin: 0;
  padding: 0;
  
}
body{
  background-color:#fcee0a;
}
.kutucuklar {
  margin: 1rem;
  display: flex;
  flex-wrap: wrap; /* Kartların alt satırlara geçmesini sağlar */
  gap: 20px; /* Kartlar arasındaki boşluk */
  justify-content: flex-start; /* Kartları sola hizalar */
  margin-top: 1rem;
  padding: 2rem;
 
}

.kutucuklar .card {
  width: calc(20% - 20px); /* 5 kart için her kartın genişliğini ayarlıyoruz */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  padding-left: 20px;
  padding-top:20px ;
  width: 20rem;
  height: 27rem;
  top: 10px;
  

}


.kutucuklar .card .face{
width: 300px;
height: 200px;
transition: 0.5s; 
}

.kutucuklar .card .face.face1{
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);

}

.kutucuklar .card:hover .face.face1{
background: #e6325c;
transform: translateY(0);
}

.kutucuklar .card .face.face1 .content{
opacity: 0.2;
transition: 0.5s;
}

.kutucuklar .card:hover .face.face1 .content{
opacity: 1;

}

.kutucuklar .card .face.face1 h3.hidden {
  display: none; /* Başlangıçta yeni h3 görünmez */
}

.kutucuklar .card:hover .face.face1 h3.visible {
  display: none; /* Hover olduğunda ilk h3'ü gizle */
}

.kutucuklar .card:hover .face.face1 h3.hidden {
  display: block; /* Hover olduğunda yeni h3'ü göster */
}

.kutucuklar .card .face.face1 .content img{
max-width: 100px;
}

.kutucuklar .card .face.face1 .content h3{
margin: 10px 0 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 1.5em;
}

.kutucuklar .card .face.face2{
position: relative;
color: #fff;
background: #333;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transform: translateY(-100px);
}

.kutucuklar .card:hover .face.face2{
transform: translateY(0);
}

.kutucuklar .card .face.face2 .content p{
margin: 0;
padding: 0;
}

.kutucuklar .card .face.face2 .content a{
margin: 15px 0 0;
display:  inline-block;
text-decoration: none;
font-weight: 900;
color: #333;
padding: 5px;
border: 1px solid #333;
}

.kutucuklar .card .face.face2 .content p{
font-size: 16px;
margin: 4px;
}


/*Kutular*/
.kutular {
  width: 80%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-left: 13%;

  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 5 sütunlu bir grid oluşturuyoruz */
  gap: 20px; /* Card'lar arasındaki boşluk */
}
.kutular .card {
  width: 300px;
  height: 400px;
  margin: 50px;
  transform-origin:center;
  transform:perspective(1000px) rotateY(25deg);
  transition:0.5s;
}

.kutular:hover .card {
  opacity:0.3;
}
.kutular .card:hover {
  transform:perspective(800px)       rotateY(0deg);
  opacity:1;
}
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}

article a::after {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
  content: "";
}

/* basic article elements styling */
article h2 {
  margin: 0 0 18px 0;
  font-family: "Bebas Neue", cursive;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  color: var(--title-color);
  transition: color 0.3s ease-out;
}

 


.article-body {
  padding: 24px;
}

article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #28666e;
}

article a:focus {
  outline: 1px dotted #28666e;
}

article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #28666e;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
h1{
    margin: 5rem;
    margin-left:45% ;
    border-bottom:2px solid  red ;
    width: 17%;
    font-size: 5rem;
}
.article-wrapper h2{
    margin: 20px;

}
 
.article-wrapper img{
  margin-left: 20px;
  height: 320px;
   width: 250px;

}