/* Koyu ve açık tema renk değişkenleri: "Tasarımda tutarlılığı sağlamak ve Dark Mode geçişini anlık yapabilmek için CSS3 ile gelen 'CSS Custom Properties' (Değişkenler) kullandık." */ :root { --ana-renk: #5f6f52; --ikincil-renk: #a9b388; --zemin-rengi: #fefae0; --vurgu-rengi: #b99470; --map-bg: #a5d7e8; --map-fill: #ececec; --map-hover: #565656; --map-stroke: #000000; } /* Javascript'in etiketine eklediği attribute'u yakalıyor ve değişkenleri eziyoruz. */ [data-theme="dark"] { --ana-renk: #e6d6b8; --ikincil-renk: #5f6f52; --zemin-rengi: #1a1c18; --vurgu-rengi: #b99470; --map-bg: #34495e; --map-fill: #5d6d7e; --map-hover: #d35400; --map-stroke: #fffff0; } body { background-color: var(--zemin-rengi); color: var(--ana-renk); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; min-height: 100vh; display: flex; flex-direction: column; margin: 0; transition: background-color 0.3s, color 0.3s; /* Tema geçişinde gözü yormayan yumuşak transition */ overflow-x: hidden; overflow-y: auto; } /* Navbar Stilleri */ .navbar { background-color: var(--ana-renk) !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1020; } .navbar-brand, .nav-link, .btn-link { color: var(--zemin-rengi) !important; font-weight: 500; transition: color 0.2s ease; } .navbar .nav-link:hover { color: #ffc107 !important; } /* Ana Dosya Stilleri */ main { flex: 1; /* İçeriğin kalan alanı kaplaması için */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; width: 100%; } /* Harita Stilleri */ .info-header { margin-bottom: 10px; max-width: 800px; } #map-container { width: 100%; min-height: 500px; flex: 1; display: flex; justify-content: center; align-items: center; position: relative; background-color: var(--map-bg); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; /* SVG taştığında scroll çıkmasın diye */ margin-bottom: 20px; cursor: grab; /* UX için hareket ettirilebilir olduğunu belirtir */ user-select: none; /* Sürüklerken yanlışlıkla metin seçilmesini engelle */ -webkit-user-select: none; } #map-container:active { cursor: grabbing; /* UX için hareket ettirilebilir olduğunu belirtir */ } svg { width: 90%; max-width: 1200px; height: auto; transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Zoom işlemi için transition */ transform-origin: 0 0; } svg path { fill: var(--map-fill); stroke: var(--map-stroke); stroke-width: 0.2px; cursor: pointer; transition: fill 0.2s ease; pointer-events: all; } svg > path:hover, svg g:hover path { stroke: #ffc107 !important; stroke-width: 1px; transition: stroke 0.2s; } /* Yardımcı sınıf: Geçişleri devre dışı bırakmak için */ .no-transition { transition: none !important; } /* Floating Tooltip Stilleri */ .floating-tooltip { position: fixed; top: 0; left: 0; background-color: var(--ana-renk); color: var(--zemin-rengi); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: bold; pointer-events: none; /* Tooltip'in tıklamayı engellememesi için kritik. */ z-index: 9999; display: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); white-space: nowrap; transform: translate(10px, 10px); /* Mouse'un biraz sağ altına konumlandırma */ border: 1px solid var(--zemin-rengi); } /* Araç Seçim Butonu ve Menü Stilleri */ #tools-btn { border-radius: 1rem; transition: border-radius 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 1003; /* Menünün üstünde dursun */ } /* Menü Açıldığında (aria-expanded="true" olduğunda) */ #tools-btn[aria-expanded="true"] { /* Alt köşeleri düzleştir -> Menüyle birleşir */ border-bottom-left-radius: 0; border-bottom-right-radius: 0; /* Ayrım çizgisini yok etmek için */ border-bottom: 1px solid rgba(0,0,0,0.05); } /* Menü Kartı */ #toolsMenu .card { /* Üst kısmı butonun hemen altına yapışsın */ margin-top: -1px; /* 1px yukarı çekerek olası çizgileri kapatır */ position: relative; z-index: 1002; } #country-search:focus { box-shadow: none; border-color: #86b7fe; } #search-container:focus-within .input-group { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; transition: box-shadow 0.3s; } /* Arama Önerisi Stilleri */ #search-suggestions { background-color: rgba(255, 255, 255, 0.95); /* Hafif saydam beyaz */ backdrop-filter: blur(10px); border: 1px solid rgba(0,0,0,0.1); } .search-feedback { display: none; position: absolute; top: 100%; left: 0; width: 100%; margin-top: 5px; padding: 6px 10px; font-size: 0.8rem; color: #dc3545; background-color: #fff; border: 1px solid #dc3545; border-radius: 6px; box-shadow: 0 2px 4px rgba(220, 53, 69, 0.1); z-index: 1060; animation: fadeIn 0.2s ease-out; } /* Öneri Öğesi (Tekil Satır) */ .suggestion-item { cursor: pointer; transition: all 0.2s ease; border: none; border-bottom: 1px solid rgba(0,0,0,0.05); color: #333; font-size: 0.85rem; display: flex; align-items: center; padding: 8px 12px; background-color: transparent !important; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover, .suggestion-item.active { background-color: var(--ana-renk) !important; /* Temanın ana rengi */ color: var(--zemin-rengi) !important; /* Temanın zemin rengi (genelde açık) */ } .suggestion-item:hover small, .suggestion-item.active small { color: var(--zemin-rengi) !important; opacity: 0.8 !important; } /* Koyu mod desteği */ [data-theme="dark"] #search-suggestions { background-color: rgba(30, 30, 30, 0.95); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .suggestion-item { color: #eee; border-bottom-color: rgba(255,255,255,0.1); } [data-theme="dark"] .suggestion-item:hover { background-color: var(--ana-renk) !important; color: var(--zemin-rengi) !important; } /* Yardımcı Sınıf: Harita Üzerindeki Ülkeleri Kısmen Gizleme (Dim Etme) */ path.dimmed { opacity: 0.15; pointer-events: none; /* Tıklamayı engeller */ fill: #808080 !important; /* Rengini grileştirir */ transition: opacity 0.4s ease, fill 0.4s ease; } [data-theme="dark"] path.dimmed { opacity: 0.3; fill: #444 !important; } /* Bootstrap Popover sınıfını ezmek için */ .popover { border: 2px solid var(--ana-renk); max-width: 350px; width: 350px; cursor: auto !important; user-select: text !important; -webkit-user-select: text !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .popover-header { background-color: var(--ana-renk); color: var(--zemin-rengi); font-weight: bold; text-align: center; } .popover-body { max-height: 400px; overflow-y: auto; padding-right: 10px; font-size: 0.85rem; } .popover a { cursor: pointer; } .info-box { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 10px; margin-bottom: 15px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .info-box { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } /* Nüfus Piramidi Stilleri */ .pyramid-container { display: flex; flex-direction: column; font-size: 0.65rem; margin-top: 5px; } .pyramid-row { display: flex; align-items: center; height: 14px; margin-bottom: 1px; } .pyramid-label { width: 35px; text-align: center; color: #666; font-weight: bold; font-size: 0.6rem; flex-shrink: 0; } .pyramid-bar-m, .pyramid-bar-f { flex: 1; display: flex; align-items: center; height: 85%; } .pyramid-bar-m { justify-content: flex-end; } .pyramid-bar-f { justify-content: flex-start; } /* Piramit barlarının genişliği Javascript ile hesaplanıyor ancak yumuşak dolum animasyonu CSS transition ile sağlanıyor. */ .bar-fill { height: 100%; transition: width 0.3s; } .bar-m { background-color: #3498db; /* Mavi tonları erkekler için */ border-radius: 2px 0 0 2px; } .bar-f { background-color: #e74c3c; /* Kırmızı tonları kadınlar için */ border-radius: 0 2px 2px 0; } /* Karşılaştırma Modalı Stilleri */ #comparisonModal { z-index: 1055 !important; /* Navbar'ın üstüne çıkar */ } .modal-backdrop { z-index: 1050 !important; } #comparison-controls { background-color: var(--zemin-rengi) !important; /* Temaya uygun zemin */ color: var(--ana-renk); /* Temaya uygun yazı */ border-bottom: 1px solid rgba(0,0,0,0.1); } #comparisonModal .modal-header { background-color: var(--ana-renk); color: var(--zemin-rengi); /* Yazı rengi zemin rengi olsun (Okunabilirlik için) */ } #comparisonModal .modal-body { background-color: var(--zemin-rengi); } #comparisonModal .modal-content { overflow: hidden; /* Köşelerin taşmasını önler */ } #comparisonModal .table { --bs-table-bg: transparent; /* Bootstrap varsayılanını ez */ color: var(--ana-renk); } #comparisonModal .table th { font-weight: 600; border-top: none; vertical-align: middle; background-color: var(--zemin-rengi); color: var(--ana-renk); } #comparisonModal .table td { font-size: 0.9rem; padding: 12px 8px; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.05); } .val-winner { font-weight: 900 !important; /* Ekstra Kalın */ color: var(--ana-renk); /* Tema rengi */ text-decoration: underline; /* Hafif alt çizgi (opsiyonel) */ text-decoration-thickness: 2px; text-decoration-color: rgba(95, 111, 82, 0.3); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(95, 111, 82, 0.05) !important; box-shadow: none !important; } #comparisonModal .modal-content { background-color: #fff; /* Light Mode Zemin */ color: #333; border: none; } #comparisonModal .modal-header { background-color: var(--ana-renk); color: var(--zemin-rengi); border-bottom: 1px solid rgba(0,0,0,0.1); } #comparisonModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); /* Beyaz çarpı */ } #comparison-controls, #comparisonModal .table thead th { background-color: #f8f9fa; /* Light Mode için çok açık gri */ color: var(--ana-renk); border-bottom: 1px solid rgba(0,0,0,0.1); } #comparisonModal .table td { vertical-align: middle; padding: 12px 8px; border-bottom: 1px solid rgba(0,0,0,0.05); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(95, 111, 82, 0.05) !important; /* --ana-renk %5 */ box-shadow: none !important; } .val-winner { font-weight: 800; color: var(--ana-renk); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(95, 111, 82, 0.3); } #comparisonModal .modal-footer { background-color: #f8f9fa; border-top: 1px solid rgba(0,0,0,0.1); } [data-theme="dark"] #comparisonModal .modal-content { background-color: var(--zemin-rengi); /* Koyu Siyah/Yeşil (#1a1c18) */ color: var(--ana-renk); /* Bej (#e6d6b8) */ border: 1px solid rgba(255,255,255,0.1); } /* Header: Koyu modda ana renk (Bej) olduğu için yazı koyu olmalı */ [data-theme="dark"] #comparisonModal .modal-header { background-color: var(--ikincil-renk); /* Koyu Yeşil (#5f6f52) kullanıyoruz ki yazı okunsun */ color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Kontroller ve Tablo Başlığı: Mavi-gri YOK! */ [data-theme="dark"] #comparison-controls, [data-theme="dark"] #comparisonModal .table thead th { background-color: var(--zemin-rengi) !important; /* Zeminle aynı */ color: var(--ana-renk) !important; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Tablo Satırları */ [data-theme="dark"] #comparisonModal .table { color: var(--ana-renk); --bs-table-bg: transparent; } [data-theme="dark"] #comparisonModal .table td { color: var(--ana-renk); border-bottom: 1px solid rgba(255,255,255,0.05); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03) !important; /* Çok hafif aydınlık */ } [data-theme="dark"] #comparisonModal .modal-footer { background-color: var(--zemin-rengi) !important; border-top: 1px solid rgba(255,255,255,0.1); } [data-theme="dark"] .val-winner { color: #fff; /* Parlak beyaz */ text-decoration-color: var(--ana-renk); } /* Harita Üzerindeki Bayrak Animasyonu ve Ülke Etiketleri */ .flag-anim { transform-origin: center; transform-box: fill-box; /* KRİTİK EKLEME: Dönüşüm merkezini resme odaklar */ animation: flagZoom 0.2s ease-out forwards; } .country-label { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Zoom yaptıkça fontu dinamik küçült (Sabit görünüm için) */ font-size: calc(21px / var(--map-scale, 1)); font-weight: normal; fill: #222; opacity: 0; /* Varsayılan: Hepsi gizli */ pointer-events: none; transition: opacity 0.3s ease; text-anchor: middle; dominant-baseline: middle; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; user-select: none; } #map-container.zoom-medium .country-label.label-tier-1 { opacity: 0.7; } #map-container.zoom-high .country-label { opacity: 0.7; } @keyframes flagZoom { 0% { transform: scale(0.9); } 100% { transform: scale(1.15); } /* %35 büyüme yeterli */ } /* Karşılaştırma Tepsisi Stilleri */ #comparison-tray { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(150%); /* Başlangıçta aşağıda gizli */ display: flex; align-items: flex-end; gap: 10px; padding: 10px 15px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Yaylanma efekti */ z-index: 900; max-width: 90%; } #comparison-tray.active { transform: translateX(-50%) translateY(0); /* Yukarı fırlar */ } /* Tepsideki Ülke Kartları */ .compare-card { position: relative; width: 70px; height: 85px; background: #fff; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.2s; } .compare-card:hover { transform: translateY(-3px); } .compare-card img { width: 40px; height: 26px; object-fit: cover; border-radius: 3px; margin-bottom: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .compare-card span { font-size: 0.65rem; font-weight: 600; text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90%; } /* Silme Butonu (Kartın üzerinde) */ .btn-remove-card { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #dc3545; color: white; border-radius: 50%; border: 2px solid white; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; z-index: 10; } .compare-card:hover .btn-remove-card { opacity: 1; } [data-theme="dark"] .search-feedback { background-color: #2c3e50; color: #e74c3c; border-color: #c0392b; } [data-theme="dark"] .compare-card { background-color: #34495e; color: #ecf0f1; border-color: rgba(255,255,255,0.1); } /* Karşılaştır Aksiyon Butonu */ .btn-compare-action { height: 80px; border-radius: 8px; font-weight: bold; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px; background-color: var(--ana-renk); color: var(--zemin-rengi); border: none; transition: all 0.2s; } .btn-compare-action:hover { filter: brightness(1.1); transform: scale(1.05); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Footer Stilleri */ .footer { background-color: var(--ana-renk); color: var(--zemin-rengi); padding: 10px 0; font-size: 0.8rem; width: 100%; } .footer a { color: #ffc107; text-decoration: none; } .footer a:hover { color: #fffff0; text-decoration: none; } .support-area { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; } .btn-support { border: 1px solid transparent; transition: all 0.3s ease; font-weight: 500; border-radius: 20px; padding: 4px 12px; } .btn-support:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .btn-github { background-color: #24292e; color: white; } .btn-github:hover { background-color: #444; color: white; } .btn-patreon { background-color: #FF424D; color: white; } .btn-patreon:hover { background-color: #ff6b74; color: white; } [data-theme="dark"] .footer a { color: var(--ikincil-renk); font-weight: bold; } [data-theme="dark"] .footer a:hover { color: #d35400; text-decoration: none; } [data-theme="dark"] .btn-github { background-color: #f0f6fc; color: #24292e; }