/* css/kaporta-gorsel.css */

/* Form ve görseli yan yana getiren ana kapsayıcı */
.kaporta-form-container {
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçmesini sağlar */
    gap: 30px;       /* Form ve görsel arası boşluk */
    align-items: flex-start;
}

/* Form seçeneklerinin olduğu sol taraf */
.kaporta-grid {
    flex: 2;         /* Form alanına daha fazla yer ver */
    min-width: 300px;/* Minimum genişlik */
}

.kaporta-box {
    margin-bottom: 10px;
}

.kaporta-box hr {
    border: 0;
    border-top: 1px solid #f0f0f0;
}

/* Görselin olduğu sağ taraf */
.kaporta-gorsel-wrapper {
    flex: 1;
    min-width: 250px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    /* "Yapışkan" pozisyon, sayfa kaydırılsa bile görünür kalmasını sağlar */
    position: sticky; 
    top: 20px;
}

.kaporta-gorsel-wrapper svg {
    width: 100%;
    height: auto;
}

/* SVG parçaları için temel stil ve animasyon */
.kaporta-gorsel-wrapper svg path[id] {
    transition: fill 0.3s ease;
}

/* --- İstenen Renk Sınıfları --- */

/* Başlangıç ve belirtilmemiş durumu için */
.belirtilmemis {
    fill: #c8c8c8; /* Nötr Gri Renk */
}

/* Orijinal durumu için */
.orjinal {
    fill: #28a745 !important; /* Yeşil */
}

/* Boyalı durumu için */
.boyali {
    fill: #fd7e14 !important; /* Turuncu */
}

/* Değişen durumu için */
.degisen {
    fill: #dc3545 !important; /* Kırmızı */
}

/* Genel Kaydet Butonu */
.kaydet-button {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.kaydet-button:hover {
    background-color: #0056b3;
}