/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--accent-color: #06b6d4;
--dark-bg: #0a0a0a;
--darker-bg: #050505;
--card-bg: #111111;
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--border-color: #27272a;
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
--shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.7);
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--dark-bg);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* Mobile viewport height fix */
@media (max-width: 1061px) {
:root {
--vh: 1vh;
}
.hero {
min-height: calc(var(--vh, 1vh) * 100);
height: auto;
padding-top: 100px;
padding-bottom: 2rem;
}
.hero-container {
min-height: calc(var(--vh, 1vh) * 100 - 120px);
display: flex;
flex-direction: column;
justify-content: center;
}
}
.container {
width: 100%;
padding: 0 4rem;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Orbitron', monospace;
font-weight: 700;
line-height: 1.2;
}
.section-header {
text-align: center;
z-index: 2;
position: relative;
margin-bottom: 3rem;
margin-top: 2.5rem;
}
.section-title {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
position: relative;
animation: titleGlow 3s ease-in-out infinite alternate;
}
.section-title::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 5px;
background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
border-radius: 3px;
animation: lineExpand 2.5s ease-out forwards, lineGlow 3s ease-in-out infinite alternate, linePulse 4s ease-in-out infinite;
box-shadow: 0 0 25px rgba(139, 92, 246, 0.7);
}
@keyframes titleGlow {
0% {
text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}
100% {
text-shadow: 0 0 50px rgba(139, 92, 246, 0.6), 0 0 80px rgba(99, 102, 241, 0.4);
}
}
@keyframes lineExpand {
0% {
width: 0;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
width: 180px;
opacity: 1;
}
}
@keyframes lineGlow {
0% {
box-shadow: 0 0 25px rgba(139, 92, 246, 0.7);
}
50% {
box-shadow: 0 0 35px rgba(139, 92, 246, 0.9), 0 0 60px rgba(99, 102, 241, 0.5);
}
100% {
box-shadow: 0 0 25px rgba(139, 92, 246, 0.7);
}
}
@keyframes linePulse {
0%, 100% {
transform: translateX(-50%) scaleX(1);
}
50% {
transform: translateX(-50%) scaleX(1.1);
}
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
color: white;
border: 2px solid rgba(99, 102, 241, 0.5);
box-shadow:
0 8px 25px rgba(99, 102, 241, 0.3),
0 4px 10px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
transform: translateY(-8px) scale(1.08);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.4),
0 8px 15px rgba(139, 92, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
border-color: rgba(99, 102, 241, 0.8);
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 2px solid var(--primary-color);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
background: var(--primary-color);
transform: translateY(-8px) scale(1.08);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.4),
0 8px 15px rgba(139, 92, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
}
.nav-container {
width: 100%;
padding: 0 4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
font-family: 'Orbitron', monospace;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
gap: 10px;
}
.logo-image {
height: 40px;
width: auto;
border-radius: 8px;
object-fit: cover;
}
/* Mobil cihazlarda logo boyutunu küçült - Cache sorunu için !important kullanıldı */
@media (max-width: 1061px) {
.logo-image {
height: 25px !important;
width: auto !important;
max-height: 25px !important;
}
.nav-logo .logo-image {
height: 25px !important;
width: auto !important;
max-height: 25px !important;
}
}
@media (max-width: 480px) {
.logo-image {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
}
.nav-logo .logo-image {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
}
/* Footer'da logo biraz daha büyük olsun */
.footer-logo .logo-image {
height: 25px !important;
width: auto !important;
max-height: 25px !important;
}
}
/* Ekstra küçük ekranlar için */
@media (max-width: 360px) {
.logo-image {
height: 18px !important;
width: auto !important;
max-height: 18px !important;
}
.nav-logo .logo-image {
height: 18px !important;
width: auto !important;
max-height: 18px !important;
}
.footer-logo .logo-image {
height: 22px !important;
width: auto !important;
max-height: 22px !important;
}
}
.nav-logo i {
color: var(--primary-color);
margin-right: 10px;
font-size: 1.8rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.language-toggle {
display: flex;
align-items: center;
gap: 8px;
background: rgba(99, 102, 241, 0.1);
border: 1px solid var(--primary-color);
color: var(--text-primary);
padding: 8px 16px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 0.9rem;
}
.language-toggle:hover {
background: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}
.language-toggle i {
font-size: 1rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.language-toggle:hover i {
color: white;
}
.language-toggle span {
font-weight: 600;
min-width: 20px;
text-align: center;
}
.mobile-language-toggle {
display: none;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
}
.nav-link i {
font-size: 1.1rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.nav-link span {
font-size: 0.95rem;
}
.nav-link:hover {
color: var(--primary-color);
background: rgba(99, 102, 241, 0.1);
transform: translateY(-2px);
}
.nav-link:hover i {
transform: scale(1.1);
color: var(--secondary-color);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.bar {
width: 25px;
height: 3px;
background: var(--text-primary);
margin: 3px 0;
transition: 0.3s ease;
border-radius: 2px;
}
/* Hamburger Animation */
.hamburger.active .bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Hero Section */
.hero {
min-height: 100vh;
height: 100vh;
display: flex;
align-items: center;
position: relative;
background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
z-index: 1;
}
.hero-container {
width: 100%;
padding: 0 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.2rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-visual {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.floating-elements {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
}
.floating-element {
position: absolute;
font-size: 2rem;
color: var(--primary-color);
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(1) {
top: 15%;
left: 15%;
animation-delay: 0s;
}
.floating-element:nth-child(2) {
top: 25%;
right: 25%;
animation-delay: 1s;
}
.floating-element:nth-child(3) {
top: 70%;
left: 20%;
animation-delay: 2s;
}
.floating-element:nth-child(4) {
bottom: 30%;
right: 15%;
animation-delay: 3s;
}
.floating-element:nth-child(5) {
top: 45%;
left: 60%;
animation-delay: 1.5s;
}
.floating-element:nth-child(6) {
bottom: 60%;
left: 40%;
animation-delay: 2.5s;
}
.floating-element:nth-child(7) {
top: 80%;
right: 40%;
animation-delay: 3.5s;
}
.floating-element:nth-child(8) {
top: 35%;
right: 60%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
25% { transform: translateY(-15px) rotate(90deg) scale(1.1); }
50% { transform: translateY(-25px) rotate(180deg) scale(1); }
75% { transform: translateY(-10px) rotate(270deg) scale(1.05); }
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
@media (max-width: 1061px) {
.scroll-indicator {
bottom: 20px;
}
}
.scroll-arrow {
width: 30px;
height: 30px;
border: 2px solid var(--text-secondary);
border-top: none;
border-left: none;
transform: rotate(45deg);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* About Section */
.about {
height: 100vh;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--darker-bg);
padding: 0;
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.about-content {
width: 100%;
padding: 0 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.about-text h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.about-text p {
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.6;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.stat-item {
text-align: center;
padding: 1.5rem;
background: var(--card-bg);
border-radius: 15px;
border: 1px solid var(--border-color);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 12px 35px rgba(99, 102, 241, 0.25),
0 6px 15px rgba(139, 92, 246, 0.15),
0 2px 5px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
}
.stat-item:hover {
transform: translateY(-10px) scale(1.03);
box-shadow:
0 20px 45px rgba(99, 102, 241, 0.35),
0 12px 25px rgba(139, 92, 246, 0.25),
0 4px 8px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(99, 102, 241, 0.5);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
font-family: 'Orbitron', monospace;
}
.stat-label {
color: var(--text-secondary);
margin-top: 0.5rem;
}
.about-image {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 400px;
}
/* About section için özel floating elements */
.about .floating-elements {
position: relative;
width: 100%;
height: 100%;
}
.about .floating-element {
position: absolute;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
color: var(--primary-color);
padding: 1rem 1.8rem;
border-radius: 30px;
text-align: center;
font-weight: 600;
border: 2px solid rgba(99, 102, 241, 0.3);
font-size: 0.95rem;
box-shadow:
0 8px 25px rgba(99, 102, 241, 0.15),
0 4px 10px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
animation: float-about 15s ease-in-out infinite;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
}
.about .floating-element:hover {
transform: translateY(-8px) scale(1.08);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.25),
0 8px 15px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
border-color: rgba(99, 102, 241, 0.6);
color: var(--primary-color);
text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.about .floating-element:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.about .floating-element:nth-child(2) {
top: 20%;
right: 15%;
animation-delay: 1s;
}
.about .floating-element:nth-child(3) {
top: 60%;
left: 15%;
animation-delay: 2s;
}
.about .floating-element:nth-child(4) {
bottom: 25%;
right: 10%;
animation-delay: 3s;
}
.about .floating-element:nth-child(5) {
top: 40%;
left: 50%;
animation-delay: 1.5s;
}
.about .floating-element:nth-child(6) {
bottom: 55%;
left: 30%;
animation-delay: 2.5s;
}
.about .floating-element:nth-child(7) {
top: 75%;
right: 35%;
animation-delay: 3.5s;
}
/* About section için özel yavaş float animasyonu */
@keyframes float-about {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
box-shadow:
0 8px 25px rgba(99, 102, 241, 0.15),
0 4px 10px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
25% {
transform: translateY(-8px) rotate(3deg) scale(1.02);
box-shadow:
0 12px 30px rgba(99, 102, 241, 0.2),
0 6px 15px rgba(139, 92, 246, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
50% {
transform: translateY(-12px) rotate(0deg) scale(1);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.25),
0 8px 20px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
75% {
transform: translateY(-6px) rotate(-2deg) scale(1.01);
box-shadow:
0 10px 28px rgba(99, 102, 241, 0.18),
0 5px 12px rgba(139, 92, 246, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
}
/* Games Section */
.games {
background: var(--darker-bg);
position: relative;
overflow: hidden;
}
.games::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.fixed-game-image {
width: 80%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Contact Section */
.contact {
height: 100vh;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--dark-bg);
position: relative;
overflow: hidden;
padding: 2rem 0;
}
.contact-header {
text-align: center;
margin-bottom: 3rem;
padding: 3rem 0;
}
.contact-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-header p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
@media (max-width: 1061px) {
.contact {
overflow: visible;
}
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.contact-content {
width: 100%;
padding: 0 4rem;
display: flex;
justify-content: center;
align-items: center;
gap: 4rem;
position: relative;
z-index: 2;
}
.contact-info {
max-width: 600px;
width: 100%;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-details h4 {
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.contact-details p {
color: var(--text-secondary);
line-height: 1.6;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.social-link {
width: 45px;
height: 45px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.contact-form {
background: var(--card-bg);
padding: 2rem;
border-radius: 20px;
border: 1px solid var(--border-color);
max-width: 600px;
width: 100%;
text-align: center;
box-shadow:
0 20px 45px rgba(99, 102, 241, 0.3),
0 12px 25px rgba(139, 92, 246, 0.2),
0 6px 15px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-form:hover {
box-shadow:
0 25px 55px rgba(99, 102, 241, 0.4),
0 15px 35px rgba(139, 92, 246, 0.3),
0 8px 20px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
background: var(--dark-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--text-primary);
font-size: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 20px rgba(99, 102, 241, 0.2),
0 4px 12px rgba(139, 92, 246, 0.15),
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.35),
0 8px 20px rgba(139, 92, 246, 0.25),
0 4px 10px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
/* Footer */
.footer {
background: var(--darker-bg);
padding: 60px 0 20px;
border-top: 1px solid var(--border-color);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.footer-content {
width: 100%;
padding: 0 4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Orbitron', monospace;
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
gap: 10px;
}
.footer-logo i {
color: var(--primary-color);
margin-right: 10px;
font-size: 1.5rem;
}
.footer-section p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.footer-section h4 {
color: var(--text-primary);
margin-bottom: 1rem;
font-size: 1.1rem;
font-family: 'Orbitron', monospace;
font-weight: 700;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
font-family: 'Roboto', sans-serif;
}
.footer-section ul li a {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.3s ease;
cursor: pointer;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.footer-section ul li a:hover {
color: var(--primary-color);
}
.footer-bottom {
width: 100%;
padding: 0 4rem;
border-top: 1px solid var(--border-color);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
position: relative;
z-index: 2;
}
.footer-bottom p {
color: var(--text-muted);
font-family: 'Roboto', sans-serif;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s ease;
cursor: pointer;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.footer-links a:hover {
color: var(--primary-color);
}
/* Kodlance text styling */
.kodlance-text {
color: #8b5cf6;
font-weight: 600;
transition: color 0.3s ease;
}
.kodlance-text:hover {
color: #a855f7;
text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
/* Kodlance link styles */
#footer-copyright a {
text-decoration: none;
color: inherit;
}
#footer-copyright a:hover {
text-decoration: none;
}
/* Social media icon images */
.social-icon-img {
width: 1.3rem;
height: 1.3rem;
object-fit: contain;
filter: brightness(0) invert(1);
transition: all 0.3s ease;
}
.footer-social-link:hover .social-icon-img {
filter: brightness(1) invert(0);
transform: scale(1.1);
}
/* Footer Social Media Links */
.footer-social-links {
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: flex-start;
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
padding: 0.8rem;
border-radius: 50%;
cursor: pointer;
width: 45px;
height: 45px;
background: var(--card-bg);
border: 1px solid var(--border-color);
}
.footer-social-link:hover {
color: white;
background: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}
.footer-social-link i {
font-size: 1.3rem;
transition: all 0.3s ease;
}
.footer-social-link:hover i {
transform: scale(1.1);
}
/* ===== ANNOUNCEMENT MODAL STYLES ===== */
.announcement-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(10, 10, 10, 0.7);
animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(10px);
}
}
.announcement-modal-content {
background: rgba(17, 17, 17, 0.95);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 20px;
margin: 2% auto;
padding: 0;
width: 95%;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow:
0 25px 80px rgba(0, 0, 0, 0.6),
0 10px 30px rgba(139, 92, 246, 0.1);
animation: modalSlideIn 0.3s ease-out;
backdrop-filter: blur(10px);
}
@keyframes modalSlideIn {
from {
transform: translateY(-30px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.announcement-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
background: rgba(139, 92, 246, 0.05);
border-radius: 20px 20px 0 0;
position: sticky;
top: 0;
z-index: 2;
backdrop-filter: blur(10px);
}
.announcement-modal-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.breadcrumb-item {
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.breadcrumb-item:hover {
color: var(--secondary-color);
transform: translateX(-2px);
}
.breadcrumb-separator {
font-size: 0.7rem;
color: var(--text-muted);
}
.breadcrumb-title {
color: var(--text-primary);
font-weight: 500;
}
.announcement-modal-close {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2);
color: var(--text-secondary);
font-size: 1.2rem;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.announcement-modal-close:hover {
background: rgba(139, 92, 246, 0.2);
color: var(--secondary-color);
transform: scale(1.1);
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
}
.announcement-modal-body {
padding: 2rem;
position: relative;
z-index: 1;
background: transparent;
}
.announcement-modal-image-container {
margin-bottom: 2rem;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
0 5px 15px rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.1);
}
.announcement-modal-image {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.announcement-modal-image:hover {
transform: scale(1.02);
}
.announcement-modal-content-wrapper {
max-width: 100%;
}
.announcement-modal-meta {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.announcement-modal-date {
background: rgba(139, 92, 246, 0.1);
color: var(--secondary-color);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(139, 92, 246, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.announcement-modal-date:hover {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
}
.announcement-modal-category {
background: rgba(6, 182, 212, 0.1);
color: var(--accent-color);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(6, 182, 212, 0.2);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.announcement-modal-category:hover {
background: rgba(6, 182, 212, 0.15);
border-color: rgba(6, 182, 212, 0.3);
}
.announcement-modal-title {
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.announcement-modal-intro {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 400;
}
.announcement-modal-text {
color: var(--text-primary);
line-height: 1.7;
font-size: 1rem;
}
.announcement-modal-text h2 {
font-family: 'Orbitron', sans-serif;
color: var(--secondary-color);
font-size: 1.5rem;
margin: 2rem 0 1rem 0;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.announcement-modal-text h3 {
color: var(--accent-color);
font-size: 1.3rem;
margin: 1.5rem 0 1rem 0;
font-weight: 600;
}
.announcement-modal-text p {
margin-bottom: 1rem;
color: var(--text-primary);
}
.announcement-modal-text ul, .announcement-modal-text ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
.announcement-modal-text li {
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.announcement-modal-text strong {
color: var(--text-primary);
font-weight: 600;
}
/* Modal Responsive Design */
@media (max-width: 1061px) {
.announcement-modal-content {
width: 98%;
margin: 1% auto;
max-height: 95vh;
border-radius: 15px;
}
.announcement-modal-header {
padding: 1rem 1.5rem;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
border-radius: 15px 15px 0 0;
}
.announcement-modal-breadcrumb {
font-size: 0.8rem;
}
.announcement-modal-body {
padding: 1.5rem;
}
.announcement-modal-image {
height: 200px;
}
.announcement-modal-title {
font-size: 1.5rem;
}
.announcement-modal-intro {
font-size: 1rem;
}
.announcement-modal-meta {
flex-direction: column;
gap: 0.5rem;
}
.announcement-modal-text h2 {
font-size: 1.3rem;
}
.announcement-modal-text h3 {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.announcement-modal-content {
width: 100%;
margin: 0;
border-radius: 0;
max-height: 100vh;
border-left: none;
border-right: none;
}
.announcement-modal-header {
border-radius: 0;
padding: 1rem;
border-left: none;
border-right: none;
}
.announcement-modal-body {
padding: 1rem;
}
.announcement-modal-image {
height: 150px;
border-radius: 15px;
}
.announcement-modal-title {
font-size: 1.3rem;
}
.announcement-modal-intro {
font-size: 0.95rem;
}
.announcement-modal-text h2 {
font-size: 1.2rem;
}
.announcement-modal-text h3 {
font-size: 1rem;
}
.announcement-modal-meta {
gap: 0.3rem;
}
.announcement-modal-date,
.announcement-modal-category {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
}
/* Responsive Design *//* Tablet Styles */
@media (min-width: 1062px) and (max-width: 1200px) {
.container {
padding: 0 2rem;
}
.nav-container {
padding: 0 2rem;
}
/* Responsive Font Sizes for Large Tablet */
.section-title {
font-size: 2.5rem;
}
.hero-title {
font-size: 3rem;
}
.hero-description {
font-size: 1.1rem;
}
.about-text h3 {
font-size: 1.4rem;
}
.about-text p {
font-size: 1rem;
}
.stat-number {
font-size: 2.2rem;
}
.stat-label {
font-size: 0.95rem;
}
.contact-header h2 {
font-size: 2.2rem;
}
.contact-header p {
font-size: 1rem;
}
.contact-details h4 {
font-size: 1.1rem;
}
.contact-details p {
font-size: 0.95rem;
}
.footer-section h4 {
font-size: 1rem;
}
.footer-section p,
.footer-section ul li {
font-size: 0.9rem;
}
/* Tablet navigation alignment fix */
.nav-menu {
gap: 1.5rem;
align-items: center;
}
.nav-link {
padding: 10px 14px;
align-items: center;
justify-content: center;
min-height: 44px;
}
.nav-link i {
font-size: 1rem;
margin-bottom: 2px;
}
.nav-link span {
font-size: 0.9rem;
line-height: 1;
}
.hero-container {
padding: 0 2rem;
gap: 2rem;
}
.about-content {
padding: 0 2rem;
gap: 3rem;
}
.contact-content {
padding: 0 2rem;
gap: 3rem;
}
.footer-content {
padding: 0 2rem;
}
.footer-bottom {
padding: 0 2rem;
}
}
/* Medium Desktop Styles - Navigation Alignment Fix */
@media (min-width: 1201px) and (max-width: 1400px) {
/* Responsive Font Sizes for Medium Desktop */
.section-title {
font-size: 2.8rem;
}
.hero-title {
font-size: 3.2rem;
}
.hero-description {
font-size: 1.15rem;
}
.about-text h3 {
font-size: 1.45rem;
}
.about-text p {
font-size: 1.05rem;
}
.stat-number {
font-size: 2.3rem;
}
.stat-label {
font-size: 1rem;
}
.contact-header h2 {
font-size: 2.3rem;
}
.contact-header p {
font-size: 1.05rem;
}
.contact-details h4 {
font-size: 1.15rem;
}
.contact-details p {
font-size: 1rem;
}
.footer-section h4 {
font-size: 1.05rem;
}
.footer-section p,
.footer-section ul li {
font-size: 0.95rem;
}
.nav-container {
padding: 0 2rem;
}
/* Medium desktop navigation alignment fix */
.nav-menu {
gap: 1.8rem;
align-items: center;
}
.nav-link {
padding: 12px 16px;
align-items: center;
justify-content: center;
min-height: 48px;
flex-direction: column;
gap: 4px;
}
.nav-link i {
font-size: 1.1rem;
margin-bottom: 0;
}
.nav-link span {
font-size: 0.85rem;
line-height: 1;
text-align: center;
}
.nav-logo {
font-size: 1.4rem;
}
.nav-logo i {
font-size: 1.6rem;
}
}
/* Tablet Styles */
@media (max-width: 1061px) and (min-width: 769px) {
/* Responsive Font Sizes for Tablet */
.section-title {
font-size: 2.2rem;
}
.hero-title {
font-size: 2.8rem;
}
.hero-description {
font-size: 1rem;
}
.about-text h3 {
font-size: 1.3rem;
}
.about-text p {
font-size: 0.95rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.9rem;
}
.contact-header h2 {
font-size: 2rem;
}
.contact-header p {
font-size: 0.95rem;
}
.contact-details h4 {
font-size: 1.05rem;
}
.contact-details p {
font-size: 0.9rem;
}
.footer-section h4 {
font-size: 0.95rem;
}
.footer-section p,
.footer-section ul li {
font-size: 0.85rem;
}
.games-slide-title {
font-size: 1.8rem;
}
.about {
height: auto;
min-height: 100vh;
padding: 2rem 0;
}
.hamburger {
display: flex;
}
.nav-container {
padding: 0 1.5rem;
}
.nav-actions {
display: none;
}
.mobile-language-toggle {
display: block;
}
.language-toggle-mobile {
background: rgba(99, 102, 241, 0.1) !important;
border: 1px solid var(--primary-color) !important;
color: var(--text-primary) !important;
width: 100%;
max-width: 200px;
margin: 0 auto;
justify-content: center;
}
.language-toggle-mobile:hover {
background: var(--primary-color) !important;
color: white !important;
}
.nav-logo {
font-size: 1.2rem;
}
.nav-logo i {
font-size: 1.4rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(15px);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
padding: 2rem 0;
gap: 1rem;
}
.nav-menu.active {
left: 0;
}
.nav-link {
padding: 12px 20px;
justify-content: center;
font-size: 1.1rem;
}
.nav-link i {
font-size: 1.2rem;
}
.hero {
height: auto;
min-height: 100vh;
padding: 2rem 0;
align-items: flex-start;
padding-top: 100px;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
padding: 0 1.5rem;
align-items: center;
}
.hero-title {
font-size: 2.2rem;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
}
.hero-buttons {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.btn {
width: 100%;
max-width: 280px;
padding: 15px 30px;
}
.hero-visual {
height: 300px;
}
.floating-element {
font-size: 1.5rem;
}
.about-content {
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 0 1.5rem !important;
text-align: center !important;
width: 100% !important;
}
.about-text {
width: 100% !important;
max-width: 100% !important;
}
.about-text h3 {
font-size: 1.3rem !important;
text-align: center !important;
margin-bottom: 1rem !important;
}
.about-text p {
font-size: 0.95rem !important;
text-align: center !important;
line-height: 1.6 !important;
margin-bottom: 2rem !important;
}
.stats {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
margin-top: 2rem !important;
width: 100% !important;
}
.stat-item {
padding: 1.2rem !important;
width: 100% !important;
max-width: 100% !important;
}
.stat-number {
font-size: 2rem !important;
}
.stat-label {
font-size: 0.9rem !important;
}
.about-image {
height: 300px !important;
width: 100% !important;
max-width: 100% !important;
}
.image-container {
width: 250px;
height: 250px;
margin: 0 auto;
}
.tech-stack {
width: 90%;
margin: 0 auto;
}
.tech-item {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
.contact {
height: auto;
min-height: 100vh;
padding: 3rem 0;
}
.contact-header {
padding: 2rem 0;
margin-bottom: 2rem;
}
.contact-header h2 {
font-size: 2rem;
}
.contact-header p {
font-size: 1rem;
padding: 0 1rem;
}
.contact-content {
flex-direction: column;
gap: 2rem;
padding: 0 1.5rem;
}
.contact-info {
max-width: 100%;
}
.contact-form {
max-width: 100%;
padding: 1.5rem;
padding-bottom: 3rem;
}
.contact-form .btn {
width: auto;
min-width: 200px;
padding: 15px 30px;
font-size: 1rem;
margin-top: 1rem;
display: inline-block;
}
.contact-item {
margin-bottom: 1.5rem;
}
.contact-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.social-links {
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
padding: 0 1.5rem;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
padding: 0 1.5rem;
gap: 1rem;
}
.footer-links {
justify-content: center;
flex-wrap: wrap;
}
.footer-social-links {
justify-content: center;
gap: 0.8rem;
}
.footer-social-link {
width: 40px;
height: 40px;
padding: 0.6rem;
}
.footer-social-link i {
font-size: 1.1rem;
}
.section-title {
font-size: 1.8rem;
}
/* About section floating elements mobile spacing */
.about .floating-element:nth-child(1) {
top: 1%;
left: 1%;
}
.about .floating-element:nth-child(2) {
top: 3%;
right: 10%;
}
.about .floating-element:nth-child(3) {
top: 58%;
left: 1%;
}
.about .floating-element:nth-child(4) {
bottom: 8%;
right: 0%;
}
.about .floating-element:nth-child(5) {
top: 36%;
right: 0%;
}
.about .floating-element:nth-child(6) {
bottom: 45%;
left: 13%;
}
.about .floating-element:nth-child(7) {
top: 80%;
right: 43%;
}
}
/* Mobile Styles */
@media (max-width: 768px) {
.about {
height: auto;
min-height: 100vh;
padding: 2rem 0;
}
.hamburger {
display: flex;
}
.nav-container {
padding: 0 1.5rem;
}
.nav-actions {
display: none;
}
.mobile-language-toggle {
display: block;
}
.language-toggle-mobile {
background: rgba(99, 102, 241, 0.1) !important;
border: 1px solid var(--primary-color) !important;
color: var(--text-primary) !important;
width: 100%;
max-width: 200px;
margin: 0 auto;
justify-content: center;
}
.language-toggle-mobile:hover {
background: var(--primary-color) !important;
color: white !important;
}
.nav-logo {
font-size: 1.2rem;
}
.nav-logo i {
font-size: 1.4rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(15px);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
padding: 2rem 0;
gap: 1rem;
}
.nav-menu.active {
left: 0;
}
.nav-link {
padding: 12px 20px;
justify-content: center;
font-size: 1.1rem;
}
.nav-link i {
font-size: 1.2rem;
}
.hero {
height: auto;
min-height: 100vh;
padding: 2rem 0;
align-items: flex-start;
padding-top: 100px;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
padding: 0 1.5rem;
align-items: center;
}
.hero-title {
font-size: 2.2rem;
line-height: 1.2;
}
.hero-description {
font-size: 1rem;
}
.hero-buttons {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.btn {
width: 100%;
max-width: 280px;
padding: 15px 30px;
}
.hero-visual {
height: 300px;
}
.floating-element {
font-size: 1.5rem;
}
.about-content {
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 0 1.5rem !important;
text-align: center !important;
width: 100% !important;
}
.about-text {
width: 100% !important;
max-width: 100% !important;
}
.about-text h3 {
font-size: 1.3rem !important;
text-align: center !important;
margin-bottom: 1rem !important;
}
.about-text p {
font-size: 0.95rem !important;
text-align: center !important;
line-height: 1.6 !important;
margin-bottom: 2rem !important;
}
.stats {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
margin-top: 2rem !important;
width: 100% !important;
}
.stat-item {
padding: 1.2rem !important;
width: 100% !important;
max-width: 100% !important;
}
.stat-number {
font-size: 2rem !important;
}
.stat-label {
font-size: 0.9rem !important;
}
.about-image {
height: 300px !important;
width: 100% !important;
max-width: 100% !important;
}
.image-container {
width: 250px;
height: 250px;
margin: 0 auto;
}
.tech-stack {
width: 90%;
margin: 0 auto;
}
.tech-item {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
.contact {
height: auto;
min-height: 100vh;
padding: 3rem 0;
}
.contact-header {
padding: 2rem 0;
margin-bottom: 2rem;
}
.contact-header h2 {
font-size: 2rem;
}
.contact-header p {
font-size: 1rem;
padding: 0 1rem;
}
.contact-content {
flex-direction: column;
gap: 2rem;
padding: 0 1.5rem;
}
.contact-info {
max-width: 100%;
}
.contact-form {
max-width: 100%;
padding: 1.5rem;
padding-bottom: 3rem;
}
.contact-form .btn {
width: auto;
min-width: 200px;
padding: 15px 30px;
font-size: 1rem;
margin-top: 1rem;
display: inline-block;
}
.contact-item {
margin-bottom: 1.5rem;
}
.contact-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.social-links {
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
padding: 0 1.5rem;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
padding: 0 1.5rem;
gap: 1rem;
}
.footer-links {
justify-content: center;
flex-wrap: wrap;
}
.footer-social-links {
justify-content: center;
gap: 0.8rem;
}
.footer-social-link {
width: 40px;
height: 40px;
padding: 0.6rem;
}
.footer-social-link i {
font-size: 1.1rem;
}
.section-title {
font-size: 1.8rem;
}
/* About section floating elements mobile spacing */
.about .floating-element:nth-child(1) {
top: 1%;
left: 1%;
}
.about .floating-element:nth-child(2) {
top: 3%;
right: 10%;
}
.about .floating-element:nth-child(3) {
top: 58%;
left: 1%;
}
.about .floating-element:nth-child(4) {
bottom: 8%;
right: 0%;
}
.about .floating-element:nth-child(5) {
top: 36%;
right: 0%;
}
.about .floating-element:nth-child(6) {
bottom: 45%;
left: 13%;
}
.about .floating-element:nth-child(7) {
top: 80%;
right: 43%;
}
}
/* Small Mobile Styles */
@media (max-width: 480px) {
.left-column {
min-height: 15vh;
justify-content: center;
align-items: center;
}
.announcement-card {
min-width: 85%;
width: 85%;
padding: 1rem;
margin: 0 auto;
height: 350px; /* Yükseklik arttırıldı */
display: flex;
flex-direction: column;
}
.announcement-card {
flex-basis: 85%;
}
.announcements-grid {
padding: 0;
}
.about {
height: auto;
min-height: 100vh;
padding: 1.5rem 0;
}
.container {
padding: 0 1rem;
}
.nav-container {
padding: 0 1rem;
}
.nav-logo {
font-size: 1rem;
}
.nav-logo i {
font-size: 1.2rem;
}
.hero {
height: auto;
min-height: 100vh;
padding: 1.5rem 0;
align-items: flex-start;
padding-top: 80px;
}
.hero-container {
padding: 0 1rem;
gap: 1.5rem;
align-items: center;
}
.hero-title {
font-size: 1.8rem;
line-height: 1.1;
}
.hero-description {
font-size: 0.9rem;
line-height: 1.5;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.btn {
width: 100%;
max-width: 250px;
padding: 12px 25px;
font-size: 0.9rem;
}
.hero-visual {
height: 250px;
}
.floating-element {
font-size: 1.2rem;
}
.about-content {
padding: 0 1rem !important;
gap: 1.5rem !important;
text-align: center !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
.about-text {
width: 100% !important;
max-width: 100% !important;
}
.about-text h3 {
font-size: 1.2rem !important;
text-align: center !important;
margin-bottom: 1rem !important;
}
.about-text p {
font-size: 0.9rem !important;
text-align: center !important;
line-height: 1.5 !important;
margin-bottom: 1.5rem !important;
}
.stats {
gap: 1rem !important;
margin-top: 1.5rem !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
.stat-item {
padding: 1rem !important;
width: 100% !important;
max-width: 100% !important;
}
.stat-number {
font-size: 1.8rem !important;
}
.stat-label {
font-size: 0.9rem !important;
}
.about-image {
height: 250px !important;
width: 100% !important;
max-width: 100% !important;
}
.image-container {
width: 200px;
height: 200px;
margin: 0 auto;
}
.tech-stack {
width: 95%;
margin: 0 auto;
}
.tech-item {
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
}
.contact {
height: auto;
min-height: 100vh;
padding: 2rem 0;
}
.contact-header {
padding: 1.5rem 0;
margin-bottom: 1.5rem;
}
.contact-header h2 {
font-size: 1.8rem;
}
.contact-header p {
font-size: 0.9rem;
padding: 0 0.5rem;
}
.contact-content {
padding: 0 1rem;
gap: 1.5rem;
}
.contact-form {
padding: 1.2rem;
padding-bottom: 2.5rem;
}
.contact-form .btn {
width: auto;
min-width: 180px;
padding: 12px 25px;
font-size: 0.9rem;
margin-top: 1rem;
display: inline-block;
}
.form-group input,
.form-group textarea {
padding: 12px;
font-size: 0.9rem;
min-height: 45px;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.contact-details h4 {
font-size: 1rem;
}
.contact-details p {
font-size: 0.9rem;
}
.social-link {
width: 40px;
height: 40px;
font-size: 1rem;
}
.footer-content {
padding: 0 1rem;
gap: 1.5rem;
}
.footer-bottom {
padding: 0 1rem;
}
.footer-logo {
font-size: 1.1rem;
}
.footer-logo i {
font-size: 1.3rem;
}
.footer-section h4 {
font-size: 1rem;
}
.footer-section p,
.footer-section ul li {
font-size: 0.9rem;
}
.footer-links {
gap: 1rem;
}
.footer-links a {
font-size: 0.9rem;
}
.section-title {
font-size: 1.6rem;
}
}
/* Extra Small Mobile Styles */
@media (max-width: 360px) {
.announcement-card {
min-width: 80%;
width: 80%;
padding: 0.8rem;
margin: 0 auto;
height: 350px; /* Yükseklik arttırıldı */
display: flex;
flex-direction: column;
}
.announcement-card {
flex-basis: 80%;
}
.announcements-grid {
padding: 0;
}
.announcement-title {
font-size: 1rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 2.4em;
line-height: 1.2em;
}
.announcement-excerpt {
font-size: 0.85rem;
}
}
/* Landscape Mobile Styles */
@media (max-width: 768px) and (orientation: landscape) {
.hero {
height: auto;
min-height: 100vh;
padding: 2rem 0;
align-items: flex-start;
padding-top: 80px;
}
.about {
height: auto;
min-height: 100vh;
padding: 2rem 0;
}
.contact {
height: auto;
min-height: 100vh;
padding: 2rem 0;
}
.contact-header {
padding: 1.5rem 0;
margin-bottom: 1.5rem;
}
.contact-header h2 {
font-size: 1.6rem;
}
.contact-header p {
font-size: 0.85rem;
padding: 0 0.5rem;
}
.contact-content {
gap: 1.5rem;
}
.hero-container {
gap: 1.5rem;
}
.hero-title {
font-size: 2rem;
}
.about-content {
gap: 1.5rem;
text-align: center;
}
.about-text h3 {
font-size: 1.1rem;
text-align: center;
}
.about-text p {
font-size: 0.85rem;
text-align: center;
}
.stats {
gap: 1rem;
margin-top: 1.5rem;
}
.stat-item {
padding: 0.8rem;
}
.stat-number {
font-size: 1.6rem;
}
.stat-label {
font-size: 0.8rem;
}
.image-container {
width: 180px;
height: 180px;
margin: 0 auto;
}
.tech-stack {
width: 90%;
margin: 0 auto;
}
.tech-item {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
}
.contact-content {
gap: 1.5rem;
}
}
/* Smooth Scrolling */
html {
scroll-behavior: smooth;
}
/* Loading Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--darker-bg);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--secondary-color);
}
/* Announcements Section */
.announcements {
min-height: 100vh;
background: var(--dark-bg);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 0;
}
.announcements::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
z-index: 1;
}
/* Announcements Container */
.announcements-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 2;
padding: 0 1rem;
height: 50vh;
}
/* Games Container */
.games-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 2;
padding: 0 1rem;
}
/* Games Slide Indicator */
.games-slide-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
color: #8b5cf6;
backdrop-filter: blur(10px);
z-index: 100;
transition: all 0.3s ease;
}
.games-slide-indicator:hover {
background: rgba(139, 92, 246, 0.2);
border-color: rgba(139, 92, 246, 0.5);
}
.games-slide-indicator .current-slide {
font-weight: bold;
color: #8b5cf6;
}
.games-slide-indicator .separator {
margin: 0 4px;
opacity: 0.7;
}
.games-slide-indicator .total-slides {
opacity: 0.8;
}
/* Navigation Arrows - Outside */
.announcements-nav-arrow,
.games-nav-arrow {
width: 50px;
height: 50px;
background: rgba(139, 92, 246, 0.1);
border: 2px solid #8b5cf6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #8b5cf6;
font-size: 1.2rem;
z-index: 100;
flex-shrink: 0;
margin: 0 5px;
}
.announcements-nav-arrow:hover,
.games-nav-arrow:hover {
background: #8b5cf6;
color: white;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
/* Active arrow states */
.announcements-nav-arrow:not(.disabled),
.games-nav-arrow:not(.disabled) {
background: rgba(139, 92, 246, 0.2);
border-color: rgba(139, 92, 246, 0.8);
color: #8b5cf6;
box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
position: relative;
}
/* Active arrow glow effect */
.announcements-nav-arrow:not(.disabled)::after,
.games-nav-arrow:not(.disabled)::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3));
border-radius: 50%;
z-index: -1;
animation: activeGlow 2s ease-in-out infinite alternate;
}
@keyframes activeGlow {
0% {
opacity: 0.3;
transform: scale(1);
}
100% {
opacity: 0.6;
transform: scale(1.05);
}
}
.announcements-nav-arrow.disabled,
.games-nav-arrow.disabled {
opacity: 0.2 !important;
cursor: not-allowed !important;
pointer-events: none !important;
background: rgba(139, 92, 246, 0.05) !important;
border-color: rgba(139, 92, 246, 0.2) !important;
color: rgba(139, 92, 246, 0.4) !important;
transform: scale(0.9) !important;
transition: all 0.3s ease;
}
.announcements-nav-arrow.disabled:hover,
.games-nav-arrow.disabled:hover {
background: rgba(139, 92, 246, 0.05) !important;
color: rgba(139, 92, 246, 0.4) !important;
transform: scale(0.9) !important;
box-shadow: none !important;
}
/* Navigation Arrow Active States */
.games-nav-arrow:not(.disabled).pulse {
animation: pulse 2s infinite;
}
.games-nav-arrow.glow {
animation: glow 0.3s ease-in-out;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
}
}
@keyframes glow {
0% {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.6);
}
100% {
box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}
}
/* Swiper Container */
.announcements-swiper-container {
flex: 1;
max-width: calc(100% - 110px);
position: relative;
min-width: 0;
overflow: visible;
padding-bottom: 80px;
}
/* Swiper.js Styles */
.announcements-swiper {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: visible;
}
/* General swiper slide styles - only for announcements */
.announcements-swiper .swiper-slide {
height: auto;
display: flex;
align-items: center;
justify-content: center;
width: auto;
flex-shrink: 0;
overflow: visible;
}
/* Swiper Wrapper */
.announcements-swiper .swiper-wrapper {
padding-top: 10px;
}
/* Announcement Card Styles */
.announcement-card {
background: rgba(17, 17, 17, 0.8);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 20px;
padding: 1.5rem;
height: 100%;
max-height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-between;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
position: relative;
overflow: visible;
width: 100%;
min-width: 280px;
max-width: 350px;
box-sizing: border-box;
z-index: 5;
text-align: left;
}
/* Üst çizgi kaldırıldı */
.announcement-card:hover {
transform: translateY(-2px);
border-color: rgba(139, 92, 246, 0.5);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
}
/* Hover çizgi efekti kaldırıldı */
/* Announcement Header */
.announcement-header {
margin-bottom: 1rem;
}
.announcement-date {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
}
.announcement-date i {
color: var(--accent-color);
}
/* Announcement Title */
.announcement-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
line-height: 1.3;
}
/* Announcement Excerpt */
.announcement-excerpt {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
font-size: 1rem;
}
/* Announcement Link */
.announcement-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
margin-top: auto;
}
.announcement-link:hover {
color: var(--secondary-color);
transform: translateX(5px);
}
.announcement-link i {
transition: transform 0.3s ease;
}
.announcement-link:hover i {
transform: translateX(3px);
}
/* Hide default swiper navigation buttons */
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
/* Swiper Pagination */
.swiper-pagination {
position: relative;
bottom: auto;
left: auto;
transform: none;
z-index: 10;
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
width: auto;
margin-top: 30px;
text-align: center;
}
.swiper-pagination-bullet {
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 1);
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
opacity: 1;
margin: 0 4px;
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.3);
}
.swiper-pagination-bullet:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
transform: scale(1.15);
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.5);
}
.swiper-pagination-bullet-active {
background: rgba(255, 255, 255, 1);
border-color: rgba(255, 255, 255, 1);
opacity: 1;
transform: scale(1.4);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), 0 6px 20px rgba(255, 255, 255, 0.4);
}
/* Responsive Design */
@media (max-width: 1200px) {
.announcements-container,
.games-container {
gap: 15px;
padding: 0 1.5rem;
}
.announcements-swiper-container {
max-width: calc(100% - 110px);
overflow: visible;
}
}
@media (max-width: 1061px) {
.announcements {
padding: 2rem 0;
}
.announcements-container,
.games-container {
gap: 8px;
padding: 0 0.5rem;
}
.announcements-nav-arrow,
.games-nav-arrow {
width: 40px;
height: 40px;
font-size: 1rem;
margin: 0 3px;
}
.games-slide-indicator {
bottom: 15px;
padding: 6px 12px;
font-size: 0.8rem;
}
.announcements-swiper-container {
max-width: calc(100% - 86px);
overflow: visible;
}
.announcement-card {
padding: 1.2rem;
min-width: 250px;
max-width: 320px;
margin: 0 auto;
}
.announcement-title {
font-size: 1.1rem;
}
.announcement-excerpt {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.announcements-container,
.games-container {
gap: 3px;
padding: 0 0.25rem;
}
.announcements-nav-arrow,
.games-nav-arrow {
width: 35px;
height: 35px;
font-size: 0.9rem;
margin: 0 2px;
}
.announcements-swiper-container {
max-width: calc(100% - 74px);
overflow: visible;
}
.announcement-card {
padding: 1rem;
min-width: 200px;
max-width: 280px;
margin: 0 auto;
}
.announcement-title {
font-size: 1rem;
margin-bottom: 0.8rem;
}
.announcement-excerpt {
font-size: 0.85rem;
margin-bottom: 1rem;
}
}
/* Small Tablet (481px - 736px) */
@media (min-width: 481px) and (max-width: 736px) {
.announcements-container {
gap: 8px;
padding: 0 1rem;
}
.announcements-swiper-container {
max-width: calc(100% - 116px);
overflow: visible;
}
.announcement-card {
padding: 1.3rem;
min-width: 300px;
max-width: 400px;
margin: 0 auto;
}
.announcement-title {
font-size: 1.2rem;
}
.announcement-excerpt {
font-size: 1rem;
}
}
/* Large Tablet (736px - 1198px) */
@media (min-width: 736px) and (max-width: 1198px) {
.announcements-container {
gap: 10px;
padding: 0 1.5rem;
}
.announcements-swiper-container {
max-width: calc(100% - 120px);
overflow: visible;
}
.announcement-card {
padding: 1.3rem;
min-width: 260px;
max-width: 330px;
margin: 0 auto;
}
.announcement-title {
font-size: 1.15rem;
}
.announcement-excerpt {
font-size: 0.95rem;
}
}
/* Medium Desktop (1198px - 1466px) */
@media (min-width: 1198px) and (max-width: 1466px) {
.announcements-container {
padding: 0 1.5rem;
}
.announcement-card {
padding: 1.4rem;
min-width: 300px;
max-width: 380px;
}
.announcement-title {
font-size: 1.18rem;
}
.announcement-excerpt {
font-size: 0.98rem;
}
}
/* Large Desktop (1466px+) */
@media (min-width: 1466px) {
.announcements-container {
padding: 0 2rem;
}
.announcement-card {
padding: 1.5rem;
min-width: 280px;
max-width: 350px;
}
.announcement-title {
font-size: 1.2rem;
}
.announcement-excerpt {
font-size: 1rem;
}
}
/* Grid System - Responsive Layout */
.grid {
width: 100%;
margin: 0 auto;
padding: 10px;
}
.grid:after {
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
box-sizing: border-box;
}
/* Column Widths */
.col-1-1 {
width: 100%;
}
.col-3-4 {
width: 75%;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-8 {
width: 12.5%;
}
/* Module Styling */
.module {
min-height: 150px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
}
/* Game title and button modules - same height */
.game-title.module,
.game-b.module {
min-height: 80px;
height: 80px;
}
/* Responsive adjustments for title and button modules */
@media (max-width: 1061px) {
.game-title.module,
.game-b.module {
min-height: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.game-title.module,
.game-b.module {
min-height: 50px;
height: 50px;
}
}
.module h2, .module h3 {
margin: 0 0 10px 0;
color: #333;
}
.module p {
margin: 0;
color: #666;
}
/* Responsive Breakpoints */
@media (max-width: 1061px) {
.tab-1-1 {
width: 100%;
}
.tab-3-4 {
width: 75%;
}
.tab-2-3 {
width: 66.66%;
}
.tab-1-3 {
width: 33.33%;
}
.tab-1-2 {
width: 50%;
}
.tab-1-4 {
width: 25%;
}
.tab-1-8 {
width: 12.5%;
}
/* Tablet specific adjustments */
.grid {
padding: 30px;
}
.game-image-slide {
height: 100%;
}
}
/* Mobile Breakpoint */
@media (max-width: 400px) {
[class*='col-'] {
width: 100% !important;
float: none;
}
.module {
margin: 0px;
}
}
.grid {
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
/* Game modules specific styling */
.game-image-slide {
height: 710px;
width: 100%;
transition: height 0.3s ease;
}
.game-description.module {
height: auto;
min-height: 300px;
text-align: left;
}
.game-image.module {
height: 250px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Game description text alignment */
.games-slide-description {
text-align: left;
}
.games-slide-description div {
text-align: left;
position: relative;
padding-left: 20px;
}
.games-slide-description div::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
border-radius: 50%;
box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
/* Responsive adjustments for game modules */
@media (max-width: 1061px) {
.game-description.module {
height: auto;
min-height: 250px;
}
.game-image.module {
height: 200px;
width: 100%;
}
.games-slide-description div {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.4;
}
/* Medium tablet adjustments */
.grid {
padding: 25px;
}
.game-image-slide {
height: 240px; /* Tablet: 60 + 240 + 60 = 360px */
}
.fortnite-logo {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.game-description.module {
height: auto;
min-height: 220px;
}
.game-image.module {
height: 180px;
width: 100%;
}
.games-slide-description div {
margin-bottom: 6px;
font-size: 13px;
line-height: 1.3;
}
.games-slide-title {
font-size: 1.5em;
}
/* Mobile specific adjustments */
.grid {
padding: 15px;
}
.game-image-slide {
height: 190px; /* Mobile: 50 + 190 + 50 = 290px */
}
.fortnite-logo {
width: 16px;
height: 16px;
}
.module {
padding: 8px;
}
}
@media (max-width: 375px) {
.games-slide-title {
font-size: 1.3em;
}
.games-slide-description div {
font-size: 11px;
line-height: 1.2;
margin-bottom: 4px;
}
.game-description.module {
min-height: 200px;
}
.game-image.module {
height: 100%;
width: 100%;
}
/* Small mobile adjustments */
.grid {
padding: 10px;
}
.game-image-slide {
height: 170px; /* Small Mobile: 50 + 170 + 50 = 270px */
}
.fortnite-logo {
width: 14px;
height: 14px;
}
.module {
padding: 6px;
}
}
/* Fixed game image styling */
.fixed-game-image {
max-width: 100%;
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Responsive game image adjustments */
@media (max-width: 1061px) {
.fixed-game-image {
max-height: 150px;
border-radius: 6px;
}
.game-image.module {
padding: 8px;
}
}
@media (max-width: 480px) {
.fixed-game-image {
max-height: 120px;
border-radius: 4px;
}
.game-image.module {
padding: 6px;
}
}
@media (max-width: 375px) {
.fixed-game-image {
max-height: 100px;
border-radius: 3px;
}
.game-image.module {
padding: 4px;
}
}
/* Games Slide Background Styles */
.games-slide-background {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.games-slide-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
background-color: rgba(17, 17, 17, 0.8); /* Placeholder background */
}
.games-slide-image::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 3px solid rgba(139, 92, 246, 0.3);
border-top: 3px solid #8b5cf6;
border-radius: 50%;
animation: spin 1s linear infinite;
opacity: 1;
transition: opacity 0.3s ease;
z-index: 10;
}
.games-slide-image.loaded::before {
opacity: 0;
pointer-events: none;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.games-slide-image.loaded {
background-color: transparent;
}
.games-slide-image.active {
opacity: 1;
}
/* Games Slide Title Column Styles */
.games-slide-title-column.row {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Games Slide Title Styling */
.games-slide-title {
color: #c084fc !important;
}
.fortnite-logo {
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: 10px;
}
/* Swiper Styles */
.swiper {
width: 100%;
height: 100vh;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-button-next,
.swiper-button-prev {
color: #333;
}
.swiper-pagination-progressbar {
display: none; /* Mavi bar'ı gizle */
}
.swiper-pagination-progressbar-fill {
display: none; /* Mavi dolgu'yu gizle */
}
/* Responsive Swiper adjustments */
@media (max-width: 1061px) {
.swiper {
height: 100vh;
}
.swiper-slide {
font-size: 16px;
}
.swiper-button-next,
.swiper-button-prev {
width: 30px;
height: 30px;
}
}
@media (max-width: 480px) {
.swiper-slide {
font-size: 14px;
}
.swiper-button-next,
.swiper-button-prev {
width: 25px;
height: 25px;
}
}
@media (max-width: 375px) {
.swiper-slide {
font-size: 12px;
}
.swiper-button-next,
.swiper-button-prev {
width: 20px;
height: 20px;
}
}
/* Game slide button styling */
.games-slide-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
color: white;
border: 2px solid rgba(99, 102, 241, 0.6);
box-shadow:
0 8px 25px rgba(99, 102, 241, 0.4),
0 4px 10px rgba(139, 92, 246, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.games-slide-btn:hover {
transform: translateY(-6px) scale(1.05);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.5),
0 8px 15px rgba(139, 92, 246, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(139, 92, 246, 1) 100%);
border-color: rgba(99, 102, 241, 0.8);
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
.games-slide-btn:active {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 20px rgba(99, 102, 241, 0.4),
0 4px 8px rgba(139, 92, 246, 0.3);
}
.games-slide-btn .btn-text {
position: relative;
z-index: 2;
margin-right: 8px;
}
/* Responsive adjustments for game slide buttons */
@media (max-width: 1061px) {
.games-slide-btn {
padding: 10px 25px;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.games-slide-btn {
padding: 8px 20px;
font-size: 0.9rem;
}
}
/* Custom Games Swiper Navigation Arrows */
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
border-radius: 50%;
border: 2px solid rgba(99, 102, 241, 0.6);
box-shadow:
0 8px 25px rgba(99, 102, 241, 0.4),
0 4px 10px rgba(139, 92, 246, 0.3);
transition: all 0.3s ease;
color: white;
font-size: 1.2rem;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.mySwiper .swiper-button-next:hover,
.mySwiper .swiper-button-prev:hover {
transform: scale(1.1);
box-shadow:
0 15px 35px rgba(99, 102, 241, 0.5),
0 8px 15px rgba(139, 92, 246, 0.4);
background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(139, 92, 246, 1) 100%);
}
.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
font-size: 1.2rem;
font-weight: bold;
}
/* Responsive adjustments for games navigation arrows */
@media (max-width: 1061px) {
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
width: 40px;
height: 40px;
}
.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
width: 35px;
height: 35px;
}
.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
font-size: 0.9rem;
}
}