/* Yükleme ekranı konteyneri... yükleniyor logosu bşla*/
        #loading-overlay {
            position: fixed; /* Ekranın üzerinde sabit kalır */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95); /* Hafif şeffaf beyaz arka plan */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Diğer tüm elementlerin üzerinde görünmesini sağlar */
            transition: opacity 1s ease-out; /* Yumuşak geçiş için */
        }

        /* Yükleme logosu */
        #loading-logo {
            max-width: 450px; /* Logonuzun boyutunu ayarlayın */
            height: auto;
            animation: fadeAndPulse 2s infinite alternate; /* Animasyon: yanar söner */
            /* --- YENİ EKLENEN KISIMLAR --- */
            transform-origin: center center; /* Ölçeklemenin tam merkezden yapılmasını sağlar */
            will-change: transform, opacity; /* Tarayıcıya bu özelliklerin değişeceğini bildirir */
            /* transform: translateZ(0); /* Bazı durumlarda donanım hızlandırmayı tetikler */
            /* --- YENİ EKLENEN KISIMLAR SONU --- */
        }

        /* Animasyon tanımlaması */
        @keyframes fadeAndPulse {
            0% {
                opacity: 0.7;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.02);
            }
            100% {
                opacity: 0.7;
                transform: scale(1);
            }
        }



		
		
/* Yükleme ekranı konteyneri... yükleniyor logosu son*/		
		





/* Ana Sayfa Butonu Stilleri */
.home-button {

    top: 0px; /* Üstten boşluk */
    left: 0px; /* Soldan boşluk */
    background-color: #5cb85c; /* Yeşil bir arka plan */
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none; /* Alt çizgiyi kaldır */
    font-weight: normal;
	font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 8px; /* İkon ve metin arası boşluk */
    transition: background-color 0.2s ease, transform 0.1s ease;
    z-index: 10; /* Diğer elementlerin üstünde görünmesini sağla */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Hafif gölge */
	margin-bottom: 5px;
}

.home-button:hover {
    background-color: #4cae4c;
    transform: translateY(-1px);
}

.home-button:active {
    transform: translateY(0);
}

.home-button i {
    font-size: 1.1em;
}

/* Responsive ayarlamalar için, küçük ekranlarda butonu başlığın altına taşıyabiliriz */
@media (max-width: 1024px) {
    .home-button {
        position: static; /* Statik konuma geri dön */
        margin-bottom: 5px; /* Başlıkla arasında boşluk */
        width: fit-content; /* İçeriğine göre genişlik */
        align-self: flex-start; /* Sola hizala */
    }
    .container {
        align-items: flex-start; /* İçerikleri sola hizala */
    }
    h1 {
        margin-top: 0; /* Buton üstte olduğu için başlığın üst boşluğunu kaldır */
    }
}

@media (max-width: 768px) {
    .home-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    .home-button i {
        font-size: 1em;
    }
}


body {
	/* overflow: hidden;   Sayfa kaydırmayı engelle (yükleme sırasında).. çünkü logo animasyonu var */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}

.container {
	display: none; /* Başlangıçta gizli..çünkü logo animasyonu yapacağız... */  
    display: flex;
    flex-wrap: wrap; /* Küçük ekranlarda alta geçiş için */
    gap: 5px;
    background-color: #ffffff;
    padding: 6px;   /* Padding, bir elementin içeriği ile kenarlığı (border) arasındaki boşluğu ifade eder. Margin, bir elementin kenarlığı (border) ile dışındaki diğer elementler arasındaki boşluğu ifade eder. */
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    min-width: 97%; /* Ekranın en az yüzde 96 sı olsun...max-width: 1400px; idi. fakat yüklenen resimde maksimum ekranın 95% (js de kayıtlı) i yaptık. */
    width: 100%;
}

h1 {
    width: 100%;
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 2em;
}

