/* GÜNCELLENMİŞ style.css KODU */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f2f5; margin: 0; padding: 10px; box-sizing: border-box; }
.container { 
	background: #ffffff; 
	padding: 15px; 
	border-radius: 12px; 
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
	text-align: center; 
	max-width: 800px; 
	width: 100%; 
}
h1 { color: #28a745; margin-top: 0; margin-bottom: 10px; }
.controls { margin-top: 15px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }

button {
    background-color: #28a745; /* Ana Yeşil Renk */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500; /* Yazıyı biraz daha dolgun yapalım */
    cursor: pointer;
    border: none;
    border-radius: 6px;
    transition: all 0.2s;
    display: inline-flex; /* İkon ve metni hizalamak için */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Metin ve ikon arası boşluk */
}

button:hover:not(:disabled) {
    background-color: #218838; /* Hover için daha koyu yeşil */
    transform: translateY(-2px); /* Hafif yukarı kalkma efekti */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button:active:not(:disabled) {
    transform: translateY(0); /* Tıklama anında eski yerine dönsün */
    box-shadow: none;
}

button:disabled {
    background-color: #a5d6a7; /* Soluk yeşil */
    color: #e8f5e9; /* Çok soluk yazı rengi */
    opacity: 0.7; /* Opaklığı da biraz düşürelim */
    cursor: not-allowed !important;
}

.hidden { display: none !important; }
.view-section { display: none; }
.view-section.active { display: block; }

.view-section { 
    display: none; 
    opacity: 0; /* Başlangıçta tamamen şeffaf olsun */
    transition: opacity 0.3s ease-in-out; /* Opaklık değişimine yumuşak geçiş ekle */
}
.view-section.active { 
    display: block; 
    opacity: 1; /* Aktif olduğunda opaklığı 1 yap */
}

button.btn-destructive {
    background-color: #dc3545; /* Kırmızı */
}
button.btn-destructive:hover:not(:disabled) {
    background-color: #c82333; /* Koyu Kırmızı */
}
button.btn-destructive:disabled {
    background-color: #f1b0b7; /* Soluk Kırmızı */
    color: #fce4e6;
}

#qa-view .result-home-action {
    margin-top: 20px;
    text-align: center;
}

/* Genel amaçlı ikincil buton stili */
button.btn-secondary {
    background-color: #f8f9fa; /* Açık gri arkaplan */
    color: #495057; /* Koyu gri metin */
    border: 1px solid #dee2e6; /* İnce bir kenarlık */
    font-weight: 500;
    box-shadow: none;
	padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
}

button.btn-secondary:hover:not(:disabled) {
    background-color: #e9ecef; /* Hover için biraz daha koyu gri */
    border-color: #ced4da;
    transform: translateY(-2px); /* Diğer butonlarla tutarlı efekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

button.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}


/* ... (Aşama 1 ve 2 stilleri aynı kalacak) ... */
/* Aninda Analiz çekim ekrani */
#asama1-view .camera-wrapper { position: relative; width: 640px; height: 360px; margin: 15px auto; border-radius: 8px; overflow: hidden; background: #000; max-width: 100%; }
#asama1-view .camera-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Bu sihirli satır, videonun en-boy oranını bozmadan
     kapsayıcıyı doldurmasını sağlar ve "basıklaştırmayı" engeller. */
  object-fit: cover; 
}

#asama1-view video, #asama1-view #canvas1 { display: block; width: 100%; height: 100%; object-fit: cover; }
#asama1-view #face-overlay { position: absolute; top: 50%; left: 50%; width: 280px; height: 380px; transform: translate(-50%, -50%); border: 3px dashed rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); pointer-events: none; display: block; }
#asama1-view #scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(144,238,144,0.8) 50%, rgba(255,255,255,0) 100%); box-shadow: 0 0 15px 5px rgba(40, 167, 69, 0.7); display: none; animation: a1_scan 1.5s ease-in-out; }
@keyframes a1_scan { from { top: -10px; } to { top: 100%; } }
#asama1-view .controls { min-height: 50px; }
#asama1-view button { margin: 5px; padding: 12px 25px; }
#asama1-view .container > p { margin-top: 0; margin-bottom: 4px; }
#asama1-view p { margin-bottom: 8px; }
#asama1-view .info-text { font-size: 14px; color: #555; }
#asama1-view .info-text-highlight { font-weight: bold; color: #28a745; }
#asama1-view #a1_status-text { font-weight: bold; }

#asama2-view .camera-wrapper { 
	position: relative; 
	/* width: 640px; */
	margin: 5px auto 10px auto; 
	border-radius: 8px; 
	overflow: hidden; 
	background: #000; 
	max-width: 100%; 
}
#asama2-view canvas { 
	display: block; 
	width: auto%;
	max-width: 100%;
	height: auto; 
	object-fit: contain; 
	cursor: crosshair; 
}
#asama2-view .instruction-text p { margin-top: 0; margin-bottom: 3px; }
#asama2-view #a2_marked-points-container {
    max-height: 0; /* Başlangıçta yüksekliği sıfır */
    opacity: 0;
    overflow: hidden; /* İçerik taşmasın */
    margin-top: 0;
    transition: max-height 0.5s ease-out, opacity 0.3s ease-in, margin-top 0.5s ease-out; /* Geçişleri tanımla */
}
/* Konteyner görünür hale geldiğinde */
#asama2-view #a2_marked-points-container:not(.results-hidden) {
    max-height: 650px; /* İçeriğin sığabileceği kadar büyük bir maksimum yükseklik ver */
    opacity: 1;
    margin-top: 15px; /* Tekrar üst boşluğunu ver */
}
#asama2-view #a2_detailed-analysis-results,
#asama2-view #a2_marked-points-list-container {
    text-align: left;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 150px; 
    overflow-y: auto;  
}
#asama2-view #a2_marked-points-list {
    list-style-type: none;
    padding: 0;
    margin-top: 5px;
    font-family: 'Courier New', Courier, monospace;
}
#asama2-view #a2_marked-points-list li {
    padding: 4px 0;
    font-size: 14px;
}
#asama2-view .instruction-text { margin-bottom: 0px; }
#asama2-view .analysis-workspace { display: flex; justify-content: center; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 15px; }
#asama2-view #a2_filter-preview-container { flex: 1; min-width: 280px; max-width: 320px; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; text-align: center; }
#asama2-view #a2_filter-preview-canvas { max-width: 100%; height: auto; border: 1px solid #ccc; background-color: #000; margin-bottom: 15px; }
#asama2-view #a2_filter-controls-container { margin-top: 10px; }
#asama2-view .param-group { text-align: left; margin-bottom: 10px; }
#asama2-view .optimum-note { font-size: 12px; color: #6c757d; display: block; text-align: center; margin-top: -5px; margin-bottom: 10px; }

/* Aşama 2 - Detaylı Analiz Sonuçları */
.analysis-result-item {
    margin-bottom: 15px; /* Her bir nokta analizi arasına boşluk koy */
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.analysis-result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.advanced-insights {
    margin-top: 10px;
    padding: 10px;
    background-color: #e6ffed; /* Hafif yeşil bir arkaplan */
    border-left: 4px solid #28a745; /* Solunda vurgu çizgisi */
    border-radius: 4px;
}
.advanced-insights b {
    display: block;
    margin-bottom: 5px;
}
.advanced-insights ul {
    list-style-type: '» '; /* Özel madde imi */
    padding-left: 20px;
    margin: 0;
    font-style: italic;
    color: #333;
}

/* Sonuçlar konteynerine varsayılan bir minimum yükseklik verelim */
#asama2-view #a2_marked-points-container {
    min-height: 50px; /* Bu, konteyner boşken bile bir miktar yer kaplamasını sağlar */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Yumuşak bir geçiş için */
}

/* .results-hidden class'ı artık sadece bir belirteç, asıl işi yukarıdaki kurallar yapıyor */
/* Bu yüzden eski .results-hidden kuralını silebilir veya boş bırakabilirsiniz. */
#asama2-view #a2_marked-points-container.results-hidden {
	 /* Bu class sadece JS'in durumu anlaması için var, içi boş kalabilir. */
}

#asama2-view .controls {
  display: flex;
  justify-content: center;
  align-items: center; /* Bu kural dikeyde mükemmel hizalama sağlar */
  gap: 10px;           /* Butonlar arasına boşluk ekler */
  flex-wrap: wrap;     /* Küçük ekranlarda butonların alt satıra geçmesini sağlar */
}

/* --- Aşama 3 (Günlük) Stilleri --- */
#asama3-view #a3_compare-button { background-color: #6c757d; color: white; }
#asama3-view #a3_compare-button:not(:disabled) { background-color: #28a745; }
#asama3-view #a3_diary-list { list-style-type: none; padding: 0; max-height: 60vh; overflow-y: auto; margin-top: 20px; }
#asama3-view .diary-entry { display: flex; align-items: flex-start; gap: 15px; padding: 15px; margin-bottom: 10px; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; text-align: left; cursor: pointer; transition: all 0.2s; }
#asama3-view .diary-entry:hover { background-color: #e9ecef; }
#asama3-view .diary-entry.selected { background-color: #e6ffed; border-color: #28a745; box-shadow: 0 0 8px rgba(40, 167, 69, 0.3); }
#asama3-view .diary-entry img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid #ccc; }
#asama3-view .diary-entry-details h4 { margin: 0 0 5px 0; }
#asama3-view .diary-entry-details ul { margin: 0; padding-left: 20px; font-size: 14px; }
#asama3-view .diary-entry-details small { font-size: 12px; color: #6c757d; display: block; margin-top: 5px;}
#asama3-view .edited-tag { color: #ff9800; font-style: italic; font-size: 13px; }

/* Aşama 3 - Günlük Özeti */
.diary-insight {
    font-style: italic;
    color: #285a38; /* Koyu yeşil tonu */
    margin: 5px 0 10px 0;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
}
.na-text {
    color: #888; 
    font-style: italic;
}

/* --- Karşılaştırma Ekranı Stilleri (GÜNCELLENMİŞ) --- */
#comparison-view .comparison-pair { display: flex; justify-content: space-around; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
#comparison-view .comparison-item { flex-basis: 45%; min-width: 280px; }
#comparison-view .comparison-item img { width: 100%; height: auto; border-radius: 8px; border: 1px solid #ccc; }
#comparison-view .comparison-item .point-selectors { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }

/* YENİ STİLLER: Sayı butonlarının daha şık görünmesi için */
#comparison-view .point-selector-btn { 
    background-color: #f0f2f5; 
    border: 2px solid #fffa22;
    color: #333; 
    font-size: 14px; 
    cursor: pointer; 
    transition: all 0.2s; 
    min-width: 32px; /* Genişlik */
    min-height: 32px; /* Yükseklik */
    border-radius: 50%; /* Yuvarlak yapmak için */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* İç boşluğu sıfırla */
}
#comparison-view .point-selector-btn.active { 
    background-color: #28a745; 
    color: white; 
    border-color: #28a745; 
    font-weight: bold; 
}
/* ----- */

#comparison-view .comparison-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; font-size: 14px; }
#comparison-view .comparison-table th, #comparison-view .comparison-table td { border: 1px solid #dee2e6; padding: 8px 12px; text-align: center; vertical-align: middle; }
#comparison-view .comparison-table th { background-color: #f8f9fa; }
#comparison-view .comparison-table th small { font-weight: normal; color: #555; }
#comparison-view .comparison-table td:first-child { text-align: left; font-weight: bold; }
#comparison-view .comparison-table .na-text { color: #999; font-style: italic; }
#comparison-view .comparison-table .change-indicator { font-weight: bold; }
#comparison-view .comparison-table .change-indicator.positive { color: #dc3545; }
#comparison-view .comparison-table .change-indicator.negative { color: #28a745; }
#comparison-view .comparison-graph { margin-top: 20px; height: 250px; }
#comparison-view .graph-controls { margin-bottom: 10px; }
#comparison-view #metric-selector { padding: 5px; border-radius: 4px; margin-left: 10px; }

