/* İqlim Portal - Scientific Modern Theme */

/* ===== Base Styles ===== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Selection */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: white;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0A1628;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3B82F6, #06B6D4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563EB, #0891B2);
}

/* ===== Animations ===== */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Animation classes */
.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
}

.animate-slide-in-left {
    animation: slide-in-left 0.8s ease-out forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scale-in 0.6s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ===== Navigation ===== */
.nav-link {
    @apply px-4 py-2 text-sm font-medium text-gray-300 rounded-lg transition-all duration-300;
}

.nav-link:hover {
    @apply text-white bg-white/5;
}

.nav-link.active {
    @apply text-white bg-white/10;
}

/* Language Switcher */
.lang-btn {
    @apply text-gray-400;
}

.lang-btn:hover {
    @apply text-white;
}

.lang-btn.active {
    @apply bg-accent-blue text-white;
}

/* ===== Timeline ===== */
.timeline-btn {
    @apply transition-all duration-300;
}

.timeline-btn.active>div {
    @apply border-2;
}

.timeline-btn.active>div>span:first-child {
    transform: scale(1.1);
}

.timeline-content {
    @apply transition-all duration-500;
}

.timeline-content.hidden {
    @apply opacity-0 absolute pointer-events-none;
}

.timeline-content.active {
    @apply opacity-100 relative;
}

/* ===== Stat Cards ===== */
.stat-card {
    @apply p-6 rounded-2xl bg-gradient-to-br from-slate-dark to-navy border border-white/10 backdrop-blur-sm transition-all duration-300;
}

.stat-card:hover {
    @apply border-white/20 transform -translate-y-1;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.stat-card.alert {
    @apply border-warning-orange/30;
}

.stat-card.alert:hover {
    @apply border-warning-orange/50;
    box-shadow: 0 20px 40px -20px rgba(249, 115, 22, 0.3);
}

.stat-card.critical {
    @apply border-alert-red/30;
}

.stat-card.critical:hover {
    @apply border-alert-red/50;
    box-shadow: 0 20px 40px -20px rgba(220, 38, 38, 0.3);
}

/* ===== Fact Cards ===== */
.fact-card {
    @apply p-6 rounded-2xl bg-gradient-to-br from-navy to-slate-dark border border-white/5 transition-all duration-500 hover:border-white/20;
}

.fact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.5);
}

.fact-icon {
    @apply w-14 h-14 rounded-xl flex items-center justify-center mb-4;
}

.fact-date {
    @apply text-xs font-mono text-accent-blue mb-2 tracking-wider uppercase;
}

/* ===== Section Cards ===== */
.section-card {
    @apply p-6 rounded-2xl bg-gradient-to-br from-navy to-slate-dark border border-white/5 transition-all duration-500 hover:border-white/20 block;
}

.section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.5);
}

.section-card-image {
    @apply w-full h-40 rounded-xl flex items-center justify-center mb-4;
}

/* ===== Scroll Animations ===== */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: var(--delay, 0s);
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Glassmorphism ===== */
.glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
}

.glass-dark {
    @apply bg-deep-blue/80 backdrop-blur-xl border border-white/5;
}

/* ===== Charts Container ===== */
.chart-container {
    @apply relative p-6 rounded-2xl bg-gradient-to-br from-navy to-slate-dark border border-white/5;
}

.chart-title {
    @apply text-lg font-semibold mb-4 flex items-center gap-2;
}

.chart-legend {
    @apply flex flex-wrap gap-4 mt-4 text-sm text-gray-400;
}

.chart-legend-item {
    @apply flex items-center gap-2;
}

.chart-legend-dot {
    @apply w-3 h-3 rounded-full;
}

/* ===== Data Grid ===== */
.data-grid {
    @apply grid gap-4;
}

.data-item {
    @apply flex justify-between items-center p-4 rounded-xl bg-white/5 border border-white/5;
}

.data-label {
    @apply text-gray-400 text-sm;
}

.data-value {
    @apply font-mono font-bold;
}

.data-value.positive {
    @apply text-success-green;
}

.data-value.negative {
    @apply text-alert-red;
}

