* {
     margin: 0;
     padding: 0;
 }

 :root {
     --primary-fonts: "Space Grotesk", sans-serif;
     --theme-black: #000;

     ::-webkit-scrollbar {
         width: 10px;
         background-color: #fff;
         border-left: 1px solid #fff;
     }

     ::-webkit-scrollbar-thumb {
         background-color: #9d9d9d;
     }
 }

 body,
 html {
     height: 100%;
     width: 100%;
     font-family: var(--primary-fonts);
     scroll-behavior: smooth;
 }


 .container {
     padding: 0 48px;
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
 }

 header {
     display: flex;
     justify-content: space-between;
     padding: 80px 48px;
     align-items: center;
     position: relative;
     z-index: 999;

 }

 header .logo {
     height: 32px;
 }

 header .menu {
     display: flex;
     gap: 60px;
     font-size: 20px;
 }

 header .menu a {
     text-decoration: none;
     font-size: 20px;
     font-weight: 500;
     color: var(--theme-black);
     transition: .4s all;
     display: inline-block;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 header .menu img {
     height: 16px;
 }

 header .menu a:after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 2px;
     bottom: 0;
     left: 0;
     top: 32px;
     background-color: var(--theme-black);
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }

 header .menu a:hover:after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }


 header .social-media {
     display: flex;
     gap: 20px;
 }


 header .social-media a {
     text-decoration: none;
     font-size: 16px;
     font-weight: 100;
     color: var(--theme-black);
     transition: .4s all;
     display: inline-block;
     position: relative;
 }

 header .social-media a:after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 1px;
     bottom: 0;
     left: 0;
     top: 30px;
     background-color: var(--theme-black);
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }

 header .social-media a:hover:after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }

 .hero {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 110px 48px;
     gap: 20px;
 }

 .hero .available {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 28px;
     padding: 10px 16px;
     border-radius: 15px;
 }


 .hero .available .status {
     height: 14px;
     width: 14px;
     background-color: rgb(0, 209, 0);
     border-radius: 50%;
     animation: blinker 1.5s linear infinite;
     user-select: none;
 }

 @keyframes blinker {
     50% {
         opacity: 0;
     }
 }


 .hero .hero-text {
     font-size: 96px;
     line-height: 96px;
     text-align: center;
     font-weight: 800;
     letter-spacing: -2px;
     user-select: none;
 }

 .portfolio-grid {
     display: grid;
     grid-template-rows: repeat(13, 475px);
     grid-template-columns: repeat(3, 1fr);
 }


 .item {
     overflow: hidden;
     position: relative;
 }

 .item img {
     transition: transform .3s ease;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center center;
 }

 .zoom img {
     transition: transform .3s ease-in-out;
 }

 .zoom:hover img {
     transform: scale(1.08);
     background-position: center center;
 }

 .item:nth-child(1) {
     grid-column: 1 / 3;
     grid-row: 1 / 3;
 }

 .item:nth-child(2) {
     grid-column: 3 / 3;
     grid-row: 1 / 1;
 }

 .item:nth-child(3) {
     grid-column: 3 / 3;
     grid-row: 2 / 3;
 }

 .item:nth-child(4) {
     grid-column: 1 / 1;
     grid-row: 3 / 3;
 }

 .item:nth-child(5) {
     grid-column: 2 / 4;
     grid-row: 3 / 3;
 }


 .item:nth-child(6) {
     grid-column: 1 / 1;
     grid-row: 4 / 6;
 }

 .item:nth-child(7) {
     grid-column: 2 / 3;
     grid-row: 4 / 4;
 }

 .item:nth-child(8) {
     grid-column: 3 / 3;
     grid-row: 4 / 4;
 }

 .item:nth-child(9) {
     grid-column: 2 / 4;
     grid-row: 5 / 7;
 }

 .item:nth-child(10) {
     grid-column: 1 / 1;
     grid-row: 6 / 7;
 }

 .item:nth-child(11) {
     grid-column: 1 / 1;
     grid-row: 7 / 9;
 }


 .item:nth-child(12) {
     grid-column: 2 / 2;
     grid-row: 7 / 7;
 }

 .item:nth-child(13) {
     grid-column: 2 / 2;
     grid-row: 8 / 8;
 }

 .item:nth-child(14) {
     grid-column: 3 / 3;
     grid-row: 7 / 9;
 }

 .item:nth-child(15) {
     grid-column: 1 / 1;
     grid-row: 9 / 9;
 }

 .item:nth-child(16) {
     grid-column: 2 / 4;
     grid-row: 9 / 9;
 }

 .item:nth-child(17) {
     grid-column: 1 / 3;
     grid-row: 10 / 12;
 }

 .item:nth-child(18) {
     grid-column: 3 / 4;
     grid-row: 10 / 12;
 }

 .item:nth-child(19) {
     grid-column: 1 / 3;
     grid-row: 12 / 12;
 }

 .item:nth-child(20) {
     grid-column: 3 / 4;
     grid-row: 12 / 12;
 }

 .item:nth-child(21) {
     grid-column: 1 / 1;
     grid-row: 15 / 13;
 }

 .item:nth-child(22) {
     grid-column: 2 / 4;
     grid-row: 13 / 14;
 }

 .item:nth-child(23) {
     grid-column: 2 / 3;
     grid-row: 14 / 14;
 }



 .grid>.item {
     background-repeat: no-repeat;
     background-position: center center;
 }

 footer {
     display: flex;
     justify-content: space-between;
     padding: 180px 168px 128px;
     align-items: center;
     text-align: center;
 }

 footer .btt {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 footer .btt img {
     height: 64px;
     transition: .3s;
     opacity: .5;
 }

 footer .btt img:hover {
     transform: translatey(-10px);
     transition: .3s;
     opacity: .6;
 }

 footer .mail-and-phone {
     display: flex;
     flex-direction: column;
     text-align: left;
 }

 footer .mail-and-phone .email {
     font-size: 48px;
     font-weight: 100;
     padding-bottom: 20px;
     transition: .4s ease-in-out;
     text-decoration: none;
     color: var(--theme-black);
 }



 footer .mail-and-phone .email img {
     opacity: 0;
     transition: .4s ease-in-out;

 }

 footer .mail-and-phone .email:hover img {
     opacity: 1;
     padding-left: 10px;
     transition: .4s ease-in-out;

 }


 footer .mail-and-phone .phone {
     font-size: 24px;
     font-weight: 100;
     padding-bottom: 72px;
     transition: .4s ease-in-out;
     text-decoration: none;
     color: var(--theme-black);

 }

 footer .mail-and-phone .phone:hover {
     letter-spacing: 2px;
     transition: .4s ease-in-out;

 }

 footer .social-media {
     display: flex;
     gap: 36px;
 }

 footer .social-media a {
     text-decoration: none;
     font-size: 16px;
     font-weight: 100;
     color: var(--theme-black);
     transition: .4s all;
     display: inline-block;
     position: relative;
 }

 footer .social-media a:after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 1px;
     bottom: 0;
     left: 0;
     top: 24px;
     background-color: var(--theme-black);
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }

 footer .social-media a:hover:after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }


 /* Tablet ekranlar için stil */
 @media screen and (min-width: 601px) and (max-width: 1024px) {


     .menu .works {
         display: none;
     }

     header .social-media {
         display: none;
     }

     .hero {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 72px 48px;
         gap: 20px;
     }

     .hero .hero-text {
         font-size: 64px;
         line-height: 64px;
         text-align: center;
         font-weight: 800;
         letter-spacing: -2px;
         user-select: none;
     }

     .portfolio-grid {
         grid-template-columns: 1fr;
     }

 }


 /* Mobil ekranlar için stil */
 @media screen and (max-width: 600px) {

     .container {
         padding: 0;
         max-width: 100%;
     }

     header {
         display: flex;
         flex-direction: column;
         gap: 36px;
         padding: 64px 24px;    

     }

     header .logo img {
         width: 100%;
         height: 36px;
     }

     header .social-media {
         display: none;
     }

     .hero {
         padding: 0 48px 48px 48px;
     }

     .hero .hero-text {
         font-size: 48px;
         line-height: 48px;
     }

     .hero .available {
         font-size: 16px;
     }

     .hero .available .status {
         height: 10px;
         width: 10px;
     }

     footer {
         display: flex;
         flex-direction: column;
         padding: 50px 0;
         width: 100%;
     }

     footer .btt {
         padding-top: 40px;
     }

     footer .btt img {
         height: 48px;
     }


     footer .mail-and-phone {
         display: flex;
         flex-direction: column;
         padding: 0;
         align-items: center;
     }

     footer .mail-and-phone .email {
         font-size: 24px;
         font-weight: 100;
         padding-bottom: 10px;
         transition: .4s ease-in-out;
         text-decoration: none;
         color: var(--theme-black);
         text-align: center;
     }



     footer .mail-and-phone .email img {
         display: none;

     }

     footer .mail-and-phone .email:hover {
         font-weight: 600;
         transition: .4s ease-in-out;
     }

     footer .mail-and-phone .email:hover img {
         opacity: 0;
         padding-left: 0;
         transition: .4s ease-in-out;
     }


     footer .mail-and-phone .phone {
         font-size: 20px;
         font-weight: 100;
         padding-bottom: 32px;
         transition: .4s ease-in-out;
         text-decoration: none;
         color: var(--theme-black);

     }

     footer .mail-and-phone .phone:hover {
         font-weight: 600;
         letter-spacing: 0;
         transition: .4s ease-in-out;

     }

     footer .social-media {
         display: flex;
         flex-direction: column;
         gap: 16px;
         align-items: center;
     }

     footer .social-media a {
         text-decoration: none;
         font-size: 20px;
         font-weight: 100;
         color: var(--theme-black);
         transition: .4s all;
         display: inline-block;
         position: relative;
     }

     footer .social-media a:after {
         content: '';
         position: absolute;
         width: 100%;
         transform: scaleX(0);
         height: 1px;
         bottom: 0;
         left: 0;
         top: 32px;
         background-color: var(--theme-black);
         transform-origin: bottom right;
         transition: transform 0.25s ease-out;
     }

     footer .social-media a:hover:after {
         transform: scaleX(1);
         transform-origin: bottom left;
     }

         .portfolio-grid {
         display: grid;
         grid-template-rows: repeat(13, 475px);
         grid-template-columns: repeat(1, 1fr);
         display: flex;
         flex-direction: column;
     }

     .item {
         transition: .3s ease-in-out;
     }

     .item:hover {
         transform: scale(1);
     }

     .zoom img {
         transition: transform .3s ease-in-out;
         transition: none;
     }

     .zoom:hover img {
         transform: scale(1);
         background-position: center center;
     }

     .item img {
         transition: .3s ease-in-out;
     }


     .item:nth-child(1) {
         grid-column: 1 / 1;
         grid-row: 1 / 3;
     }

     .item:nth-child(2) {
         grid-column: 1 / 1;
         grid-row: 3 / 3;
     }

     .item:nth-child(3) {
         grid-column: 3 / 3;
         grid-row: 2 / 3;
     }

     .item:nth-child(4) {
         grid-column: 1 / 1;
         grid-row: 3 / 3;
     }

     .item:nth-child(5) {
         grid-column: 2 / 4;
         grid-row: 3 / 3;
     }


     .item:nth-child(6) {
         grid-column: 1 / 1;
         grid-row: 4 / 6;
     }

     .item:nth-child(7) {
         grid-column: 2 / 3;
         grid-row: 4 / 4;
     }

     .item:nth-child(8) {
         grid-column: 3 / 3;
         grid-row: 4 / 4;
     }

     .item:nth-child(9) {
         grid-column: 2 / 4;
         grid-row: 5 / 7;
     }

     .item:nth-child(10) {
         grid-column: 1 / 1;
         grid-row: 6 / 7;
     }

     .item:nth-child(11) {
         grid-column: 1 / 1;
         grid-row: 7 / 9;
     }


     .item:nth-child(12) {
         grid-column: 2 / 2;
         grid-row: 7 / 7;
     }

     .item:nth-child(13) {
         grid-column: 2 / 2;
         grid-row: 8 / 8;
     }

     .item:nth-child(14) {
         grid-column: 3 / 3;
         grid-row: 7 / 9;
     }

     .item:nth-child(15) {
         grid-column: 1 / 1;
         grid-row: 9 / 9;
     }

     .item:nth-child(16) {
         grid-column: 2 / 4;
         grid-row: 9 / 9;
     }

     .item:nth-child(17) {
         grid-column: 1 / 3;
         grid-row: 10 / 12;
     }

     .item:nth-child(18) {
         grid-column: 3 / 4;
         grid-row: 10 / 12;
     }

     .item:nth-child(19) {
         grid-column: 1 / 3;
         grid-row: 12 / 12;
     }

     .item:nth-child(20) {
         grid-column: 3 / 4;
         grid-row: 12 / 12;
     }

     .item:nth-child(21) {
         grid-column: 1 / 1;
         grid-row: 13 / 13;
     }

     .item:nth-child(22) {
         grid-column: 2 / 2;
         grid-row: 13 / 13;
     }

     .item:nth-child(23) {
         grid-column: 3 / 3;
         grid-row: 13 / 13;
     }


     .grid>.item {
         display: flex;
         align-items: center;
         justify-content: center;
     }

 }