/* ... (Aşama 4 stilleri aynı kalacak) ... */
#asama4-view .settings-container { text-align: left; max-width: 450px; margin: 20px auto; }
#asama4-view .settings-group { margin-bottom: 15px; }
#asama4-view .settings-group p { font-weight: bold; margin-bottom: 10px; }
#asama4-view #a4_settings-form-metrics,
#asama4-view #a4_settings-form-filters {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px 20px;
}
#asama4-view .checkbox-label,
#asama4-view .radio-label {
    display: flex;
    align-items: center;
    padding: 4px 0; 
    cursor: default;
}
#asama4-view .checkbox-label:hover,
#asama4-view .radio-label:hover { background-color: transparent; }
#asama4-view .checkbox-label span,
#asama4-view .radio-label span { cursor: pointer; }
#asama4-view .checkbox-label input,
#asama4-view .radio-label input { margin-right: 12px; transform: scale(1.3); accent-color: #28a745; cursor: pointer; }

/* --- Genel Bileşenler --- */
.toast-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 15px 25px; border-radius: 8px; color: white; font-size: 16px; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease; }
.toast-notification.show { opacity: 1; visibility: visible; bottom: 30px; }
.toast-notification.success { background-color: #28a745; }
.toast-notification.error { background-color: #dc3545; }
.toast-notification.info { background-color: #17a2b8; }

/* FOUC Hatası için Düzeltilmiş Modal Stili */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.modal-overlay.show { display: flex; opacity: 1; visibility: visible; }
.modal-content { background: white; padding: 25px 30px; border-radius: 12px; text-align: center; max-width: 400px; width: 90%; transform: scale(0.9); transition: transform 0.2s ease; }
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-content p { margin: 0 0 20px 0; font-size: 18px; color: #333; }
.modal-buttons { display: flex; justify-content: center; gap: 15px; }
.modal-button { padding: 10px 25px; font-size: 16px; border-radius: 6px; border: none; cursor: pointer; }
.modal-confirm-button { background-color: #dc3545; color: white; }
.modal-cancel-button { background-color: #6c757d; color: white; }
#loading-overlay .loading-content { background: white; padding: 30px 40px; border-radius: 12px; text-align: center; max-width: 400px; width: 90%; }
#loading-overlay p { margin: 0 0 20px 0; font-size: 18px; font-weight: bold; color: #333; }
.progress-bar { width: 100%; height: 15px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; }
.progress-bar-inner { width: 100%; height: 100%; background: linear-gradient(90deg, #4caf50, #81c784, #4caf50); background-size: 200% 100%; animation: progress-animation 1.5s linear infinite; border-radius: 10px; }
@keyframes progress-animation { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* asama4.js için yeni stiller */
#asama4-view .settings-form-advanced {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px 20px;
}
#asama4-view .slider-label {
    display: flex;
    flex-direction: column; /* Etiketi, slider'ı ve açıklamayı alt alta diz */
    align-items: flex-start; /* Elemanları sola hizala */
    margin-bottom: 20px;
}
#asama4-view .slider-label span {
    margin-bottom: 8px; /* Slider ile etiket arasına boşluk koy */
    font-weight: 500;
}
#asama4-view .slider-label input[type="range"] {
    width: 100%; /* Slider'ın genişliğini tam yap */
    accent-color: #28a745;
}
#asama4-view .slider-label small {
    margin-top: 8px; /* Slider ile açıklama arasına boşluk koy */
    font-size: 13px;
    color: #6c757d;
}

/* --- Karşılaştırma Ekranı - Yeni Stiller --- */

#comparison-view .comparison-summary {
    text-align: left;
    padding: 15px 20px;
    margin: 20px 0;
    border-left: 5px solid #28a745;
    background-color: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

#comparison-view .comparison-summary h4 {
    margin-top: 0;
    color: #333;
}

#comparison-view .comparison-summary p {
    font-size: 16px;
    margin-bottom: 10px;
}

#comparison-view .comparison-summary ul {
    list-style-type: '✓ ';
    padding-left: 20px;
    margin: 0;
}

#comparison-view .comparison-summary li {
    padding-left: 8px;
    margin-bottom: 5px;
}

.summary-positive {
    color: #28a745;
    font-weight: bold;
}

.summary-negative {
    color: #dc3545;
    font-weight: bold;
}

/* Tablodaki değişim göstergesini daha detaylı hale getirelim */
#comparison-view .comparison-table .change-indicator small {
    display: block;
    font-size: 11px;
    color: #555;
    font-weight: normal;
}

/* --- Asama 2: Not Alanı Stili --- */
#asama2-view .note-container {
    text-align: left;
    margin: 15px 0;
    padding: 0 15px;
}

#asama2-view .note-container h4 {
    margin-bottom: 8px;
    color: #333;
}

#asama2-view #a2_note-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit; /* body'nin fontunu kullan */
    box-sizing: border-box; /* padding ve border genişliği etkilemesin */
    resize: vertical; /* Sadece dikeyde boyutlandırılsın */
}

/* --- Asama 3: Günlükteki Not Stili --- */
#asama3-view .diary-note {
    font-size: 14px;
    background-color: #fffbe6; /* Hafif sarı bir arkaplan */
    border-left: 4px solid #ffc107; /* Solunda vurgu çizgisi */
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    color: #5a523a;
}

#asama3-view .diary-note strong {
    color: #856404;
}

/* --- Trend Analizi Ekranı Stilleri (YENİ) --- */

#trend-view h1 {
    color: #28a745;
}

#trend-view .graph-controls {
    margin-bottom: 20px;
    font-size: 16px;
}

#trend-view #trend-metric-selector {
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 6px;
    margin-left: 10px;
    border: 1px solid #ccc;
}

#trend-view #trend-chart-container {
    width: 100%;
    height: 400px; /* Grafiğe geniş bir alan verelim */
    margin-bottom: 20px;
}

#trend-view #trend-summary-container .trend-summary-text {
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    margin-top: 20px;
    border-left-width: 5px;
    border-left-style: solid;
}

#trend-view #trend-summary-container .trend-summary-text.positive {
    background-color: #e6ffed;
    border-left-color: #28a745;
    color: #155724;
}

#trend-view #trend-summary-container .trend-summary-text.negative {
    background-color: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

#trend-view #trend-summary-container .trend-summary-text.neutral {
    background-color: #e9ecef;
    border-left-color: #6c757d;
    color: #383d41;
}

/* style.css dosyanıza ekleyin */
.trend-context-note {
    background-color: #e7f3fe; /* Açık mavi bilgi rengi */
    border-left: 5px solid #2196f3;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #0d47a1;
    display: flex;
    align-items: center;
}
.trend-context-note i {
    font-size: 1.2rem;
    margin-right: 12px;
}

/* --- Karşılaştırma Ekranı - Uyumsuzluk Uyarısı (YENİ) --- */
.incompatible-comparison-warning {
    background-color: #fff3cd; /* Uyarı sarısı */
    border: 1px solid #ffeeba;
    border-left: 5px solid #ffc107; /* Vurgu çizgisi */
    color: #856404; /* Koyu sarı metin */
    padding: 20px;
    border-radius: 8px;
    text-align: left;
}

.incompatible-comparison-warning h4 {
    margin-top: 0;
    color: #856404;
}

.incompatible-comparison-warning p {
    line-height: 1.6;
}

/* --- Karşılaştırma Ekranı - Görsel Kaydırma Aracı Stilleri (YENİ) --- */

.comparison-visual-container {
    position: relative;
    width: 100%;
    max-width: 640px; /* Resimlerin maksimum genişliği */
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden; /* Kenarlardan taşanları gizle */
    aspect-ratio: 4 / 3; /* Resimlerin en-boy oranını koru */
    background-color: #000;
}

.comparison-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi konteynıra sığdır */
    pointer-events: none; /* Resimlerin mouse olaylarını engellemesini önle */
}

.comparison-image.after {
    /* Başlangıçta üstteki resmin yarısı görünsün */
    clip-path: inset(0 0 0 50%); 
}

.comparison-slider {
    position: absolute;
    top: 0;
    left: 50%; /* Başlangıçta ortada */
    transform: translateX(-50%);
    height: 100%;
    width: 50px; /* Tutamacın tıklama alanını genişlet */
    cursor: ew-resize; /* Yatay kaydırma imleci */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.comparison-slider .slider-line {
    width: 4px;
    height: calc(50% - 25px); /* Tutamaç için boşluk bırak */
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.comparison-slider .slider-handle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.comparison-slider .slider-handle .slider-arrow.left {
    margin-right: -2px;
}
.comparison-slider .slider-handle .slider-arrow.right {
    margin-left: -2px;
}

.image-label {
    position: absolute;
    bottom: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
}

.image-label.label-before {
    left: 10px;
}
.image-label.label-after {
    right: 10px;
}

.info-text {
    font-size: 14px;
    color: #555;
    margin-top: -10px;
    margin-bottom: 25px;
}

/* Sayısal karşılaştırma başlığını güncelleyelim */
#comparison-view .comparison-graph h4 {
    font-size: 16px;
    color: #333;
}

.comparison-controls {
    display: flex;
    justify-content: center; /* Butonu sağa yasla */
    margin-bottom: 15px;
}

.comparison-controls button {
    background-color: #28a745; /* Ana aksiyon rengi (Yeşil) */
    color: white;
    font-size: 14px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.comparison-controls button:hover {
    opacity: 0.9;
}

/* style.css dosyanıza ekleyin */
.comparison-qa-summary {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1e6b43;
    background-color: #f0fff4;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #c8e6c9;
    margin: -5px 0 10px 0; /* Başlık ile resim arasına konumlandırma */
    text-align: center;
}
.comparison-qa-summary i {
    margin-right: 5px;
}

/* --- Karşılaştırma Ekranı - Rapor ve İndirme Butonu Stilleri (YENİ) --- */

/* Rapor İndirme Butonu */
#comp_download-report-button:hover {
    background-color: #0069d9;
}


/* html2canvas Rapor Modu */
/* Bu sınıf, ekran görüntüsü alınırken geçici olarak eklenir */
.report-mode {
    /* Raporda gölgelerin ve kenarlıkların daha iyi görünmesi için */
    border: 1px solid #dee2e6;
    padding: 15px;
    background-color: #ffffff; /* Arka planın şeffaf olmamasını garantile */
}

/* Raporda görünmesini istemediğimiz elementleri gizle */
.report-mode .comparison-controls {
    display: none !important;
}

/* Raporda kaydırma çubuğunun daha az belirgin olmasını sağlayalım */
.report-mode .comparison-slider .slider-handle {
    box-shadow: none; /* Gölgeyi kaldır */
    border-width: 2px;
}

/* style.css dosyasının sonuna eklenebilir */
#asama3-view #a3_export-button:hover,
#asama3-view #a3_import-button:hover {
    background-color: #138496;
}

/* style.css dosyanıza eklenecek yeni stiller */

/* --- Hub Ekranı Stilleri (Önceki Adımdaki Stilleri Geliştirme) --- */
.hub-container {
    padding-top: 30px;
    padding-bottom: 30px;
}
.hub-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.hub-option {
    padding: 25px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}
