/*
    Theme: Endüstriyel Ticaret Gelişimi (Industrial Trade Development)
    Design System: Brutalism + Dynamic Color Transitions
    Color Scheme: Tetradic (Teal, Orange, Violet, Yellow accents on a dark base)
    Animation Style: Non-linear Movements
    Fonts: Montserrat (Headings), Merriweather (Body)
*/

/* ===== CSS VARIABLES & ROOT CONFIG ===== */
:root {
    /* Color Palette */
    --color-bg-dark: #111827; /* Tailwind gray-900 */
    --color-bg-medium: #1F2937; /* Tailwind gray-800 */
    --color-bg-light: #374151; /* Tailwind gray-700 */

    --color-text-primary: #E5E7EB; /* Tailwind gray-200 */
    --color-text-secondary: #9CA3AF; /* Tailwind gray-400 */
    --color-text-headings: #FFFFFF;

    --color-accent-teal: #14B8A6; /* Tailwind teal-500 */
    --color-accent-teal-dark: #0D9488; /* Tailwind teal-600 */
    --color-accent-orange: #F97316; /* Tailwind orange-500 */
    --color-accent-orange-dark: #EA580C; /* Tailwind orange-600 */

    /* Gradient Colors for Dynamic Background */
    --gradient-color-1: #14b8a6; /* Teal */
    --gradient-color-2: #8b5cf6; /* Violet */
    --gradient-color-3: #f97316; /* Orange */
    --gradient-color-4: #0891b2; /* Cyan */

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Transitions & Animations */
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-normal: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Header Height */
    --header-height: 80px;
}

/* ===== BASE STYLES & TYPOGRAPHY ===== */
body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--header-height); /* Offset for fixed header */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    font-weight: 900;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.section-title {
    color: var(--color-text-headings);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

p {
    color: var(--color-text-secondary);
    line-height: 1.8;
}

a {
    transition: var(--transition-normal);
}

/* ===== GLOBAL COMPONENT STYLES ===== */

/* General Button Styles (Brutalism) */
button,
.brutalist-button {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 4px 4px 0px 0px #000;
    border: 2px solid var(--color-accent-orange);
}

button:hover,
.brutalist-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px #000;
}

button:active,
.brutalist-button:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

/* Form Input Styles (Brutalism) */
.form-input {
    background-color: var(--color-bg-medium);
    border: 2px solid var(--color-bg-light);
    color: var(--color-text-primary);
    transition: var(--transition-normal);
    padding: 0.75rem 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent-teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3);
}

/* Card Styles */
.card {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: var(--color-bg-medium);
    border: 2px solid var(--color-bg-light);
    transition: var(--transition-normal);
}

.card:hover {
    border-color: var(--color-accent-teal);
    transform: translateY(-5px);
}

.card-image {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image img {
    margin: 0 auto;
    object-fit: cover;
}

.card-content {
    padding: 1rem;
}


/* ===== ANIMATIONS & EFFECTS ===== */

/* Dynamic Gradient Background */
.dynamic-gradient-background {
    background: linear-gradient(-45deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-4));
    background-size: 400% 400%;
    animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Parallax Background Effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ScrollReveal initial states */
.reveal-left, .reveal-right, .reveal-up, .reveal-card, .reveal-item {
    visibility: hidden; /* Hide elements until ScrollReveal makes them visible */
}

/* Non-linear movement for transitions */
.accordion-content {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-header .accordion-icon {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.accordion-item.active .accordion-icon {
    transform: rotate(135deg);
}

/* ===== SECTION-SPECIFIC STYLES ===== */

/* Hero Section */
#hero .text-white {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Header */
#header {
    transition: background-color 0.3s ease;
}

/* Accordion (Webinars) */
.accordion-item {
    border-color: var(--color-bg-light);
}

/* External Resources */
.brutalist-link {
    border: 2px solid var(--color-bg-light);
    transition: var(--transition-normal);
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.2);
}
.brutalist-link:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.2);
    border-color: var(--color-accent-teal);
}

/* Team Section */
.team-member-card .card-image {
    height: 150px; /* Fixed height for consistent look */
}
.team-member-card .card-image img {
    height: 100%;
    width: 100%;
}


/* Modal Styles */
.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.active {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal.active .modal-content {
    transform: scale(1);
}

/* ===== PAGE-SPECIFIC STYLES ===== */

/* Success Page */
.success-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    padding-top: 0; /* Remove body padding-top */
}

.success-page-container h1 {
    font-size: 3rem;
    color: var(--color-accent-teal);
}

.success-page-container p {
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.success-page-container .back-link {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--color-accent-orange);
    color: var(--color-bg-dark);
    font-family: var(--font-heading);
    text-decoration: none;
    border: 2px solid var(--color-accent-orange);
    transition: var(--transition-normal);
}
.success-page-container .back-link:hover {
    background-color: transparent;
    color: var(--color-accent-orange);
}

/* Static Pages (Privacy, Terms, About) */
.static-page-content {
    padding-top: 6rem; /* extra space below header */
    padding-bottom: 6rem;
    min-height: calc(100vh - var(--header-height));
}

.static-page-content h1 {
    color: var(--color-accent-orange);
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.static-page-content h2 {
    color: var(--color-accent-teal);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    border-bottom: 2px solid var(--color-bg-light);
    padding-bottom: 0.5rem;
}

.static-page-content p, 
.static-page-content li {
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.static-page-content ul {
    list-style-type: disc;
    padding-left: 2rem;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    body {
        --header-height: 70px;
    }

    .section-title, h1 {
        font-size: 2.5rem;
    }

    #hero h1 {
        font-size: 3rem;
    }
}