:root {
    --primary-blue: #2563eb; --dark-blue: #1e40af; --light-blue: #dbeafe; --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --green-500: #10b981; --red-500: #ef4444; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; color: var(--gray-900); background: var(--gray-50); -webkit-tap-highlight-color: transparent; }
.app-container { position: relative; width: 100vw; height: 100vh; display: flex; transition: filter 0.3s ease-in-out; }
.app-container.is-blurred { pointer-events: none; }
#consent-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(243, 244, 246, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 1; transition: opacity 0.4s ease, visibility 0.4s ease; }
#consent-overlay.is-hidden { opacity: 0; visibility: hidden; }
.consent-modal { background: var(--white); padding: 32px 40px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); max-width: 500px; width: 100%; text-align: center; animation: fadeInScale 0.4s var(--transition-fast); max-height: 90vh; display: flex; flex-direction: column; padding-bottom: 20px; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.consent-modal h2 { font-size: 1.5em; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; }
.consent-modal .consent-text { font-size: 0.95em; color: var(--gray-700); line-height: 1.6; margin-bottom: 12px; padding: 0 10px;}
#accept-consent-btn { width: 100%; padding: 14px 20px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-lg); font-size: 1em; font-weight: 600; cursor: pointer; transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
#accept-consent-btn:hover:not(:disabled) { background: var(--dark-blue); }
#accept-consent-btn:disabled { background: var(--gray-300); cursor: not-allowed; color: var(--gray-500); }
.consent-error-message { color: var(--red-500); font-size: 0.85em; font-weight: 500; margin-top: 12px; min-height: 18px; }
#map { flex-grow: 1; height: 100%; background: var(--gray-200); z-index: 1; }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { background-color: var(--gray-800); color: var(--white); padding: 12px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.9em; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: toastInRight 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
.toast.toast-error { background-color: var(--red-500); }
.toast-icon { font-size: 1.2em; }
@keyframes toastInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.recenter-btn { position: absolute; bottom: 30px; right: 20px; z-index: 1002; background-color: var(--white); border: 1px solid var(--gray-200); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); cursor: pointer; color: var(--primary-blue); transition: var(--transition-smooth); transform: scale(0); opacity: 0; }
.recenter-btn.visible { transform: scale(1); opacity: 1; }
.recenter-btn:hover { background-color: var(--gray-100); }
.instruction-banner { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 400px; background: var(--white); z-index: 1001; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: none; padding: 16px 20px; transition: var(--transition-smooth); border: 1px solid var(--gray-200); }
.instruction-banner.is-active { display: block; animation: slideInDown 0.3s ease-out; }
@keyframes slideInDown { from { transform: translateX(-50%) translateY(-10px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.instruction-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.instruction-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.instruction-icon { width: 48px; height: 48px; background: var(--primary-blue); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8em; flex-shrink: 0; }
.instruction-details { flex: 1; min-width: 0; }
.instruction-distance { font-size: 1.6em; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.instruction-text { font-size: 1em; font-weight: 500; color: var(--gray-700); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instruction-meta { text-align: right; flex-shrink: 0; }
.instruction-time { font-size: 0.9em; font-weight: 600; color: var(--primary-blue); margin-bottom: 2px; }
.instruction-meta .close-btn { background: var(--gray-100); color: var(--gray-700); border: none; font-size: 0.8em; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; margin-top: 4px; transition: background-color 0.2s; }
.instruction-meta .close-btn:hover { background: var(--gray-200); }
.info-panel { width: 380px; height: 100%; background: var(--white); display: flex; flex-direction: column; box-shadow: var(--shadow-md); z-index: 1000; border-right: 1px solid var(--gray-200); transition: var(--transition-smooth); }
.panel-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.panel-title { font-size: 1.4em; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.panel-subtitle { font-size: 0.9em; color: var(--gray-500); font-weight: 400; }
.panel-content { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.search-container { padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-200); }
.search-wrapper { position: relative; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); z-index: 2; transition: var(--transition-fast); }
#searchInput { width: 100%; padding: 12px 12px 12px 44px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); font-size: 1em; background: var(--white); transition: var(--transition-fast); font-weight: 400; color: var(--gray-800); }
#searchInput:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
#searchInput:focus + .search-icon { color: var(--primary-blue); }
#searchInput::placeholder { color: var(--gray-500); font-weight: 400; }
.location-control { padding: 16px 24px; border-bottom: 1px solid var(--gray-200); }
#useLocationBtn { width: 100%; padding: 14px 20px; background: var(--white); color: var(--gray-700); border: 1.5px solid var(--gray-300); border-radius: var(--radius-lg); font-size: 0.95em; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition-fast); }
#useLocationBtn svg { transition: color 0.2s; }
#useLocationBtn:hover:not(:disabled) { border-color: var(--primary-blue); background: var(--light-blue); }
#useLocationBtn.active { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }
#useLocationBtn.active svg { color: white; }
#useLocationBtn:disabled { background: var(--gray-200); color: var(--gray-500); border-color: var(--gray-200); cursor: not-allowed; }
.location-list { flex-grow: 1; overflow-y: auto; padding: 8px 0; }
.location-item { display: flex; align-items: center; padding: 16px 24px; cursor: pointer; transition: background-color 0.15s, transform 0.15s; background: var(--white); border-bottom: 1px solid var(--gray-100); gap: 16px; }
.location-item:hover { background: var(--gray-50); transform: translateX(4px); }
.location-item.active { background: var(--light-blue); }
.location-item-icon { width: 44px; height: 44px; background: var(--gray-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--primary-blue); font-weight: 600; font-size: 1.2em; flex-shrink: 0; }
.location-item-content { flex: 1; min-width: 0; }
.location-item-title { font-size: 1em; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.location-item-description { font-size: 0.85em; color: var(--gray-500); font-weight: 400; }
.location-item-arrow { color: var(--gray-300); transition: var(--transition-fast); margin-left: auto; }
.location-item:hover .location-item-arrow { color: var(--primary-blue); transform: translateX(3px); }
.no-results { padding: 40px 20px; text-align: center; color: var(--gray-500); }
.no-results-icon { font-size: 3em; margin-bottom: 16px; display: block; }
.destination-marker { font-size: 2em; }
.building-marker-icon { font-size: 2.2em; color: var(--red-500); text-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: var(--transition-fast); }
.leaflet-marker-icon:hover .building-marker-icon { transform: scale(1.2); }
.leaflet-popup-content-wrapper { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 240px !important; }
.custom-popup-header { background-color: var(--primary-blue); color: white; padding: 16px; text-align: center; }
.custom-popup-header-title { font-size: 1.1em; font-weight: 600; margin: 0; }
.custom-popup-content { padding: 16px; font-size: 0.9em; color: var(--gray-700); }
.custom-popup-footer { padding: 0 16px 16px; }
.popup-nav-button { width: 100%; background: var(--dark-blue); color: white; border: none; padding: 12px; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; transition: var(--transition-fast); }
.popup-nav-button:hover { background: #1e3a8a; }
.leaflet-popup-tip-container { display: none; }
.loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: currentColor; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#useLocationBtn .loading-spinner { border-top-color: var(--gray-700); }
#useLocationBtn.active .loading-spinner { border-top-color: var(--white); }
.consent-sections { margin-top: 20px; padding: 15px; background-color: var(--gray-50); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); overflow-y: auto; text-align: left; flex-grow: 1; margin-bottom: 20px; }
.consent-sections h3 { font-size: 0.95rem; font-weight: 600; color: var(--gray-800); margin-top: 15px; margin-bottom: 5px; }
.consent-sections p { font-size: 0.85rem; color: var(--gray-700); margin-bottom: 15px; line-height: 1.4; }
.g-recaptcha { display: flex; justify-content: center; margin-top: 15px; margin-bottom: 5px; }
.user-location-marker-rotatable { background: none !important; border: none !important; width: 30px !important; height: 30px !important; margin-left: -15px !important; margin-top: -15px !important; }
.user-location-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--primary-blue); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--primary-blue); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; }
.user-location-arrow::after { content: ''; position: absolute; top: -12px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid var(--primary-blue); }
.location-item .location-item-loader { display: none; }
.location-item.is-loading .location-item-loader { display: block; }
.location-item.is-loading .location-item-arrow { display: none; }
.location-item .location-item-loader .loading-spinner { width: 20px; height: 20px; border: 2px solid var(--gray-300); border-top-color: var(--primary-blue); }
.leaflet-routing-container { display: none !important; }
.data-warning-alert { background-color: #fffbeb; border: 1px solid #fde68a; color: #b45309; padding: 15px; margin: 20px; border-radius: 8px; position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 1001; max-width: 350px; text-align: center; }
.data-warning-alert p { margin: 5px 0; }
.data-warning-alert .close-btn { background-color: #fef3c7; border: 1px solid #fde08a; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px; }
.route-counter-container { padding: 16px 24px; text-align: center; background-color: var(--gray-50); border-top: 1px solid var(--gray-200); margin-top: auto; font-size: 0.9em; color: var(--gray-700); }
.route-counter-container .counter-icon { font-size: 1.5em; display: block; margin-bottom: 8px; animation: bounce 2s infinite; }
.route-counter-container .counter-text strong { color: var(--primary-blue); font-weight: 700; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-8px);} 60% {transform: translateY(-4px);} }
.suggestion-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2010; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 1; transition: opacity 0.3s ease, visibility 0.3s ease; }
.suggestion-overlay.is-hidden { opacity: 0; visibility: hidden; }
.suggestion-modal { background: var(--white); padding: 32px 40px; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); max-width: 480px; width: 100%; text-align: center; animation: fadeInScale 0.4s var(--transition-fast); }
.suggestion-modal h2 { font-size: 1.5em; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.suggestion-modal p { font-size: 0.95em; color: var(--gray-700); line-height: 1.6; margin-bottom: 24px; }
#suggestion-form { display: flex; flex-direction: column; gap: 12px; }
#suggestion-text { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); font-size: 1em; background: var(--white); transition: var(--transition-fast); font-family: 'Inter', sans-serif; resize: vertical; min-height: 80px; }
#suggestion-text:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
#submit-suggestion-btn { width: 100%; padding: 14px 20px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-lg); font-size: 1em; font-weight: 600; cursor: pointer; transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 8px; }
#submit-suggestion-btn:hover:not(:disabled) { background: var(--dark-blue); }
#submit-suggestion-btn:disabled { background: var(--gray-300); cursor: not-allowed; }
.suggestion-error-message { color: var(--red-500); font-size: 0.85em; font-weight: 500; min-height: 18px; }
.suggestion-modal .close-btn { background: none; border: none; color: var(--gray-500); font-size: 0.9em; font-weight: 500; cursor: pointer; margin-top: 16px; padding: 8px; }
.suggestion-modal .close-btn:hover { color: var(--gray-800); }
@media (max-width: 768px) {
    .app-container { flex-direction: column; }
    #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .info-panel { position: fixed; bottom: 0; left: 0; width: 100%; height: 70vh; max-height: 80vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.15); transform: translateY(calc(100% - 80px)); border-right: none; border-top: 1px solid var(--gray-200); }
    .info-panel.is-open { transform: translateY(0); }
    .panel-header { cursor: pointer; padding: 16px 20px 12px; position: relative; }
    .panel-grip { width: 40px; height: 4px; background: var(--gray-300); border-radius: 2px; margin: 0 auto 12px; }
    .instruction-banner { top: 10px; width: calc(100% - 20px); }
    .recenter-btn { bottom: 100px; right: 15px; transition: bottom 0.3s ease-in-out, transform 0.3s, opacity 0.3s; }
    .info-panel.is-open ~ .recenter-btn { bottom: calc(70vh + 20px); }
    #toast-container { top: 10px; right: 10px; width: calc(100% - 20px); }
    .consent-modal { padding: 24px 20px; }
    .route-counter-container { padding-bottom: 24px; }
}
/* --- YENİ EKLENEN KİOSK İKONU STİLLERİ --- */

.kiosk-marker-icon {
    font-size: 1.8em; /* İkonun (emoji) boyutu */
    background-color: var(--primary-blue); /* Ana marka rengi */
    color: var(--white);
    border-radius: 50%; /* Dairesel görünüm */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-md); /* Hafif gölge */
    transition: var(--transition-fast);
}

/* Fare üzerine gelince büyüme efekti */
.leaflet-marker-icon:hover .kiosk-marker-icon {
    transform: scale(1.15);
    background-color: var(--dark-blue);
}

/* Mevcut bina ikonu üzerinde küçük bir ayarlama (isteğe bağlı) */
.building-marker-icon {
    /* Bu sınıfın mevcut stilleri zaten var, bu sadece bir hatırlatma */
    transition: var(--transition-fast);
}

.leaflet-marker-icon:hover .building-marker-icon {
    transform: scale(1.2); /* Hover efekti diğer ikonlarda da kalsın */
}