.hub-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: #28a745;
}
.hub-option i {
    font-size: 2.5rem;
    color: #28a745;
    margin-bottom: 15px;
}
.hub-option h2 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    color: #333;
}
.hub-option p {
    margin: 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .hub-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Soru-Cevap Sonuç Ekranı Aksiyonları --- */
#qa-view .result-actions {
    display: none; /* JS ile görünür yapılacak */
    text-align: center;
    padding: 30px 20px;
    margin-top: 25px;
    border-top: 2px dashed #e0e0e0;
}
#qa-view .result-actions.visible {
    display: block;
}
#qa-view .result-actions h4 {
    font-size: 1.3rem;
    color: #1e6b43;
    margin-top: 0;
    margin-bottom: 10px;
}
#qa-view .result-actions p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 25px;
}
#qa-view .result-actions button {
    margin: 5px;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
}

/* style.css dosyanıza eklenecek */

/* --- Aşama 2 - Soru/Cevap Özet Kutusu --- */
#a2_qa-summary-container {
    margin-bottom: 20px;
}
.qa-summary-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #e9f5ec; /* Açık yeşil arka plan */
    border: 1px solid #a3d3b0;
    border-left: 5px solid #28a745; /* Vurgulu sol kenarlık */
    padding: 15px 20px;
    border-radius: 8px;
    text-align: left;
}
.qa-summary-box i {
    font-size: 2.2rem;
    color: #28a745;
}
.qa-summary-box > div {
    display: flex;
    flex-direction: column;
}
.qa-summary-box > div strong {
    font-size: 1rem;
    color: #1e6b43;
}
.qa-summary-box > div span {
    font-size: 0.9rem;
    color: #333;
}
.qa-summary-box > div span strong {
    color: #000;
}

/* style.css */
.diary-qa-summary {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e6b43;
    background-color: #e9f5ec;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block; /* Sadece içeriği kadar yer kaplaması için */
    margin: 5px 0 10px 0;
}
.diary-qa-summary i {
    margin-right: 6px;
}

/* ================================================== */
/* === SORU-CEVAP MODÜLÜ YENİ STİLLERİ (MİNİMAL TEMA) === */
/* ================================================== */

/* --- 1. Arka Plan ve Ana Panel (Sadeleştirme) --- */
/* Önceki qa-background sınıfını etkisiz hale getiriyoruz */
.qa-background {
    background: transparent;
    padding: 0; /* Dış boşlukları sıfırlıyoruz, kontrol panelde olacak */
}

/* Ana modül panelini daha kompakt hale getiriyoruz */
#qa-view .analysis-module {
    background-color: #ffffff; /* Zaten beyaz ama garanti olsun */
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* Biraz daha belirgin gölge */
    border: none; /* Kenarlığı kaldırıyoruz, gölge yeterli */
    padding: 40px; /* İç boşlukları sabitliyoruz */
    max-width: 600px; /* Maksimum genişlik */
    width: 100%; /* Mobil için esneklik */
	margin: 0 auto;
    box-sizing: border-box; /* Padding ve border boyutu etkilemesin */

    /* --- SABİT YÜKSEKLİK İÇİN EN ÖNEMLİ KISIM --- */
    min-height: 550px; /* Tüm adımların sığabileceği bir minimum yükseklik */
    display: flex;
    flex-direction: column;
    justify-content: center; /* İçeriği dikeyde ortalamak için */
    transition: min-height 0.3s ease; /* Yükseklik değişimine yumuşak geçiş */
}
/* Ekran içeriği çok uzarsa, minimum yükseklik esnesin */
#qa-view .analysis-module .result-content {
    min-height: auto; /* Sonuç ekranında bu kuralı esnet */
}
/* Mobil cihazlarda yüksekliği daha esnek hale getirelim */
@media (max-width: 600px) {
    #qa-view .analysis-module {
        min-height: 90vh; /* Ekran yüksekliğinin %90'ını kaplasın */
        margin: 20px auto;
        padding: 30px 20px;
    }
}

/* --- 2. Quiz Ekranı ve Boşluk Ayarları --- */
#qa-view #question-text {
    font-size: 1.4rem; /* Soru metnini biraz küçültelim */
    margin-bottom: 15px; /* Altındaki boşluğu azalt */
    text-align: center;
}
#qa-view .question-disclaimer {
    text-align: center;
    margin-bottom: 25px; /* Soru ile cevaplar arası boşluk */
}

/* --- 3. Cevap Seçenekleri (Alt Alta ve Kompakt) --- */
#qa-view #answer-buttons {
    display: grid;
    /* grid-template-columns: 1fr; Bu zaten alt alta dizilim için varsayılan. */
    gap: 12px; /* Cevaplar arası boşluk */
}
#qa-view .answer-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 15px 20px; /* İç boşluğu daralttık */
    padding-left: 50px; /* İkon için yer kalsın */
    font-size: 0.95rem; /* Yazıyı hafif küçülttük */
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
}
#qa-view .answer-btn::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ced4da;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Seçilmiş Cevap Stili */
#qa-view .answer-btn.selected {
    background-color: #e6f4ea; /* Çok açık yeşil */
    border-color: #5cb85c;
    color: #1e6b43; /* Koyu yeşil metin */
    font-weight: 500;
}
#qa-view .answer-btn.selected::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}
#qa-view .answer-btn.selected::after {
    content: '\f00c'; /* Font Awesome check ikonu */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 21px; /* İkonu ortalamak için ince ayar */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 11px;
}
#qa-view .answer-btn:hover:not(.selected) {
    background-color: #f1f3f5;
    border-color: #adb5bd;
}

/* --- 4. Navigasyon ve Boşluk Ayarları --- */
#qa-view #navigation-controls {
    margin-top: 35px; /* Cevaplar ile butonlar arasına boşluk ekledik */
}
/* İleri/Geri butonlarını sadeleştirelim */
#qa-view #navigation-controls button {
    border: none;
    padding: 12px 40px;
    font-weight: 600;
    border-radius: 25px;
}
#qa-view #next-btn {
    background-color: #28a745;
    color: white;
}
#qa-view #next-btn:not(:disabled):hover {
    background-color: #218838;
}
#qa-view #back-btn {
    background-color: #e9ecef;
    color: #495057;
}
#qa-view #back-btn:hover {
    background-color: #dee2e6;
}

/* --- 5. Analiz Sonucu Ekranı (Daraltma) --- */
#qa-view #result-screen {
    padding: 20px 15px; /* Sonuç ekranının kendi iç boşluğunu azalt */
}
#qa-view .result-content {
    padding: 25px; /* Sonuç kartının iç boşluğu */
    border-width: 1px;
    border-radius: 12px;
}
#qa-view .result-header h2 {
    font-size: 1.1rem;
    font-weight: 400;
    color: #6c757d;
}
#qa-view .result-header h3 {
    font-size: 1.8rem; /* Cilt tipi başlığını biraz küçültelim */
}
#qa-view .result-header i {
    font-size: 2.8rem;
    margin-bottom: 10px;
}
#qa-view .result-details p {
    font-size: 0.9rem;
    line-height: 1.6;
}
#qa-view .result-details h4 {
    font-size: 1rem;
    margin-top: 20px;
}
#qa-view .result-details ul li {
    font-size: 0.9rem;
    padding: 6px 0;
}
#qa-view .result-details ul li::before {
    margin-top: 2px; /* İkonu hizalamak için ince ayar */
}
/* Sonuç ekranındaki aksiyon butonları */
#qa-view .result-actions {
    padding: 25px 15px 10px 15px;
    margin-top: 20px;
}

#qa-view .progress-bar {
    background: #28a745; /* "İleri" butonu ile aynı yeşil tonu */
    height: 8px;
    border-radius: 50px;
    transition: width 0.4s ease;
}

/* --- Ekran İçeriklerini Flex Yapısına Uyumlu Hale Getirme --- */
#qa-view #start-screen,
#qa-view #quiz-screen,
#qa-view #result-screen {
    width: 100%; /* Ebeveynin (flex container) tüm genişliğini kapla */
}

/* Başlangıç ve sonuç ekranları ortalandığı için içeriği üste ve alta yaslayalım */
#qa-view #start-screen,
#qa-view #result-screen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Mevcut boşluğu doldurması için */
}

/* --- 3. Sonuç Ekranında Cilt Tiplerini Renklendirme --- */

/* Önce tüm sonuç kartları için genel bir geçiş efekti tanımlayalım */
#qa-view .result-content {
    transition: border-color 0.4s ease;
}
#qa-view .result-header i,
#qa-view .result-header h3 {
    transition: color 0.4s ease;
}

/* Normal Cilt -> Yeşil (Güven, Denge) */
#qa-view #result-normal.result-content { border-color: #28a745; }
#qa-view #result-normal .result-header i,
#qa-view #result-normal .result-header h3 { color: #28a745; }

/* Kuru Cilt -> Turuncu (Nem, Besleme) */
#qa-view #result-kuru.result-content { border-color: #fd7e14; }
#qa-view #result-kuru .result-header i,
#qa-view #result-kuru .result-header h3 { color: #fd7e14; }

/* Yağlı Cilt -> Mavi (Temizlik, Ferahlık) */
#qa-view #result-yagli.result-content { border-color: #17a2b8; }
#qa-view #result-yagli .result-header i,
#qa-view #result-yagli .result-header h3 { color: #17a2b8; }

/* Karma Cilt -> Mor (Denge, İkilik) */
#qa-view #result-karma.result-content { border-color: #6f42c1; }
#qa-view #result-karma .result-header i,
#qa-view #result-karma .result-header h3 { color: #6f42c1; }

/* Hassas Cilt -> Kırmızı/Pembe (Dikkat, Sakinleştirme) */
#qa-view #result-hassas.result-content { border-color: #e83e8c; }
#qa-view #result-hassas .result-header i,
#qa-view #result-hassas .result-header h3 { color: #e83e8c; }

/* Lekeli Cilt -> Altın/Sarı (Aydınlanma, Onarım) */
#qa-view #result-lekeli.result-content { border-color: #ffc107; }
#qa-view #result-lekeli .result-header i,
#qa-view #result-lekeli .result-header h3 { color: #ffc107; }

/* Aşama 2 - Bütünsel Özet Kutusu */
.holistic-summary {
    text-align: left;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #e7f3fe; /* Açık mavi bilgi rengi */
    border-left: 5px solid #007bff;
    border-radius: 8px;
}
.holistic-summary h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #004085;
}
.holistic-summary ul {
    margin: 0;
    padding-left: 20px;
}
.holistic-summary li {
    margin-bottom: 5px;
    color: #333;
}

/* Sag Ust Kosedeki Home Ikonu           */
/* style.css dosyasının sonuna eklenecek */
.home-icon-link {
    position: fixed; /* Ekrana göre sabitler */
    top: 20px;
    right: 20px;
    z-index: 1001; /* Diğer her şeyin üstünde olması için (modal hariç) */
    background-color: rgba(255, 255, 255, 0.8);
    color: #495057;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.home-icon-link:hover {
    transform: scale(1.1);
    background-color: #fff;
    color: #28a745;
}
/*  */

/* style.css sonuna eklenecek */

/* --- QA Set Seçim Ekranı Stilleri --- */
.set-selection-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 30px auto;
	max-width: 650px;
}

/* Laptop ve daha büyük ekranlar için (genişlik 700px'den büyükse) */
@media (min-width: 700px) {
    .set-selection-container {
        /* Yan yana 2 sütun oluştur */
        grid-template-columns: 1fr 1fr;
    }
}

.set-card {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 16px; /* Köşeleri biraz daha yuvarlak yapalım */
    padding: 25px; /* İç boşluğu her yönden eşit yapalım */
    text-align: center; /* İçeriği ortalayalım */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex; /* İçeriği dikeyde esnek hale getirelim */
    flex-direction: column; /* Elemanları alt alta dizelim */
    justify-content: space-between; /* İçeriği dikeyde yayalım */
    min-height: 220px; /* Kartlara minimum bir yükseklik verelim ki hizalı dursunlar */
}

