/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,600;1,600&display=swap');

/* VARIABLE CSS   */

:root {

--header-height: 3.5rem;


/*  COLORS */
/*  COLOR MODE HSL(hue,saturation,lightness) */

--first-color: hsl(42,100%,50%);
--first-color-dark: hsla(42, 85%, 50%);
--first-color-light: hsl(42, 100%, 83%);
--tittle-color: hsl(0,0%,87%);
--text-color: hsl(0,0%,69%);
--body-color: hsl(200,12%,5%);
--container-color: hsl(200,10%,8%);
--border-color: hsl(0,0%,20%);
--white:  #fff ;


/*  font and typography*/
/*  0.5rem= 8px    1 rem =16 px  */

--body-font: 'Jost', sans-serif;
--big-font-size: 3rem;
--h1-font-size: 2.5rem ;
--h2-font-size:  2.25rem;
--h3-font-size: 1.5rem;
--larger-font-size: 1.2rem;
--large-font-size: 1.125rem;

/* font weight size*/

--weight-300: 300;
--weight-400: 400;
--weight-600: 600;

}

/*   DARK TEMA */

#day-night:checked ~ * {
    --tittle-color: hsl(247,27%,31%);
    --text-color: hsl(0,0%,41%);
    --body-color: hsl(0,0%,100%);
    --container-color: hsl(42, 100%, 83%);
    --border-color: hsl(0, 0%, 87%);
}


/*  BASE  */

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

}

html {
    scroll-behavior: smooth; /* nav çubukları arası geçişler daha smooth oluyor*/
}

input,
textarea,
button,
body{

    font-family: var(--body-font);
    font-size: var(--larger-font-size);

}

main {

    background-color: var(--body-color);
    color: var(--text-color);
}

input,
textarea,
button{

    outline: none;
    border: none;
    background-color: transparent; /* arka planı görünmez hale getirir*/
}

h1,
h2,
h3{

    color: var(--tittle-color);
    font-weight: var(--weight-600);
}

ul{
    list-style:none;

}

a{

    text-decoration: none;
}

img{

    max-width: 100%;
    height: auto;
}

/* ************* reusable css classes GENEL ANLAMLI TERİMLERİN CSS KODLARI *********************** */

.container {

    max-width: 1200px;
    margin-inline: auto; /* margin-inline: auto; kullanımı, öğenin yatayda ortalanması için sıkça tercih edilir.*/
    padding-inline: 1rem;
}

.grid{

    display: grid;
    gap: 1.5rem;
}

.section{
    padding-block:6rem;
}

.section__title{
   font-size: var(--h1-font-size);
   font-weight: var(--weight-400);
   line-height: 1.2;
   margin-bottom: 1.5rem;
}

/* biz kimiz başlığını düzenledim aşağıda*/

.section__title::before{
    content: attr(data-title);
    display:block;
    color: var(--first-color);
    font-size: var(--large-font-size);
    font-weight: var(--weight-600);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.title-center{
    text-align:center;
    margin-bottom: 3rem;

}


/* **************** STYLE SWİTCHER ***************************/
input[type="radio"],
input[type="checkbox"]{
    display:none;
}
/* display none olduğu için gözükmüyor ama renk değişimi yapan başka kutucuk oluşturuyordu*/


.style__switcher{
   position: fixed;
   right:0;
   bottom: 20%;
   padding: 1rem;
   width:220px;
   border:1px solid var(--border-color);
   background-color: var(--container-color);
   border-radius: 0.5rem;
   z-index:1000;
   transform: translateX(100%);
   transition: all 0.3s ease;
}

/* toggler butonunu x'in en sağına attık sonra eğer toggler butonuna tıklanırsa xin en soluna attık kısacası açılıyor tuş*/
#toggler:checked ~ .style__switcher{
    transform:translateX(0);
}

.style__switcher-toggler,
.style__switcher-theme{
    position: absolute;
    right: 110%;
    color: var(--tittle-color);
    background-color: var(--body-color);
    border: 1px solid var(--border-color);
    height: 48px;
    width: 48px;
    border-radius: 50%;
    cursor:pointer;
    display: grid;
    place-items: center;
    transition: all 0.3s ease;
}

