/* Genel Stil ve Fontlar */
@charset "UTF-8";
body {
    font-family: 'Poppins', sans-serif; /* Modern bir font kullanımı */
    margin: 0;
    padding: 0;
    display: flex; /* İçeriği ortalamak için Flexbox kullanıyoruz */
    justify-content: center; /* Yatayda ortalama */
    align-items: center; /* Dikeyde ortalama */
    min-height: 100vh; /* Ekranın tamamını kapla */
    background: linear-gradient(135deg, #6A11CB 0%, #2575FC 100%); /* Mor gradyan arka plan */
    color: #333; /* Genel metin rengi */
}

/* Ana Konteyner (Sayfanın tamamını kaplayan ve kartı ortalayan) */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px; /* Kenarlarda boşluk bırak */
    box-sizing: border-box; /* Padding'in genişliğe dahil olmasını sağla */
}

/* Büyük Kart Nesnesi */
.card {
    background-color: #ffffff; /* Beyaz kart */
    border-radius: 15px; /* Yumuşak köşeler */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Hafif gölge */
    padding: 40px; /* İç boşluk */
    width: 100%; /* Mobil uyumluluk için */
    max-width: 600px; /* Maksimum genişlik */
    box-sizing: border-box;
    text-align: center; /* Başlık ve içeriği ortala */
}

/* Başlık Stili */
.card h2 {
    color: #4A00B7; /* Koyu mor başlık rengi */
    margin-bottom: 30px; /* Alt boşluk */
    font-weight: 600; /* Kalın font */
    font-size: 2em; /* Büyük başlık */
}

/* Form Grubu Stili (label ve input'ları bir arada tutan) */
.form-group {
    margin-bottom: 25px; /* Her input grubu arasında boşluk */
    text-align: left; /* Etiket ve inputları sola hizala */
}

/* Etiket (Label) Stili */
.form-group label {
    display: block; /* Etiketi kendi satırına al */
    margin-bottom: 8px; /* Input ile etiket arasında boşluk */
    font-weight: 400; /* Normal font kalınlığı */
    color: #555; /* Etiket rengi */
    font-size: 0.95em;
}

/* Input ve Textarea Stili */
.form-group input,
.form-group textarea {
    width: 100%; /* Genişliğin tamamını kapla */
    padding: 14px 18px; /* İç boşluk */
    border: 1px solid #dcdcdc; /* Hafif gri kenarlık */
    border-radius: 10px; /* Daha yuvarlak köşeler */
    font-size: 1em; /* Okunabilir font boyutu */
    box-sizing: border-box; /* Padding'in genişliğe dahil olmasını sağla */
    transition: all 0.3s ease; /* Tüm geçişler daha pürüzsüz yap */
    background-color: #fcfcfc; /* Hafif bir arka plan rengi */
    color: #333;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #6A11CB; /* Odaklandığında mor kenarlık */
    box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.2); /* Daha belirgin odak gölgesi */
    background-color: #ffffff; /* Odaklandığında beyaz arka plan */
    outline: none; /* Varsayılan odaklama çizgisini kaldır */
}

/* Placeholder metin rengi */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a0a0a0; /* Daha belirgin placeholder */
}

/* Küçük ekranlar için responsive ayarlar (Genel Form) */
@media (max-width: 768px) {
    .card {
        padding: 30px 20px; /* Küçük ekranlarda iç boşluğu azalt */
        margin: 15px; /* Kenarlarda boşluk bırak */
    }

    .card h2 {
        font-size: 1.8em;
    }
}

/* --- Bölüm Ayırıcı Stili --- */
.divider {
    border: none;
    border-top: 1px solid #eee; /* Hafif bir çizgi */
    margin: 40px 0; /* Üstte ve altta boşluk */
    width: 80%; /* Kart içinde ortala */
    margin-left: auto;
    margin-right: auto;
}