.set-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.set-card.selected {
    border-color: #28a745;
    background-color: #f0fff4; /* Daha soft bir yeşil */
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.2);
}

.set-card i {
    font-size: 2.2rem; /* İkonu biraz büyütelim */
    color: #28a745;
    margin-bottom: 15px;
}

.set-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem; /* Başlığı biraz küçültüp okunabilirliği artıralım */
    color: #343a40;
    line-height: 1.4;
    flex-grow: 1; /* Başlığın kalan boşluğu doldurmasını sağlayalım */
}

.set-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.5;
}

#start-analysis-btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* style.css */

/* QA Set Kartı Başlıkları için İnce Ayar */
.set-card h3 {
    line-height: 1.3; /* Satırlar arası boşluğu hafifçe azaltır */
    min-height: 2.6em; /* Başlık alanının yüksekliğini sabitler (2 satır için), kartların hizalı kalmasına yardımcı olur */
    display: flex;
    align-items: center; /* Dikeyde ortalamak için */
}

/* style.css dosyasının sonuna ekleyin */

/* Asama 3'teki kontrol butonlarının yerleşimini özelleştir */
#asama3-view #a3_controls_wrapper {
    /* Butonları soldan başlayarak diz */
    justify-content: flex-start; 
    width: 100%;
}

/* İçe Aktar butonu (soldaki grubun son elemanı), sağına kalan tüm boşluğu ekler */
/* Bu sayede kendisinden sonra gelen elemanları en sağa iter. */
#asama3-view #a3_import-button {
    margin-right: auto;
}

/* Aktar/İçe Aktar butonlarının varsayılan rengini ikincil buton rengi yapalım */
#asama3-view #a3_export-button,
#asama3-view #a3_import-button {
    background-color: #f8f9fa; /* Açık gri arkaplan */
    color: #495057; /* Koyu gri metin */
    border: 1px solid #dee2e6; /* İnce bir kenarlık */
}

/* Hover efektlerini de ekleyelim */
#asama3-view #a3_export-button:hover:not(:disabled),
#asama3-view #a3_import-button:hover:not(:disabled) {
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* style.css dosyanızın sonuna ekleyin */

/* --- Hub Ekranı Yardım Butonu --- */
.hub-help-action {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.help-button {
    background-color: transparent !important;
    border: none !important;
    color: #6c757d !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    width: auto !important; /* Yuvarlak buton stilini ezer */
    height: auto !important;
    transition: all 0.2s;
    box-shadow: none !important;
}
.help-button:hover:not(:disabled) {
    background-color: #f8f9fa !important;
    color: #28a745 !important;
    transform: translateY(-2px);
}

/* --- Yardım Modalı (Penceresi) --- */
.help-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* JS ile görünür yapılacak */
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.help-modal-overlay.show {
    display: flex;
    opacity: 1;
}
.help-modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.help-modal-overlay.show .help-modal-content {
    transform: scale(1);
}
.help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.help-modal-header h2 {
    margin: 0;
    font-size: 22px;
}
.help-modal-close-button {
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
}
.help-modal-close-button:hover {
    color: #333;
}
.help-section {
    margin-bottom: 25px;
}
.help-details {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.help-details summary {
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    background-color: #f8f9fa;
    outline: none;
}
.help-details summary:hover {
    background-color: #e9ecef;
}
.help-details p, .help-details ul {
    padding: 15px;
    margin: 0;
    background-color: #fff;
    line-height: 1.6;
}
.help-details ul {
    padding-left: 35px;
}

/* Hub ekranındaki ana konteynıra pozisyonlama referansı ekle */
#hub-view .container {
    position: relative;
}

/* Sağ üst köşeye hizalanmış yardım simgesi */
.inline-help-icon {
    position: absolute;
    top: 25px;  /* Konteynırın üstünden 25px aşağıda */
    right: 30px; /* Konteynırın sağından 30px içeride */
    font-size: 1.8rem;
    color: #007bff;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
	z-index: 10;
}

.inline-help-icon:hover {
    color: #28a745;
    transform: scale(1.2);
}

h2 .inline-help-icon {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  font-size: 0.9em;
  vertical-align: middle;
  margin-left: 8px;
}

/* --- Yardım Modalı Başlığını Yeşil Yapma --- */
.help-modal-header h2 {
    color: #28a745; /* Projenin ana yeşil rengi */
}

/* style.css dosyasının sonuna eklenecek */

/* --- Yardım Modalı Alt Bölümü --- */
.help-modal-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    text-align: right; /* Butonu sağa yasla */
}

.help-modal-footer-button {
    /* .btn-secondary'nin yuvarlak stilini ezip normal buton yapalım */
    border-radius: 6px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 25px !important;
    background-color: #6c757d !important; /* Gri tonu */
    color: white !important;
    border: none !important;
}
.help-modal-footer-button:hover:not(:disabled) {
    background-color: #5a6268 !important;
    transform: none !important; /* Zıplama efektini kaldır */
    box-shadow: none !important;
}

/* --- Yardım Modalı İçindeki Ana Başlıkları Renklendirme --- */
.help-section h4 {
    color: #007bff; /* Yardım simgesinin mavi rengi */
    padding-bottom: 5px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 15px;
}

/* style.css dosyasının sonuna ekleyin */

/* --- Trend Ekranı Yardım İkonu Konumlandırma --- */

/* Trend görünümünün ana konteynırını pozisyon referansı yap */
#trend-view-container,
#comparison-view .container,
#auto-comparison-view .container,
#auto-trend-view .container {
    position: relative;
    padding-top: 20px; /* Başlık ve ikon için üstte boşluk bırak */
}

/* Sağ üst köşeye hizalanmış genel yardım simgesi stili */
.inline-help-icon {
    position: absolute;
    top: 25px;      /* Konteynırın üstünden boşluk */
    right: 30px;     /* Konteynırın sağından boşluk */
    font-size: 1.8rem; /* İkon boyutu */
    color: #007bff;   /* Mavi bir renk verelim */
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
    z-index: 10;
}

.inline-help-icon:hover {
    color: #28a745; /* Projenin ana yeşil rengiyle uyumlu olsun */
    transform: scale(1.15); /* Hafif büyütme efekti */
}

/* HUB ekranındaki başlığı ve trend ekranındaki başlığı hizala */
#hub-view .container h1, 
#trend-view #trend-view-container h1 {
    padding-top: 15px; /* İkonun altında kalmaması için boşluk */
}

/* style.css dosyasının sonuna ekleyin */

/* --- Otomatik Analiz Ekranı Buton Yerleşimi --- */
.auto-analysis-controls {
    display: flex;       /* Butonları esnek bir kutu içine al */
    gap: 10px;           /* Aralarına boşluk koy */
    align-items: center; /* Dikeyde ortala */
}

/* Ana aksiyon butonu (Analizi Başlat) */
.auto-analysis-controls #auto_analysis_capture_btn {
    flex-grow: 1; /* Kalan tüm boşluğu doldurarak genişle */
    max-width: 400px; /* Çok genişlemesini engelle (isteğe bağlı) */
    margin: 0 auto; /* Eğer max-width kullanılırsa ortalamak için */
}

/* İkincil ikonik buton (Ana Menüye Dön) */
.auto-analysis-controls #auto_analysis_hub_btn {
    flex-shrink: 0; /* Küçülmesini engelle */
}

/* style.css dosyasının sonuna ekleyin */

/* --- Kamera Üzeri Yükleme Anismasyonu Stili --- */
.camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Arkadaki videoyu hafif karartır */
    
    display: flex;
    flex-direction: column; /* İkon ve metni alt alta dizer */
    justify-content: center;
    align-items: center;
    
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 10; /* Canvas'ın üzerinde olmasını sağlar */
    
    /* Yumuşak bir geçiş efekti için */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* .hidden sınıfı eklendiğinde yavaşça kaybolsun */
.camera-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Gizliyken tıklanamaz yapar */
}

.camera-overlay i {
    font-size: 3rem; /* İkon boyutu */
    margin-bottom: 15px;
    /* Dönme animasyonunu daha yavaş ve zarif yapalım */
    animation: fa-spin 2.5s linear infinite;
}

.camera-overlay p {
    font-size: 1.2rem;
    font-weight: 500;
}

/* style.css dosyasının sonuna ekleyin */
/* --- Genel Cilt Sağlığı Skoru Göstergesi --- */
.overall-score-container {
    text-align: center;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
	
	display: flex;
    flex-direction: column; /* Öğeleri alt alta dizmeye zorla */
    align-items: center;   /* Yatayda ortalamayı koru */
}

.overall-score-container h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

.overall-score-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: #28a745; /* Varsayılan olarak yeşil */
}

/* Skora göre renk değiştirme */
.overall-score-value.medium {
    color: #ffc107; /* Sarı */
}
.overall-score-value.low {
    color: #dc3545; /* Kırmızı */
}

.overall-score-container p {
    margin: 10px 0 0 0;
    font-size: 0.9rem;
    color: #495057;
}

/* --- Otomatik Analiz Sonuç Alanı Stilleri --- */
#auto-analysis-results {
    text-align: left;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.analysis-region-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden; /* Köşelerin yuvarlak kalmasını sağlar */
}

.analysis-region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s;
}

.analysis-region-header:hover {
    background-color: #e9ecef;
}

.analysis-region-header h3 {
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analysis-region-header .toggle-icon {
    transition: transform 0.3s ease;
    font-weight: bold;
}

.analysis-region-details {
    max-height: 0; /* Başlangıçta kapalı */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: #fff;
    padding: 0 20px; /* Dikey padding JS ile eklenecek */
}

/* 'open' sınıfı eklendiğinde içeriği göster */
.analysis-region-details.open {
    padding: 15px 20px;
    max-height: 500px; /* İçeriğin sığabileceği kadar büyük bir değer */
}
.analysis-region-header.open .toggle-icon {
    transform: rotate(180deg); /* Oku ters çevir */
}

#auto-analysis-results .metric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
}

.metric-item:last-child {
    border-bottom: none;
}

.metric-label {
    font-weight: 500;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745;
}

/* style.css dosyanıza ekleyin */

