﻿:root { --primary-color: #3498db; --accent-color: #e74c3c; --glass-bg: rgba(255, 255, 255, 0.95); --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); }

.asistan-container { max-width: 600px; margin: 30px auto; padding: 40px; background: var(--glass-bg); border-radius: 24px; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, 0.18); text-align: center; transition: transform 0.3s ease; }

.search-header h3 { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #2c3e50; font-weight: 700; margin-bottom: 30px; letter-spacing: -0.5px; }

.search-wrapper { display: flex; gap: 15px; align-items: center; }

.input-group { position: relative; flex: 1; display: flex; align-items: center; }

.search-icon { position: absolute; left: 20px; color: #95a5a6; font-size: 1.1rem; }

.search-input { width: 100%; padding: 10px 50px !important; box-sizing: border-box; border: 2px solid #edf2f7; border-radius: 16px; font-size: 1rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; background: #f8fafc; }

.search-input:focus { border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1); }

/* Arama Butonu */
.btn-search-main { padding: 10px 30px !important; background: var(--primary-color); color: white; border: none; border-radius: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2); }

.btn-search-main:hover { background: #2980b9; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3); }

/* Sesli Arama Butonu */
.btn-voice { width: 36px; height: 36px; position: absolute; right: 5px; background: #fff; border: none; border-radius: 12px; color: var(--primary-color); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.btn-voice:hover { background: #f0f7ff; color: var(--accent-color); }

/* Nabız Efekti (Dinlerken tetiklenecek) */
.btn-voice.is-listening { background: var(--accent-color) !important; color: white !important; animation: pulse-red 1.5s infinite; }

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.search-footer { margin-top: 20px; font-size: 0.9rem; color: #7f8c8d; }

.search-footer a { color: var(--primary-color); text-decoration: none; margin: 0 5px; font-weight: 500; }

.search-footer a:hover { text-decoration: underline; }