/* --- Örnek Çalışmalar Bölümü Stili --- */
.works-section {
    text-align: center; /* İçeriği ortala */
    margin-top: 30px; /* Üstten boşluk */
}

.works-section h2 {
    color: #4A00B7;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8em; /* Daha küçük başlık */
}

/* Dinamik Input Alanları İçin Konteyner (Örnek Çalışmalar) */
.dynamic-inputs-container {
    margin-bottom: 25px; /* Alt boşluk */
    text-align: left; /* İçeriği sola hizala */
    max-width: 500px; /* Kart içinde ortalamak için */
    margin-left: auto;
    margin-right: auto;
}

.dynamic-input-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px; /* Her dinamik input alanı arasında boşluk */
}

.dynamic-input-item input[type="text"] {
    flex-grow: 1; /* Input'un genişlemesini sağla */
    padding: 14px 18px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    font-size: 1em;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-color: #fcfcfc;
    color: #333;
}

.dynamic-input-item input[type="text"]:focus {
    border-color: #6A11CB;
    box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.2);
    background-color: #ffffff;
    outline: none;
}

.dynamic-input-item input[type="text"]::placeholder {
    color: #a0a0a0;
}

/* Dinamik Buton Grubu (Örnek Çalışmalar) */
.button-group-dynamic {
    display: flex;
    justify-content: center; /* Butonları ortala */
    gap: 15px; /* Butonlar arası boşluk */
    margin-top: 20px;
    margin-bottom: 40px; /* Listenin üstünden boşluk */
}