.comparison-region-block {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.comparison-region-header {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    color: #333;
}

.comparison-metric-row {
    display: grid;
    grid-template-columns: 2fr 1fr 0.5fr 1fr; /* Etiket | Değer1 | Ok | Değer2 */
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.comparison-metric-row:last-child {
    border-bottom: none;
}

.comparison-metric-row .metric-label {
    font-weight: 500;
}

.comparison-metric-row .metric-value {
    font-weight: bold;
    text-align: center;
    background-color: #fff;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.comparison-metric-row .metric-change {
    text-align: center;
    font-size: 1.2em;
}

.metric-change.positive { color: #28a745; } /* Yeşil - İyileşme */
.metric-change.negative { color: #dc3545; } /* Kırmızı - Kötüleşme */
.metric-change.neutral { color: #6c757d; } /* Gri - Değişim Yok */

/* style.css dosyanıza ekleyin */

/* Resimlerin altındaki etiketler için */
.comparison-entry-title {
    display: flex;
    flex-direction: column; /* Öğeleri alt alta sırala */
    align-items: center;
    gap: 5px; /* Etiketler arası boşluk */
}

.comparison-entry-title .image-label {
    font-weight: bold;
    font-size: 1em;
    color: #333;
    margin-top: 5px;
}

.comparison-entry-title .image-date {
    font-size: 0.9em;
    color: #6c757d;
}

/* Sütunların hangi resme ait olduğunu gösteren yeni legend alanı */
.comparison-legend {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #ddd;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.legend-item i {
    font-size: 1.2em;
    color: #007bff; /* İkon rengi */
}

/* Karşılaştırma satırının grid yapısını güncelleyelim */
.comparison-metric-row {
    display: grid;
    /* Grid yapısı: Etiket | Değer1 (İlk Resim) | Ok | Değer2 (Son Resim) */
    grid-template-columns: 2fr 1fr 0.5fr 1fr; 
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* =================================== */
/* Otomatik Analiz Akıllı Yorum Stili */
/* =================================== */

.smart-comment {
  background-color: #FFFFFF;
  border-left: 4px solid #4A90E2;  
  padding: 8px 16px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #212529;
  font-size: 0.9em;
  text-align: left;
}

/* ===================================== */
/* Kaydedilmiş Analiz Sonucu Not Stili */
/* ===================================== */

.saved-note {
  /* Metni sola yaslamak için */
  text-align: left; 

  /* Daha iyi okunabilirlik için arka plan ve kenarlık (isteğe bağlı ama önerilir) */
  background-color: #f8f9fa; /* Çok açık gri bir zemin */
  border: 1px solid #e9ecef;  /* İnce, yumuşak bir kenarlık */
  border-radius: 4px;         /* Yumuşak köşeler */
  padding: 12px;              /* İç boşluk */
  margin-top: 5px;            /* Üstteki etiketle arasında boşluk bırakmak için */

  /* Kullanıcının girdiği satır sonlarını ve boşlukları korumak için */
  white-space: pre-wrap; 
}

/* style.css dosyasının sonuna eklenecek */

/* ===================================== */
/* Otomatik Analiz Yüz Rehberi Stili    */
/* ===================================== */
/* 1. Canvas'ın kendisini karartma efekti için referans yap */
#auto-analysis-canvas {
    position: relative; /* pseudo-elementin konumlanması için gerekli */
    z-index: 1; /* Diğer elementlerin altında kalması için */
}

/* 2. Karartma efektini, canvas'ın üzerine gelen bir katman olarak uygula */
#auto-analysis-canvas::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px; /* Rehber ile aynı genişlik */
    height: 380px; /* Rehber ile aynı yükseklik */
    border-radius: 50%; /* Oval delik */
    
    /* Bu, ovalin DIŞINI karartır ve İÇİNİ transparan bırakır */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
	pointer-events: none; /* Tıklanamaz yapar */
    z-index: 2; /* Canvas'ın üzerinde ama rehberin altında */
}

/* 3. Rehber çerçevesini, karartma efektinden ayrı olarak stillendir */
.face-guide-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 280px;
    height: 380px;
    
    /* Arka planı YOK. Sadece kenarlık var. */
    border: 3px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    
    /* box-shadow buradan kaldırıldı */
    
    pointer-events: none;
    transition: border-color 0.3s ease;
    z-index: 3; /* En üstte olmasını garantile */
}

/* Pozisyon doğru olduğunda bu sınıf eklenecek */
.face-guide-overlay.valid-position {
    border-color: #28a745; /* Canlı yeşil */
}

.face-guide-overlay.warning-position {
    border-color: #ffc107; /* Dikkat çekici Sarı/Altın rengi */
}

/* Pozisyon yanlış olduğunda (yüz var ama dışarıda) bu sınıf eklenecek */
.face-guide-overlay.invalid-position {
    border-color: #dc3545; /* Uyarı kırmızısı */
}

/* ===================================== */
/* Otomatik Analiz Durum Metni Stili    */
/* ===================================== */

#auto-analysis-status {
  /* Kamera çerçevesi ile aynı genişliğe getirelim */
  width: 640px; 
  max-width: 100%; /* Mobil cihazlarda taşmayı önler */
  
  /* Blok haline gelen elementi yatayda ortalamak için */
  margin-left: auto;
  margin-right: auto;
  
  /* Altındaki kamera çerçevesiyle arasına boşluk koyalım */
  margin-bottom: 15px;
  
  /* Padding'in, belirlediğimiz genişliği artırmaması için (çok önemli) */
  box-sizing: border-box;
  
  font-size: 1.1rem; /* 1rem standart paragraf boyutudur, bu biraz daha büyük */
  font-weight: 500;
  color: #495057; /* Koyu gri */
  min-height: 2.5em; /* Yaklaşık 2 satırlık bir alan ayırır */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 8px 15px;
  border-radius: 6px;
  background-color: #f8f9fa; /* #f8f9fa Çok açık gri bir zemin */
}

/* Rehber çerçeve kırmızı olduğunda, metin de kırmızı olsun */
/* Yönlendirme metni için durum sınıfları */
#auto-analysis-status.status-invalid {
    color: #dc3545; /* Kırmızı */
    background-color: #f8d7da; /* Açık kırmızı zemin */
}

#auto-analysis-status.status-warning {
    color: #856404; /* Koyu sarı */
    background-color: #fff3cd; /* Açık sarı zemin */
}

#auto-analysis-status.status-valid {
    color: #155724; /* Koyu yeşil */
    background-color: #d4edda; /* Açık yeşil zemin */
}

/* style.css dosyasının sonuna eklenecek */

/* ===================================== */
/* Bütünsel Sentez Yorum Kutusu Stili    */
/* ===================================== */

.holistic-synthesis-box {
    text-align: left;
    padding: 20px;
    margin: 0 0 25px 0; /* Diğer elementlerle arasına boşluk koy */
    border-left: 5px solid #28a745; /* Projenin ana yeşil rengi */
    background-color: #f0fff4; /* Çok soft bir yeşil */
    border-radius: 8px;
    border: 1px solid #c8e6c9;
}

.holistic-synthesis-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #155724; /* Koyu yeşil */
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.holistic-synthesis-box ul {
    list-style-type: '💡'; /* Ampul ikonu */
    padding-left: 25px;
    margin: 0;
}

.holistic-synthesis-box li {
    padding-left: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
    color: #333;
}

.holistic-synthesis-box li:last-child {
    margin-bottom: 0;
}

/* style.css dosyasının sonuna eklenecek */

/* ===================================== */
/* QA (Anket) Sonucu Özet Kutusu Stili   */
/* ===================================== */

.qa-summary-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #e9f5ec; /* Açık yeşil arka plan */
    border: 1px solid #a3d3b0;
    border-left: 5px solid #28a745; /* Vurgulu sol kenarlık */
    padding: 15px 20px;
    border-radius: 8px;
    text-align: left;
    margin: 20px 0; /* Üst ve altta boşluk bırak */
}

.qa-summary-box i {
    font-size: 2.2rem;
    color: #28a745;
}

.qa-summary-box > div {
    display: flex;
    flex-direction: column;
}

.qa-summary-box > div strong.title {
    font-size: 1.1rem;
    color: #1e6b43;
    margin-bottom: 5px;
}

.qa-summary-box > div span {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
}
/* ===================================== */
/* Hub Ekranı - Pul Resim Stilleri       */
/* ===================================== */

.hub-option-image {
    width: 90px;  /* Resimlerin genişliği */
    height: 90px; /* Resimlerin yüksekliği */
    margin-bottom: 15px; /* Altındaki başlıkla arasına boşluk koyar */
    
    /* Resimleri dairesel ("pul") yapar */
    border-radius: 50%; 
    
    /* Resmin, dairesel alana bozulmadan sığmasını sağlar */
    object-fit: cover; 

    /* Dairenin etrafına ince, soft bir kenarlık ekleyelim (isteğe bağlı) */
    border: 3px solid #f0f2f5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Mevcut ikonların boyutunu da resimlerle uyumlu hale getirelim */
.hub-option i {
    font-size: 2rem; /* Boyutu biraz küçülttük */
    width: 90px;
    height: 90px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    border: 3px solid #f0f2f5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Soru-Cevap Özeti Stilleri --- */
.qa-summary-container {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    text-align: left;
}

.qa-summary-container > h3 {
    margin-top: 0;
    color: #343a40;
    padding-bottom: 10px;
    font-size: 1.1em;
}

.qa-set-result {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ced4da;
}
.qa-set-result:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.qa-set-result h4 {
    margin-bottom: 10px;
    color: #495057;
}

.qa-main-result {
    font-weight: bold;
    color: #17a2b8;
}

.qa-feedback-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}
.qa-feedback-list li {
    margin-bottom: 5px;
    font-size: 0.9em;
}

.qa-details-collapsible summary {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
    margin-top: 10px;
    outline: none;
}
.qa-details-collapsible summary:hover {
    text-decoration: underline;
}

.qa-answer-list {
    list-style-type: none;
    padding-left: 15px;
    margin-top: 10px;
    border-left: 3px solid #e9ecef;
}

.qa-answer-list li {
    margin-bottom: 10px;
    font-size: 0.85em;
    line-height: 1.4;
}
.qa-answer-list li strong {
    color: #343a40;
}
.qa-answer-list li em {
    color: #6c757d;
}

/* style.css içine EKLENECEK KOD */
.set-card.all-in-one-card {
    /* 1. Okunabilirlik için renkleri değiştiriyoruz */
    background-color: #e7f5ff; /* Çok açık, pastel bir mavi */
    color: #0d6efd;            /* Yazı rengi: Canlı bir mavi (beyaz yerine) */
    
    /* 2. Özel konumlandırmayı kaldırıyoruz */
    /* grid-column: 1 / -1;  <-- BU SATIR SİLİNDİ veya YORUMA ALINDI */
    
    /* Kenarlık rengini de yeni temaya uygun hale getirelim */
    border: 2px solid #bde0fe; 
}

/* Üzerine gelince (hover) oluşacak etkiyi de güncelleyelim */
.set-card.all-in-one-card:hover {
    background-color: #d0ebff; /* Hover için biraz daha koyu bir pastel mavi */
    border-color: #90cfff;
}

/* Seçildiğindeki (selected) etkiyi de güncelleyelim */
.set-card.all-in-one-card.selected {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); /* Gölge rengini daha soft yapalım */
    transform: translateY(-5px);
    background-color: #cce5ff; /* Seçildiğinde arka plan rengi */
}

/* İkon rengi artık gerekli değil, çünkü ana renk zaten koyu. Ama istersek bırakabiliriz. */
.set-card.all-in-one-card i {
    color: #0d6efd; /* İkon rengini de yazı rengiyle aynı yapalım */
}

/* style.css dosyasının sonuna eklenecek NİHAİ DÜZELTME */

/* --- Otomatik Analiz Ekranı Düzen Kayması (Layout Shift) Düzeltmesi --- */

/* 1. Otomatik Analiz ekranının ana konteynırına özel kurallar tanımla */
#auto-analysis-view .container {
    /* Genişliğin asla 800 pikseli geçmemesini sağlayan kilit kural */
    max-width: 800px;
    width: 100%; /* Ekran küçüldüğünde esnek olmasını sağlar */
    box-sizing: border-box; /* Padding ve border'ın genişliği etkilemesini önler */
}

/* 2. Sonuçların eklendiği alana, içindeki metni zorla alt satıra geçiren kuralı ekle */
#auto-analysis-results {
    /* Bu, uzun yorumların konteynırı yanlara doğru ittirmesini engelleyen en kritik komuttur. */
    overflow-wrap: break-word;
    word-wrap: break-word; /* Eski tarayıcılar için destek */
    text-align: left; /* Sonuçların sola dayalı olması daha okunabilir */
}

/* style.css dosyasının sonuna eklenecek NİHAİ VE KESİN ÇÖZÜM */

/* --- Otomatik Analiz Konteynırını Sabitleme --- */

