:root {
            --primary-red: #e74c3c;
            --dark-bg: #0a0a0a;
            --card-bg: #ff0000;
            --text-white: #ffffff;
            --text-gray: #b5b2b2;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }                                                               

        body {
            background-color: rgb(28, 27, 27);
            color: white;
            font-family: 'Roboto', sans-serif;
            overflow-x: hidden;
        }

       
        .navbar {
       
            background-color: rgba(0, 0, 0, 0.9);
            height: 80px;
            display: flex;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            border-bottom: 2px solid #e80000;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Oswald', sans-serif;
            font-size: 33px;
            font-weight: 700;
            text-decoration: none;
            color: white;
            letter-spacing: 2px;
            text-shadow: 2px 2px 7px rgba(255, 0, 0, 0.658);
        }

        .logo span {
            color: red;
            text-shadow: 2px 2px 7px rgba(255, 255, 255, 0.647);
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-gray);
            font-family: 'Oswald', sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            transition: 0.3s ease;
        }

        .nav-links a:hover {
            color: red;
          
            text-shadow: 0 0 8px red;
        }

   .container2 {
            width: 1000px;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }




.card { 
    margin-top: 150px;
  background: #b7b7b7;

  width: 290px;
  border-radius: 15px;
  overflow: hidden; 
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
transition: 180ms;
 
}

.card:hover {
  transform:  translateY(-20px); /* Hem %15 büyür hem yukarı kalkar */

box-shadow: 2px 1px 20px #b44444;
  
}


.card img {
  width: 100%;
  height: 180px;
  object-fit: cover; 
}


.card-content {
  padding: 15px;
  text-align: center;
}

.card-content h3 {
  margin: 10px 0 5px 0;
  color: #000000;
}

.card-content p {
  color: #2d2d2d;
  font-size: 14px;
}