/**
 * Neo-Brutalism Custom Styles
 * 3 Boyutlu Zarafet Platformu
 * Updated for NeoBrutalismCSS Framework Integration
 */

/* ========================================
   NEO-BRUTALISM CORE VARIABLES
   ======================================== */
:root {
    --neo-border-width: 4px;
    --neo-shadow-offset: 4px;
    --neo-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --neo-font-primary: 'Space Grotesk', sans-serif;
    --neo-font-secondary: 'Montserrat', sans-serif;
}

/* ========================================
   NEO-BRUTALISM BASE COMPONENTS
   ======================================== */

/* Cards */
.nb-card {
    background: white;
    border: var(--neo-border-width) solid #000;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
    transition: var(--neo-transition);
    position: relative;
}

.nb-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0px #000;
}

.nb-card-body {
    padding: 1.5rem;
}

/* Buttons */
.nb-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: var(--neo-font-primary);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: var(--neo-border-width) solid #000;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
    transition: var(--neo-transition);
    cursor: pointer;
    text-decoration: none;
    background: white;
    color: #000;
    position: relative;
}

.nb-btn:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px #000;
    text-decoration: none;
    color: #000;
}

.nb-btn:active {
    transform: translateY(2px);
    box-shadow: 2px 2px 0px #000;
}