/* 1. Sadece Otomatik Analiz ekranındayken geçerli olacak kuralı tanımla */
#auto-analysis-view .container {
    
    /* 2. Konteynırın genişliğini, kamera genişliğine (640px) ve 
       standart iç boşluklara (padding) uyacak şekilde SABİTLE. */
    width: 680px; /* Örn: 640px + 20px sağ + 20px sol padding */

    /* 3. Mobil gibi küçük ekranlarda taşmasını önlemek için bir maksimum genişlik belirle. */
    max-width: 100%; 

    /* 4. Padding'in, belirlediğimiz 680px genişliğine dahil edilmesini sağla. */
    box-sizing: border-box;
}

/* style.css dosyasının sonuna eklenecek YENİ KURAL */

/* --- Anında Analiz (Asama2) Ekranı Düzen Sabitlemesi --- */

/* Sadece "Anında Analiz" ekranının ana konteynırını hedef alıyoruz. */
#asama2-view .container {
    
    /* Genişliği, içindeki en geniş element olan kameraya (640px) 
       ve kenar boşluklarına (15px + 15px) göre sabitliyoruz. */
    width: 680px;

    /* Mobil gibi daha küçük ekranlarda taşmayı önler. */
    max-width: 100%; 

    /* Padding'in, belirlediğimiz 670px genişliğine dahil edilmesini sağlar. */
    box-sizing: border-box;
}

#hub-view #version-display {
    text-align: center;
    padding: 10px 15px;
    margin-top: 5px; /* Üstündeki butondan biraz boşluk bırakır */
    color: #aaa;
    font-size: 12px;
    font-family: monospace;
}

/* =================================================================== */
/* FLAŞ MESAJ STİLLERİ (Set Başlıkları İçin)                         */
/* =================================================================== */
.flash-title {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2a6fdb;   /* #e7f5ff; */
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: normal;
    z-index: 10001;
    opacity: 0;
    animation: fadeInOut 2.5s ease-in-out forwards;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInOut {
    0% { opacity: 0; top: 15%; }
    20% { opacity: 1; top: 20%; }
    80% { opacity: 1; top: 20%; }
    100% { opacity: 0; top: 25%; }
}

/* =================================================================== */
/* MODAL STİLLERİ (E-posta Girişi, Onay Pencereleri vb.)              */
/* =================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-backdrop.show {
    opacity: 1;
}
.modal-content {
    background: white;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 400px;
    text-align: center;
}
.modal-content h4 {
    margin-top: 0;
    font-size: 20px;
}
.modal-content input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Izgara Kapsayıcısı: .hub-options */
.hub-options {
    display: grid;
    /* 3 eşit genişlikte sütun oluştur */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Elemanlar arası boşluk */
    margin-top: 25px;
    align-items: stretch; /* Tüm kutuların yüksekliğini eşitler */
}

/* =================================================================== */
/* HUB EKRANI STİLLERİ (Grid Düzeni ile)                              */
/* =================================================================== */
/* Izgara Kapsayıcısı: .hub-options */
.hub-options {
    display: grid;
    /* 3 eşit genişlikte sütun oluştur */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Elemanlar arası boşluk */
    margin-top: 25px;
    align-items: stretch; /* Tüm kutuların yüksekliğini aynı hizada başlatır ve bitirir */
}

/* Standart seçenek kutuları */
.hub-option {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.hub-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.hub-option img {
    max-width: 80px;
    height: auto;
    margin: 0 auto 15px auto;
}

/* Görünmez Yer Tutucu Eleman */
/* Bu eleman, 2. satırın 2. sütununu doldurarak QR kodun 3. sütuna geçmesini sağlar. */
.grid-placeholder {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

/* QR Kod Izgara Elemanı İçin Stil */
.qr-code-grid-item {
    align-self: center; /* Kendisini dikey olarak ortalar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

#qrcode-container {
    padding: 8px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: inline-block;
}

#qrcode-container img {
    display: block;
    border-radius: 4px;
}

.qr-code-grid-item p {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    max-width: 200px;
}

/* --- HUB EKRANI MOBİL UYUMLULUK --- */
/* Tablet (900px'den dar ekranlar) */
@media (max-width: 900px) {
    .hub-options {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Tablet görünümünde, görünmez yer tutucuyu gizle */
    .grid-placeholder {
        display: none;
    }
}

/* Mobil (600px'den dar ekranlar) */
@media (max-width: 600px) {
    .hub-options {
        grid-template-columns: 1fr;
    }
    /* Mobil görünümde de yer tutucunun gizli olduğundan emin ol */
    .grid-placeholder {
        display: none;
    }
    .qr-code-grid-item {
        border-top: 1px solid #eee;
        padding-top: 20px;
        margin-top: 10px;
    }
}

/* style.css SONUNA EKLENECEK KOD */

/* ===================================== */
/* AKILLI REHBER STİLLERİ                */
/* ===================================== */

/* Rehber çerçevesi stilleri */
#asama1-view .face-guide-overlay {
    /* Mevcut #face-overlay'den farklı olarak, box-shadow'ı kaldırdık */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 380px;
    transform: translate(-50%, -50%);
    border: 3px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;
    transition: border-color 0.4s ease; /* Renk değişimine yumuşak geçiş */
}

/* Pozisyon doğru olduğunda bu sınıf eklenecek */
#asama1-view .face-guide-overlay.valid-position {
    border-color: #28a745; /* Canlı yeşil */
}

/* Pozisyon uyarı seviyesinde olduğunda bu sınıf eklenecek */
#asama1-view .face-guide-overlay.warning-position {
    border-color: #ffc107; /* Dikkat çekici Sarı/Altın rengi */
}

/* Pozisyon yanlış olduğunda bu sınıf eklenecek */
#asama1-view .face-guide-overlay.invalid-position {
    border-color: #dc3545; /* Uyarı kırmızısı */
}

/* Durum Metni Stili */
#asama1-view #a1_status-text {
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 1.5em; /* Metin değişse de yer kaymasını engeller */
  transition: color 0.4s ease; /* Renk değişimine yumuşak geçiş */
  color: #6c757d; /* Varsayılan renk */
  margin-top: -5px; /* Başlıkla arasını biraz açar */
  margin-bottom: 10px;
}

/* JS ile sınıf değiştirildiğinde metnin rengi de değişecek */
#asama1-view .valid-position + #a1_status-text {
    color: #28a745;
}
#asama1-view .warning-position + #a1_status-text {
    color: #ffc107;
}
#asama1-view .invalid-position + #a1_status-text {
    color: #dc3545;
}

/* ===================================== */
/* GELİŞMİŞ ANALİZ (Masaüstü) - Arayüz İyileştirmeleri */
/* ===================================== */
/* 1. Ana çalışma alanını pozisyon referansı yap (EN KRİTİK ADIM) */
#advanced-analysis-view .advanced-analysis-workspace {
    position: relative; 
}

/* 2. Rehber bölümünü videonun üzerine konumlandır */
#advanced-analysis-view .camera-guide {
    position: absolute;
    top: 60px;
    left: 20px;
    z-index: 15;

    /* Görsel iyileştirmeler */
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    backdrop-filter: blur(3px);

    /* KUTUNUN GENİŞLİĞİNİ İÇERİĞİNE GÖRE AYARLA */
    width: fit-content; 
}

/* 3. Rehber görselini küçült */
#advanced-analysis-view .camera-guide img {
    max-width: 70px !important;
    height: auto;
    display: block; /* Bu önemli, resmin altındaki boşluğu kaldırır */
}

/* 4. Durum metninin yerini koru */
#advanced-analysis-view #advanced-status-text {
     margin-bottom: 10px;
}

/* Sağdaki kamera bölümü */
/* Bu sınıf zaten #asama1-view ve #asama2-view'de tanımlı, 
   o yüzden özellikle advanced-analysis-view için bir kural yazmaya gerek yok,
   mevcut .camera-wrapper stilini kullanacak. Bu temiz bir yaklaşım. */


/* Başlık için özel stil */
#advanced-analysis-view #advanced-step-title {
    color: #28a745;
    font-weight: 600;
}

/* Kontrol butonları */
#advanced-analysis-view .controls {
    margin-top: 20px;
}

/* style.css SONUNA EKLENECEK KOD */

/* ================================================= */
/* YENİDEN KULLANILABİLİR KAMERA YAPI STİLLERİ       */
/* 3 boyutlu cilt haritalama                         */
/* ================================================= */

.camera-container {
    position: relative; 
    /* width: 100%;        640px; */
    /* height: 100%;       360px; */
    max-width: 100%;
    margin: 0 auto;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
	display: grid;
    place-items: center; /* Yatay ve dikeyde ortala */
}

/* 2. MASAÜSTÜ İÇİN ÖZEL BOYUTLANDIRMA */
/* Eğer body'de .desktop-device class'ı varsa, bu kural uygulanır. */
.desktop-device .camera-container {
    width: 640px;
    height: 360px;
}

/* 3. MOBİL CİHAZLAR İÇİN ÖZEL BOYUTLANDIRMA */
/* Eğer body'de .mobile-device class'ı varsa, bu kural uygulanır. */
.mobile-device .camera-container {  
    width: 360px;   
    height: 640px;  
} 

.camera-container > .camera-layer {
    /* position: absolute;  */
    /* top: 0; left: 0;   */
	grid-area: 1 / 1 / 2 / 2;
    width: 100%; 
	height: 100%;
	max-width: 100%;
    max-height: 100%;
}
.camera-container .video-layer { object-fit: contain; z-index: 1; }
.camera-container .capture-canvas-layer { z-index: 2; display: none; }
.camera-container .overlay-canvas-layer { z-index: 5; pointer-events: none;	}

/* 4. OVAL KILAVUZUN TEMEL STİLLERİ (KONUMLANDIRMA HARİÇ) */
.guide-oval-layer {
    position: absolute; /* JS'nin konumlandırabilmesi için bu gerekli */
    width: 280px;
    height: 380px;
    border: 3px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
    transition: border-color 0.4s ease;
}

/* ================================================= */
/* GELİŞMİŞ ANALİZ'E ÖZEL STİLLER                    */
/* ================================================= */
#advanced-analysis-view .advanced-analysis-workspace { display: flex; justify-content: center; align-items: center; gap: 25px; margin: 20px 0; flex-wrap: wrap; }
#advanced-analysis-view #advanced-status-text { width: 640px; max-width: 100%; margin: 0 auto 10px auto; padding: 8px 15px; border-radius: 6px; font-size: 1.1rem; font-weight: 500; min-height: 1.5em; box-sizing: border-box; transition: all 0.4s ease; }
#advanced-analysis-view #advanced-status-text.status-valid { background-color: #d4edda; color: #155724; }
#advanced-analysis-view #advanced-status-text.status-warning { background-color: #fff3cd; color: #856404; }
#advanced-analysis-view #advanced-status-text.status-invalid { background-color: #f8d7da; color: #721c24; }
#advanced-analysis-view .camera-guide { border: none; background-color: transparent; padding: 0; text-align: center; }
#advanced-analysis-view .camera-guide img { max-width: 150px; height: auto; }
.countdown-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 20; color: white; font-size: 10rem; font-weight: bold; text-shadow: 0 0 20px rgba(0, 0, 0, 0.8); pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; transform: scale(1.2); }
.countdown-overlay.visible { opacity: 1; transform: scale(1); }

/* style.css içindeki İLGİLİ BÖLÜMÜ BUNUNLA DEĞİŞTİRİN */

/* ================================================= */
/* GELİŞMİŞ ANALİZ SONUÇ EKRANI STİLLERİ             */
/* ================================================= */

#advanced-analysis-result-view .advanced-results-grid {
    display: grid;
    /* --- DEĞİŞİKLİK: 3 sabit sütun oluşturuyoruz --- */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-top: 25px;
}