.data-value.warning {
    @apply text-warning-orange;
}

/* ===== Article Styles ===== */
.article-content {
    @apply prose prose-invert max-w-none;
}

.article-content h2 {
    @apply text-2xl font-bold mt-12 mb-6 text-white;
}

.article-content h3 {
    @apply text-xl font-semibold mt-8 mb-4 text-white;
}

.article-content p {
    @apply text-gray-300 leading-relaxed mb-6;
}

.article-content ul,
.article-content ol {
    @apply text-gray-300 mb-6 space-y-2;
}

.article-content blockquote {
    @apply border-l-4 border-accent-blue pl-6 py-2 my-6 bg-white/5 rounded-r-xl;
}

.article-content a {
    @apply text-accent-blue hover:text-accent-cyan transition-colors;
}

/* ===== Attention Boxes ===== */
.attention-box {
    @apply p-6 rounded-2xl border-l-4 my-8;
}

.attention-box.info {
    @apply bg-accent-blue/10 border-accent-blue;
}

.attention-box.warning {
    @apply bg-warning-orange/10 border-warning-orange;
}

.attention-box.danger {
    @apply bg-alert-red/10 border-alert-red;
}

.attention-box-title {
    @apply font-bold mb-2 flex items-center gap-2;
}

.attention-box.info .attention-box-title {
    @apply text-accent-blue;
}

.attention-box.warning .attention-box-title {
    @apply text-warning-orange;
}

.attention-box.danger .attention-box-title {
    @apply text-alert-red;
}

/* ===== Forms ===== */
.form-input {
    @apply w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 transition-all duration-300 focus:outline-none focus:border-accent-blue focus:ring-2 focus:ring-accent-blue/20;
}

.form-label {
    @apply block text-sm font-medium text-gray-300 mb-2;
}

.form-button {
    @apply w-full px-6 py-3 bg-gradient-to-r from-accent-blue to-accent-cyan text-white font-semibold rounded-xl transition-all duration-300 hover:shadow-lg hover:shadow-accent-blue/30 hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-accent-blue/50;
}

/* ===== Library Cards ===== */
.library-card {
    @apply p-6 rounded-2xl bg-gradient-to-br from-navy to-slate-dark border border-white/5 transition-all duration-500 hover:border-white/20 flex flex-col;
}

.library-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.library-card-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4;
}

.library-card-meta {
    @apply flex items-center gap-4 text-xs text-gray-500 mt-auto pt-4 border-t border-white/5;
}

/* ===== Responsive ===== */

/* Large tablets and smaller desktops */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }

    .section-card-image {
        @apply h-32;
    }
}

/* Tablets */
@media (max-width: 768px) {

    /* Navigation */
    .nav-link {
        @apply px-3 py-1.5 text-xs;
    }

    /* Cards */
    .stat-card {
        @apply p-4;
    }

    .fact-card {
        @apply p-4;
    }

    .fact-icon {
        @apply w-12 h-12;
    }

    /* Section cards */
    .section-card {
        @apply p-4;
    }

    .section-card-image {
        @apply h-28;
    }

    /* Article content */
    .article-content h2 {
        @apply text-xl mt-8 mb-4;
    }

    .article-content h3 {
        @apply text-lg mt-6 mb-3;
    }

    .article-content p {
        @apply text-sm mb-4;
    }

    /* Attention boxes */
    .attention-box {
        @apply p-4 my-6;
    }

    /* Library cards */
    .library-card {
        @apply p-4;
    }

    .library-card-icon {
        @apply w-10 h-10;
    }
}

