/* Explain: Styles UI components like cards, buttons, inputs, and badges; updated for compactness. */
.neo-card {
    border: 3px solid var(--border-color);
    border-radius: 1.25rem;
    background: var(--surface-color);
    box-shadow: 6px 6px 0px 0px var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neo-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px 0px var(--border-color);
}

.neo-card.passive {
    background: #E9ECEF;
    border-color: #ADB5BD;
    box-shadow: 4px 4px 0px 0px #ADB5BD;
    opacity: 0.85;
}
.neo-card.passive:hover {
    transform: none;
    box-shadow: 4px 4px 0px 0px #ADB5BD;
}

.neo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 4px 4px 0px 0px var(--border-color);
    font-weight: 800;
    transition: all 0.15s ease;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
}

.neo-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px 0px var(--border-color);
}

.neo-btn.aktif {
    background: var(--primary-color);
    color: #FFFFFF;
}

/* Kompakt buton — ilan ve boş araç kartlarındaki aksiyon şeridinde kullanılır. */
.neo-btn.neo-btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.neo-input {
    border: 3px solid var(--border-color) !important;
    border-radius: 0.75rem !important;
    box-shadow: 3px 3px 0px 0px rgba(20, 33, 61, 0.1) !important;
    font-weight: 600;
    transition: all 0.2s;
}

.neo-input:focus {
    box-shadow: 4px 4px 0px 0px var(--border-color) !important;
    transform: translate(-1px, -1px);
    outline: none !important;
}

.field-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pill-tag {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--secondary-color);
    color: var(--text-color);
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.form-status {
    min-height: 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 0.5rem;
}
.form-status.success { color: var(--success-color); }
.form-status.error { color: var(--accent-color); }

.nav-badge {
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 1.3rem;
    height: 1.3rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    border-radius: 999px;
    box-shadow: 1px 1px 0px 0px var(--border-color);
    border: 2px solid var(--border-color);
    transition: background 0.35s ease, transform 0.35s ease;
}

.nav-badge.guncellendi {
    background: var(--success-color);
    animation: badgePulse 0.6s ease;
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.puan-rozet {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.puan-rozet-puan {
    font-weight: 800;
    color: var(--text-color);
}

.puan-seviye {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.puan-seviye-yuksek {
    background: var(--success-color);
    color: #FFFFFF;
}

.puan-seviye-orta {
    background: var(--secondary-color);
    color: var(--text-color);
}

.puan-seviye-dusuk,
.puan-seviye-yok {
    background: #E9ECEF;
    color: var(--text-muted);
}

.puan-yildizlar {
    display: inline-flex;
    gap: 0.15rem;
    color: var(--secondary-color);
}

.puan-yildizlar.puan-buyuk {
    font-size: 1.5rem;
}

.puan-soluk {
    opacity: 0.3;
}

.puan-adet {
    color: var(--text-muted);
    font-weight: 700;
}

.puan-is {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--text-color);
    padding: 0.05rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.4;
}

.puan-is i {
    color: var(--success-color);
    font-size: 0.6rem;
}

.yildiz-grup {
    display: inline-flex;
    gap: 0.3rem;
}

.yildiz-btn {
    background: none;
    border: none;
    padding: 0.1rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.35;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

.yildiz-btn.aktif {
    color: var(--secondary-color);
    opacity: 1;
}

.yildiz-btn:hover {
    transform: scale(1.1);
}

.sonuc-sayac {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--primary-color);
    color: #FFFFFF;
    padding: 0.4rem 0.9rem;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.01em;
    box-shadow: 3px 3px 0px 0px var(--border-color);
    transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

/* İlan arama alanı — kompakt filtre denetimleri: alanlar ve düğmeler daha az yer kaplar,
   böylece pano ekranın üst kısmında daha çok ilan görünür. */
.filtre-alan .neo-input {
    min-height: 0;
    height: auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    box-shadow: 2px 2px 0px 0px rgba(20, 33, 61, 0.1) !important;
}

.filtre-alan .field-label {
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
}

.filtre-alan .neo-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    box-shadow: 3px 3px 0px 0px var(--border-color);
}

.sonuc-sayac.guncellendi {
    background: var(--success-color);
    animation: sonucPulse 0.6s ease;
}

@keyframes sonucPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.mod-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: 4px 4px 0px 0px var(--border-color);
    font-weight: 800;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mod-tab.aktif {
    background: var(--primary-color);
    color: #FFFFFF;
}

.mod-tab:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px 0px var(--border-color);
}

.modal-panel {
    border: 3px solid var(--border-color);
    border-radius: 1.25rem;
    background: var(--surface-color);
    box-shadow: 6px 6px 0px 0px var(--border-color);
}

/* İlan / boş araç paneli açıkken üstünde açılması gereken yardımcı pencereler
   (kredi onayı, profil, giriş, bilgi, puanlama, işi verdim) daha yüksek katmanda durur. */
#girisModal,
#profilModal,
#krediOnayModal,
#bilgiModal,
#puanModal,
#isVerdimModal,
#duzenleModal {
    z-index: 1000 !important;
}

