.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; width: 100%; padding: 0 6%; align-items: center; position: relative; z-index: 10; padding-top: 80px; padding-bottom: 20px; }
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--glass-border); padding: 25px 35px; border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,0.6); transition: all 0.4s ease; max-width: 600px; z-index: 20; }
.glass-panel:hover { border-color: var(--primary); box-shadow: 0 0 35px rgba(255, 26, 26, 0.25); transform: translateY(-5px); }
h1 { font-family: 'Black Ops One'; font-size: 2.2rem; line-height: 1.1; margin-bottom: 12px; color: #fff; display: inline-block; text-shadow: 0 5px 15px rgba(0,0,0,0.5); border-bottom: 2px solid var(--primary); padding-bottom: 5px; }
.desc-text { font-size: 0.95rem; color: #d0d0d0; line-height: 1.5; margin-bottom: 18px; }
.desc-text strong { color: #fff; }
.desc-text em { color: #ff4d4d; font-style: normal; font-weight: 600; text-shadow: 0 0 10px rgba(255,0,0,0.2); }
.principles { list-style: none; margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; border-left: 3px solid rgba(255,255,255,0.08); padding-left: 15px; }
.principles li { color: #fff; display: flex; align-items: center; gap: 10px; font-family: 'Teko', sans-serif; letter-spacing: 0.5px; font-size: 1.1rem; }
.principles li i { color: var(--primary); font-size: 0.8rem; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { padding: 8px 22px; font-family: 'Teko', sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: 1px; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; overflow: hidden; cursor: pointer; }
.btn-primary { background: linear-gradient(135deg, #cc0000 0%, #ff3333 100%); color: #fff; border: none; box-shadow: 0 5px 25px rgba(204, 0, 0, 0.4); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(255, 26, 26, 0.6); }
.btn-secondary { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.15); border-color: #fff; transform: translateY(-3px); }
.image-box { display: flex; justify-content: center; align-items: center; height: 100%; position: relative; }
.god-rays { position: absolute; top: 50%; right: 5%; transform: translate(0, -50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 40, 40, 0.18) 0%, transparent 65%); filter: blur(80px); z-index: -1; animation: pulseLight 5s infinite alternate; }
.interactive-area { position: relative; display: inline-block; pointer-events: none; max-width: 450px; max-height: 60vh; border-radius: 10px; }
.hover-trigger { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 45%; height: 55%; z-index: 50; cursor: pointer; pointer-events: auto; }
.hero-img { height: 60vh; width: auto; object-fit: cover; object-position: center top; filter: drop-shadow(0 0 30px rgba(0,0,0,0.9)); mask-image: linear-gradient(to bottom, black 85%, transparent 100%); animation: float 6s ease-in-out infinite; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 1; transform: scale(1); pointer-events: none; }
.widget-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.9); opacity: 0; filter: blur(10px); pointer-events: auto; z-index: 30; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); width: 580px; height: 260px; display: flex; justify-content: center; align-items: center; }
.interactive-area:hover .hero-img { opacity: 0; transform: scale(1.1); filter: blur(20px); }
.interactive-area:hover .widget-wrapper { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }

/* Dokunmatik cihazlarda tıklama ile aç/kapat için */
.interactive-area.widget-active .hero-img { opacity: 0; transform: scale(1.1); filter: blur(20px); }
.interactive-area.widget-active .widget-wrapper { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
.server-widget { width: 580px; height: 260px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 25px; display: flex; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.8); transition: all 0.3s ease; }
.interactive-area:hover .server-widget { border-color: #ff1a1a; box-shadow: 0 0 25px rgba(255, 26, 26, 0.5), 0 0 70px rgba(255, 26, 26, 0.3), inset 0 0 20px rgba(255, 26, 26, 0.1); }
.widget-left { width: 45%; position: relative; overflow: hidden; background-color: #000; }
.widget-left::after { content: ''; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: linear-gradient(to right, transparent, rgba(10, 10, 12, 0.95)); z-index: 2; pointer-events: none; }
.map-bg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease, opacity 0.5s ease; filter: brightness(0.65); opacity: 0; }
.map-bg.loaded { opacity: 1; }
.map-score-overlay { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); padding: 3px 12px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.1); text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 100px; z-index: 5; }
.score-title { font-family: 'Teko'; font-size: 0.55rem; color: #aaa; letter-spacing: 1px; text-transform: uppercase; }
.score-row { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 10px; }
.team-s { display: flex; flex-direction: column; align-items: center; }
.ts-val { font-family: 'Rajdhani'; font-weight: 700; font-size: 1rem; color: #fff; line-height: 1; }
.ts-name { font-size: 0.45rem; color: #ddd; letter-spacing: 1px; font-weight: 600; }
.ts-ally { color: #5dade2; } .ts-axis { color: #e74c3c; }
.map-info-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 20px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent 90%); display: flex; flex-direction: column; justify-content: flex-end; z-index: 5; }
.map-name-text { font-family: 'Black Ops One'; font-size: 1.2rem; color: #fff; line-height: 1; text-transform: uppercase; margin-bottom: 2px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.soft-mode-text { font-family: 'Rajdhani'; font-weight: 500; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; font-style: italic; }
.widget-right { width: 55%; padding: 25px 30px; display: flex; flex-direction: column; justify-content: center; gap: 20px; position: relative; z-index: 3; }
.label-text { font-family: 'Teko'; font-size: 0.9rem; color: #888; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 5px; display: block; }
.player-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.p-val { font-family: 'Rajdhani'; font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1; }
.p-max { font-family: 'Rajdhani'; font-size: 1.2rem; color: #666; font-weight: 600; }
.progress-track { width: 100%; height: 5px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--bar-green); border-radius: 4px; width: 0%; box-shadow: 0 0 10px rgba(46, 204, 113, 0.4); transition: width 1s ease; }
.footer-row { display: flex; justify-content: space-between; align-items: flex-end; }
.time-val { font-family: 'Rajdhani'; font-size: 1.3rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; }
.time-icon { font-size: 0.9rem; color: #666; }
.status-badge { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(46, 204, 113, 0.08); border: 1px solid rgba(46, 204, 113, 0.2); border-radius: 8px; }
.st-dot { width: 6px; height: 6px; background: var(--status-green); border-radius: 50%; box-shadow: 0 0 8px var(--status-green); }
.st-text { font-family: 'Teko'; font-size: 1rem; color: var(--status-green); letter-spacing: 0.8px; margin-top: 2px; }

.rotation-section, .media-section, .top-players-section { padding: 0 6% 30px; position: relative; z-index: 10; margin-top: 30px; }
.rotation-container { background: rgba(10, 10, 12, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); position: relative; transition: all 0.3s ease; }
.rotation-container:hover { border-color: rgba(255, 26, 26, 0.3); box-shadow: 0 10px 40px rgba(255, 26, 26, 0.1); }
.rotation-header { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 20px; position: relative; width: 100%; }
.rotation-title { font-family: 'Teko', sans-serif; font-weight: 400; font-size: 2.6rem; color: #fff; text-transform: uppercase; letter-spacing: 4px; line-height: 1; text-shadow: 0 0 20px rgba(255, 26, 26, 0.3); display: inline-block; }
.rotation-subtitle { display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 1rem; color: #aaa; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; margin-top: 5px; position: relative; }
.rotation-subtitle::before, .rotation-subtitle::after { content: ''; display: inline-block; width: 30px; height: 1px; background: var(--primary); margin: 0 15px; opacity: 0.6; }
.rotation-carousel-wrapper { position: relative; display: flex; align-items: center; }
.rotation-scroll-area, .video-scroll-area, .events-grid, .recent-matches-grid { display: flex; overflow-x: auto; gap: 20px; padding: 10px 5px 20px; scroll-behavior: smooth; width: 100%; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rotation-scroll-area::-webkit-scrollbar, .video-scroll-area::-webkit-scrollbar, .events-grid::-webkit-scrollbar, .recent-matches-grid::-webkit-scrollbar { display: none; }
.rot-btn { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; z-index: 20; flex-shrink: 0; font-size: 1.1rem; }
.rot-btn:hover { background: var(--primary); box-shadow: 0 0 15px var(--primary); border-color: var(--primary); transform: scale(1.1); }
.btn-prev { margin-right: 15px; } .btn-next { margin-left: 15px; }
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.p-dot { width: 7px; height: 7px; background: rgba(255,255,255,0.2); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
.p-dot:hover, .p-dot.active { background-color: var(--primary); box-shadow: 0 0 10px var(--primary); transform: scale(1.3); }

/* TOP PLAYERS */
.tp-grid { display: flex; justify-content: center; align-items: flex-end; gap: 30px; margin-top: 20px; margin-bottom: 25px; flex-wrap: wrap; }
.tp-card { background: rgba(10, 10, 12, 0.4); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; width: 260px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s; position: relative; }
.tp-card:hover { transform: translateY(-5px); background: rgba(10,10,12,0.8); border-color: var(--primary) !important; box-shadow: 0 0 25px rgba(255, 26, 26, 0.4) !important; }
.tp-card.rank-1 { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); order: 2; height: 380px; }
.tp-card.rank-2 { border-color: var(--silver); order: 1; height: 350px; }
.tp-card.rank-3 { border-color: var(--bronze); order: 3; height: 350px; }
.tp-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.1); margin-bottom: 10px; }
.rank-1 .tp-avatar { width: 100px; height: 100px; border-color: var(--gold); box-shadow: 0 0 15px var(--gold); }
.rank-2 .tp-avatar { border-color: var(--silver); box-shadow: 0 0 10px var(--silver); }
.rank-3 .tp-avatar { border-color: var(--bronze); box-shadow: 0 0 10px var(--bronze); }
.tp-rank-badge { font-family: 'Black Ops One'; font-size: 1.2rem; color: #000; background: #fff; padding: 2px 10px; border-radius: 12px; position: absolute; top: 15px; right: 15px; z-index: 10; }
.rank-1 .tp-rank-badge { background: var(--gold); } .rank-2 .tp-rank-badge { background: var(--silver); } .rank-3 .tp-rank-badge { background: var(--bronze); }
.tp-name { font-family: 'Teko'; font-size: 1.5rem; color: #fff; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.tp-score { font-family: 'Rajdhani'; font-weight: 700; font-size: 1.4rem; color: var(--primary); margin-bottom: 10px; }
.tp-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; background: rgba(255,255,255,0.03); padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); }
.tp-stat-item { display: flex; flex-direction: column; align-items: center; }
.tp-lbl { font-family: 'Teko'; font-size: 0.9rem; color: #888; letter-spacing: 1px; line-height: 1; }
.tp-val-small { font-family: 'Rajdhani'; font-weight: 600; font-size: 1.1rem; color: #fff; }
.view-all-btn { display: inline-block; padding: 10px 30px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; color: #fff; font-family: 'Teko'; font-size: 1.1rem; text-decoration: none; transition: all 0.3s; margin-top: 10px; background: rgba(255,255,255,0.05); }
.view-all-btn:hover { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 15px var(--primary); }

/* CARDS */
.rm-card { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; height: 180px; background: #08080a; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; position: relative; overflow: hidden; cursor: pointer; display: block; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.rm-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.2); box-shadow: 0 15px 30px rgba(0,0,0,0.6); }
.rm-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; filter: saturate(1.1) brightness(0.9); transition: transform 0.6s ease; z-index: 0; }
.rm-card:hover .rm-bg { transform: scale(1.1); filter: saturate(1.2) brightness(1); }
.rm-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 40%, rgba(0,0,0,0.95) 90%); display: flex; flex-direction: column; justify-content: space-between; padding: 15px; z-index: 2; }
.rm-date { font-family: 'Rajdhani'; font-weight: 600; font-size: 0.85rem; color: #ddd; background: rgba(0, 0, 0, 0.7); padding: 3px 8px; border-radius: 4px; align-self: flex-end; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); }
.rm-footer { display: flex; flex-direction: column; gap: 8px; }
.rm-map-name { font-family: 'Teko', sans-serif; font-weight: 600; font-size: 1.3rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 5px rgba(0,0,0,1); }
.rm-score-bar { display: flex; height: 26px; width: 100%; background: rgba(10, 10, 15, 0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; backdrop-filter: blur(5px); }
.sb-side { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.sb-ally { background: linear-gradient(90deg, rgba(0, 210, 255, 0.15) 0%, transparent 100%); border-right: 1px solid rgba(255,255,255,0.1); }
.sb-axis { background: linear-gradient(-90deg, rgba(255, 42, 42, 0.15) 0%, transparent 100%); }
.sb-lbl { font-family: 'Teko'; font-size: 0.9rem; color: #aaa; margin-top: 2px; }
.sb-val { font-family: 'Rajdhani'; font-weight: 700; font-size: 1.1rem; color: #fff; line-height: 1; }

.map-card { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; height: 135px; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; background: #000; cursor: default; }
.map-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(255, 26, 26, 0.25); }
.mc-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: saturate(1.1); transition: transform 0.6s ease, opacity 0.3s; }
.map-card:hover .mc-bg { opacity: 1; transform: scale(1.1); }
.mc-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); display: flex; flex-direction: column; }
.mc-name { font-family: 'Teko'; font-size: 1.2rem; color: #fff; line-height: 1; text-transform: uppercase; }
.mc-mode { font-family: 'Rajdhani'; font-size: 0.75rem; color: var(--primary); font-weight: 600; text-transform: uppercase; }
.order-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-family: 'Rajdhani'; font-weight: 700; font-size: 0.8rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; z-index: 5; }

.video-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; background: rgba(10, 10, 12, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; position: relative; text-decoration: none; display: flex; flex-direction: column; }
.video-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 10px 30px rgba(255, 26, 26, 0.2); }
.video-thumb { width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; }
.v-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.video-card:hover .v-img { transform: scale(1.1); }
.play-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.video-card:hover .play-overlay { opacity: 1; }
.play-icon-box { width: 45px; height: 45px; background: rgba(255, 26, 26, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 0 20px var(--primary); transform: scale(0.8); transition: transform 0.3s; }
.video-card:hover .play-icon-box { transform: scale(1); }
.v-content { padding: 12px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.v-title { font-family: 'Teko', sans-serif; font-size: 1.15rem; color: #fff; line-height: 1.2; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card:hover .v-title { color: var(--primary); }
.v-date { font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; color: #888; font-weight: 600; }

.events-grid { display: grid; grid-template-rows: repeat(2, 130px); grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.event-card { scroll-snap-align: start; display: flex; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.7); transition: all 0.3s ease; position: relative; }
.event-card:hover { border-color: var(--primary); box-shadow: 0 5px 25px rgba(255,26,26,0.15); transform: translateY(-3px); }
.ec-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: saturate(1.1) brightness(0.65); transition: 0.5s; z-index: 0; }
.event-card:hover .ec-bg { opacity: 0.8; filter: saturate(1.2) brightness(0.85); transform: scale(1.05); }
.ec-date-box { width: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); border-right: 1px solid rgba(255,255,255,0.1); z-index: 1; backdrop-filter: blur(5px); }
.ec-day { font-family: 'Rajdhani'; font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.ec-month { font-family: 'Teko'; font-size: 1.1rem; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }
.ec-content { flex: 1; padding: 10px; display: flex; flex-direction: column; z-index: 1; position: relative; justify-content: center; }
.ec-top-tag { font-family: 'Teko'; font-size: 0.85rem; letter-spacing: 1px; color: #ccc; text-transform: uppercase; position: absolute; top: 8px; left: 12px; text-shadow: 0 1px 3px rgba(0,0,0,1); font-weight: 500; }
.ec-map-name { font-family: 'Rajdhani'; font-size: 0.85rem; color: #ccc; text-transform: uppercase; letter-spacing: 1px; position: absolute; top: 8px; right: 12px; text-shadow: 0 1px 3px rgba(0,0,0,1); font-weight: 600; }
.ec-center-stage { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; margin-top: 5px; }
.team-logo { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,0,0,0.8)); transition: transform 0.3s; }
.event-card:hover .team-logo { transform: scale(1.1); }
.score-display { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-numbers { font-family: 'Rajdhani', sans-serif; font-weight: 300; font-size: 2.8rem; color: #ffffff; text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); line-height: 0.9; letter-spacing: 2px; }
.score-status-text { font-family: 'Teko'; font-size: 0.85rem; color: #aaa; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.status-win { color: #2ecc71; text-shadow: 0 0 10px rgba(46,204,113,0.5); }
.status-lose { color: #e74c3c; text-shadow: 0 0 10px rgba(231,76,60,0.5); }
.status-draw { color: #f1c40f; }
.ec-status-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; z-index: 2; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); }
.line-win { background: var(--bar-green); box-shadow: 0 0 10px var(--bar-green); }
.line-lose { background: #e74c3c; box-shadow: 0 0 10px #e74c3c; }
.line-draw { background: #f1c40f; box-shadow: 0 0 10px #f1c40f; }
.line-upcoming { background: #555; }


/* ==== GÜNCELLENMİŞ MOBİL UYUMLULUK (MEDIA QUERIES) ==== */

@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; text-align: center; padding: 100px 20px 60px; display: block; overflow-y: auto; }
    .image-box { justify-content: center; margin-top: 30px; height: 400px; }
    .hero-img { max-height: 40vh; margin-right: 0; transform: none; }
    .glass-panel { padding: 30px; margin: 0 auto; transform: none; max-width: 90%; }
    .server-widget { width: 95%; max-width: 420px; height: auto; flex-direction: column; }
    .widget-left, .widget-right { width: 100%; }
    .widget-left { height: 160px; }
}

@media (max-width: 768px) {
    /* Hero Alanı Daraltma */
    .hero { padding: 90px 15px 40px; }
    .glass-panel { padding: 25px 20px; }
    h1 { font-size: 1.8rem; }
    .desc-text { font-size: 0.9rem; }
    
    /* Center align features list */
    .principles { border-left: none; padding-left: 0; align-items: center; }
    .principles li { font-size: 1rem; justify-content: center; }
    .buttons { justify-content: center; }

    /* Interactive Widget Mobile Fix */
    .interactive-area { max-width: 100%; height: auto; }
    .hero-img { max-height: 280px; }
    .widget-wrapper { width: 90vw; max-width: 380px; height: auto; }
    .server-widget { border-radius: 15px; }
    .widget-left { height: 120px; }
    .map-name-text { font-size: 1rem; }
    .widget-right { padding: 15px 20px; gap: 10px; }
    .p-val { font-size: 2rem; }
    .time-val { font-size: 1.1rem; }

    /* Ana Bölüm Boşlukları */
    .rotation-section, .media-section, .top-players-section { padding: 0 15px 25px; margin-top: 15px; }
    .rotation-container { padding: 15px 10px; border-radius: 15px; }
    .rotation-title { font-size: 1.8rem; letter-spacing: 2px; }
    .rotation-subtitle { font-size: 0.75rem; letter-spacing: 2px; }

    /* Carousel / Scroll Kartlarının Genişlikleri (Peek Etkisi) */
    .rotation-carousel-wrapper { gap: 5px; }
    .rot-btn { width: 32px; height: 32px; font-size: 0.9rem; }
    .btn-prev { margin-right: 5px; } .btn-next { margin-left: 5px; }
    
    .map-card, .rm-card, .video-card { flex: 0 0 85%; }
    
    /* Etkinlik (Event) Tablosunu Mobilde Tek Satır Yapma */
    .events-grid { 
        grid-template-rows: auto; 
        grid-auto-columns: 85%; 
    }
    .event-card { height: 120px; }
    .ec-day { font-size: 1.5rem; }
    .score-numbers { font-size: 2rem; }

    /* Top Players (Sıralamayı Dikine ve Doğru Dizme) */
    .tp-grid { flex-direction: column; align-items: center; gap: 15px; }
    .tp-card { 
        width: 100%; 
        max-width: 320px; 
        height: auto !important; 
        padding: 15px; 
        order: initial !important; 
    }
    /* Mobilde 1-2-3 diye alt alta insin diye sıralamayı (order) zorluyoruz */
    .tp-card.rank-1 { order: 1 !important; }
    .tp-card.rank-2 { order: 2 !important; }
    .tp-card.rank-3 { order: 3 !important; }
    
    .tp-avatar { width: 60px; height: 60px; }
    .rank-1 .tp-avatar { width: 75px; height: 75px; }
    .tp-name { font-size: 1.3rem; }
    .tp-score { font-size: 1.2rem; }
}