.controls-section {
    flex: 1; /* Esnek boyutlandırma */
    min-width: 300px; /* Minimum genişlik */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.control-panel {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.control-panel h2 {
    color: #555;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Sürükle-Bırak Alanı Stilleri */
.drop-zone {
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: #555;
    background-color: #eaf5ff;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 15px; /* Altındaki butondan biraz boşluk */
    position: relative;
    overflow: hidden; /* input'un dışarı taşmasını engelle */
}

.drop-zone:hover {
    background-color: #dbeaff;
    border-color: #0056b3;
}

.drop-zone p {
    margin: 5px 0;
}

.drop-zone i {
    font-size: 2em;
    color: #007bff;
    margin-bottom: 10px;
}

#imageLoader {
    display: none; /* Gizli dosya inputu */
}


#cameraInput {
    display: none; /* Gizli dosya inputu */
}





#imageLoaderObjeResim {  /* Obje Olarak resim yükleme */
    display: none; 
}


#cameraInputObjeResim {  /* Obje Olarak resim yükleme */
    display: none; 
}

.custom-file-upload-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.custom-file-upload-button:hover {
    background-color: #0056b3;
}

.mobile-hint {
    font-size: 0.8em;
    color: #777;
    margin-top: 10px;
}


.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş */
}

.input-group label {

/* flex-basis: 250px; /* Sabit genişlik  <-- BU SABİT DEĞERİ KALDIRIYORUZ */

    /* flex-grow: 1; /* Etiketin kalan tüm alanı kaplamasını sağlar */
    /* Veya sadece flex-basis'i kaldırarak tarayıcının varsayılan değerini kullanabilirsiniz,
       ancak flex-grow: 1, amacınızı net olarak belirtir. */


width: 100%;
	   
    color: #444;
    font-weight: 500;
}


/* 3. Range Input ve Değer Span'ını İçeren Yeni Bir Flex Konteyner Oluşturun (ÖNEMLİ ADIM) */
.range-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Kaydırıcı ile değer arasındaki boşluk */
    width: 100%; /* Tam genişlikte olmasını sağlayın */
}

/* 4. Range Input'un Kalan Tüm Alanı Kaplamasını Sağlayın */
.range-container input[type="range"] {
    flex-grow: 1; /* Range kontrolünün sağdaki değeri iterek tüm genişliği kaplamasını sağlar */
    width: auto; /* Otomatik genişlik, flex-grow ile çalışır */
}

/* Span değeri ayarı */
.range-container .range-value {
    flex-shrink: 0; /* Değerin asla küçülmemesini sağlar */
    min-width: 30px; /* Okunabilirliği garanti etmek için */
    text-align: right;
}

.input-group input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
}