.style__switcher-toggler{
    top: 7%;
}

.style__switcher-theme{
    bottom: 7%;
}

.style__switcher-theme .fa-moon{
    display: none;
}

#day-night:checked ~ * .fa-sun{
    display:none;
}

#day-night:checked ~ * .fa-moon{
    display:block;
}

.style__switcher-title{
    font-size: var(--large-font-size);
    margin-bottom: 0.75rem;
}


.style__switcher-colors{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0.5rem;
}

.style__switcher-colors .color{  /*Bu, style__switcher-colors sınıfına sahip bir öğe içindeki .color sınıfına sahip öğeleri seçer. Yani, style__switcher-colors sınıfı olan bir öğe varsa ve içinde .color sınıfı varsa, bu öğelere stil uygular.*/
    height:30px;
    width:30px;
    border-radius: 50%;
}
/*
.color-1{
    background-color:hsl(252,35%,51%);
}

.color-2{
    background-color:hsl(351, 85%, 51%);
}

.color-3{
    background-color:hsl(271, 76%, 53%);
}

.color-4{
    background-color:hsl(225, 73%, 57%);
}

.color-5{
    background-color:hsl(43, 74%, 49%);
}

.color-6{
    background-color:hsl(339, 81%, 66%);
}

.color-7{
    background-color:hsl(80, 61%, 50%);
}

.color-8{
    background-color:hsl(19, 96%, 52%);
}

.color-9{
    background-color:hsl(88, 65%, 43%);
}


.color-10{
    background-color:hsl(309, 100%, 50%);
}
    */


#color-1:checked ~ * {
    --first-color: hsl(252,35%,51%);
    --first-color-dark: hsla(252, 25%, 51%);
    --first-color-light: hsl(252, 100%, 83%);
}

#color-2:checked ~ * {
    --first-color: hsl(351,85%,51%);
    --first-color-dark: hsla(351, 75%, 51%);
    --first-color-light: hsl(351, 100%, 83%);
}

#color-3:checked ~ * {
    --first-color: hsl(271,73%,57%);
    --first-color-dark: hsla(271, 60%, 51%);
    --first-color-light: hsl(2711, 100%, 83%);
}

#color-4:checked ~ * {
    --first-color: hsl(225,73%,57%);
    --first-color-dark: hsla(225, 63%, 57%);
    --first-color-light: hsl(225, 100%, 83%);
}

#color-5:checked ~ * {
    --first-color: hsl(43,74%,49%);
    --first-color-dark: hsla(43, 64%, 49%);
    --first-color-light: hsl(43, 100%, 83%);
}

#color-6:checked ~ * {
    --first-color: hsl(339,81%,51%);
    --first-color-dark: hsla(339, 71%, 51%);
    --first-color-light: hsl(339, 100%, 83%);
}

#color-7:checked ~ * {
    --first-color: hsl(80,61%,50%);
    --first-color-dark: hsla(80, 51%, 50%);
    --first-color-light: hsl(80, 100%, 83%);
}

#color-8:checked ~ * {
    --first-color: hsl(19,96%,52%);
    --first-color-dark: hsla(19, 86%, 52%);
    --first-color-light: hsl(19, 100%, 83%);
}

#color-9:checked ~ * {
    --first-color: hsl(88,65%,43%);
    --first-color-dark: hsla(88, 55%, 43%);
    --first-color-light: hsl(88, 100%, 83%);
}

#color-10:checked ~ * {
    --first-color: hsl(309, 100%, 50%);
    --first-color-dark: hsla(309, 30%, 50%);
    --first-color-light: hsl(309, 100%, 83%);
}


/*   header ve nav stili */

.header{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    box-shadow: 0 3px 9px hsla(0,0%,0%,0.05);
    z-index: 100;
}