/* Modül Renk Butonları */
.nb-btn-purple { background: #8B5CF6; color: white; border-color: #7C3AED; }
.nb-btn-green { background: #10B981; color: white; border-color: #059669; }
.nb-btn-blue { background: #3B82F6; color: white; border-color: #2563EB; }
.nb-btn-orange { background: #F97316; color: white; border-color: #EA580C; }
.nb-btn-red { background: #EF4444; color: white; border-color: #DC2626; }
.nb-btn-indigo { background: #6366F1; color: white; border-color: #4F46E5; }
.nb-btn-pink { background: #EC4899; color: white; border-color: #DB2777; }
.nb-btn-yellow { background: #EAB308; color: #1F2937; border-color: #CA8A04; }
.nb-btn-white { background: white; color: #000; }

/* ========================================
   FORM ELEMENTS
   ======================================== */
.nb-input, .nb-select, .nb-textarea {
    width: 100%;
    padding: 0.75rem;
    border: var(--neo-border-width) solid #000;
    background: white;
    font-family: var(--neo-font-secondary);
    font-size: 1rem;
    transition: var(--neo-transition);
    box-sizing: border-box;
}

.nb-input:focus, .nb-select:focus, .nb-textarea:focus {
    outline: none;
    border-color: #8B5CF6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.nb-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: var(--neo-border-width) solid #000;
    background: white;
    cursor: pointer;
    appearance: none;
    position: relative;
}

.nb-checkbox:checked {
    background: #8B5CF6;
}

.nb-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */
.nb-alert {
    padding: 1rem;
    border: var(--neo-border-width) solid #000;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
    margin-bottom: 1rem;
}

.nb-alert-success {
    background: #DCFCE7;
    border-color: #166534;
}

.nb-alert-error {
    background: #FEE2E2;
    border-color: #991B1B;
}

.nb-alert-warning {
    background: #FEF3C7;
    border-color: #92400E;
}

.nb-alert-info {
    background: #DBEAFE;
    border-color: #1E40AF;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.nb-title {
    font-family: var(--neo-font-primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nb-text {
    font-family: var(--neo-font-secondary);
    line-height: 1.6;
}

.nb-display {
    font-family: var(--neo-font-primary);
    font-weight: 900;
    text-transform: uppercase;
}

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */
/* Ana sayfa grid sistemi - çift sütunlu */
.neo-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 sütun */
}

@media (min-width: 768px) {
    .neo-grid {
        grid-template-columns: repeat(4, 1fr); /* Tablet: 4 sütun */
    }
}

@media (min-width: 1024px) {
    .neo-grid {
        grid-template-columns: repeat(4, 1fr); /* Desktop: 4 sütun */
    }
}

/* Genel grid sistemi - çift sütunlu */
.nb-grid-2 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

.nb-grid-4 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 sütun */
}

@media (min-width: 768px) {
    .nb-grid-4 {
        grid-template-columns: repeat(4, 1fr); /* Tablet: 4 sütun */
    }
}

.nb-grid-6 {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 sütun */
}

@media (min-width: 768px) {
    .nb-grid-6 {
        grid-template-columns: repeat(4, 1fr); /* Tablet: 4 sütun */
    }
}

@media (min-width: 1024px) {
    .nb-grid-6 {
        grid-template-columns: repeat(6, 1fr); /* Desktop: 6 sütun */
    }
}

.nb-navbar {
    background: white;
    border-bottom: var(--neo-border-width) solid #000;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.nb-footer {
    background: white;
    border-top: var(--neo-border-width) solid #000;
    margin-top: 4rem;
    padding: 2rem 0;
}

.nb-hero {
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    color: white;
    padding: 4rem 2rem;
    text-align: center;
    border: var(--neo-border-width) solid #000;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
    margin-bottom: 2rem;
}

.nb-stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr); /* Mobil: 2 sütun */
}

@media (min-width: 768px) {
    .nb-stats {
        grid-template-columns: repeat(4, 1fr); /* Tablet: 4 sütun */
    }
}

.nb-stat {
    background: white;
    border: var(--neo-border-width) solid #000;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
    padding: 1.5rem;
    text-align: center;
}

/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse-brutal {
    0%, 100% { box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000; }
    50% { box-shadow: 6px 6px 0px #000; }
}

.animate-slide-left {
    animation: slideInLeft 0.5s ease-out;
}

.animate-slide-right {
    animation: slideInRight 0.5s ease-out;
}

.animate-slide-up {
    animation: slideInUp 0.5s ease-out;
}

.animate-pulse-brutal {
    animation: pulse-brutal 2s infinite;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-shadow {
    text-shadow: 2px 2px 0px rgba(0,0,0,0.25);
}

.text-shadow-white {
    text-shadow: 2px 2px 0px rgba(255,255,255,0.25);
}

.border-brutal {
    border: var(--neo-border-width) solid #000;
}

.shadow-brutal {
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #000;
}

.shadow-brutal-lg {
    box-shadow: 8px 8px 0px #000;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
/* Mobil tasarım - tek sütun için özel durumlar */
@media (max-width: 640px) {
    .neo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .nb-card-body {
        padding: 1rem;
    }

    .nb-title {
        font-size: 1.25rem;
    }

    .nb-hero {
        padding: 2rem 1rem;
    }

    .nb-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .nb-grid-2,
    .nb-grid-4,
    .nb-grid-6,
    .nb-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet tasarım */
@media (min-width: 641px) and (max-width: 1023px) {
    .neo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    .nb-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nb-grid-4,
    .nb-grid-6,
    .nb-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop tasarım */
@media (min-width: 1024px) {
    .neo-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.5rem;
    }

    .nb-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .nb-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .nb-grid-6,
    .nb-stats {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
[data-theme="dark"] {
    --neo-shadow-color: #FFFFFF;
    background: #1a1a1a;
    color: #e5e5e5;
}

[data-theme="dark"] .nb-card {
    background: #2a2a2a;
    color: #e5e5e5;
    border-color: #FFFFFF;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #FFFFFF;
}

[data-theme="dark"] .nb-btn {
    background: #2a2a2a;
    color: #e5e5e5;
    border-color: #FFFFFF;
    box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0px #FFFFFF;
}

[data-theme="dark"] .nb-input,
[data-theme="dark"] .nb-select,
[data-theme="dark"] .nb-textarea {
    background: #2a2a2a;
    border-color: #FFFFFF;
    color: #e5e5e5;
}

[data-theme="dark"] .nb-navbar,
[data-theme="dark"] .nb-footer {
    background: #1a1a1a;
    border-color: #FFFFFF;
}

/* ========================================
   ACCESSIBILITY & FOCUS STATES
   ======================================== */
.nb-btn:focus-visible,
.nb-input:focus-visible,
.nb-select:focus-visible,
.nb-textarea:focus-visible {
    outline: 3px solid #8B5CF6;
    outline-offset: 2px;
}

/* ========================================
   LOADING & INTERACTION STATES
   ======================================== */
.spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 4px solid #000;
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.nb-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border: 2px solid #000;
}

::-webkit-scrollbar-thumb {
    background: #000;
    border: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
    background: #333;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .no-print {
        display: none !important;
    }
    
    .nb-card,
    .nb-btn,
    .nb-alert {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    .nb-btn {
        background: white !important;
        color: black !important;
    }
}

/* ========================================
   MODULE SPECIFIC STYLES
   ======================================== */
.module-zarafet { background: #8B5CF6 !important; color: white !important; }
.module-gunluk { background: #10B981 !important; color: white !important; }
.module-testler { background: #3B82F6 !important; color: white !important; }
.module-nedenir { background: #F97316 !important; color: white !important; }
.module-dakika { background: #EF4444 !important; color: white !important; }
.module-ucboyut { background: #6366F1 !important; color: white !important; }
.module-kisisel { background: #EC4899 !important; color: white !important; }
.module-geri { background: #EAB308 !important; color: #1F2937 !important; }

/* ========================================
   LEGACY SUPPORT (for backward compatibility)
   ======================================== */
.neo-card, .neo-button, .neo-input, .neo-select, .neo-alert {
    /* These classes now map to nb- equivalents */
    @apply nb-card nb-btn nb-input nb-select nb-alert;
}