.input-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.input-group input[type="color"]::-webkit-color-swatch {
    border: 1px solid #ccc;
    border-radius: 4px;
}
.input-group input[type="color"]::-moz-color-swatch-wrapper {
    padding: 0;
}
.input-group input[type="color"]::-moz-color-swatch {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group .color-label {
    width: 35px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
}

.input-group input[type="range"] {
    flex-grow: 1; /* Mevcut alanı doldur */
    height: 8px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

.input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.input-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.range-value {
    margin-left: 10px;
    font-weight: bold;
    color: #333;
    min-width: 20px; /* Değer için yeterli boşluk bırak */
    text-align: right;
}

/* input[type="file"], (artık gizli)*/
textarea,
select {
    flex-grow: 1; /* Mevcut alanı doldur */
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Padding'in genişliğe dahil olmasını sağla */
}

textarea {
    resize: vertical;
    min-height: 40px;
    max-height: 80px;
}







/* style.css dosyanıza ekleyebilirsiniz */
.icon-gallery {
    display: flex; /* İkonları yan yana hizala */
    flex-wrap: wrap; /* Sığmazsa alt satıra geç */
    justify-content: center; /* Ortala */
}

.icon-thumbnail {
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Fare üzerine gelince efekt */
}

.icon-thumbnail:hover {
    transform: scale(1.1); /* Fare üzerine gelince büyüt */
    border-color: #007bff; /* Mavi kenarlık */
}








.action-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%; /* Tam genişlik */
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

.action-button:active {
    transform: translateY(0);
}

.action-button.active {
    background-color: #28a745; /* Aktif olduğunda yeşil */
}

.action-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.object-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.icon-button {
    width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background-color: #6c757d;
}

.icon-button:hover {
    background-color: #5a6268;
}

.object-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.object-actions .action-button {
    flex: 1; /* Eşit genişlik dağılımı */
}


#measuredDistance {
    font-weight: bold;
    color: #007bff;
    margin-top: 10px;
    display: block;
    text-align: center;
    font-size: 1.1em;
}

.canvas-section {
    flex: 2; /* Canvas alanı daha geniş */
    min-width: 600px; /* Minimum genişlik */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: #fff;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#drawingCanvas {
    border: 2px solid #ddd;
    border-radius: 5px;
    background-color: #fefefe;
    max-width: 100%; /* Responsive canvas */
    height: auto; /* Oranları koru */
}

.message-box {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    min-height: 40px; /* Sabit yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.message-box.info {
    background-color: #e7f3ff;
    color: #0056b3;
    border: 1px solid #b3d7ff;
}

.message-box.error {
    background-color: #ffe0e0;
    color: #cc0000;
    border: 1px solid #ffb3b3;
}

.message-box.success {
    background-color: #e6ffe6;
    color: #009900;
    border: 1px solid #b3ffb3;
}











.main-tool-buttons {
    display: flex;
    justify-content: center; /* Butonları ortala */
    gap: 10px; /* Butonlar arasında boşluk */
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 8px;
    background-color: #f0f0f0; /* Hafif bir arkaplan */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-tool-buttons .icon-button {
    background-color: #007bff; /* Mavi butonlar */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 8px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Sabit genişlik */
    height: 50px; /* Sabit yükseklik */
	flex-wrap: wrap; /* Eğer butonlar çok fazla olursa ve tek bir satıra sığmazlarsa, otomatik olarak alt satıra geçmelerini sağlar. */
}

.main-tool-buttons .icon-button:hover {
    background-color: #0056b3;
}

.main-tool-buttons .icon-button i {
    margin: 0; /* Font Awesome ikonlarının varsayılan marginlerini sıfırla */
}




/* --- Yeni Eklenecek Kural: Aktif Buton Stili --- */
.main-tool-buttons .icon-button.active {
    background-color: #28a745; /* Yeşil tonu */
    /* Diğer aktif stil ayarları (isteğe bağlı, zaten 'color: white' var) */
    /* color: white; */
    /* border-color: #28a745; */
    /* box-shadow: 0 0 8px rgba(40, 167, 69, 0.7); /* Daha belirgin bir gölge */
}










/* Responsive Düzenlemeler */
@media (max-width: 1024px) {    /* Bu kod bloğu, ekran genişliği 1024 piksel ve altındayken geçerlidir...mobil ekran */
    .container {
        flex-direction: column;
        align-items: center;
    }

    .controls-section,
    .canvas-section {
        min-width: unset; /* Minimum genişlik kısıtlamasını kaldır */
        width: 100%;
    }

    #drawingCanvas {
        max-width: 100%;
        height: auto;
    }
	
	
.main-tool-buttons {
        /*
         * Butonlar arasında boşluk bırakır,
         * ancak butonlar alt satıra geçtiğinde bu boşluğu korur.
         */
        gap: 5px; 
    }
    
    .main-tool-buttons .icon-button {
        /*
         * Buton boyutunu küçült.
         * Sabit genişlik yerine daha esnek bir boyut verebilirsin.
         */
        width: 45px; 
        height: 45px; 
        padding: 5px; /* İç boşluğu küçült */
        font-size: 1em; /* Yazı ve ikon boyutunu küçült */
    }
	
	
}





@media (max-width: 768px) {    /* Bu blok ise ekran genişliği 768 piksel ve altındayken geçerli olur. Bu, tipik olarak akıllı telefonlar ve küçük tabletler içindir....mobil ekran */
    h1 {
        font-size: 1.8em;
    }

    .control-panel {
        padding: 10px;
    }

    .control-panel h2 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .input-group label {
        flex-basis: unset;
        width: 100%;
    }

    .action-button {
        padding: 8px 10px;
        font-size: 0.95em;
    }

    .icon-button {
        width: 40px;
        height: 40px;
        font-size: 1.1em;
    }
	
	
.main-tool-buttons {
        /*
         * Butonlar arasında boşluk bırakır,
         * ancak butonlar alt satıra geçtiğinde bu boşluğu korur.
         */
        gap: 5px; 
    }
    
    .main-tool-buttons .icon-button {
        /*
         * Buton boyutunu küçült.
         * Sabit genişlik yerine daha esnek bir boyut verebilirsin.
         */
        width: 45px; 
        height: 45px; 
        padding: 5px; /* İç boşluğu küçült */
        font-size: 1em; /* Yazı ve ikon boyutunu küçült */
    }
	
    .button-text {   /* çok küçük ekran olduğu için yanındaki yazıları sil... */
        display: none;
    }
	
}