#advanced-analysis-result-view .result-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

#advanced-analysis-result-view .result-card h3 {
    margin-top: 0;
    font-size: 1.1rem; /* Başlık boyutunu biraz ayarlayalım */
    color: #28a745;
}

#advanced-analysis-result-view .result-card img {
    width: 100%;
    /* --- DEĞİŞİKLİK: Sabit bir yükseklik ve orantılı kırpma --- */
    height: 200px; /* Resimlerin yüksekliğini sabitliyoruz */
    object-fit: cover; /* Resmi bu alana sığdırmak için orantılı kırpar */
    
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
}

#advanced-analysis-result-view .result-card img.flipped-image {
    transform: scaleX(-1);
}

#advanced-analysis-result-view .analysis-details {
    text-align: left;
    font-size: 0.9rem;
}

/* --- YENİ: Mobil cihazlar için ızgara düzeni --- */
@media (max-width: 768px) {
    #advanced-analysis-result-view .advanced-results-grid {
        grid-template-columns: 1fr; /* Küçük ekranlarda tek sütun */
    }
}

/* style.css SONUNA EKLENECEK KOD */

#advanced-analysis-result-view .synthesis-comment {
    background-color: #e7f5ff;
    border-left: 5px solid #0d6efd;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    text-align: left;
}

#advanced-analysis-result-view .synthesis-comment h4 {
    margin-top: 0;
    color: #0a58ca;
}

/* style.css DOSYASINA EKLENECEK STİLLER */

.synthesis-section {
    margin-bottom: 2rem;
    text-align: left;
}

.summary-card {
    background-color: #f0f4f8; /* Açık mavi-gri bir arka plan */
    border-left: 5px solid #007bff; /* Vurgu rengi */
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 1rem;
}

.summary-card p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.results-divider {
    text-align: center;
    margin: 2rem 0;
    font-weight: 300;
    color: #555;
}

.metric-item {
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
}

.metric-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.metric-score span {
    font-weight: bold;
    background-color: #e9ecef;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.metric-interpretation {
    font-size: 0.9rem;
    color: #333;
    margin-top: 8px;
    padding-top: 8px;
    /* border-top: 1px dashed #ccc; */
}

/* ----------------------------------------- */
/* 3 Boyutlu Cilt Haritalama Sonuç Sayfası İçin Özel Genişlik */
/* ----------------------------------------- */

/* Sadece ID'si 'advanced-analysis-result-view' olan sayfanın içindeki 
   .container sınıfını hedefleyerek diğer sayfaları etkilemiyoruz. */
#advanced-analysis-result-view .container {
  max-width: 1200px; /* Standart 960px veya 1140px'den daha geniş bir değer. */
}

/* Kartların içindeki resimlerin boyutunu da kontrol altında tutalım ki çok büyümesinler. */
#advanced-analysis-result-view .result-card img {
  max-height: 300px; /* Resimlerin yüksekliğini sabitleyelim. */
  width: auto;       /* Genişlik otomatik ayarlansın. */
  object-fit: contain; /* Resmin oranını bozmadan sığdır. */
}

/* style.css */

/* Hub ekranındaki ana eylem butonlarını yan yana getirmek için */
.hub-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Butonlar arası boşluk */
  margin-top: 20px;
}

/* Genel amaçlı, yuvarlak ve ikonik buton stili */
.btn-icon {
  width: 50px;           /* Genişlik */
  height: 50px;          /* Yükseklik */
  padding: 0;            /* İç boşluğu sıfırla */
  border-radius: 50%;    /* Tamamen yuvarlak yapar */
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 20px;       /* İkon boyutu */
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background-color: #e9ecef;
  border-color: #999;
  transform: scale(1.05); /* Hafif büyüme efekti */
}

.btn-icon:active {
    transform: scale(0.98); /* Tıklama anı efekti */
}

#advanced-status-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 8px 15px;
  border-radius: 20px;
  margin: 10px auto 0 auto;
  max-width: 80%;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

/* 
  Varsayılan ve HATA DURUMU için KOYU GRİ ZEMİN.
  .status-invalid kuralını özellikle tanımlayarak genel pembe kuralını eziyoruz.
*/
/* İsterseniz KOYU GRİ yerine AÇIK MAVİ kullanmak için: */
#advanced-status-text,
#advanced-status-text.status-invalid {
  background-color: #f8d7da; /* Açık Kırmızı/Pembe */
  color: #721c24 !important;    /* Koyu Kırmızı Yazı */
  border-color: #f7f7f7;
}

/* Geçerli Durum (Yeşil) */
#advanced-status-text.status-valid {
    background-color: #d4edda;
    color: #155724 !important;
}
#advanced-status-text.status-warning {
    background-color: #fff3cd;
    color: #856404 !important;
}

/* Metrik detaylarının başlığı için stil */
.details-header {
  font-size: 0.85rem;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
}

/* Mevcut .metric-details kuralını da başlığa uyumlu hale getirelim */
.metric-details {
  list-style-type: none;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 0;
  border-top: 1px dashed #ddd; /* Ayırıcı çizgiyi geri getirelim */
  padding-top: 8px;
}

.metric-details li {
  font-size: 0.8rem; /* Daha küçük font */
  color: #555;        /* Daha soluk renk */
  margin-bottom: 4px;
}

.metric-details li strong {
  color: #333; /* Etiketler biraz daha belirgin olsun */
}

/* 3D Cilt Haritalama Sonuç Ekranındaki Bölge Başlıkları İçin */
#advanced-analysis-result-view .analysis-details h4 {
  color: #28a745; /* Projenin ana yeşil rengi */
  padding-bottom: 5px;
  /* border-bottom: 1px solid #e0e0e0; */
  margin-bottom: 10px;
}

/* 1. 3D model ekranının ana kapsayıcısının ekranın çoğunu kullanmasını sağlıyoruz */
#face-model-view .container {
    max-width: 90vw; /* Ekran genişliğinin %90'ını kaplasın */
    width: 100%;
}

/* 2. 3D modelin kendi çerçevesinin yüksekliğini ekran yüksekliğine göre ayarlıyoruz */
#model-container {
    width: 100%;
    height: 70vh; /* Ekran yüksekliğinin %70'i kadar bir yükseklik veriyoruz */
    border: 1px solid #e0e0e0;
    cursor: move;
}

/* style.css dosyasının sonuna eklenecek */

.sub-header {
    text-align: center;
    color: #666;
    margin-top: -10px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.image-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.main-analysis-image img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.thumbnail-gallery {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.thumbnail-item {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.thumbnail-item:hover {
    border-color: #aaa;
}

.thumbnail-item.active {
    border-color: var(--primary-color);
}

/* style.css SONUNA EKLENECEK KOD */

/* ===================================== */
/* ANALİZ SONUÇLARI METRİK HİZALAMA      */
/* ===================================== */

/* Metrik satırını bir flex container yap */
.metric-item {
    display: flex;
    justify-content: space-between; /* En önemli kural: elemanları iki uca yay */
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.metric-item:last-of-type {
    border-bottom: none;
}

/* Metrik etiketinin (örn: "Parlaklık") stili */
.metric-label {
    font-weight: 500;
    color: #333;
}

/* Metrik değerinin (örn: "85.3") stili */
.metric-value {
    font-weight: 500;
    background-color: #e9ecef;
    padding: 3px 10px;
    border-radius: 16px; /* Tam yuvarlak kapsül görünümü */
    font-size: 0.9em;
    color: #28a745;		/* #495057 */
}

/* Bu blok, daha önce tanımlanan .metric-block'u hedefler.
   Sadece yorum satırlarının daha okunaklı olması için bir boşluk ekler. */
.smart-comment {
    margin-top: 4px; /* Akıllı yorum ile metrik değeri arasına boşluk koy */
    margin-bottom: 10px; /* Bir sonraki metrik bloğundan önce boşluk bırak */
}

/* style.css SONUNA EKLENECEK KOD */

/* ===================================== */
/* ANALİZ NOTU EKLEME ALANI STİLLERİ     */
/* ===================================== */

.analysis-note-container {
    text-align: left; /* Başlığı ve alanı sola yasla */
    margin: 25px 0 15px 0; /* Diğer elementlerle arasına boşluk bırak */
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.analysis-note-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #343a40;
}

#advanced-analysis-note {
    width: 100%;
    min-height: 80px; /* Başlangıç yüksekliği */
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit; /* Ana font ailesini kullan */
    box-sizing: border-box; /* Padding'in genişliği etkilemesini önle */
    resize: vertical; /* Sadece dikeyde boyutlandırmaya izin ver */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* ID yerine SINIF kullanarak genel bir stil oluşturuyoruz */
.custom-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ced4da; /* İnaktif kenarlık rengi (Gri) */
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#advanced-analysis-note:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* style.css dosyasının sonuna eklenecek */

/* ===================================== */
/* 3D YÜZ MODELİ GÖRÜNTÜLEYİCİ STİLLERİ  */
/* ===================================== */

/* 1. Görüntüleyiciyi saran ana konteyner */
.face-model-container {
    /* Genişliğin, ebeveyn elementin %100'ü olmasını sağlar */
    width: 100%;
    
    /* ANCAK, genişliğin ASLA 640px'i geçmemesini sağlar. Bu, büyük ekran kontrolüdür. */
    max-width: 640px;
    
    /* Yatayda ortalamak ve diğer elementlerle arasına boşluk koymak için */
    margin: 15px auto;
    
    /* En/boy oranını (640/480 = 4/3) korumasını sağlar. 
       Genişlik küçüldüğünde (mobil ekran gibi), yükseklik de orantılı olarak küçülür. */
    aspect-ratio: 640 / 480; 

    /* Görsel iyileştirmeler */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden; /* Kenarlardan taşmaları engelle */
    background-color: #f0f2f5; /* Yüklenirken boş görünmesin diye */
}

/* 2. Three.js'in oluşturacağı Canvas elementi */
/* Bu, canvas'ın her zaman üstündeki konteyneri doldurmasını sağlar. */
#face-model-canvas {
    width: 100%;
    height: 100%;
    display: block; /* Altında oluşabilecek istenmeyen boşlukları kaldırır */
    cursor: move; /* Kullanıcıya etkileşimli olduğunu belirtir */
}

/* style.css dosyasına eklenecek */
.heatmap-controls {
  display: flex;
  align-items: center;
  gap: 5px; /* Buton ve menü arasına boşluk */
}
.heatmap-controls.hidden {
  display: none;
}
.custom-select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  font-size: 14px;
}
.thumbnail-gallery {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  align-items: center;
}

/* style.css dosyasına eklenecek */
.face-model-container {
    position: relative; /* Kontrollerin buna göre konumlanması için */
}

.model-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 8px;
    border-radius: 8px;
}

/* --- Modal Overlay Sistemi --- */
body.modal-open {
    overflow: hidden;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
}

.modal-content {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

.modal-content.modal-3d-viewer {
    width: 90vw;
    max-width: 800px;
    height: 90vh;
    max-height: 650px;
}

/* --- İkonik 3D Model Butonu --- */
.image-gallery-container {
    position: relative; /* Butonun buna göre konumlanması için */
}

.iconic-action-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    background-color: rgba(23, 162, 184, 0.9); /* #17a2b8 */
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

.iconic-action-button:hover {
    transform: scale(1.1);
    background-color: #138496;
}

.camera-warning-message {
    background-color: #ffc107; /* Uyarıcı sarı renk */
    color: #333;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    display: none; /* Varsayılan olarak gizli */
}

/* Ayarlar ekranındaki btn-icon lari */
.button-group-horizontal { display: flex; gap: 20px; }

#manual-mode-tools.hidden {
    display: none;
}

/* Ayarlar, Damlalik Zoom */
#zoom-box {
    position: fixed;
    width: 100px;
    height: 100px;
    border: 3px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
	z-index: 9998;
    background-repeat: no-repeat;
    /* Zoom seviyesini artırmak için background-size'ı ayarlayın */
    /* background-size: calc(640px * 5) calc(480px * 5);     5x zoom */
    pointer-events: none; /* Üzerine gelindiğinde fare olaylarını engelle */
    /* z-index: 100;   */
}