/*
FLEXBOX HATIRLATMASI

Flexbox (Flexible Box Model), CSS'te bir kapsayıcı ve içindeki öğeler arasında düzenleme ve hizalama yapmak için kullanılan güçlü bir düzen modelidir.
Flexbox, öğeleri yatay (satır) ve dikey (sütun) eksenlerde esnek ve düzenli bir şekilde hizalamayı kolaylaştırır.

Flex Container: Flexbox sisteminin ana kapsayıcısıdır. İçindeki öğelerin düzenini kontrol eder.
Flex Items: Flex kapsayıcının içindeki her bir öğedir. Kapsayıcıya göre hizalanır ve düzenlenir.

justify-content:
Ana eksende (yatay/dikey) öğeleri hizalar.

align-items:
Çapraz eksende öğeleri hizalar.

*/


.nav,
.nav__list{

    display: flex;
}

.nav{

    height: calc(var(--header-height)+2.25rem);
    justify-content: space-between;
    align-items: center;

}

.nav__logo{

    color: var(--first-color);
    font-size: var(--h2-font-size);
}

.nav__list{

    column-gap: 1.5rem; /* sağdaki nav araçları arasındaki boşluğu belirledik*/
}

.nav__link{

    color: var(--first-color);
    transition: all .3s ease; /* buraya animasyon koyduk, 3 saniyelik all ile her şeyi animasyon edebiliriz dedik , ease: Başlangıçta hızlı, ortada yavaş, bitişte yine hızlı bir geçiş sağlar (varsayılan).*/
}

/* Hamburger Menü İkonu (Mobilde Görünür) */
.nav__menu-icon {
    display: none; /* Varsayılan olarak gizli */
    font-size: 2.5rem; /* İkonu büyüt (örneğin 2.5rem) */
    cursor: pointer;
    color: var(--first-color);
    margin-left: 1rem; /* İkonu sağa doğru biraz kaydır */
}


/*  ACTIVE LINK   */

.active-link,
.nav__link:hover{ /* hover  sadece fareyle üzerimize geldiğinde çalışacak sınıf*/

    color: var(--first-color);
}

/*   HOME   */

.home{

    background-color: var(--container-color);
    padding-block: 9rem 3rem; /* öğenin üst kısmına 9rem ve alt kısmına 3rem iç boşluk (padding) ekler.*/
}

.home__container{

    grid-template-columns: repeat(2 , 1fr); /*grid-template-columns: repeat(2, 1fr), grid düzeninde 2 sütun oluşturur ve her bir sütunun eşit genişlikte olmasını sağlar. Yani, her sütun grid container'ının yarısını kaplar.*/
    align-items: center;
}

.home__title{
    font-size: var(--big-font-size);
    line-height: 1.4;
}

.home__description{
    margin-block: 1.5rem 3rem;
}



.home__btns{
    display: flex;
    column-gap:1rem;
}