.yardimci-tool-buttons {
    display: flex;
    justify-content: center; /* Butonları ortala */
    gap: 10px; /* Butonlar arasında boşluk */
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    background-color: #f0f0f0; /* Hafif bir arkaplan */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.yardimci-tool-buttons .icon-button {
    background-color: #e06666; /* açık kırmızı tonu */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 5px;
    font-size: 0,9em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Sabit genişlik */
    height: 30px; /* Sabit yükseklik */
	flex-wrap: wrap; /* Eğer butonlar çok fazla olursa ve tek bir satıra sığmazlarsa, otomatik olarak alt satıra geçmelerini sağlar. */
}

.yardimci-tool-buttons .icon-button:hover {
    background-color: #b54747;  /* koyu kırmızı tonu */
}

.yardimci-tool-buttons .icon-button i {
    margin: 0; /* Font Awesome ikonlarının varsayılan marginlerini sıfırla */
}


/* --- Yeni Eklenecek Kural: Aktif Buton Stili --- */
.yardimci-tool-buttons .icon-button.active {
    background-color: #b54747; /* koyu kırmızı tonu */
    /* Diğer aktif stil ayarları (isteğe bağlı, zaten 'color: white' var) */
    /* color: white; */
    /* border-color: #28a745; */
    /* box-shadow: 0 0 8px rgba(40, 167, 69, 0.7); /* Daha belirgin bir gölge */
}








    .button-group {
        display: flex; /* İçindeki öğeleri esnek kutu olarak hizala */
        gap: 10px; /* Düğmeler arasına boşluk ekle (isteğe bağlı) */
        flex-wrap: wrap; /* Eğer çok fazla düğme olursa bir sonraki satıra geçsin (isteğe bağlı) */
        justify-content: center; /* Düğmeleri yatayda ortala (isteğe bağlı) */
        align-items: center; /* Düğmeleri dikeyde ortala (isteğe bağlı) */
    }

    /* Eğer butonların genişlikleri farklıysa ve aynı boyutta olmalarını isterseniz */
    .button-group .action-button {
        flex-grow: 1; /* Mevcut alanı doldurmaya çalış */
        flex-shrink: 1; /* Gerekirse küçülsün */
        flex-basis: 0; /* Başlangıç boyutunu sıfırla, eşit dağılmasına yardımcı olur */
        /* Veya belirli bir min-width vererek */
        /* min-width: 100px; */
    }
	
	
	
	
	






/* Tippy.js Tooltip Kutusu Stil Değişikliği */
.tippy-box {
    /* Arka plan rengi ve opaklığı */
    background-color: rgba(51, 51, 51, 0.85); /* rgba ile son değer (0.85), opaklığı ayarlar */
    
    /* İPUCU: Varsayılan siyah/koyu gri (#333) rengini kullanmak için: */
    /* İlk üç değer: Kırmızı (51), Yeşil (51), Mavi (51) */
    /* Dördüncü değer (0.85): Opaklık (1.0 tamamen opak, 0.0 tamamen saydamdır) */
}

/* İPUCU: Tooltip'in içinde ok varsa, onun opaklığını da eşitleyin */
.tippy-arrow {
    color: rgba(51, 51, 51, 0.85);
}

/* İPUCU: Tooltip içinde beyaz yazı istiyorsanız (varsayılan) */
.tippy-content {
    color: #fff;
    /* Font büyüklüğü gibi diğer şeyleri de buradan ayarlayabilirsiniz */
    /* font-size: 13px; */
}




/* galeri resimler için : Bu CSS SweetAlert2 penceresinin genişliğini ayarlar */
.swal2-popup {
    /* JavaScript'te 'width: 80%' zaten bu ayarı yapıyor, ancak bu sınıf daha esnek bir kontrol sağlar. */
    max-width: 80vw !important; /* Görüntü alanının %80'i */
    width: 80% !important; 
}

/* Modal içindeki galeri alanı için kaydırma çubuğu */
#galeri-icerik {
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Resim önizlemelerinin boyutunu daha belirgin yaptık */
.resim-secenek img {
    width: 150px !important;
    height: 100px !important;
}