/**
 * İzmir Otomatik Tente - Kırmızı ve Antrasit Renk Teması
 * Bu dosya app.css'den sonra yüklenir ve renkleri override eder
 */

/* Ana Renk Değişkenleri */
:root {
    --primary-red: #DC2626;
    --primary-red-dark: #B91C1C;
    --primary-red-light: #EF4444;
    --anthracite: #2D3436;
    --anthracite-dark: #1E272E;
    --anthracite-light: #636E72;
}

/* ========== ANA RENK OVERRIDE'LARI ========== */

/* Sarı yerine Kırmızı - Butonlar ve vurgular */
.bg-p-yellow,
a.bg-p-yellow,
button.bg-p-yellow {
    background-color: var(--primary-red) !important;
    color: white !important;
}

.bg-p-yellow:hover,
a.bg-p-yellow:hover,
button.bg-p-yellow:hover {
    background-color: var(--primary-red-dark) !important;
}

.bg-p-yellow\/80 {
    background-color: rgba(220, 38, 38, 0.8) !important;
}

.text-p-yellow {
    color: var(--primary-red) !important;
}

.border-p-yellow {
    border-color: var(--primary-red) !important;
}

/* Mavi yerine Antrasit */
.bg-p-blue {
    background-color: var(--anthracite) !important;
}

.bg-p-blue\/5 {
    background-color: rgba(45, 52, 54, 0.05) !important;
}

.bg-p-blue\/70 {
    background-color: rgba(45, 52, 54, 0.7) !important;
}

.text-p-blue {
    color: var(--anthracite) !important;
}

.text-p-blue\/50 {
    color: rgba(45, 52, 54, 0.5) !important;
}

.text-p-blue\/70 {
    color: rgba(45, 52, 54, 0.7) !important;
}

.border-p-blue {
    border-color: var(--anthracite) !important;
}

.border-p-blue\/10 {
    border-color: rgba(45, 52, 54, 0.1) !important;
}

.border-p-blue\/20 {
    border-color: rgba(45, 52, 54, 0.2) !important;
}

.divide-p-blue\/20 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(45, 52, 54, 0.2) !important;
}

/* ========== KOYU ARKA PLANDA BEYAZ YAZI ========== */
/* bg-p-blue içindeki tüm yazılar beyaz olmalı */
.bg-p-blue,
.bg-p-blue *,
.bg-p-blue h1,
.bg-p-blue h2,
.bg-p-blue h3,
.bg-p-blue h4,
.bg-p-blue h5,
.bg-p-blue h6,
.bg-p-blue p,
.bg-p-blue span,
.bg-p-blue a,
.bg-p-blue li,
.bg-p-blue div {
    color: white !important;
}

.bg-p-blue .text-p-blue,
.bg-p-blue .text-p-blue\/70,
.bg-p-blue .text-p-blue\/50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Gradient backgrounds with dark colors */
.from-p-blue,
.via-p-blue,
.to-p-blue,
[class*="from-p-blue"],
[class*="via-p-blue"],
[class*="to-gray-900"],
[class*="from-gray-800"],
.bg-gradient-to-br.from-p-blue {
    color: white !important;
}

/* Gray-50 ve açık arka planlarda antrasit yazı */
.bg-gray-50,
.bg-gray-50 *,
.bg-white,
.bg-white * {
    color: var(--anthracite);
}

.bg-gray-50 .text-p-blue\/70,
.bg-white .text-p-blue\/70 {
    color: rgba(45, 52, 54, 0.7) !important;
}

/* Kartlar içinde doğru renkler */
.bg-white h3,
.bg-white h4,
.bg-white p {
    color: var(--anthracite) !important;
}

.bg-white .text-p-blue\/70 {
    color: rgba(45, 52, 54, 0.7) !important;
}

/* ========== NAVİGASYON / HEADER ========== */

/* Ana Navigasyon - Her zaman koyu arka plan */
#nav,
nav.nav {
    background-color: var(--anthracite) !important;
    color: white !important;
}

#nav a,
#nav button,
nav.nav a,
nav.nav button {
    color: white !important;
}

#nav a:hover,
nav.nav a:hover {
    opacity: 0.7;
}

/* Scroll durumunda da koyu kalmalı */
.nav.is-scrolled {
    background-color: var(--anthracite-dark) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Hamburger menü çizgileri beyaz */
#hamburger span {
    background-color: white !important;
}

/* ========== BUTON STİLLERİ ========== */

/* Ana CTA butonları (Sarı/Kırmızı) */
.bg-p-yellow {
    background-color: var(--primary-red) !important;
    color: white !important;
}

.bg-p-yellow .text-p-blue,
.bg-p-yellow span,
a.bg-p-yellow span {
    color: white !important;
}