/* Butonların Genel Stili - TÜM DİNAMİK EKLE/KALDIR BUTONLARINI KAPSAR */
.add-button, /* Eski ve gizli buton (Kullanılmıyor) */
.remove-selected-button, /* Eski ve gizli buton (Kullanılmıyor) */
.add-new-input-button, /* Yeni Çalışma Alanı Ekle butonu */
.remove-last-input-button, /* Son Çalışma Alanı Kaldır butonu */
.add-product-button, /* Ürün/Hizmet Ekle butonu */
.remove-product-button, /* Son Ürün/Hizmet Kaldır butonu */
.add-optional-service-button, /* Opsiyonel Hizmet Ekle butonu */
.remove-optional-service-button { /* Son Opsiyonel Hizmeti Kaldır butonu */
    background: linear-gradient(45deg, #2575FC 0%, #6A11CB 100%); /* Tutarlı mor-mavi gradyan */
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    font-size: 0.95em; /* Biraz daha küçük font */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; /* Tüm geçişler */
    white-space: nowrap;
    letter-spacing: 0.5px; /* Harf aralığı */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}

.add-button:hover,
.remove-selected-button:hover,
.add-new-input-button:hover,
.remove-last-input-button:hover,
.add-product-button:hover,
.remove-product-button:hover,
.add-optional-service-button:hover,
.remove-optional-service-button:hover {
    transform: translateY(-3px); /* Daha belirgin yukarı kalkma */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Daha belirgin gölge */
    filter: brightness(1.1); /* Hafif parlaklık */
}

.add-button:active,
.remove-selected-button:active,
.add-new-input-button:active,
.remove-last-input-button:active,
.add-product-button:active,
.remove-product-button:active,
.add-optional-service-button:active,
.remove-optional-service-button:active {
    transform: translateY(0); /* Tıklamada geri inme */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    filter: brightness(1.0);
}

/* --- Ürün/Hizmet Bölümü Stili ve Opsiyonel Hizmetler Bölümü Stili için Ortak Kurallar --- */
.products-services-section,
.optional-services-section { 
    text-align: center;
    margin-top: 30px;
}

.products-services-section h2,
.optional-services-section h2 { 
    color: #4A00B7;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8em;
}

.products-container { /* Hem Ürün hem de Opsiyonel Hizmet konteynerleri aynı stili kullanır */
    margin-bottom: 25px;
    text-align: left;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* Her bir ürün/hizmet girdisi için satır stili */
.product-item { /* Hem Ürün hem de Opsiyonel Hizmet item'ları aynı stili kullanır */
    display: flex;
    align-items: center;
    gap: 10px; /* Elemanlar arası boşluk */
    margin-bottom: 15px;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş için */
}

.product-item input[type="text"],
.product-item input[type="number"] {
    padding: 12px 15px; /* İç boşluk */
    border: 1px solid #dcdcdc;
    border-radius: 8px; /* Biraz daha küçük yuvarlama */
    font-size: 0.95em;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-color: #fcfcfc;
    color: #333;
}

.product-item input[type="text"]:focus,
.product-item input[type="number"]:focus {
    border-color: #6A11CB;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.15); /* Daha hafif odak gölgesi */
    background-color: #ffffff;
    outline: none;
}

/* Ürün/Hizmet Adı inputu */
.product-item .product-name {
    flex: 3; /* Ad alanı daha geniş olsun */
    min-width: 150px; /* Minimum genişlik */
}

/* Adet ve Fiyat inputları */
.product-item .product-quantity,
.product-item .product-price {
    flex: 1; /* Adet ve fiyat eşit genişlikte olsun */
    min-width: 80px; /* Minimum genişlik */
}

/* Kutu içinde toplam fiyat göstergesi */
.product-item .item-total-price {
    flex: 1; /* Kutu da eşit genişlikte olsun */
    min-width: 100px; /* Minimum genişlik */
    background-color: #e8eaf6; /* Açık mor arka plan */
    border: 1px solid #c5cae9;
    border-radius: 8px;
    padding: 12px 10px;
    font-weight: 600;
    color: #3f51b5; /* Koyu mor metin */
    text-align: right; /* Fiyat sağa hizalı */
    white-space: nowrap; /* Metin tek satırda kalsın */
    box-sizing: border-box;
}

/* Dinamik Ürün/Hizmet Buton Grubu (aynı zamanda Opsiyonel Hizmetler için de geçerli) */
.button-group-products {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Toplam Fiyat Göstergesi (hem Ürün hem de Opsiyonel Hizmetler için aynı stil) */
.total-price-display {
    margin-top: 20px;
    padding: 15px 25px;
    background-color: #f3e5f5; /* Çok açık mor arka plan */
    border: 1px solid #e1bee7; /* Hafif mor kenarlık */
    border-radius: 10px;
    font-size: 1.2em;
    color: #673ab7; /* Koyu mor metin */
    font-weight: 600;
    max-width: 300px; /* Ortalamak için genişlik */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* İçindeki metni ortala */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* --- Fatura Seçenekleri Bölümü Stili --- */
.invoice-options-section {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px; /* Altta boşluk bırak */
}

.invoice-options-section h2 {
    color: #4A00B7;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8em;
}

/* Checkbox Grubu Stili */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center; /* Ortala */
    gap: 10px; /* Input ve label arası boşluk */
    margin-bottom: 20px;
}

.checkbox-group label {
    margin-bottom: 0; /* Üstteki form-group label stilini geçersiz kıl */
    cursor: pointer;
    font-size: 1em;
    color: #444;
}

/* Gizli Varsayılan Checkbox ve Özel Stil */
.checkbox-group input[type="checkbox"] {
    /* Varsayılan checkbox'ı gizle */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px; /* Özel checkbox genişliği */
    height: 24px; /* Özel checkbox yüksekliği */
    border: 2px solid #6A11CB; /* Mor kenarlık */
    border-radius: 6px; /* Hafif yuvarlak köşeler */
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.2s ease;
    background-color: #fff;
    flex-shrink: 0; /* Küçülmesini engelle */
}

/* Checkbox üzerine gelince (hover) */
.checkbox-group input[type="checkbox"]:hover {
    background-color: #f0f0f0; /* Hafif gri arka plan */
}

/* Checkbox odaklanınca (focus) */
.checkbox-group input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.3); /* Odak gölgesi */
}

/* Checkbox işaretlendiğinde (checked) */
.checkbox-group input[type="checkbox"]:checked {
    background-color: #6A11CB; /* İşaretlendiğinde mor arka plan */
    border-color: #6A11CB;
}

/* İşaretleme işareti (✓) */
.checkbox-group input[type="checkbox"]:checked::after {
    content: '✓'; /* Tik işareti */
    color: white; /* Beyaz renk */
    font-size: 1.2em; /* Boyutu */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ortala */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    display: block;
}

/* --- Logo Yükleme Bölümü Stili --- */
.logo-upload-section {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.logo-upload-section h2 {
    color: #4A00B7;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8em;
}

/* Dosya Yükleme Grubu */
.file-upload-group {
    display: flex;
    flex-direction: column; /* Alt alta hizala */
    align-items: center; /* Yatayda ortala */
    margin-bottom: 20px;
    gap: 15px; /* Etiket ve önizleme arası boşluk */
}

/* Yükleme Etiketi (Buton gibi görünmesini sağlıyoruz) */
.upload-label {
    background: linear-gradient(45deg, #1abc9c 0%, #16a085 100%); /* Yeşil tonlu gradyan */
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: inline-flex; /* İkon ve metni yan yana tutmak için */
    align-items: center;
    gap: 10px; /* İkon ile metin arası boşluk */
    white-space: nowrap; /* Metnin tek satırda kalmasını sağla */
    max-width: 90%; /* Responsive için max genişlik */
    text-align: center;
}

.upload-label:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}

.upload-label:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    filter: brightness(1.0);
}

.upload-icon {
    font-size: 1.5em; /* İkon boyutu */
}

/* Asıl dosya inputunu gizle */
.file-upload-group input[type="file"] {
    display: none;
}

/* Logo Önizleme Alanı */
.logo-preview-container {
    width: 150px;
    height: 150px;
    border: 2px dashed #ccc; /* Kesikli kenarlık */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Taşmaları gizle */
    background-color: #f9f9f9;
    color: #888;
    font-size: 0.9em;
    text-align: center;
    position: relative; /* İçindeki resim için */
}

.logo-preview-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Resmin kutuya sığmasını sağla */
}