.home__img-wrapper{

    margin-inline: auto 2rem;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.home__img-wrapper::before,
.home__img-wrapper::after{

    content:'';
    position:absolute;
    inset:0;
}

.home__img-wrapper::before{

    background-color: var(--first-color-light);
    animation:animate__before 8s ease-in-out infinite;
}

.home__img-wrapper::after{

    background-color: var(--first-color);
}

.home__img-wrapper::after,
.home__img{
    animation:animate__after 8s ease-in-out infinite;

}

.home__img{

    z-index:10;
    position: relative;
    vertical-align: middle; /* dikey yönde hizalama*/
}



/*   HOME ANİMASYONLARI*/

@keyframes animate__before {

    0%{
         border-radius: 65% 35% 29% 71% / 55% 30% 70% 45%;
    }

    50%{
        border-radius: 21% 79% 50% 50% / 21% 50% 50% 79%;
   }

    100%{
    border-radius: 65% 35% 29% 71% / 55% 30% 70% 45%;
    }
    
}

@keyframes animate__after{

    0%{
         border-radius: 21% 79% 50% 50% / 21% 50% 50% 79%;
    }

    50%{
        border-radius: 65% 35% 29% 71% / 55% 30% 70% 45%;
   }

    100%{
    border-radius: 21% 79% 50% 50% / 21% 50% 50% 79%;
    }
    
}

/*  BUTTON */

.btn{

    display: inline-block;
    background-color: var(--first-color);
    border: 1px solid var(--first-color);
    color: var(--white);
    padding: 0.9rem 2.5rem;
    font-size: var(--large-font-size);
    border-radius: 0.5rem;
    transition: all 0.5s ease;
}

/* üstteki genel butonlar içindi , aşağıdaki sadece geçmiş iş butonu için*/
.btn--transparent{
    background-color: transparent;
    color: var(--first-color)
}

/* BUTTON HOVER */

.btn:hover{
    background-color: var(--first-color-light);
}

.btn--transparent:hover{
    background-color: var(--first-color);
    color: var(--white);

}

/*  ABOUT */

.about__container{
    grid-template-columns: 4fr 8fr;
    align-items: center;
}

.about__img-wrapper{
     position: relative;
     height: 400px;
}

.about__img{
    position: absolute;
    top: 0;
    left: 0; 
    height: 100;
    object-fit: cover; /*CSS'deki object-fit: cover; özelliği, bir medya öğesinin (genellikle img, video, ya da iframe) ebeveyn konteynerine nasıl sığdırılacağını belirler.*/
    transition: all 0.3s ease;
}

/* hakkımızda kısmındaki görseli gösterişli yapıyoruz */

.about__img:nth-child(1){
    clip-path: polygon(0 0,0 32%,28% 0);
    transform: translateY(-1.25rem);
}

.about__img:nth-child(2){
    clip-path: polygon(28% 0,0 32%,0 100%,17% 100%,90% 0);
    transform: translateY(-0.75rem);
}

.about__img:nth-child(3){
    clip-path: polygon(100% 0,100% 65%, 74% 100%,17% 100%,90% 0);
    transform: translateY(-0.25rem);
}

.about__img:nth-child(4){
    clip-path: polygon(100% 65%, 74% 100%,100% 100%);
    transform: translateY(0.25rem);
}

/* fareyle geldiğimizde resim parçalarının birleşmesi*/

.about__img-wrapper:hover .about__img{
    transform: translateY(0);
}

/* hakkında kısmındaki çizgiyi çektik*/
.about__description{
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

/* hakkında kısmındaki memnuniyet gibi verileri yerlerini düzenledik*/

.about__data{
    grid-template-columns:repeat(2,1fr);
    gap:0.25rem;
    margin-bottom: 3rem;

}

.data__item{
    display: flex;
    column-gap:0.75rem;
}
.data__title{
    font-size: var(--larger-font-size);
}

/* tel no mavi renk yapalım*/

.about__link{
    color: hsl(225,73%,57%);
}

.about__social-links{
    display:flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 1.25rem;
}

.about__social-links::before{
   content: '';
   background-color: var(--text-color);
   width: 60px;
   height: 2px;
}

.about__social-link{
    color: var(--text-color);
    transition: all 0.3s ease;
}

.about__social-link:hover{
    color: var(--first-color);
}

/*  HİZMETLERİMİZ */

.qualification{
    background-color: var(--container-color);
}

.resume__container{
    grid-template-columns: repeat(2,1fr);
}

.resume__heading{
    text-align:center;
    font-size:var(--h3-font-size);
    padding-bottom: 2rem;
}

/* tüm satır arasına hizmetlerde çizgi ekliyoruz*/
.resume__heading,
.resume__item{
    border-bottom: 2px solid var(--border-color);
}

/* ilk çocuk dışındaki tüm hizmetler kutusunun sağına çizgi ekliyor*/
.resume__item:not(:first-child){
    border-right: 2px solid var(--border-color);
}

.resume__item{
    position:relative;
}

.resume__header{
    padding: 2rem 1.5rem;
}

.resume__subtitle{
    font-size: var(--larger-font-size);
    cursor: pointer; /*cursor: pointer;, CSS'te bir elemanın üzerine fareyle gelindiğinde (hover) imlecin bir el işareti (pointer) şeklinde görünmesini sağlar.*/
}

.resume__icon{
    background-color: var(--container-color);
    border: 2px solid var(--border-color);
    font-size: var(--h2-font-size);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    line-height: 1.1em;
    text-align: center;
    cursor: pointer;
    position:absolute;
    right:-1.5rem;
    bottom: -1.5rem;
    z-index: 10; /*z-index: 10; CSS özelliği, öğelerin yığılma sırasını belirler. Bu özellik, bir öğenin diğer öğelerle örtüşmesi durumunda hangi öğenin üstte olacağını kontrol eder. Burada icon ile border çizgisi karışıyordu bu satır ile icon önde gösteriliyor.*/
}

.resume__content{
  padding-inline: 1.5rem 3rem;
}

.resume__title{
    font-size: var(--h3-font-size);
}

.resume__description{
    margin-block: 1.25rem 2rem;
}

/*  Neden vedat usta(services) */

.services__container{
    grid-template-columns: repeat(3,1fr);
}

.services__item{
    background-color: var(--container-color);
    border: 1px solid var(--container-color);
    padding: 2.5rem 1.8rem;
    border-radius:0.5rem ;
    position: relative;
    transition: all 0.5s ease;
}

/* services hover */

.services__item:hover{
    background-color: var(--body-color);
    border-color: var(--border-color);
}

.services__icon{
    color: var(--first-color);
    font-size: 1.8rem;
}

.services__title{
    font-size: var(--h3-font-size);
    margin-block: 1.5rem 1rem;
}

.bolgeler__title{
    font-size: var(--h3-font-size);
    margin-block: 0.1rem 1rem;
}

.bolgeler__description{
    margin-bottom: 1rem;
}

/* 01 02 gibi numaraların yerini belirliyoz*/
.services__no{
    position: absolute;
    right: 2.5rem;
    top: 1rem;
    color: var(--tittle-color);
    font-size: 3.75rem;
    opacity: 0.07;

}

/* ÇALIŞMALARIM */

.works{
    background-color: var(--container-color);
}

.work__container{
    grid-template-columns: repeat(3, 1fr);
}

.work__card{
    position:relative;
    cursor:pointer;
}

.work__img{
    vertical-align:middle;
    width: 500px;
    height: 400px;
    object-fit: cover;
}

.work__details{
    position:absolute;
    inset: 0;
    background-color: hsla(0,0%,0%,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition: all 0.4s ease-in-out;
    text-align: center;
    line-height: 1.5; 
}

.work__img,
.work__details{
    border-radius:0.5rem;
}

.work__title{
    font-size: var(--h3-font-size);
}

.work__title,
.work__description{
    color: var(--white);
    transform:translateY(1.5rem); /* y ekseninde 1.5 rem aşağı kaydırdık*/
    transition:all 0.3s ease-in-out;
}

.work__description{
    font-size: var(--large-font-size);

}

/*   WORK HOVER ÇALIŞMALARIM KISMI */

.work__card:hover .work__details{
    opacity:1;
}

.work__card:hover :is(.work__title , .work__description){
    transform: translateY(0);
}

/*   MÜŞTERİ YORUMLARI  */

.testimonials__container{
    grid-template-columns: repeat(3,1fr);
}

.testimonials__description{
    margin-bottom: 1.75rem;
}

.testimonials__description::before{
    content:'\f10d';
    font-family: fontawesome;
    display: block;
    color: var(--first-color);
    font-size: var(--h3-font-size);
    margin-bottom: 0.25rem;
}

.testimonials__data{
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
}

.testimonials__img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonials__name{
    font-size: var(--larger-font-size);
}

.testimonials__identity{
    font-size: var(--large-font-size);
}


/*  CONTACT */

.contact__container{
    grid-template-columns: 5fr 7fr;
    align-items: flex-start; /*  bir Flexbox konteynerindeki öğelerin çapraz eksen (cross axis) boyunca başlangıç hizasında (üst veya sol) hizalanmasını sağlar.*/
}

.contact__item{
    display:flex;
    align-items: flex-start;
    column-gap: 1.25rem;
}

.contact__item:not(:last-child){
    margin-bottom: 2.5rem;
}

.contact__icon{
    color: var(--first-color);
    font-size: var(--large-font-size);
    line-height: 1.8;
    margin-top: 1.5rem;

}

.contact__title{
    font-size: var(--larger-font-size);

}

.contact__data{
    font-size: var(--large-font-size);
    padding-block: 2rem;
}

.form__group{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1.25rem;
}

.input__control{
    color:var(--tittle-color);
    background-color: var(--container-color);
    padding: 0.9rem 0.75rem;
    width:100%;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.textarea{
    height:140px;
    resize: none;
}

.contact__btn{
    float:right
}

/*  FOOTER   */

.footer{
    background-color: var(--container-color);
    padding-block: 3rem;
}

.footer__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__copyright{
    color: var(--text-color);
}

.footer__social-links{
    display:flex;
    column-gap:1.25rem;
}

.footer__social-link{
    color: var(--text-color);
    font-size: var(--large-font-size);
    transition: all 0.3s ease;
}
 .footer__social-link:hover{
     color: var(--first-color);
 }


 /* ************* MOBILE STYLES (Medya Sorguları) *********************** */
@media only screen and (max-width: 768px) {
    /* Mobil cihazlar için stil ayarları */
    html, body {
        width: 100%;
        overflow-x: hidden; /* Yatay kaydırmayı engeller */
        margin: 0;
        padding: 0;
    }

    .container {
        padding-inline: 0.5rem; /* Mobilde daha az padding */
        max-width: 100%; /* Ekran genişliğine uyum sağlar */
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box; /* Padding'i genişliğe dahil eder */
    }

    h1 {
        font-size: 1.75rem; /* Mobilde daha küçük başlık boyutu */
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    body,
    input,
    textarea,
    button {
        font-size: var(--normal-font-size); /* Mobilde daha küçük font boyutu */
    }

    .grid {
        gap: 1rem; /* Mobilde daha az boşluk */
    }


    .nav__menu-icon {
        display: flex; /* Mobilde göster */
        align-items: center; /* Dikeyde ortala */
        justify-content: center; /* Yatayda ortala */
        height: 100%; /* İkonun yüksekliğini nav yüksekliğiyle eşleştir */
    }

    .nav__list {
        display: flex; /* Mobilde menüyü gizle */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Navigasyonun altında */
        left: 0;
        width: 100%;
        background-color: var(--first-color);
        gap: 0;
        padding: 1rem 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        opacity: 0; /* Menüyü başlangıçta gizle */
        visibility: hidden; /* Menüyü başlangıçta görünmez yap */
        transform: translateY(-20px); /* Menüyü biraz yukarıda başlat */
    }

    .nav__list.active {
        opacity: 1; /* Menüyü göster */
        visibility: visible; /* Menüyü görünür yap */
        transform: translateY(0); /* Menüyü yerine getir */
    }

    .nav__item {
        width: 100%;
        text-align: center;
        box-shadow: 0 1px 0 var(--first-color-light); 
    }

    /* Son menü öğesine box-shadow ekleme */
    .nav__item:last-child {
        box-shadow: none;
    }
    .nav__link {
        padding: 1rem;
        width: 100%;
        display: block;
        color: black;
    }

    .nav__link:hover {
        background-color:var(--first-color-light);
    }

    .home__img-wrapper {
        margin-inline: auto; /* Yan boşlukları sıfırla */
        width: 85%; /* Genişliği daralt */
        max-width: 500px; /* Maksimum genişlik koy */
    }

    .home__img-wrapper::before,
    .home__img-wrapper::after {
        animation-duration: 6s; /* Animasyonları hızlandır */
    }

    .home__img {
        width: 100%; /* Resmi kapsayıcıya sığdır */
    }


    .work__img {
        width: 100%; /* Kapsayıcı genişliğine uyum sağlar */
        max-width: 400px; /* Maksimum genişlik */
        height: 300px; /* Yükseklik azaltıldı */
    }

    .work__title {
        font-size: calc(var(--h3-font-size) * 0.9); /* %10 küçültme*/
    }

    .work__description {
        font-size: calc(var(--large-font-size) * 0.85);
    }


    .work__card:active .work__details,
    .work__card:focus .work__details,
    .work__card:focus-visible .work__details { /* Klavye kullanıcıları için */
        opacity: 1;
    }
    
    .work__card:active .work__title,
    .work__card:active .work__description,
    .work__card:focus .work__title,
    .work__card:focus .work__description {
        transform: translateY(0);
    }
}

@media only screen and (max-width: 480px) {
    /* Küçük mobil cihazlar için ek stil ayarları */
    html, body {
        width: 100%;
        overflow-x: hidden; /* Yatay kaydırmayı engeller */
        margin: 0;
        padding: 0;
    }

    .container {
        padding-inline: 0.25rem; /* Çok küçük cihazlarda daha az padding */
        max-width: 100%; /* Ekran genişliğine uyum sağlar */
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box; /* Padding'i genişliğe dahil eder */
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }

    .grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }


    .nav__menu-icon {
        display: flex; /* Mobilde göster */
        align-items: center; /* Dikeyde ortala */
        justify-content: center; /* Yatayda ortala */
        height: 100%; /* İkonun yüksekliğini nav yüksekliğiyle eşleştir */
    }

    .nav__list {
        display: flex; /* Mobilde menüyü gizle */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Navigasyonun altında */
        left: 0;
        width: 100%;
        background-color: var(--first-color);
        gap: 0;
        padding: 1rem 0;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        opacity: 0; /* Menüyü başlangıçta gizle */
        visibility: hidden; /* Menüyü başlangıçta görünmez yap */
        transform: translateY(-20px); /* Menüyü biraz yukarıda başlat */
    }

    .nav__list.active {
        opacity: 1; /* Menüyü göster */
        visibility: visible; /* Menüyü görünür yap */
        transform: translateY(0); /* Menüyü yerine getir */
    }

    .nav__item {
        width: 100%;
        text-align: center;
        box-shadow: 0 1px 0 var(--first-color-light); 
    }

    /* Son menü öğesine box-shadow ekleme */
    .nav__item:last-child {
        box-shadow: none;
    }
    .nav__link {
        padding: 1rem;
        width: 100%;
        display: block;
        color: black;
    }

    .nav__link:hover {
        background-color:var(--first-color-light);
    }

    .home__img-wrapper {
        width: 90%; /* Daha dar alan */
        max-width: 300px; /* Küçük ekranlar için maksimum genişlik */
        margin-block: 1rem; /* Üst/alt boşluk ekle */
    }

    .home__img-wrapper::before,
    .home__img-wrapper::after,
    .home__img {
        animation-duration: 4s; /* Animasyonları 2x hızlandır */
    }

    /* Erişilebilirlik: Animasyonu kapatma seçeneği */
    @media (prefers-reduced-motion: reduce) {
        .home__img-wrapper::before,
        .home__img-wrapper::after,
        .home__img {
            animation: none !important;
        }
    }

    .work__img {
        max-width: 100%; /* Tam genişlik */
        height: 250px; /* Daha küçük yükseklik */
    }

    .work__details {
        padding: 0.5rem; /* Küçük ekranlarda iç boşluk */
    }

    .work__title {
        font-size: calc(var(--h3-font-size) * 0.8); /* %20 küçültme */
        transform: translateY(1rem); /* Daha az kaydırma */
    }

    .work__description {
        font-size: calc(var(--large-font-size) * 0.75);
        transform: translateY(0.8rem);
    }

    /* Dokunmatik etkileşim için optimize */
    .work__card:active .work__details,
    .work__card:focus .work__details {
        opacity: 1;
    }

}

/* Genel Stil */


.home__titlee {
    font-size: var(--big-font-size);
    line-height: 1.4;
    color: var(--first-color-dark);
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 100px;
    text-align: center;
}

.home__descriptione {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
    }


.benefits-list,
.neighborhoods-list,
.services-list {
    list-style-type: none;
    padding: 0;
}

.benefits-list li,
.neighborhoods-list li,
.services-list li {
    background: var(--container-color);
    margin: 10px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.benefits-list li strong,
.services-list li strong {
    color: var(--first-color-dark);
}

.section__titlee{
    font-size: var(--h1-font-size);
   font-weight: var(--weight-400);
   line-height: 1.2;
   margin-bottom: 1.5rem;
   color: var(--first-color);

}