*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #384047;
}

/* ======================================= */
/* MASAÜSTÜ (PC) DÜZENİ - 769px ve Üzeri */
/* ======================================= */

/* Ana form stilleri - PC ekranlarında form daha geniş (örneğin 700 piksel) olmalı */
.tab-content form {
    max-width: 700px; /* PC ekranında formun maksimum genişliğini artırdık */
    width: 90%; /* Kapsayıcının %90'ını kullan, böylece daha esnek olur */
    margin: 20px auto; /* Ortalamayı koru ve üstten/alttan boşluk ekle */
    padding: 30px 40px; /* PC'de iç boşlukları artırdık */
    background: #f4f7f8;
    border-radius: 8px;
}

/* Tab başlıkları için PC genişliği */
.flat-tabs .menu-tab {
    display: flex;
    flex-direction: row; /* PC'de yan yana durmalı */
    justify-content: center;
    gap: 15px; /* Aralarındaki boşluk */
    margin-bottom: 20px;
}

    .flat-tabs .menu-tab .item-title {
        width: 300px; /* PC'de daha geniş, sabit bir genişlik verdik */
        height: 50px;
        /* Diğer renk ve hizalama stilleri aynı kalır */
        background-color: #FFC064;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .flat-tabs .menu-tab .item-title.active {
            background-color: #FFA920;
        }


/* Input ve Diğer Temel Stiller (Tüm Cihazlarda Ortak) */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
    border: none;
    font-size: 16px;
    padding: 15px;
    width: 100%;
    background-color: #e8eeef;
    color: #384047;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 20px;
}

/* ... (Diğer tüm renk ve font stilleri aynı kalır) ... */

.tab-content button[type="submit"] {
    padding: 19px 39px 18px 39px;
    color: #FFF;
    background-color: #FFA920;
    font-size: 18px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #E6961E;
    border-width: 1px 1px 3px;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    margin-bottom: 10px;
    cursor: pointer;
}

fieldset {
    margin-bottom: 30px;
    border: none;
}

legend {
    font-size: 1.4em;
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #384047;
}

.number {
    background-color: #FFA920;
    color: #fff;
    height: 30px;
    width: 30px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 100%;
}

/* ======================================= */
/* MOBİL UYUMLULUK (768px ve altı) */
/* ======================================= */
@media screen and (max-width: 768px) {

    /* Formun genişliği mobilde daha az olmalı */
    .tab-content form {
        max-width: 95%; /* Mobil genişliğini ayarladık */
        margin: 10px auto;
        padding: 10px 15px;
    }

    /* Tab başlıkları mobilde alt alta gelmeli */
    .flat-tabs .menu-tab {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

        .flat-tabs .menu-tab .item-title {
            width: 100%; /* Tam genişlik kaplamalı */
        }
}
/* Tab Menü Butonları İçin Odak ve Üzerine Gelme Efektlerini Kaldırma */

/* 1. Üzerine gelindiğinde (hover) veya tıklandığında (active) oluşan gereksiz gölgeleri kaldırın */
.flat-tabs .menu-tab .item-title:hover,
.flat-tabs .menu-tab .item-title:active {
    box-shadow: none !important; /* Tüm gölgeleri kaldır */
    outline: none !important; /* Tarayıcının varsayılan odak çerçevesini kaldır */
    border: none !important; /* Herhangi bir border efekti varsa kaldır */
}

/* 2. Sadece aktif olan butonda kenarlık olmasını istiyorsak, 
      normal durum için de hover/focus'ta kenarlık olmamasını garantileyin */
.flat-tabs .menu-tab .item-title {
    border: 1px solid transparent; /* Varsayılan olarak şeffaf bir kenarlık */
    transition: all 0.2s ease-in-out; /* Yumuşak geçişler için */
}

    /* 3. Aktif olan butonun kenarlığı olsun (önceki renkle) */
    .flat-tabs .menu-tab .item-title.active {
        border: 1px solid #FFA920; /* Aktif butona kendi renginde bir kenarlık */
        box-shadow: 0 0 5px rgba(255, 169, 32, 0.5); /* Hafif bir parlama (isteğe bağlı) */
    }

    /* Eğer sadece aktif butonda parlama varsa, onu kaldırmak için: */
    .flat-tabs .menu-tab .item-title.active {
        box-shadow: none !important; /* Aktif butondaki tüm gölgeleri kaldır */
    }

/* Genel olarak tüm elementlerdeki varsayılan odak çerçevesini kaldırmak için (dikkatli kullanın, erişilebilirlik için önemlidir) */
*:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* ======================================= */
/* TAB BUTONLARI GENEL VE PC DÜZENİ */
/* ======================================= */

/* Tüm tab menüsünü ortala ve yan yana diz */
.flat-tabs .menu-tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px; /* Form ile arasına boşluk koyar */
    padding: 0;
    list-style: none; /* Liste işaretlerini kaldırır */
}

    /* Her bir butonun temel stili */
    .flat-tabs .menu-tab .item-title {
        width: 300px;
        height: 55px; /* Daha belirgin yükseklik */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px; /* Köşeleri yumuşattık */
        cursor: pointer;
        transition: all 0.3s ease; /* Stil değişimlerini yumuşak yapar */
        /* Yanıp sönme/parlama efektlerini tamamen kaldırma */
        box-shadow: none !important;
        outline: none !important;
        border: 1px solid #E6E6E6; /* Pasifken açık gri bir sınır */
    }

    /* Pasif Buton Stili (Tıklanmayan) */
    .flat-tabs .menu-tab .item-title {
        background-color: #F8F8F8; /* Çok açık gri/beyaz */
        color: #888; /* Soluk gri yazı */
    }

        /* Aktif Buton Stili (Tıklanan) */
        .flat-tabs .menu-tab .item-title.active {
            background-color: #FFA920; /* Ana renginiz */
            color: #FFF; /* Beyaz yazı */
            border-color: #FFA920; /* Kendi renginde kalın kenarlık */
            font-weight: bold;
        }

        /* Butonun üzerine gelme efekti (parlamayan, sadece hafif koyulaşan) */
        .flat-tabs .menu-tab .item-title:not(.active):hover {
            background-color: #EFEFEF; /* Pasif butonda hafif koyulaşma */
            color: #555;
        }

/* ======================================= */
/* MOBİL DÜZENLEME (768px ve altı) */
/* ======================================= */
@media screen and (max-width: 768px) {
    .flat-tabs .menu-tab {
        flex-direction: column; /* Alt alta yığma */
        gap: 10px;
        margin-bottom: 20px;
    }

        .flat-tabs .menu-tab .item-title {
            width: 100%; /* Tam genişlik kaplama */
        }
}