#color-preview {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 5px;
    z-index: 100;
}

#color-hex-value {
    position: absolute;
    bottom: 15px;
    left: 80px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: monospace;
    z-index: 100;
}

.color-palette-labeled {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.palette-item-labeled {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid #dee2e6;
    min-width: 250px; /* Genişlik ayarı */
}

.color-box {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Yuvarlak kutucuk */
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.color-details {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
}

.color-label {
    font-weight: bold;
    font-size: 0.9em;
}

.color-percentage {
    font-size: 0.85em;
    color: #6c757d;
}

.segmentation-map-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #e9ecef;
    border-radius: 8px;
}

.map-item {
    text-align: center;
    flex: 1;
}

.map-item h5 {
    margin-bottom: 10px;
    color: #495057;
}

.map-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 2px solid #fff;
}

.kmeans-insights {
    margin-top: 25px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-left: 5px solid #0056b3;
    border-radius: 5px;
	text-align: left;
}

.kmeans-insights h4 {
    color: #0056b3;
    margin-top: 0;
}

.map-legend {
    margin: 15px auto 25px auto;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    max-width: 90%;
}

.map-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.map-legend li {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.legend-color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.2);
}

/* Hem anlık analizdeki hem de günlükten yüklenen K-Means başlıklarını sola yaslar */
#kmeans-results-container h4,
.k-means-saved-results h3,
.k-means-saved-results h4 { 
    text-align: left;
}

/* --- Asama2 Büyüteç Kutusu Stilleri --- */
/* Aninda Analiz */
#a2_canvas-wrapper {
    position: relative; /* Bu, zoom kutusunun referans noktası olacak */
}

#zoom-box-asama2 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 120px;
    height: 120px;
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    overflow: hidden;
    pointer-events: none;
    z-index: 100;

    /* border-radius: 50%; */ /* <-- BU SATIRI SİLİN veya YORUMA ALIN */
    
    /* İsteğe Bağlı: Daha modern bir görünüm için hafif kavisli köşeler ekleyebilirsiniz */
    border-radius: 8px; 
}

#zoom-box-asama2::after { /* Ortadaki artı işareti */
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 30px;
    text-shadow: 0 0 2px black;
}

/* --- MODAL STYLES --- */
.info-modal-overlay { /* --> DEĞİŞİKLİK: Sınıf adı güncellendi */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: Center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* 
   Bu alt sınıflar .info-modal-overlay içinde yer aldığı için 
   diğer modal'larınızın stillerini etkilemeyecektir.
*/
.info-modal-overlay .modal-content {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    color: #333;
    line-height: 1.6;
}

.info-modal-overlay .modal-content h2 {
    margin-top: 0;
    color: #3498db;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.info-modal-overlay .modal-content p {
    margin-bottom: 15px;
	text-align: left;
}

.info-modal-overlay .modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.info-modal-overlay .modal-close-button:hover {
    color: #333;
}

/* ================================================= */
/* 3D ANALİZ SONUÇ EKRANININ GENİŞLEMESİNİ ÖNLER     */
/* ================================================= */
#advanced-analysis-result-view .container {
    /* En geniş içeriği (K-Means sonuçları) rahatça sığdıracak sabit bir genişlik veriyoruz. */
    width: 720px; 
    
    /* Mobil gibi küçük ekranlarda taşmasını engeller. */
    max-width: 100%; 
    
    /* Padding'in, belirlediğimiz genişliğe dahil edilmesini sağlar. */
    box-sizing: border-box;
}

.hub-logo-bottom {
  display: block;
  margin: 50px auto 20px auto; /* Üstte daha fazla boşluk bırakır */
  max-width: 120px; /* Altta daha küçük ve zarif durması için */
  height: auto;
  opacity: 0.8; /* Daha az dikkat çekmesi için hafif şeffaf yapabiliriz */
}

/* =============================================== */
/* --- MOBİL UYUMLULUK (RESPONSIVE STYLES) --- */
/* =============================================== */
/* Ekran genişliği 768px veya daha az olduğunda bu stiller geçerli olacak */
@media (max-width: 768px) {

    /* --- Genel Düzenlemeler --- */
    body {
        font-size: 14px; /* Mobil cihazlarda okunabilirliği artırmak için ana font boyutunu ayarla */
    }

    .container, .hub-container {
        padding: 5px; /* Kenar boşluklarını azaltarak içeriğe daha fazla yer aç */
    }

    h1 {
        font-size: 1.5rem; /* Başlıkları biraz küçült */
    }

    /* --- Hub Ekranı (ui/hub.js) --- */
    .module-grid {
        /* Kartları yan yana yerine alt alta diz */
        grid-template-columns: 1fr; /* Sadece tek bir sütun olsun */
        gap: 10px; /* Kartlar arasındaki boşluğu azalt */
    }

    /* --- Soru-Cevap Ekranı (ui/qa-view.js) --- */
    #answer-buttons {
        /* Cevap butonlarını alt alta tam genişlikte yap */
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .answer-btn {
        width: 100%; /* Butonların dokunmasını kolaylaştır */
    }

    .result-actions {
        flex-direction: column; /* Sonuç ekranındaki butonları alt alta al */
        gap: 15px;
    }
	
/* ====================================================== */
/* 3D KARŞILAŞTIRMA - AKILLI YORUMLAR STİLLERİ          */
/* ====================================================== */
.smart-commentary-container {
    margin-top: 25px;
    margin-bottom: 25px;
}

.smart-commentary-box {
    background-color: #f8f9fa;
    border-left: 5px solid #007bff;
    padding: 15px;
    border-radius: 5px;
    font-size: 0.95rem;
}

.smart-commentary-box ul {
    list-style-type: '💡';
    padding-left: 25px;
    margin: 0;
}

.smart-commentary-box li {
    padding-left: 10px;
    margin-bottom: 8px;
}

.smart-commentary-box li:last-child {
    margin-bottom: 0;
}

/* ====================================================== */
/* 3D KARŞILAŞTIRMA - K-MEANS TABLOSU STİLLERİ          */
/* ====================================================== */

#kmeans-comparison-table {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 25px; /* Altındaki bölümle arasına boşluk koy */
}

/* Tablodaki renk kutucuğu */
.kmeans-comp-swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    vertical-align: middle; /* Metinle aynı hizaya getirir */
    margin-right: 8px;
}

/* =============================================================== */
/* 3D GELİŞMİŞ KARŞILAŞTIRMA - NİHAİ VE EN GÜÇLÜ STİLLER          */
/* =============================================================== */

/* 1. Sadece bu ekrandaki sola hizalanacak içerik kutusunu hedefler */
#advanced-comparison-view .container .left-aligned-content {
    text-align: left;
}

/* 2. Sadece bu ekrandaki alt başlıkları (H2) MAVİ yapar */
/* Bu seçici, genel .container kuralından daha güçlüdür */
#advanced-comparison-view .container .left-aligned-content h2 {
    color: #0056b3; 
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* 3. Sadece bu ekrandaki tabloların DEĞİŞİM GÖSTERGELERİNİ renklendirir */
#advanced-comparison-view .container .left-aligned-content td.better {
    color: #28a745; /* Yeşil */
    font-weight: bold;
}
#advanced-comparison-view .container .left-aligned-content td.worse {
    color: #dc3545; /* Kırmızı */
    font-weight: bold;
}
#advanced-comparison-view .container .left-aligned-content td.neutral {
    color: #ffc107; /* Sarı */
    font-weight: bold;
}

/* 4. Sadece bu ekrandaki GÖRSEL BÖLÜMÜNÜN resimlerini küçültür */
#advanced-comparison-view .container .left-aligned-content .visual-comparison > div {
    /* Genişliği buradan ayarlayabilirsiniz */
    width: 220px; 
    flex-shrink: 0;
}

/* Gerekli diğer stiller (bunlar genellikle sorun çıkarmaz ama yine de spesifik yapalım) */
#advanced-comparison-view .container .left-aligned-content .visual-comparison {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}
#advanced-comparison-view .container .left-aligned-content .visual-comparison img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

/* ====================================================== */
/* EVRENSEL KAMERA VE MOBİL DÜZENLEME (YENİDEN DÜZENLENMİŞ) */
/* ====================================================== */

/* Bu genel kural, tüm kamera sarmalayıcıları için geçerlidir.
   Genişliği %100'dür ve JS tarafından verilen 'max-width' ve 'aspect-ratio' ile
   hem masaüstü (640x360) hem de mobil (360x640) boyutlarına mükemmel uyum sağlar. */
.camera-wrapper {
    position: relative;
    width: 100%;
    margin: 15px auto;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* Bu genel kural, video ve canvas gibi tüm katmanlar içindir.
   'object-fit: cover' kuralı, Hedef 5'i (görüntünün uzatılmaması) %100 karşılar. */
.camera-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Bu, ovalin temel konumlandırmasını yapar.
   Boyutları ve dikey ince ayarı JS tarafından yönetilir. */
.face-guide-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Bu transform, ovalin tam merkezlenmesini sağlar.
       JS'deki kodumuz bu 'translate' değerini dikeyde ayarlayarak
       ovali hafifçe aşağı kaydırabilir. */
    transform: translate(-50%, -50%); 
    border: 3px dashed rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;
    transition: border-color 0.3s ease;
    z-index: 3;
}

/* --- MOBİL İÇİN NOKTA ATIŞI ÇÖZÜMÜ --- */
/* Sadece ekran genişliği 768px'den küçük olduğunda (yani tablet ve telefonlarda)
   ve SADECE otomatik analiz ekranındayken geçerli olacak kurallar. */
@media (max-width: 768px) {
    
    /* Bu iki kural, herhangi bir elementin taşması durumunda bile
       yatay kaydırma çubuğunun oluşmasını KESİNLİKLE engeller. */
    html,
    body.auto-analysis-active {
        overflow-x: hidden;
    }

    #auto-analysis-view .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        
        /* Genişliği, ekranın genişliğine sabitler ve taşmayı imkansız hale getirir. */
        width: 100vw;
        max-width: 100%; /* Ekstra güvence */

        padding: 10px;
        box-sizing: border-box;
        margin: 0;
        border-radius: 0;
    }
    
    #auto-analysis-view .camera-wrapper {
        flex-grow: 1;
        min-height: 0; 
    }

    #auto-analysis-view h1,
    #auto-analysis-view #auto-analysis-status,
    #auto-analysis-view .controls {
        flex-shrink: 0;
    }
    
    #auto-analysis-view #auto-analysis-status {
        width: 100%;
        max-width: 100%;
    }
}

/* KAYDEDILIYOR STILLERI */
/* --- Kaydediliyor Overlay Stilleri --- */
.saving-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Hafif beyaz-şeffaf karartma */
    z-index: 10; /* Diğer elementlerin üzerinde kalsın */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    border-radius: 8px; /* Kenarları yumuşat */
    backdrop-filter: blur(4px); /* Arka planı hafifçe bulanıklaştır (modern görünüm) */
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease-in-out;
}

.saving-overlay .fa-spinner {
    font-size: 2.5rem;
    color: #0056b3;
}

.saving-overlay p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin: 0;
}