/* Onaya düşen iş penceresi ve onun üstünde açılan ikinci teyit penceresi. */
#onayModal {
    z-index: 1000 !important;
}

#onayTeyitModal {
    z-index: 1100 !important;
}

/* Üst köşede görünen üye kartı: kayıtlı ad ve kalıcı Nakliyeci No. */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 12rem;
    border: 3px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-color);
    padding: 0.3rem 0.7rem;
    box-shadow: 3px 3px 0px 0px var(--border-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.user-chip:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px 0px var(--border-color);
}

.user-chip-ikon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 2px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--primary-color);
    color: #FFFFFF;
    font-size: 0.85rem;
}

.user-chip-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.user-chip-ad {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-chip-no {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-chip-kredi {
    font-weight: 800;
    font-size: 0.7rem;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobil üst çubukta üye kartı daha dar yer kaplar. */
.hesap-ust-mobil .user-chip {
    max-width: 38vw;
}

/* Logo görseli — tüm konumlarda bozulmadan, yüksekliği sabit bir çerçevede durur. */
.logo-img {
    display: block;
    width: auto;
    object-fit: contain;
}

/* Nakliye ilanları açık gri, boş araç bildirimleri açık sarı zeminle ayrışır. */
.talep-kart {
    background: #F7F7F7;
}

.bos-arac-kart {
    background: #FFF6F0;
}

/* Favorilere eklenmiş kart düğmesi — kalp dolu görünür ve düğme vurgulanır. */
.favori-btn.favori-aktif {
    background: var(--secondary-color);
    color: var(--text-color);
}

/* İlan sahibiyle doğrudan WhatsApp görüşmesi başlatan düğme. */
.wa-mesaj-btn {
    background: var(--whatsapp-color);
    color: #FFFFFF;
}

.wa-mesaj-btn:hover {
    background: var(--whatsapp-hover);
}

/* Alarm çaldığında tüm sayfa arka planı 5 saniye boyunca sarı-yeşil yanıp söner. */
.alarm-caldi {
    animation: alarmZemin 5s ease-in-out;
}

@keyframes alarmZemin {
    0% { background-color: var(--background-color); }
    12.5% { background-color: #FDE047; }
    25% { background-color: var(--success-color); }
    37.5% { background-color: #FDE047; }
    50% { background-color: var(--success-color); }
    62.5% { background-color: #FDE047; }
    75% { background-color: var(--success-color); }
    87.5% { background-color: #FDE047; }
    100% { background-color: var(--background-color); }
}

/* İlan ve boş araç kartlarındaki etiketler — kart üzerindeki renk karmaşasını azaltan
   ortak, sade stil. Tüm bilgi etiketleri aynı görünür; yalnızca araç tipi ve durum
   etiketleri vurgu rengiyle ayrışır. */
.il-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 2px solid var(--border-color);
    border-radius: 0.6rem;
    background: #FFFFFF;
    color: var(--text-color);
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.5;
}

.il-chip i {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* Araç grubu + tipi: kartın tek vurgulu etiketi. */
.il-chip-tip {
    background: var(--secondary-color);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.il-chip-tip i {
    color: var(--text-color);
}

/* İlan numarası: sade, kesikli çerçeve. */
.il-chip-no {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
}

/* Durum etiketleri */
.il-chip-aktif {
    background: var(--primary-color);
    color: #FFFFFF;
}

.il-chip-aktif i {
    color: #FFFFFF;
}

.il-chip-onay {
    background: var(--secondary-color);
    color: var(--text-color);
}

.il-chip-onay i {
    color: var(--text-color);
}

/* Tahmini mesafe etiketi */
.il-chip-mesafe {
    background: var(--primary-color);
    color: #FFFFFF;
}

.il-chip-mesafe i {
    color: #FFFFFF;
}

/* Kart alt bilgi satırı: tüm simgeler ve ikincil metinler tek renkte. */
.il-meta {
    color: var(--text-muted);
}

.il-meta i {
    color: var(--text-muted);
}

/* Konum yarıçapı çubuğu — tek satırda il seçimi, yarıçap adımları ve kaldırma düğmesi. */
.yakin-il {
    max-width: 8.5rem;
    padding: 0.15rem 0.4rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.6;
}

.yakin-adim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 0.45rem;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.65rem;
    line-height: 1;
    transition: background 0.15s ease;
}

.yakin-adim-btn:hover:not(:disabled) {
    background: var(--secondary-color);
}

.yakin-adim-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.yakin-yaricap-yazi {
    min-width: 3.2rem;
    text-align: center;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 900;
}

.yakin-temizle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 0.45rem;
    background: var(--surface-color);
    color: var(--accent-color);
    font-size: 0.7rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.yakin-temizle:hover {
    background: var(--accent-color);
    color: #FFFFFF;
}

/* Kontrast güvencesi: koyu zeminli (lacivert, kırmızı, yeşil) tüm düğme, kart ve
   alt yazılar her zaman beyaz yazıyla gösterilir. Böylece "İlan Yayınla",
   "İlanları Gör" gibi koyu zeminli alanlarda siyah / okunmayan yazı oluşmaz. */
[class~="bg-[var(--primary-color)]"],
[class~="bg-[var(--accent-color)]"],
[class~="bg-[var(--text-color)]"],
[class~="bg-[var(--success-color)]"] {
    color: #FFFFFF !important;
}

/* Renkli neo-kart zeminleri: .neo-card varsayılan beyaz zeminini artık ezmiyor.
   Böylece toplu kapatma çubuğu, tahmini mesafe kutusu, toplu ilan maliyet kutusu,
   onay paneli ve mobil menüdeki "İlan Yayınla" kartı beyaz kutuya dönüşüp
   içindeki yazıları görünmez yapmıyor. */
.neo-card[class*="bg-[var(--primary-color)]"] {
    background: var(--primary-color);
}

.neo-card[class*="bg-[var(--accent-color)]"] {
    background: var(--accent-color);
}

.neo-card[class*="bg-[var(--success-color)]"] {
    background: var(--success-color);
}

.neo-card[class*="bg-[var(--secondary-color)]"] {
    background: var(--secondary-color);
}

/* Üst menüdeki hesap alanı düğmeleri — renkleri her koşulda görünür kalsın. */
.hesap-giris-btn {
    background: var(--primary-color);
    color: #FFFFFF;
}

.hesap-giris-btn:hover {
    background: var(--primary-hover);
}

.hesap-kayit-btn,
.hesap-panel-btn {
    background: var(--secondary-color);
    color: var(--text-color);
}

/* Ana sayfa hero alanındaki düğmeler — koyu zemin üzerinde net okunur.
   Birincil düğme marka sarısı, ikincil düğme ise beyaz çerçeveli saydam yüzey olarak durur. */
.neo-btn-hero-primary {
    background: var(--secondary-color);
    color: var(--text-color);
}

.neo-btn-hero-primary:hover {
    background: var(--secondary-hover);
}

.neo-btn-hero-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 0.35);
}

.neo-btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.26);
}