/* İletişim butonu özel stil */
a[href*="iletisim"].bg-p-yellow,
.bg-p-yellow[href*="iletisim"] {
    background-color: var(--primary-red) !important;
    color: white !important;
    transition: all 0.3s ease;
}

a[href*="iletisim"].bg-p-yellow:hover {
    background-color: var(--primary-red-dark) !important;
    transform: translateY(-2px);
}

a[href*="iletisim"].bg-p-yellow span {
    color: white !important;
}

/* Kenarlıklı butonlar (Sarı kenarlık -> Kırmızı kenarlık) */
.border-p-yellow {
    border-color: var(--primary-red) !important;
}

.border-p-yellow.text-p-yellow {
    color: var(--primary-red) !important;
}

/* Koyu arka planda butonlar */
.bg-p-blue a.bg-p-yellow,
.bg-p-blue .bg-p-yellow,
.text-white .bg-p-yellow {
    background-color: var(--primary-red) !important;
    color: white !important;
}

.bg-p-blue a.bg-p-yellow span,
.text-white a.bg-p-yellow span {
    color: white !important;
}

/* Koyu alanlarda kenarlıklı butonlar */
.bg-p-blue .border-p-blue,
.text-white .border-p-blue {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.bg-p-blue .border-p-blue span,
.text-white .border-p-blue span {
    color: white !important;
}

/* ========== HOVER DURUMLARI ========== */

.hover\:bg-p-blue\/10:hover {
    background-color: rgba(45, 52, 54, 0.1) !important;
}

.hover\:text-p-blue:hover {
    color: var(--anthracite) !important;
}

.hover\:text-p-blue\/50:hover {
    color: rgba(45, 52, 54, 0.5) !important;
}

.hover\:text-p-blue\/80:hover {
    color: rgba(45, 52, 54, 0.8) !important;
}

.active\:bg-p-yellow\/80:active {
    background-color: rgba(220, 38, 38, 0.8) !important;
}

.active\:bg-p-blue\/10:active {
    background-color: rgba(45, 52, 54, 0.1) !important;
}

.focus\:border-p-yellow:focus {
    border-color: var(--primary-red) !important;
}

.placeholder\:text-p-blue\/50::placeholder {
    color: rgba(45, 52, 54, 0.5) !important;
}

/* ========== GRADIENT GÜNCELLEMELERİ ========== */

.from-p-blue\/40 {
    --tw-gradient-from: rgba(45, 52, 54, 0.4) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(45, 52, 54, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* ========== NAVİGASYON MODAL (Yan Menü) ========== */

#navigationModal {
    background-color: rgba(45, 52, 54, 0.98) !important;
}

#navigationModal,
#navigationModal * {
    color: white !important;
}

#navigationModal h4,
#navigationModal .tracking-widest {
    color: rgba(255, 255, 255, 0.5) !important;
}

#navigationModal a {
    color: white !important;
}

#navigationModal a:hover {
    opacity: 0.7;
}

/* Sosyal medya ikonları beyaz */
#navigationModal img {
    filter: brightness(0) invert(1);
}

/* ========== SLIDER DOTS ========== */

#heroDots .tns-nav-active {
    background-color: var(--primary-red) !important;
}

/* ========== FORM STİLLERİ ========== */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-red) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* ========== FOOTER ========== */

footer a:hover {
    color: var(--primary-red) !important;
}

/* ========== KARTLAR VE BÖLÜMLER ========== */

.stat-card.yellow {
    border-left-color: var(--primary-red) !important;
}

.welcome-card {
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--anthracite) 100%) !important;
}

/* ========== TABLO VE LİSTE ========== */

.table-hover tbody tr:hover {
    background-color: rgba(220, 38, 38, 0.05) !important;
}

/* ========== ALERT VE BİLDİRİMLER ========== */

.alert-primary {
    background-color: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--primary-red) !important;
    color: var(--primary-red-dark) !important;
}

/* ========== PAGINATION ========== */

.page-item.active .page-link {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

.page-link {
    color: var(--anthracite) !important;
}

.page-link:hover {
    color: var(--primary-red) !important;
}

/* ========== PROGRESS BAR ========== */

.progress-bar {
    background-color: var(--primary-red) !important;
}

/* ========== BADGE ========== */

.badge.bg-p-yellow {
    background-color: var(--primary-red) !important;
    color: white !important;
}

/* ========== SCROLLBAR ========== */

.scrollable::-webkit-scrollbar-thumb {
    background-color: var(--anthracite) !important;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .bg-p-yellow {
        background-color: var(--primary-red) !important;
        color: white !important;
    }
    
    .bg-p-yellow span {
        color: white !important;
    }
}