/* Önizleme yokken gösterilecek metin */
.logo-preview-container:empty::before {
    content: 'Logo Önizlemesi';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Fiyat Özeti Bölümü Stili (Güncellendi!) --- */
.price-summary-section {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}

.price-summary-section h2 {
    color: #4A00B7;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.8em;
}

/* Genel Fiyat Özeti Kapsayıcısı */
.summary-grid {
    display: grid;
    /* Küçük ekranlarda tek sütun, daha büyük ekranlarda iki sütun */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; /* Kutular arası daha fazla boşluk */
    max-width: 550px; /* Genişliği hafifçe artırdık */
    margin: 0 auto; /* Yatayda ortala */
    padding: 25px; /* İç boşluğu artırdık */
    background-color: #f7f7f7; /* Hafif gri bir zemin */
    border-radius: 15px; /* Daha yuvarlak köşeler */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Daha belirgin bir dış gölge */
}

/* Her Bir Fiyat Kalemi Kutusu (summary-item) */
.summary-item {
    background-color: #ffffff; /* Beyaz kutu arka planı */
    border: 1px solid #e8e8e8; /* Hafif kenarlık */
    border-radius: 12px; /* Köşeleri yuvarla */
    padding: 18px 20px; /* İç boşluk */
    display: flex;
    flex-direction: column; /* İçeriği alt alta dize */
    align-items: flex-start; /* Sola hizala */
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Hafif kutu gölgesi */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-item:hover {
    transform: translateY(-3px); /* Hover'da hafif kalkma efekti */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Daha belirgin gölge */
}

.summary-item strong {
    font-size: 0.95em; /* Başlıklar biraz küçültüldü */
    color: #555; /* Daha koyu metin */
    margin-bottom: 5px; /* Değer ile arasında boşluk */
    font-weight: 600;
}

.summary-item span {
    font-size: 1.3em; /* Değerler daha büyük */
    color: #333; /* Daha belirgin değer rengi */
    font-weight: 700;
    white-space: nowrap; /* Metin tek satırda kalsın */
}

/* KDV Kutusu İçin Özel Stil */
.summary-item.vat-item {
    background-color: #ffe0b2; /* Açık turuncu arka plan */
    border-color: #ffb74d; /* Turuncu kenarlık */
}

.summary-item.vat-item strong {
    color: #e65100; /* Koyu turuncu metin */
}

.summary-item.vat-item span {
    color: #e65100; /* Koyu turuncu değer */
    font-size: 1.4em; /* KDV değeri daha büyük */
    font-weight: 800;
}

/* Genel Toplam Kutusu İçin Özel Stil */
.summary-item.total-item {
    grid-column: 1 / -1; /* Her zaman tüm sütunları kapla */
    background: linear-gradient(45deg, #4A00B7 0%, #6A11CB 100%); /* Mor gradyan arka plan */
    color: white; /* Beyaz metin */
    padding: 20px 25px;
    border: none; /* Kenarlığı kaldır */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
    text-align: center; /* İçeriği ortala */
    flex-direction: column; /* İçeriği alt alta dize */
    align-items: center; /* Yatayda ortala */
    font-size: 1.5em; /* Daha büyük genel toplam */
    margin-top: 10px; /* Diğer kutulardan biraz boşluk */
}

.summary-item.total-item strong {
    color: white; /* Beyaz başlık */
    font-size: 1em; /* Normalden biraz büyük başlık */
    margin-bottom: 8px; /* Değer ile arasında boşluk */
}

.summary-item.total-item span {
    color: white; /* Beyaz değer */
    font-size: 1.8em; /* Genel toplam değeri en büyük */
    font-weight: 900;
}

/* --- Formu Gönder Butonunun Stili --- (Mevcut haliyle kalacak, sadece responsive ayarına dikkat) */
.submit-section {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

.submit-button {
    background: linear-gradient(45deg, #4CAF50 0%, #388E3C 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    letter-spacing: 1px;
}

.submit-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.submit-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    filter: brightness(1.0);
}

/* Responsive ayarlamalar (Güncellendi!) */
@media (max-width: 600px) {
    .button-group-dynamic,
    .button-group-products {
        flex-direction: column;
        gap: 15px;
    }
    .add-new-input-button,
    .remove-last-input-button,
    .add-product-button,
    .remove-product-button,
    .add-optional-service-button,
    .remove-optional-service-button {
        width: 100%;
    }

    .product-item {
        flex-direction: column;
        align-items: stretch;
    }
    .product-item input,
    .product-item .item-total-price {
        width: 100%;
        min-width: unset;
    }
    .product-item .product-name { order: 1; }
    .product-item .product-quantity { order: 2; }
    .product-item .product-price { order: 3; }
    .product-item .item-total-price { order: 4; }

    .checkbox-group {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .upload-label {
        width: 100%;
        padding: 12px 20px;
        font-size: 1em;
    }


    .summary-grid {
        grid-template-columns: 1fr; 
        padding: 15px;
        max-width: 90%; 
    }
    .summary-item.total-item {
        grid-column: 1 / 1; 
    }
    .submit-button {
        width: 90%; 
        padding: 12px 25px;
        font-size: 1.1em;
    }
}
/* style.css dosyasının en altına ekleyin */

.form-row {
    display: flex;
    gap: 20px; /* İki kutu arası boşluk */
    justify-content: space-between;
}

.half-width {
    flex: 1; /* Eşit genişlikte olsunlar */
    width: 100%;
}

/* Mobilde yine alt alta geçsinler */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}