/* Mobile phones */
@media (max-width: 640px) {

    /* Hero section */
    h1 {
        @apply text-2xl leading-tight;
    }

    /* Timeline */
    .timeline-btn>div {
        @apply px-4 py-3;
    }

    .timeline-btn>div>span:first-child {
        @apply text-lg;
    }

    /* Stats */
    .stat-card {
        @apply p-3;
    }

    .stat-card .text-3xl {
        @apply text-2xl;
    }

    /* Fact cards */
    .fact-card {
        @apply p-3;
    }

    .fact-icon {
        @apply w-10 h-10 mb-3;
    }

    .fact-icon svg {
        @apply w-5 h-5;
    }

    /* Section cards */
    .section-card {
        @apply p-3;
    }

    .section-card-image {
        @apply h-24 rounded-lg;
    }

    .section-card-image svg {
        @apply w-12 h-12;
    }

    /* Article */
    .article-content {
        @apply text-sm;
    }

    .article-content h2 {
        @apply text-lg mt-6 mb-3;
    }

    .article-content h3 {
        @apply text-base mt-4 mb-2;
    }

    /* Attention boxes */
    .attention-box {
        @apply p-3 my-4 rounded-xl;
    }

    .attention-box-title {
        @apply text-sm;
    }

    .attention-box p {
        @apply text-xs;
    }

    /* Forms */
    .form-input {
        @apply px-3 py-2.5 text-sm;
    }

    .form-button {
        @apply px-4 py-2.5 text-sm;
    }

    /* Library cards */
    .library-card {
        @apply p-3;
    }

    .library-card h3 {
        @apply text-base;
    }

    .library-card p {
        @apply text-xs;
    }

    .library-card-icon {
        @apply w-8 h-8;
    }

    .library-card-icon svg {
        @apply w-4 h-4;
    }

    /* Footer */
    footer {
        @apply py-8;
    }

    /* Grid adjustments */
    .grid-cols-3 {
        @apply grid-cols-1;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    h1 {
        @apply text-xl;
    }

    .stat-card .text-3xl,
    .stat-card .text-2xl {
        @apply text-xl;
    }

    .timeline-btn>div {
        @apply px-3 py-2;
    }

    .timeline-btn>div>span:first-child {
        @apply text-base;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    .stat-card:hover,
    .fact-card:hover,
    .section-card:hover,
    .library-card:hover {
        transform: none;
    }

    /* Larger touch targets */
    .nav-link {
        @apply min-h-[44px] flex items-center;
    }

    .lang-btn {
        @apply min-w-[44px] min-h-[44px];
    }

    .form-input {
        @apply min-h-[48px];
    }

    .form-button {
        @apply min-h-[48px];
    }

    /* Better tap feedback */
    .stat-card:active,
    .fact-card:active,
    .section-card:active,
    .library-card:active {
        @apply scale-[0.98] opacity-90;
        transition: all 0.1s;
    }
}

/* Landscape mobile */
@media (max-width: 812px) and (orientation: landscape) {
    .min-h-screen {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    /* Reduce hero padding in landscape */
    header.pt-32 {
        @apply pt-20;
    }
}

/* Safe area padding for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }

    nav {
        padding-top: env(safe-area-inset-top);
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-animate {
        opacity: 1;
        transform: none;
    }
}

/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ===== Custom Utilities ===== */
.text-gradient-blue {
    @apply bg-gradient-to-r from-accent-blue to-accent-cyan bg-clip-text text-transparent;
}

.text-gradient-orange {
    @apply bg-gradient-to-r from-warning-orange to-alert-red bg-clip-text text-transparent;
}

.bg-gradient-radial {
    background: radial-gradient(ellipse at center, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* ===== Loading States ===== */
.skeleton {
    @apply bg-gradient-to-r from-white/5 via-white/10 to-white/5 bg-[length:200%_100%] animate-pulse;
}

/* ===== Tooltips ===== */
.tooltip {
    @apply relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-slate-dark text-white text-xs rounded-lg opacity-0 invisible transition-all duration-200 whitespace-nowrap z-50;
}

.tooltip:hover::after {
    @apply opacity-100 visible;
}

/* Hide tooltips on touch devices */
@media (hover: none) {
    .tooltip::after {
        display: none;
    }
}

/* ===== Print Styles ===== */
@media print {
    body {
        @apply bg-white text-black;
    }

    .no-print {
        display: none !important;
    }

    nav,
    footer {
        display: none !important;
    }

    .stat-card,
    .fact-card,
    .section-card {
        break-inside: avoid;
        @apply bg-gray-100 border-gray-300;
    }
}