/* Font Ayarları
* NOT: Google Fonts @import KALDIRILDI — render-blocking + sequential.
* Browser CSS'i parse edip @import gördükten SONRA fontu indiriyordu;
* bu LCP'yi ~500ms geciktiriyordu. Şimdi HTML 'de preload + link.
* Weight sayısı da 12 → 4'e düşürüldü (görsel kayıp yok).
*/
/* A11Y — screen-reader-only utility (görsel gizli, AT erişebilir) */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Inline SVG icon utility — FontAwesome'ın yerini alır.
- currentColor → parent text rengiyle uyumlu
- 1em × 1em → font-size'a göre auto-scale
- vertical-align → satır-içi metinle baseline align */
.ic {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
flex-shrink: 0;
}
.ic.spin {
animation: ic-spin 1.5s linear infinite;
}
@keyframes ic-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Genel Ayarlar */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'Poppins', sans-serif;
background-color: #f8fafc;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Modern Header Styles */
.header {
background: linear-gradient(135deg, rgba(15, 20, 30, 0.95) 0%, rgba(26, 29, 41, 0.95) 100%);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: sticky;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.navbar {
background: transparent;
box-shadow: none;
z-index: 1000;
}
.navbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
padding: 16px 20px;
}
.navbar-logo {
font-size: 26px;
text-decoration: none;
letter-spacing: 1px;
font-family: 'Poppins', sans-serif;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.navbar-logo:hover {
transform: scale(1.05);
}
.logo-indicator {
font-weight: 300;
color: #94a3b8;
}
.logo-plus {
font-weight: 700;
color: #00C851;
}
.search-box {
display: none;
}
.navbar-links {
display: flex;
align-items: center;
gap: 12px;
}
.navbar-link {
display: flex;
align-items: center;
color: #e2e8f0;
font-size: 14px;
font-weight: 500;
text-decoration: none;
padding: 10px 16px;
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.navbar-link:hover {
background: linear-gradient(135deg, #00C851, #00A844);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.3);
border-color: #00C851;
}
.navbar-link span:first-child {
margin-right: 8px;
font-size: 16px;
}
/* Language Selector Styles */
.language-selector {
position: relative;
display: flex;
align-items: center;
margin-left: 8px;
}
.current-language {
display: flex;
align-items: center;
gap: 6px;
color: #e2e8f0;
font-size: 14px;
font-weight: 500;
text-decoration: none;
padding: 10px 12px;
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
cursor: pointer;
min-width: 70px;
}
.current-language:hover {
background: rgba(0, 200, 81, 0.1);
border-color: rgba(0, 200, 81, 0.3);
transform: translateY(-1px);
}
.current-language .flag {
font-size: 16px;
}
.current-language .lang-code {
font-weight: 600;
}
.current-language i {
font-size: 10px;
transition: transform 0.3s ease;
}
.current-language.active i {
transform: rotate(180deg);
}
.language-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: rgba(15, 20, 30, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
min-width: 140px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.language-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
color: #e2e8f0;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.language-option:last-child {
border-bottom: none;
}
.language-option:hover {
background: rgba(0, 200, 81, 0.1);
color: #00C851;
}
.language-option.active {
background: rgba(0, 200, 81, 0.15);
color: #00C851;
}
.language-option .flag {
font-size: 16px;
}
.language-option .lang-name {
font-weight: 500;
}
/* User Menu Styles */
.user-menu {
display: flex;
align-items: center;
gap: 12px;
}
.user-info {
display: flex;
align-items: center;
color: #e2e8f0;
font-size: 14px;
font-weight: 500;
padding: 8px 12px;
border-radius: 10px;
background: rgba(0, 200, 81, 0.1);
border: 1px solid rgba(0, 200, 81, 0.2);
}
.user-name {
color: #00C851;
font-weight: 600;
}
.dashboard-link {
background: linear-gradient(135deg, #00C851, #00A844) !important;
color: #ffffff !important;
font-weight: 600;
box-shadow: 0 4px 16px rgba(0, 200, 81, 0.3);
}
.dashboard-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.4);
}
.user-dropdown {
position: relative;
}
.dropdown-trigger {
display: flex;
align-items: center;
gap: 6px;
color: #e2e8f0;
font-size: 14px;
font-weight: 500;
padding: 10px 16px;
border-radius: 12px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
cursor: pointer;
}
.dropdown-trigger:hover {
background: rgba(0, 200, 81, 0.1);
border-color: rgba(0, 200, 81, 0.3);
transform: translateY(-1px);
}
.dropdown-trigger i {
font-size: 10px;
transition: transform 0.3s ease;
}
.dropdown-trigger.active i {
transform: rotate(180deg);
}
.user-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: rgba(15, 20, 30, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
min-width: 160px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.user-dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
color: #e2e8f0;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: rgba(0, 200, 81, 0.1);
color: #00C851;
}
.dropdown-item i {
font-size: 14px;
width: 16px;
text-align: center;
}
/* Mobile Controls */
.mobile-controls {
display: none;
align-items: center;
gap: 12px;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-container {
background: rgba(15, 20, 30, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 0;
width: 90%;
max-width: 420px;
position: relative;
transform: translateY(30px) scale(0.95);
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-overlay.active .modal-container {
transform: translateY(0) scale(1);
}
.modal-header {
background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(0, 200, 81, 0.05));
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 24px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.modal-close {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #94a3b8;
font-size: 16px;
}
.modal-close:hover {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #ef4444;
transform: scale(1.05);
}
.modal-body {
padding: 30px;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-size: 14px;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 4px;
}
.form-input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 14px 16px;
font-size: 16px;
color: #ffffff;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.form-input:focus {
outline: none;
border-color: #00C851;
background: rgba(0, 200, 81, 0.05);
box-shadow: 0 0 0 3px rgba(0, 200, 81, 0.1);
}
.form-input::placeholder {
color: #64748b;
}
.auth-button {
background: linear-gradient(135deg, #00C851, #00A844);
border: none;
border-radius: 12px;
padding: 16px 24px;
font-size: 16px;
font-weight: 700;
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.3);
}
.auth-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 200, 81, 0.4);
}
.auth-button:active {
transform: translateY(0);
}
.form-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 20px 0;
}
.divider-line {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.divider-text {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.social-auth {
display: flex;
flex-direction: column;
gap: 12px;
}
.social-button {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
transition: all 0.3s ease;
color: #e2e8f0;
font-weight: 600;
font-size: 14px;
}
.social-button:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.auth-switch {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-switch-text {
font-size: 14px;
color: #94a3b8;
}
.auth-switch-link {
color: #00C851;
text-decoration: none;
font-weight: 600;
margin-left: 4px;
transition: all 0.3s ease;
}
.auth-switch-link:hover {
color: #00A844;
text-decoration: underline;
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
}
.checkbox-input {
width: 18px;
height: 18px;
margin: 0;
accent-color: #00C851;
}
.checkbox-label {
font-size: 13px;
color: #94a3b8;
line-height: 1.4;
flex: 1;
}
.checkbox-label a {
color: #00C851;
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
/* Forgot Password Styles */
.forgot-password-container {
text-align: center;
margin: 16px 0 8px 0;
}
.forgot-password-link {
color: #00C851;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.forgot-password-link:hover {
text-decoration: underline;
color: #00A844;
}
/* Email Verification Modal Styles */
.verification-info {
text-align: center;
margin-bottom: 24px;
padding: 20px;
background: rgba(0, 200, 81, 0.05);
border: 1px solid rgba(0, 200, 81, 0.1);
border-radius: 12px;
}
.verification-message {
font-size: 14px;
color: #94a3b8;
margin-bottom: 8px;
}
.verification-email {
font-size: 16px;
color: #00C851;
font-weight: 600;
margin: 0;
}
.reset-password-message {
font-size: 14px;
color: #94a3b8;
margin-bottom: 8px;
}
.reset-password-email {
font-size: 16px;
color: #00C851;
font-weight: 600;
margin: 0;
}
.forgot-password-message {
font-size: 14px;
color: #94a3b8;
margin-bottom: 8px;
}
.verification-code-container {
display: flex;
gap: 12px;
justify-content: center;
margin: 16px 0;
}
.verification-input {
width: 48px;
height: 56px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
text-align: center;
font-size: 24px;
font-weight: 700;
color: #ffffff;
transition: all 0.3s ease;
font-family: 'Inter', monospace;
}
.verification-input:focus {
outline: none;
border-color: #00C851;
background: rgba(0, 200, 81, 0.05);
box-shadow: 0 0 0 3px rgba(0, 200, 81, 0.1);
transform: scale(1.05);
}
.verification-input:valid {
border-color: #00C851;
background: rgba(0, 200, 81, 0.1);
}
.resend-container {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.resend-text {
font-size: 14px;
color: #94a3b8;
margin-right: 8px;
}
.resend-button {
background: none;
border: none;
color: #00C851;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
transition: all 0.3s ease;
}
.resend-button:hover {
color: #00A844;
}
.resend-button:disabled {
color: #64748b;
cursor: not-allowed;
text-decoration: none;
}
/* Mobile Modal Responsive */
@media (max-width: 768px) {
.modal-container {
width: 95%;
max-width: 350px;
}
.modal-header {
padding: 20px 24px;
}
.modal-title {
font-size: 20px;
}
.modal-body {
padding: 24px;
}
.form-input {
padding: 12px 14px;
font-size: 16px; /* iOS zoom prevention */
}
.auth-button {
padding: 14px 20px;
}
}
/* Mobile Language Selector */
.mobile-language-selector {
display: none;
}
/* Modern Hamburger Menu */
.navbar-toggler {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
cursor: pointer;
padding: 10px;
transition: all 0.3s ease;
color: #e2e8f0;
backdrop-filter: blur(10px);
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.navbar-toggler:hover {
background: rgba(0, 200, 81, 0.15);
border-color: rgba(0, 200, 81, 0.3);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 200, 81, 0.2);
}
.hamburger-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 22px;
height: 18px;
position: relative;
}
.hamburger-icon span {
display: block;
width: 100%;
height: 3px;
background: #e2e8f0;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.navbar-toggler:hover .hamburger-icon span {
background: #00C851;
}
.navbar-toggler.active .hamburger-icon span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.navbar-toggler.active .hamburger-icon span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.navbar-toggler.active .hamburger-icon span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Modern Navigation Menu */
.navbar-menu {
display: flex;
justify-content: center;
background: linear-gradient(135deg, rgba(15, 20, 30, 0.9) 0%, rgba(26, 29, 41, 0.9) 100%);
backdrop-filter: blur(20px);
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
z-index: 999;
gap: 8px;
}
.navbar-item {
padding: 12px 20px;
color: #e2e8f0;
text-decoration: none;
font-size: 14px;
font-weight: 500;
position: relative;
transition: all 0.3s ease;
border-radius: 8px;
border: 1px solid transparent;
}
.navbar-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #00C851, #00A844);
transform: scaleX(0);
transition: transform 0.3s ease;
border-radius: 2px;
}
.navbar-item:hover::after {
transform: scaleX(1);
}
.navbar-item:hover {
color: #00C851;
background: rgba(0, 200, 81, 0.1);
border-color: rgba(0, 200, 81, 0.3);
transform: translateY(-1px);
}
.navbar-item.active {
color: #00C851;
background: rgba(0, 200, 81, 0.15);
border-color: rgba(0, 200, 81, 0.4);
}
/* Ana Banner (Hero Section) */
.main-banner-container {
width: 100%;
background: linear-gradient(to right, #6dd5ed, #0077b3);
padding: 10px 0 10px 0;
margin-top: 20px;
}
.main-banner {
max-width: 1200px;
margin: auto;
padding: 10px 0;
text-align: center;
color: #fff;
position: relative;
}
.main-banner h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: white;
}
.how-it-works {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 10px;
flex-wrap: wrap;
}
/* Genel Step Stilleri */
.step {
margin: 10px;
padding: 15px;
border-radius: 10px;
border: 3px solid #ddd;
background-color: rgba(248, 248, 248, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
}
.step i {
color: #0077b3;
font-size: 1.8em;
margin-bottom: 8px;
}
.step h2 {
color: #333;
font-weight: bold;
margin-bottom: 8px;
font-size: 16px;
}
.step p {
color: #666;
font-size: 13px;
}
/* Hero Performance Showcase Stilleri */
.performance-showcase-container {
width: 100%;
background: linear-gradient(135deg, #0f1419 0%, #1a1d29 50%, #0f1419 100%);
padding: 60px 0 50px 0;
margin-top: 0;
position: relative;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
border: none;
}
.performance-showcase-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.performance-showcase-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 15% 25%, rgba(0, 150, 255, 0.03) 0%, transparent 60%),
radial-gradient(circle at 85% 75%, rgba(138, 43, 226, 0.03) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(0, 200, 81, 0.02) 0%, transparent 70%);
animation: professionalGlow 25s ease-in-out infinite;
z-index: 1;
}
/* Bouncing Crypto Symbols */
.crypto-symbol {
position: absolute;
font-size: 32px;
color: rgba(255, 255, 255, 0.15);
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 1;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* Horizontal Moving Symbols */
.crypto-symbol-horizontal {
position: absolute;
font-size: 28px;
color: rgba(0, 200, 81, 0.1);
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 1;
text-shadow: 0 0 12px rgba(0, 200, 81, 0.3);
}
.crypto-symbol-svg {
position: absolute;
width: 40px;
height: 40px;
opacity: 0.08;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
z-index: 1;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
}
.crypto-symbol:nth-child(1) {
top: 30%;
left: 5%;
animation: bounce1 8s ease-in-out infinite;
animation-delay: 0s;
}
.crypto-symbol:nth-child(2) {
top: 60%;
left: 90%;
animation: bounce2 10s ease-in-out infinite;
animation-delay: 1s;
}
.crypto-symbol:nth-child(3) {
top: 20%;
left: 80%;
animation: bounce3 12s ease-in-out infinite;
animation-delay: 2s;
}
.crypto-symbol:nth-child(4) {
top: 80%;
left: 20%;
animation: bounce4 9s ease-in-out infinite;
animation-delay: 3s;
}
.crypto-symbol:nth-child(5) {
top: 50%;
left: 50%;
animation: bounce5 11s ease-in-out infinite;
animation-delay: 4s;
}
.crypto-symbol:nth-child(6) {
top: 15%;
left: 40%;
animation: bounce6 7s ease-in-out infinite;
animation-delay: 1.5s;
}
.crypto-symbol:nth-child(7) {
top: 75%;
left: 70%;
animation: bounce7 13s ease-in-out infinite;
animation-delay: 2.5s;
}
.crypto-symbol:nth-child(8) {
top: 40%;
left: 15%;
animation: bounce8 6s ease-in-out infinite;
animation-delay: 0.5s;
}
/* Additional Bouncing Symbols */
.crypto-symbol:nth-child(9) {
top: 35%;
left: 85%;
animation: bounce9 14s ease-in-out infinite;
animation-delay: 6s;
}
.crypto-symbol:nth-child(10) {
top: 70%;
left: 10%;
animation: bounce10 9s ease-in-out infinite;
animation-delay: 3.5s;
}
.crypto-symbol:nth-child(11) {
top: 25%;
left: 60%;
animation: bounce11 11s ease-in-out infinite;
animation-delay: 5s;
}
.crypto-symbol:nth-child(12) {
top: 85%;
left: 45%;
animation: bounce12 8s ease-in-out infinite;
animation-delay: 2s;
}
/* Horizontal Moving Symbols Positions */
.crypto-symbol-horizontal:nth-child(13) {
top: 10%;
left: -50px;
animation: slideRight1 15s linear infinite;
animation-delay: 0s;
}
.crypto-symbol-horizontal:nth-child(14) {
top: 90%;
right: -50px;
animation: slideLeft1 18s linear infinite;
animation-delay: 3s;
}
.crypto-symbol-horizontal:nth-child(15) {
top: 45%;
left: -50px;
animation: slideRight2 20s linear infinite;
animation-delay: 7s;
}
.crypto-symbol-horizontal:nth-child(16) {
top: 65%;
right: -50px;
animation: slideLeft2 16s linear infinite;
animation-delay: 10s;
}
/* SVG Symbol Positions */
.crypto-symbol-svg:nth-child(17) {
top: 55%;
left: 25%;
animation: floatRotate1 12s ease-in-out infinite;
animation-delay: 1s;
}
.crypto-symbol-svg:nth-child(18) {
top: 30%;
left: 75%;
animation: floatRotate2 15s ease-in-out infinite;
animation-delay: 4s;
}
.crypto-symbol-svg:nth-child(19) {
top: 80%;
left: 60%;
animation: floatRotate3 10s ease-in-out infinite;
animation-delay: 8s;
}
@keyframes professionalGlow {
0%, 100% {
background-position: 15% 25%, 85% 75%, 50% 50%;
filter: brightness(1) contrast(1);
}
33% {
background-position: 20% 30%, 80% 70%, 45% 55%;
filter: brightness(1.1) contrast(1.1);
}
66% {
background-position: 10% 20%, 90% 80%, 55% 45%;
filter: brightness(0.95) contrast(1.05);
}
}
/* Bouncing Animations */
@keyframes bounce1 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.6; }
12.5% { transform: translate(60px, -20px) rotate(45deg) scale(1.1); opacity: 0.8; }
25% { transform: translate(80px, 10px) rotate(90deg) scale(0.9); opacity: 0.9; }
37.5% { transform: translate(60px, 40px) rotate(135deg) scale(1.2); opacity: 0.7; }
50% { transform: translate(0, 30px) rotate(180deg) scale(1); opacity: 0.5; }
62.5% { transform: translate(-40px, 20px) rotate(225deg) scale(0.8); opacity: 0.8; }
75% { transform: translate(-60px, -10px) rotate(270deg) scale(1.1); opacity: 0.9; }
87.5% { transform: translate(-30px, -30px) rotate(315deg) scale(1.3); opacity: 0.6; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.6; }
}
@keyframes bounce2 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.5; }
20% { transform: translate(-70px, 30px) rotate(-72deg) scale(1.2); opacity: 0.8; }
40% { transform: translate(-50px, -40px) rotate(-144deg) scale(0.9); opacity: 0.9; }
60% { transform: translate(30px, -30px) rotate(-216deg) scale(1.1); opacity: 0.7; }
80% { transform: translate(40px, 20px) rotate(-288deg) scale(0.8); opacity: 0.8; }
100% { transform: translate(0, 0) rotate(-360deg) scale(1); opacity: 0.5; }
}
@keyframes bounce3 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
16.6% { transform: translate(-50px, 20px) rotate(60deg) scale(1.1); opacity: 0.8; }
33.3% { transform: translate(-70px, -10px) rotate(120deg) scale(0.9); opacity: 0.9; }
50% { transform: translate(-30px, -50px) rotate(180deg) scale(1.3); opacity: 0.6; }
66.6% { transform: translate(40px, -40px) rotate(240deg) scale(0.8); opacity: 0.8; }
83.3% { transform: translate(60px, 10px) rotate(300deg) scale(1.2); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.7; }
}
@keyframes bounce4 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.6; }
25% { transform: translate(50px, -30px) rotate(90deg) scale(1.2); opacity: 0.9; }
50% { transform: translate(20px, -60px) rotate(180deg) scale(0.8); opacity: 0.7; }
75% { transform: translate(-30px, -40px) rotate(270deg) scale(1.1); opacity: 0.8; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.6; }
}
@keyframes bounce5 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
10% { transform: translate(40px, -20px) rotate(36deg) scale(1.1); opacity: 0.6; }
20% { transform: translate(60px, 10px) rotate(72deg) scale(0.9); opacity: 0.9; }
30% { transform: translate(40px, 40px) rotate(108deg) scale(1.2); opacity: 0.7; }
40% { transform: translate(-10px, 50px) rotate(144deg) scale(0.8); opacity: 0.8; }
50% { transform: translate(-50px, 30px) rotate(180deg) scale(1); opacity: 0.5; }
60% { transform: translate(-60px, -10px) rotate(216deg) scale(1.1); opacity: 0.8; }
70% { transform: translate(-30px, -40px) rotate(252deg) scale(0.9); opacity: 0.9; }
80% { transform: translate(20px, -50px) rotate(288deg) scale(1.3); opacity: 0.6; }
90% { transform: translate(50px, -20px) rotate(324deg) scale(1.1); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.8; }
}
@keyframes bounce6 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.5; }
33% { transform: translate(70px, 35px) rotate(120deg) scale(1.3); opacity: 0.9; }
66% { transform: translate(-40px, 25px) rotate(240deg) scale(0.7); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.5; }
}
@keyframes bounce7 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.6; }
14.3% { transform: translate(-30px, -25px) rotate(51.4deg) scale(1.1); opacity: 0.8; }
28.6% { transform: translate(-60px, 10px) rotate(102.8deg) scale(0.9); opacity: 0.9; }
42.9% { transform: translate(-40px, 50px) rotate(154.2deg) scale(1.2); opacity: 0.6; }
57.1% { transform: translate(20px, 45px) rotate(205.6deg) scale(0.8); opacity: 0.8; }
71.4% { transform: translate(50px, 10px) rotate(257deg) scale(1.1); opacity: 0.7; }
85.7% { transform: translate(30px, -30px) rotate(308.4deg) scale(1.3); opacity: 0.5; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.6; }
}
@keyframes bounce8 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
50% { transform: translate(90px, -50px) rotate(180deg) scale(1.4); opacity: 0.9; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.7; }
}
@keyframes bounce9 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
20% { transform: translate(-40px, 30px) rotate(72deg) scale(1.2); opacity: 0.6; }
40% { transform: translate(-80px, -20px) rotate(144deg) scale(0.9); opacity: 0.9; }
60% { transform: translate(-30px, -60px) rotate(216deg) scale(1.3); opacity: 0.7; }
80% { transform: translate(50px, -40px) rotate(288deg) scale(0.8); opacity: 0.8; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.8; }
}
@keyframes bounce10 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.6; }
30% { transform: translate(70px, -30px) rotate(108deg) scale(1.1); opacity: 0.9; }
60% { transform: translate(40px, 40px) rotate(216deg) scale(1.3); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.6; }
}
@keyframes bounce11 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
25% { transform: translate(-50px, 25px) rotate(90deg) scale(1.2); opacity: 0.8; }
50% { transform: translate(30px, 50px) rotate(180deg) scale(0.8); opacity: 0.9; }
75% { transform: translate(60px, -30px) rotate(270deg) scale(1.4); opacity: 0.6; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.7; }
}
@keyframes bounce12 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
40% { transform: translate(-60px, -40px) rotate(144deg) scale(1.1); opacity: 0.7; }
80% { transform: translate(40px, 30px) rotate(288deg) scale(1.2); opacity: 0.9; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.8; }
}
/* Horizontal Sliding Animations */
@keyframes slideRight1 {
0% { transform: translateX(-100px) rotate(0deg) scale(1); opacity: 0; }
10% { opacity: 0.8; transform: translateX(0) rotate(36deg) scale(1.1); }
90% { opacity: 0.8; transform: translateX(calc(100vw - 50px)) rotate(324deg) scale(1.1); }
100% { transform: translateX(calc(100vw + 50px)) rotate(360deg) scale(1); opacity: 0; }
}
@keyframes slideLeft1 {
0% { transform: translateX(100px) rotate(0deg) scale(1); opacity: 0; }
10% { opacity: 0.8; transform: translateX(0) rotate(-36deg) scale(1.1); }
90% { opacity: 0.8; transform: translateX(calc(-100vw + 50px)) rotate(-324deg) scale(1.1); }
100% { transform: translateX(calc(-100vw - 50px)) rotate(-360deg) scale(1); opacity: 0; }
}
@keyframes slideRight2 {
0% { transform: translateX(-100px) rotate(0deg) scale(1.2); opacity: 0; }
15% { opacity: 0.6; transform: translateX(0) rotate(54deg) scale(0.9); }
85% { opacity: 0.6; transform: translateX(calc(100vw - 50px)) rotate(306deg) scale(0.9); }
100% { transform: translateX(calc(100vw + 50px)) rotate(360deg) scale(1.2); opacity: 0; }
}
@keyframes slideLeft2 {
0% { transform: translateX(100px) rotate(0deg) scale(0.8); opacity: 0; }
15% { opacity: 0.7; transform: translateX(0) rotate(-54deg) scale(1.3); }
85% { opacity: 0.7; transform: translateX(calc(-100vw + 50px)) rotate(-306deg) scale(1.3); }
100% { transform: translateX(calc(-100vw - 50px)) rotate(-360deg) scale(0.8); opacity: 0; }
}
/* Floating and Rotating SVG Animations */
@keyframes floatRotate1 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.8; }
25% { transform: translate(30px, -40px) rotate(90deg) scale(1.2); opacity: 0.6; }
50% { transform: translate(-20px, -30px) rotate(180deg) scale(0.9); opacity: 0.9; }
75% { transform: translate(-40px, 20px) rotate(270deg) scale(1.1); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.8; }
}
@keyframes floatRotate2 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.6; }
33% { transform: translate(-50px, 40px) rotate(120deg) scale(1.3); opacity: 0.9; }
66% { transform: translate(40px, -30px) rotate(240deg) scale(0.8); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.6; }
}
@keyframes floatRotate3 {
0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
20% { transform: translate(25px, 35px) rotate(72deg) scale(1.1); opacity: 0.8; }
40% { transform: translate(-35px, 25px) rotate(144deg) scale(1.2); opacity: 0.6; }
60% { transform: translate(-25px, -35px) rotate(216deg) scale(0.9); opacity: 0.9; }
80% { transform: translate(35px, -25px) rotate(288deg) scale(1.3); opacity: 0.7; }
100% { transform: translate(0, 0) rotate(360deg) scale(1); opacity: 0.7; }
}
.performance-showcase {
max-width: 1400px;
margin: auto;
padding: 0 20px;
position: relative;
z-index: 2;
width: 100%;
}
.performance-content {
background: linear-gradient(145deg, rgba(22, 26, 35, 0.95), rgba(16, 20, 28, 0.98));
border-radius: 24px;
padding: 0;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.hero-sections {
display: grid;
grid-template-columns: 55% 45%;
min-height: 400px;
gap: 2px;
}
.hero-left {
padding: 45px 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, rgba(22, 26, 35, 0.7), rgba(18, 22, 30, 0.8));
border-radius: 24px 0 0 24px;
position: relative;
}
.hero-left::before {
content: '';
position: absolute;
top: 10%;
right: 0;
width: 1px;
height: 80%;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.hero-right {
padding: 45px 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, rgba(18, 22, 30, 0.8), rgba(22, 26, 35, 0.7));
border-radius: 0 24px 24px 0;
}
.performance-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(138, 43, 226, 0.1) 0%,
transparent 25%,
transparent 75%,
rgba(0, 200, 81, 0.1) 100%);
border-radius: 20px;
z-index: -1;
}
.hero-header {
margin-bottom: 15px;
text-align: center;
}
.hero-main-title {
font-size: 36px;
font-weight: 800;
color: #ffffff;
margin-bottom: 16px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
letter-spacing: -0.8px;
font-family: 'Inter', 'Poppins', sans-serif;
background: linear-gradient(135deg, #ffffff 0%, #10b981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-guarantee {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.guarantee-badge {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.social-proof {
color: #ffd700;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: 17px;
color: #94a3b8;
font-weight: 400;
margin-bottom: 32px;
line-height: 1.5;
max-width: 480px;
margin-left: auto;
margin-right: auto;
opacity: 1;
}
.credibility-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.verified {
border-color: #00ff41;
color: #00ff41;
box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
}
.verified i {
color: #00ff41;
animation: shieldGlow 2s infinite alternate;
}
@keyframes shieldGlow {
0% { filter: drop-shadow(0 0 5px rgba(0, 255, 65, 0.5)); }
100% { filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8)); }
}
.institutional {
border-color: #ffd700;
color: #ffd700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.institutional i {
color: #ffd700;
animation: goldShine 3s infinite;
}
@keyframes goldShine {
0%, 100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.05); filter: brightness(1.3); }
}
.date-range.professional {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.08));
padding: 20px 24px;
border-radius: 16px;
border: none;
margin: 0 auto 20px auto;
max-width: 450px;
box-shadow:
0 8px 32px rgba(16, 185, 129, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
position: relative;
}
.date-range.professional::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
border-radius: 16px;
pointer-events: none;
}
.period-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.period-label {
font-size: 11px;
color: rgba(16, 185, 129, 0.8);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0;
}
.period-dates {
font-size: 18px;
color: #ffffff;
font-weight: 800;
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.update-info {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.last-update {
font-size: 12px;
color: #10b981;
font-weight: 700;
background: rgba(16, 185, 129, 0.15);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(16, 185, 129, 0.3);
animation: updatePulse 3s infinite;
}
@keyframes updatePulse {
0%, 85% {
transform: scale(1);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}
90%, 95% {
transform: scale(1.02);
box-shadow: 0 0 16px rgba(16, 185, 129, 0.5);
}
100% {
transform: scale(1);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}
}
.live-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 20px;
padding: 8px 16px;
margin-bottom: 20px;
backdrop-filter: blur(12px);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.5px;
}
.live-dot {
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
animation: livePulse 1.5s infinite;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.live-text {
color: #10b981;
font-weight: 600;
letter-spacing: 0.5px;
}
@keyframes livePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
50% {
transform: scale(1.2);
box-shadow: 0 0 16px rgba(16, 185, 129, 0.8);
}
}
.title-with-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.performance-header h2 {
font-size: 22px;
font-weight: 700;
color: #ffffff;
margin-bottom: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.date-range {
font-size: 12px;
color: #cccccc;
margin-bottom: 8px;
margin-top: 8px;
font-weight: 500;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.last-update {
font-size: 11px;
color: #00ff41;
font-weight: 600;
animation: updateBlink 3s infinite;
}
@keyframes updateBlink {
0%, 85% { opacity: 1; }
90%, 95% { opacity: 0.3; }
100% { opacity: 1; }
}
.performance-stats {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ai-analysis-explanation {
text-align: center;
margin-bottom: 24px;
background: rgba(16, 185, 129, 0.08);
border-radius: 16px;
padding: 20px 24px;
border: 1px solid rgba(16, 185, 129, 0.2);
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08);
}
.ai-analysis-explanation h2.ai-analysis-title, .ai-analysis-explanation h3 {
font-size: 18px;
font-weight: 700;
color: #10b981;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}
.analysis-factors {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.factor-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.factor-icon {
font-size: 16px;
}
.factor-text {
font-size: 13px;
font-weight: 600;
color: #ffffff;
}
.process-description {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
line-height: 1.4;
}
.process-description p {
margin: 0;
}
.performance-subtitle {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
margin-top: 2px;
display: block;
}
.success-testimonial {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 12px;
padding: 15px;
margin: 20px 0;
text-align: center;
}
.testimonial-text {
font-size: 13px;
color: #ffffff;
font-weight: 500;
line-height: 1.4;
margin-bottom: 8px;
font-style: italic;
}
.testimonial-author {
font-size: 11px;
color: #10b981;
font-weight: 600;
}
.performance-details {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
justify-content: center;
}
.performance-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: rgba(30, 35, 45, 0.6);
padding: 20px 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transform: translateY(0);
transition: all 0.3s ease;
min-width: 140px;
backdrop-filter: blur(12px);
}
.performance-item:first-child {
border-left: 3px solid #10b981;
}
.performance-item:last-child {
border-left: 3px solid #3b82f6;
}
.performance-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 12px 48px rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
}
.performance-item:first-child {
border-color: rgba(0, 200, 81, 0.3);
}
.performance-item:first-child:hover {
box-shadow: 0 12px 48px rgba(0, 200, 81, 0.25);
border-color: rgba(0, 200, 81, 0.5);
}
.performance-item:last-child {
border-color: rgba(0, 150, 255, 0.3);
}
.performance-item:last-child:hover {
box-shadow: 0 12px 48px rgba(0, 150, 255, 0.25);
border-color: rgba(0, 150, 255, 0.5);
}
.performance-icon {
font-size: 28px;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.9);
}
.performance-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: white;
}
.performance-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 4px;
}
.performance-value {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.performance-arrow {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
animation: arrowFlow 3s infinite;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}
@keyframes arrowFlow {
0%, 100% {
transform: translateX(0) scale(1);
opacity: 0.6;
}
50% {
transform: translateX(8px) scale(1.1);
opacity: 1;
}
}
.real-time-metrics {
width: 100%;
margin-top: 0;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
display: flex;
align-items: center;
gap: 20px;
background: rgba(25, 25, 27, 0.9);
padding: 25px;
border-radius: 15px;
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.metric-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.metric-card:hover::before {
opacity: 1;
}
.metric-card.primary {
border-color: rgba(0, 200, 81, 0.4);
box-shadow: 0 8px 32px rgba(0, 200, 81, 0.1);
}
.metric-card.secondary {
border-color: rgba(138, 43, 226, 0.4);
box-shadow: 0 8px 32px rgba(138, 43, 226, 0.1);
}
.metric-card.tertiary {
border-color: rgba(255, 215, 0, 0.4);
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);
}
.metric-icon {
font-size: 40px;
flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}
.metric-data {
display: flex;
flex-direction: column;
gap: 5px;
}
.metric-number {
font-size: 32px;
font-weight: 900;
color: #ffffff;
text-shadow: 0 0 20px rgba(255,255,255,0.5);
animation: profesionalPulse 4s infinite;
}
.metric-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.5px;
}
.metric-desc {
font-size: 12px;
color: #aaaaaa;
font-weight: 400;
line-height: 1.4;
}
@keyframes profesionalPulse {
0%, 90% { transform: scale(1); }
95% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.ai-description-pro {
text-align: center;
padding: 25px;
background: rgba(20, 20, 25, 0.8);
border-radius: 15px;
border: 1px solid rgba(138, 43, 226, 0.3);
}
.ai-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(99, 102, 241, 0.12);
color: #a5b4fc;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 16px;
border: 1px solid rgba(99, 102, 241, 0.3);
backdrop-filter: blur(12px);
}
@keyframes badgeGlow {
0% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.3); }
100% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.6); }
}
.ai-description-pro p {
font-size: 16px;
color: #cccccc;
line-height: 1.6;
margin: 0;
font-weight: 400;
}
/* Profesyonel Hesaplama Aracı */
.professional-calculator {
margin-bottom: 12px;
background: linear-gradient(145deg, rgba(15, 20, 28, 0.98), rgba(22, 26, 35, 0.95));
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.calc-header-professional {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.08));
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 16px 20px;
}
.calc-title-section {
display: flex;
align-items: center;
gap: 16px;
}
.calc-icon-wrapper {
position: relative;
}
.calc-icon-bg {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}
.calc-main-icon {
font-size: 24px;
color: #ffffff;
filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.calc-title-content {
flex: 1;
}
.calc-main-title {
font-size: 18px;
font-weight: 800;
color: #ffffff;
margin: 0 0 4px 0;
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.calc-subtitle {
font-size: 12px;
color: #94a3b8;
margin: 0 0 8px 0;
line-height: 1.4;
}
.calc-features {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.feature-tag {
font-size: 9px;
font-weight: 600;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
color: #ffffff;
letter-spacing: 0.5px;
}
.calc-strategy-selector {
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.strategy-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
color: #ffffff;
}
.strategy-icon {
font-size: 14px;
}
.strategy-tabs {
display: flex;
gap: 6px;
background: rgba(15, 20, 30, 0.6);
border-radius: 12px;
padding: 6px;
}
.strategy-tab {
flex: 1;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px;
}
.strategy-tab.active {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}
.strategy-tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
}
.tab-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.tab-emoji {
font-size: 16px;
}
.tab-name {
font-size: 11px;
font-weight: 700;
color: #ffffff;
}
.tab-desc {
font-size: 9px;
color: rgba(255, 255, 255, 0.7);
}
.strategy-tab.active .tab-name,
.strategy-tab.active .tab-desc {
color: #ffffff;
}
.calc-inputs-professional {
padding: 20px;
}
.input-section {
margin-bottom: 20px;
}
.input-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.input-icon {
font-size: 16px;
}
.input-title {
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.inputs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.input-field-professional {
position: relative;
}
.field-label {
display: block;
margin-bottom: 8px;
}
.label-text {
font-size: 12px;
font-weight: 600;
color: #ffffff;
display: block;
}
.label-hint {
font-size: 10px;
color: #94a3b8;
font-weight: 400;
}
.field-input-wrapper {
position: relative;
}
.field-currency {
position: absolute;
left: 16px;
top: 2px;
height: 44px;
width: 20px;
font-size: 14px;
font-weight: 700;
color: #10b981;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1;
}
.field-input {
width: 100%;
padding: 14px 16px 14px 40px;
background: rgba(15, 20, 30, 0.8);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
height: 48px;
box-sizing: border-box;
line-height: 20px;
}
.field-input:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
background: rgba(15, 20, 30, 1);
}
.field-suggestions {
display: flex;
gap: 4px;
margin-top: 8px;
}
.field-suggestions button {
padding: 4px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
color: #94a3b8;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.field-suggestions button:hover {
background: rgba(16, 185, 129, 0.1);
border-color: #10b981;
color: #10b981;
}
.field-select-wrapper {
position: relative;
}
.field-select {
width: 100%;
padding: 14px 16px;
background: rgba(15, 20, 30, 0.8);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
}
.field-select:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
.risk-assessment-section {
background: transparent;
border: none;
border-radius: 0;
padding: 16px 0;
}
.risk-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding: 0 12px;
}
.risk-icon {
font-size: 16px;
}
.risk-title {
font-size: 14px;
font-weight: 700;
color: #ffffff;
flex: 1;
margin-left: 8px;
}
.risk-value {
font-size: 12px;
font-weight: 600;
color: #10b981;
background: rgba(16, 185, 129, 0.15);
padding: 4px 8px;
border-radius: 8px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.risk-slider-professional {
position: relative;
height: 40px;
display: flex;
align-items: center;
padding: 0 8px;
background: rgba(255, 255, 255, 0.02);
border-radius: 12px;
}
.risk-input {
width: 100%;
height: 40px;
background: transparent;
outline: none;
appearance: none;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 3;
margin: 0;
padding: 0 8px;
--thumb-color: #00C851;
}
.risk-input::-webkit-slider-thumb {
appearance: none;
width: 32px;
height: 32px;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
border: 4px solid var(--thumb-color);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
margin-top: 0;
}
.risk-input::-webkit-slider-track {
height: 12px;
background: transparent;
border-radius: 6px;
border: none;
outline: none;
}
/* Firefox support */
.risk-input::-moz-range-thumb {
width: 32px;
height: 32px;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
border: 4px solid var(--thumb-color);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.risk-input::-moz-range-track {
height: 12px;
background: transparent;
border-radius: 6px;
border: none;
}
.risk-input::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.risk-input::-webkit-slider-thumb:active {
transform: scale(1.0);
}
.risk-track {
position: absolute;
top: 50%;
left: 16px;
right: 16px;
height: 12px;
background: linear-gradient(90deg, #00C851 0%, #ffaa00 50%, #ff4444 100%);
border-radius: 6px;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.risk-slider-professional:hover .risk-track {
height: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.risk-progress {
display: none;
}
.risk-markers {
display: flex;
position: relative;
margin-top: 48px;
width: 100%;
padding: 0 8px;
}
.risk-marker {
font-size: 12px;
color: #94a3b8;
font-weight: 600;
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
transition: all 0.3s ease;
}
.risk-marker[data-level="1"] {
left: 8px;
transform: translateX(0%);
color: #00C851;
}
.risk-marker[data-level="2"] {
left: 50%;
transform: translateX(-50%);
color: #ffaa00;
}
.risk-marker[data-level="3"] {
right: 8px;
left: auto;
transform: translateX(0%);
color: #ff4444;
}
.risk-marker.active {
font-weight: 700;
font-size: 13px;
}
.risk-marker[data-level="1"].active {
transform: scale(1.1);
}
.risk-marker[data-level="2"].active {
transform: translateX(-50%) scale(1.1);
}
.risk-marker[data-level="3"].active {
transform: scale(1.1);
}
.calc-results-professional {
padding: 20px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.02), rgba(99, 102, 241, 0.02));
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.results-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.results-icon {
font-size: 16px;
}
.results-strategy {
font-size: 11px;
font-weight: 600;
color: #10b981;
background: rgba(16, 185, 129, 0.15);
padding: 6px 12px;
border-radius: 16px;
}
.results-grid-professional {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.result-item-professional {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.result-item-professional::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
border-radius: 2px;
}
.result-item-professional.primary::before {
background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}
.result-item-professional.success::before {
background: linear-gradient(180deg, #10b981, #059669);
}
.result-item-professional.info::before {
background: linear-gradient(180deg, #8b5cf6, #7c3aed);
}
.result-item-professional.warning::before {
background: linear-gradient(180deg, #f59e0b, #d97706);
}
.result-item-professional:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.1);
}
.result-header-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.result-emoji {
font-size: 16px;
}
.result-name {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.result-amount {
font-size: 18px;
font-weight: 800;
color: #ffffff;
margin-bottom: 4px;
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.result-amount.profit {
color: #10b981;
}
.result-change {
font-size: 10px;
color: #94a3b8;
font-weight: 500;
}
.analysis-metrics {
display: flex;
flex-direction: column;
gap: 12px;
}
.metric-item {
display: flex;
align-items: center;
gap: 12px;
}
.metric-bar {
flex: 1;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.metric-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 3px;
transition: width 0.5s ease;
}
.metric-fill.confidence {
background: linear-gradient(90deg, #6366f1, #4f46e5);
}
.calc-action-section {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.calc-btn-professional {
width: 100%;
background: linear-gradient(135deg, #10b981, #059669);
border: none;
border-radius: 16px;
padding: 18px 24px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.calc-btn-professional:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
}
.btn-content {
display: flex;
align-items: center;
gap: 12px;
}
.btn-icon {
font-size: 24px;
}
.btn-text-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.btn-main-text {
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.3px;
}
.btn-sub-text {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.btn-arrow {
font-size: 20px;
color: #ffffff;
font-weight: 700;
}
.calc-disclaimer {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(255, 193, 7, 0.08);
border: 1px solid rgba(255, 193, 7, 0.2);
border-radius: 12px;
padding: 12px;
}
.disclaimer-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.disclaimer-text {
font-size: 10px;
color: #fbbf24;
line-height: 1.4;
font-weight: 500;
}
.limited-offer {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 68, 68, 0.15);
border: 1px solid rgba(255, 68, 68, 0.3);
border-radius: 8px;
padding: 8px 12px;
margin: 12px 0;
}
.offer-text {
color: #ff4444;
font-size: 12px;
font-weight: 600;
}
.offer-discount {
background: #ff4444;
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
}
.cta-button-section {
margin-top: 24px;
text-align: center;
}
.main-cta-button {
width: 100%;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
border-radius: 12px;
padding: 16px 20px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.main-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.cta-text {
font-size: 14px;
letter-spacing: 0.5px;
}
.cta-subtext {
font-size: 11px;
opacity: 0.9;
font-weight: 500;
}
.money-back {
margin-top: 12px;
font-size: 11px;
color: #ffd700;
font-weight: 600;
}
.ai-section-header p {
font-size: 14px;
color: #94a3b8;
line-height: 1.5;
margin: 0 0 24px 0;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.ai-metrics-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-metric-card {
display: flex;
align-items: center;
gap: 16px;
background: rgba(30, 35, 45, 0.6);
padding: 20px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
backdrop-filter: blur(12px);
}
.ai-metric-card.primary {
border-left: 3px solid #10b981;
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08);
}
.ai-metric-card.secondary {
border-left: 3px solid #6366f1;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08);
}
.ai-metric-card.tertiary {
border-left: 3px solid #f59e0b;
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.08);
}
.ai-metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}
.ai-metric-icon {
font-size: 24px;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.9);
}
.ai-metric-data {
display: flex;
flex-direction: column;
gap: 3px;
}
.ai-metric-number {
font-size: 20px;
font-weight: 800;
color: #ffffff;
font-family: 'Inter', sans-serif;
letter-spacing: -0.5px;
}
.ai-metric-title {
font-size: 14px;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.3px;
margin-bottom: 2px;
}
.ai-metric-desc {
font-size: 12px;
color: #94a3b8;
font-weight: 400;
line-height: 1.4;
}
@keyframes aiMetricPulse {
0%, 92% { transform: scale(1); }
96% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.metric-row {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.metric-item {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(20, 20, 25, 0.8);
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(0, 255, 65, 0.25);
min-width: 100px;
box-shadow: 0 3px 12px rgba(0, 255, 65, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.metric-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 36px rgba(0, 255, 65, 0.2);
border-color: rgba(0, 255, 65, 0.4);
}
@keyframes metricPulse {
0%, 90% { transform: scale(1); }
95% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.cumulative-progress {
width: 100%;
max-width: 450px;
margin: 8px auto;
}
.progress-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #cccccc;
margin-bottom: 4px;
font-weight: 600;
}
.progress-status {
font-size: 10px;
color: #00ff41;
font-style: italic;
animation: statusFlicker 2s infinite;
}
@keyframes statusFlicker {
0%, 70% { opacity: 1; }
75%, 85% { opacity: 0.5; }
90%, 100% { opacity: 1; }
}
.cumulative-bar {
position: relative;
width: 100%;
height: 24px;
background: rgba(40, 40, 44, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cumulative-fill {
height: 100%;
width: 0%;
background: linear-gradient(135deg, #00C851 0%, #26a69a 100%);
border-radius: 12px;
position: relative;
animation: fillProgress 3s ease-out forwards;
box-shadow: 0 0 8px rgba(0, 200, 81, 0.3);
}
@keyframes fillProgress {
0% { width: 0%; }
100% { width: 95%; }
}
.cumulative-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.cumulative-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: 700;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
animation: countUp 3s ease-out;
}
@keyframes countUp {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.performance-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.performance-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(30, 30, 32, 0.9);
border: 1px solid #00C851;
color: #00C851;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 0 10px rgba(0, 200, 81, 0.2);
animation: glow 2s infinite alternate;
}
.live-badge {
border-color: #00ff41;
color: #00ff41;
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}
.live-badge i {
color: #00ff41;
animation: wifiPulse 1s infinite;
}
@keyframes wifiPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.trading-badge {
border-color: #ffab00;
color: #ffab00;
box-shadow: 0 0 10px rgba(255, 171, 0, 0.2);
}
.trading-badge i {
color: #ffab00;
animation: chartBlink 3s infinite;
}
@keyframes chartBlink {
0%, 85% { transform: scale(1); }
90% { transform: scale(1.1); }
95% { transform: scale(0.95); }
100% { transform: scale(1); }
}
@keyframes glow {
0% { box-shadow: 0 0 10px rgba(0, 200, 81, 0.2); }
100% { box-shadow: 0 0 20px rgba(0, 200, 81, 0.4); }
}
.performance-badge i {
color: #00C851;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* AI Signal Process Section */
.ai-signal-process-section {
background: linear-gradient(135deg, #0a0f1c 0%, #1a1f2e 50%, #0a0f1c 100%);
padding: 25px 0;
position: relative;
overflow: hidden;
}
.ai-signal-process-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.process-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.process-header {
text-align: center;
margin-bottom: 20px;
}
.process-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(79, 70, 229, 0.1);
border: 1px solid rgba(79, 70, 229, 0.3);
padding: 5px 10px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
color: #4F46E5;
margin-bottom: 12px;
}
.process-main-title {
font-size: 36px;
font-weight: 700;
color: #ffffff;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.process-title-text {
background: linear-gradient(135deg, #ffffff 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.process-title-emoji {
font-size: 36px;
}
.process-subtitle {
font-size: 16px;
color: #8892b0;
max-width: 500px;
margin: 0 auto 15px;
line-height: 1.4;
}
.process-live-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(0, 200, 81, 0.1);
border: 1px solid #00C851;
padding: 5px 10px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
color: #00C851;
}
.live-dot-process {
width: 8px;
height: 8px;
background: #00C851;
border-radius: 50%;
animation: pulse 2s infinite;
}
/* Data Flow Section */
.data-flow-section {
position: relative;
padding: 10px 0;
}
.data-sources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 15px;
position: relative;
}
.data-source-card {
background: linear-gradient(135deg, rgba(26, 31, 46, 0.7) 0%, rgba(10, 15, 28, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.data-source-card:hover {
transform: translateY(-5px);
border-color: var(--card-color);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.news-card {
--card-color: #3B82F6;
}
.trend-card {
--card-color: #10B981;
}
.whale-card {
--card-color: #F59E0B;
}
.ai-card {
--card-color: #8B5CF6;
}
.source-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-bottom: 10px;
}
.source-content h3 {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin-bottom: 5px;
}
.source-content p {
font-size: 12px;
color: #8892b0;
margin-bottom: 8px;
line-height: 1.3;
}
.signal-type h3 {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin-bottom: 4px;
}
.signal-status {
font-size: 14px;
padding: 4px 8px;
border-radius: 6px;
font-weight: 500;
}
.signal-status.active {
background: rgba(0, 200, 81, 0.15);
color: #00C851;
}
.signal-status.processing {
background: rgba(59, 130, 246, 0.15);
color: #3B82F6;
}
.signal-success-rate {
text-align: right;
}
.rate-value {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--card-color);
}
.rate-label {
font-size: 12px;
color: #8892b0;
}
.signal-preview {
margin-bottom: 20px;
}
.preview-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 14px;
}
.preview-item:last-child {
border-bottom: none;
}
.crypto-pair {
font-weight: 600;
color: #ffffff;
}
.signal-strength {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.signal-strength.strong {
background: rgba(0, 200, 81, 0.15);
color: #00C851;
}
.signal-strength.medium {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.signal-strength.weak {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.price-target {
font-weight: 600;
color: #8892b0;
}
.analytics-metrics {
margin-bottom: 20px;
}
.metric-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.metric-row:last-child {
margin-bottom: 0;
}
.metric-item {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
}
.metric-icon {
font-size: 16px;
}
.metric-info {
display: flex;
flex-direction: column;
}
.signal-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: 1px solid var(--card-color);
}
.buy-btn {
background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(5, 150, 105, 0.1));
color: #00C851;
}
.sell-btn {
background: linear-gradient(135deg, rgba(255, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
color: #ff4444;
}
.analytics-btn {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(29, 78, 216, 0.1));
color: #3B82F6;
}
.signal-btn:hover {
background: var(--card-color);
color: #ffffff;
transform: translateY(-2px);
}
.signals-bottom-cta {
text-align: center;
padding: 40px;
background: linear-gradient(135deg, rgba(0, 200, 81, 0.05), rgba(0, 200, 81, 0.1));
border: 1px solid rgba(0, 200, 81, 0.2);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.cta-message h4 {
font-size: 24px;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.cta-message p {
font-size: 16px;
color: #8892b0;
}
.premium-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: linear-gradient(135deg, #00C851, #059669);
color: #ffffff;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.premium-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 200, 81, 0.3);
}
/* AI Process Section - Additional Styles */
.processing-indicator {
position: absolute;
top: 16px;
right: 16px;
}
.pulse-dot {
width: 12px;
height: 12px;
background: var(--card-color);
border-radius: 50%;
animation: pulse 2s infinite;
}
/* Advanced Analytics Section */
.advanced-analytics-section {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.advanced-analytics-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.analytics-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.analytics-header {
text-align: center;
margin-bottom: 80px;
}
.analytics-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
color: #3B82F6;
margin-bottom: 20px;
}
.analytics-main-title {
font-size: 56px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
background: linear-gradient(135deg, #ffffff 0%, #3B82F6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.analytics-subtitle {
font-size: 20px;
color: #8892b0;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.analytics-content {
display: flex;
flex-direction: column;
gap: 80px;
}
.terminal-demo-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.info-grid {
display: flex;
flex-direction: column;
gap: 24px;
}
.info-card {
display: flex;
gap: 16px;
padding: 24px;
background: linear-gradient(135deg, rgba(26, 31, 46, 0.5) 0%, rgba(10, 15, 28, 0.8) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.info-card:hover {
transform: translateY(-3px);
border-color: rgba(59, 130, 246, 0.3);
}
.info-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #3B82F6, #1d4ed8);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #ffffff;
flex-shrink: 0;
}
.info-content h3.info-card-title, .info-content h4 {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.info-content p {
font-size: 14px;
color: #8892b0;
line-height: 1.5;
}
.terminal-showcase {
position: relative;
}
.terminal-window {
background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.terminal-header {
background: linear-gradient(90deg, #2d3748 0%, #1a202c 100%);
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.terminal-controls {
display: flex;
gap: 8px;
}
.control-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control-dot.red {
background: #ff5f57;
}
.control-dot.yellow {
background: #ffbd2e;
}
.control-dot.green {
background: #28ca42;
}
.terminal-title {
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
.terminal-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #00C851;
font-weight: 600;
}
.status-indicator {
width: 8px;
height: 8px;
background: #00C851;
border-radius: 50%;
animation: pulse 2s infinite;
}
.terminal-body {
padding: 20px;
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
/* Custom scrollbar for terminal */
.terminal-body::-webkit-scrollbar {
width: 8px;
}
.terminal-body::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.terminal-body::-webkit-scrollbar-thumb {
background: #00C851;
border-radius: 4px;
}
.terminal-body::-webkit-scrollbar-thumb:hover {
background: #00A844;
}
.terminal-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.terminal-metrics .metric-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.terminal-metrics .metric-label {
font-size: 12px;
color: #8892b0;
}
.success-rate {
color: #00C851 !important;
}
.analytics-cta {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
padding: 40px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 16px;
}
.cta-content h3 {
font-size: 28px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
.cta-content p {
font-size: 16px;
color: #8892b0;
margin-bottom: 20px;
}
.cta-features {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.cta-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #8892b0;
}
.cta-feature i {
color: #00C851;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-primary-cta, .btn-secondary-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
min-width: 200px;
justify-content: center;
}
.btn-primary-cta {
background: linear-gradient(135deg, #3B82F6, #1d4ed8);
color: #ffffff;
}
.btn-secondary-cta {
background: transparent;
color: #3B82F6;
border: 1px solid #3B82F6;
}
.btn-primary-cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
.btn-secondary-cta:hover {
background: rgba(59, 130, 246, 0.1);
}
/* Mobile Responsive Styles for New Sections */
@media (max-width: 768px) {
/* AI Process Section Mobile */
.process-main-title {
font-size: 36px;
}
.process-subtitle {
font-size: 16px;
}
.data-sources-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.process-cta {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.cta-buttons {
flex-direction: column;
width: 100%;
}
.btn-primary-process, .btn-secondary-process {
width: 100%;
}
/* Advanced Analytics Section Mobile */
.analytics-main-title {
font-size: 36px;
}
.analytics-subtitle {
font-size: 16px;
}
.terminal-demo-section {
grid-template-columns: 1fr;
gap: 40px;
}
.info-card {
padding: 20px;
}
.terminal-window {
margin: 0 -10px;
}
.stats-header {
flex-direction: column;
gap: 16px;
text-align: center;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.analytics-cta {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.cta-content h3 {
font-size: 24px;
}
.cta-features {
justify-content: center;
}
.cta-buttons {
width: 100%;
}
.btn-primary-cta, .btn-secondary-cta {
width: 100%;
}
}
@media (max-width: 480px) {
/* Extra small screens */
.signals-container,
.analytics-container {
padding: 0 15px;
}
.signal-card {
padding: 20px;
}
.signal-card-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.signal-success-rate {
text-align: left;
}
.preview-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 0;
}
.analytics-main-title {
font-size: 28px;
}
.info-card {
flex-direction: column;
text-align: center;
}
.info-icon {
align-self: center;
}
.analytics-cta {
padding: 20px;
}
}
.rating-icon i {
color: #FFD700;
}
.section-description {
font-size: 16px;
color: #666;
margin-bottom: 10px;
text-align: center;
flex-basis: 100%;
}
.view-all-link {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #0F5B8A 0%, #00AEEF 100%);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
font-size: 14px;
padding: 10px 20px;
transition: background-color 0.5s ease;
position: relative;
overflow: hidden;
}
.view-all-link::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.2);
transform: rotate(45deg);
transition: all 0.5s ease;
z-index: -1;
}
.view-all-link:hover::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.view-all-link i {
margin-right: 5px;
transition: transform 0.3s ease;
}
.view-all-link:hover i {
transform: translateX(5px);
}
/* Yeni Tasarım: Özellik Listesi */
.features-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 15px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex: 1 1 45%;
max-width: 500px;
}
.feature-item:hover {
/* Hover efekti kaldırıldı */
}
.feature-icon {
font-size: 30px;
color: #05963A;
flex-shrink: 0;
}
.feature-content {
flex-grow: 1;
}
.feature-content h4 {
font-size: 18px;
color: #333;
margin-bottom: 8px;
}
.feature-content p {
font-size: 14px;
color: #666;
}
/* En Güvenilir Otomatik Al-Sat Botları Bölümü */
.featured-highlight {
background-color: #9ffab7;
}
.products-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.feature-card {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.feature-card h3 {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.feature-card p {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}
/* Terminal Görseli İçeren Yeni Kart */
.feature-card.terminal-card {
display: flex;
flex-direction: row;
gap: 20px;
align-items: flex-start;
justify-content: space-between;
}
.terminal-explanations {
text-align: left; /* Yazıları sola yasla */
width: 100%; /* Genişliği tam yap */
}
.terminal-explanations h4 {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.terminal-explanations p {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.terminal-visual {
background-color: #000000; /* Daha koyu arka plan */
color: #00FF00; /* Daha parlak yeşil metin */
padding: 20px;
border-radius: 8px;
width: 100%;
max-width: 600px;
height: 400px; /* Yüksekliği artırdım */
overflow: auto;
font-family: 'Consolas', 'Courier New', monospace; /* Monospace font */
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
line-height: 1.6; /* Satır aralığını artırdım */
font-size: 24px; /* Yazı boyutunu artırdım */
text-align: left; /* Yazıları sola yasla */
display: flex;
flex-direction: column;
align-items: flex-start; /* İçerikleri sola yasla */
justify-content: flex-start; /* İçerikleri yukarı yasla */
}
/* Progress Bar */
.progress-bar {
position: relative; /* % metnini konumlandırmak için */
width: 80%; /* Genişliği ayarlayın */
background-color: #222; /* Koyu arka plan */
border-radius: 5px;
overflow: hidden;
margin-top: 20px;
height: 30px; /* Yüksekliği artırdım */
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* İç gölge ekleyerek terminal hissi */
}
.progress-bar-inner {
height: 100%;
width: 0%; /* Başlangıçta sıfır */
background: linear-gradient(90deg, #00FF00, #33FF33); /* Yeşil gradient */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
transition: width 0.1s ease;
}
.progress-percentage {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF; /* Beyaz renge değiştirildi */
font-weight: bold;
font-size: 16px;
font-family: 'Consolas', 'Courier New', monospace; /* Monospace font */
/* Ek olarak metin gölgesi */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* Ek Stil: Terminal İçeriğini Yönetme */
.terminal-content p {
margin-bottom: 10px;
color: #00FF00; /* Yazıları yeşil renkte tut */
text-align: left; /* Yazıları sola yasla */
width: 100%; /* Metinlerin tam genişlikte olmasını sağlar */
}
/* Modern Son Karlı İşlemler Bölümü */
.recent-trades-section {
padding: 80px 0;
background: linear-gradient(135deg, #0f1419 0%, #1a202c 100%);
position: relative;
}
.recent-trades-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
background-size: 50px 50px;
animation: float 20s ease-in-out infinite;
}
.trades-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
.trades-header {
text-align: center;
margin-bottom: 30px;
}
.trades-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 200, 81, 0.1);
color: #00C851;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 16px;
border: 1px solid rgba(0, 200, 81, 0.3);
}
.trades-main-title {
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin-bottom: 0;
line-height: 1.2;
}
.trades-subtitle {
font-size: 18px;
color: #8892b0;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.modern-table-container {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 12px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
overflow-x: auto;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.modern-trades-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.modern-trades-table thead tr {
background: rgba(0, 200, 81, 0.1);
border-radius: 12px;
}
.modern-trades-table th {
padding: 12px 8px;
text-align: left;
background: rgba(0, 200, 81, 0.1);
border: none;
position: relative;
}
.modern-trades-table th:first-child {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.modern-trades-table th:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.table-header {
display: flex;
align-items: center;
gap: 8px;
color: #00C851;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modern-trades-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.modern-trades-table tbody tr:hover {
background: rgba(0, 200, 81, 0.05);
transform: scale(1.01);
}
.profit-row {
border-left: 4px solid #00C851;
}
.loss-row {
border-left: 4px solid #ff4757;
}
.modern-trades-table td {
padding: 12px 8px;
border: none;
vertical-align: middle;
}
.date-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-day {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.date-month {
font-size: 12px;
color: #8892b0;
}
.crypto-cell {
display: flex;
align-items: center;
gap: 12px;
animation: none !important;
}
.crypto-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: #ffffff;
}
.crypto-icon.btc {
background: linear-gradient(135deg, #f7931a, #ff9500);
}
.crypto-icon.chz {
background: linear-gradient(135deg, #ff4444, #ff6b6b);
}
.crypto-icon.xrp {
background: linear-gradient(135deg, #23292f, #000000);
}
.crypto-icon.doge {
background: linear-gradient(135deg, #c2a633, #f2d849);
}
.crypto-info {
display: flex;
flex-direction: column;
gap: 2px;
animation: none !important;
}
.crypto-name {
font-size: 13px;
font-weight: 600;
color: #ffffff;
animation: none !important;
}
.crypto-symbol {
font-size: 12px;
color: #8892b0;
animation: none !important;
}
.trade-type {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.trade-type.buy {
background: rgba(0, 200, 81, 0.2);
color: #00C851;
border: 1px solid rgba(0, 200, 81, 0.3);
}
.trade-type.sell {
background: rgba(255, 71, 87, 0.2);
color: #ff4757;
border: 1px solid rgba(255, 71, 87, 0.3);
}
.amount-cell {
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.result-cell {
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
font-weight: 700;
}
.result-cell.profit {
color: #00C851;
}
.result-cell.loss {
color: #ff4757;
}
.status-cell {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.status-cell.closed {
background: rgba(0, 200, 81, 0.15);
color: #00C851;
border: 1px solid rgba(0, 200, 81, 0.3);
}
.trades-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
padding: 24px;
background: rgba(0, 200, 81, 0.05);
border: 1px solid rgba(0, 200, 81, 0.2);
border-radius: 16px;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.trades-stats .stat-item {
padding: 0;
}
.trades-stats .stat-value {
font-size: 24px;
font-weight: 700;
color: #00C851;
margin-bottom: 6px;
}
.trades-stats .stat-label {
font-size: 12px;
color: #8892b0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive - Tablet */
@media (max-width: 768px) {
.trades-main-title {
font-size: 28px;
}
.trades-subtitle {
font-size: 16px;
}
.modern-table-container {
padding: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.modern-trades-table {
min-width: 600px;
}
.modern-trades-table th,
.modern-trades-table td {
padding: 10px 6px;
font-size: 13px;
}
.table-header {
font-size: 11px;
gap: 4px;
}
.table-header i {
font-size: 12px;
}
.crypto-cell {
flex-direction: row;
gap: 8px;
align-items: center;
}
.crypto-icon {
width: 28px;
height: 28px;
font-size: 12px;
}
.crypto-name {
font-size: 13px;
}
.date-cell {
text-align: left;
}
.date-day {
font-size: 16px;
}
.date-month {
font-size: 11px;
}
.trade-type {
padding: 6px 8px;
font-size: 11px;
gap: 4px;
}
.result-cell {
font-size: 13px;
gap: 4px;
}
.status-cell {
font-size: 10px;
padding: 4px 6px;
gap: 4px;
}
.trades-stats {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
}
/* Responsive - Mobile */
@media (max-width: 480px) {
.trades-container {
padding: 0 12px;
}
.trades-main-title {
font-size: 24px;
line-height: 1.2;
}
.trades-subtitle {
font-size: 14px;
}
.modern-table-container {
padding: 8px;
margin: 0 -12px;
border-radius: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.modern-trades-table {
min-width: 500px;
font-size: 12px;
}
.modern-trades-table th,
.modern-trades-table td {
padding: 8px 4px;
font-size: 11px;
}
.table-header {
font-size: 9px;
gap: 2px;
flex-direction: column;
text-align: center;
}
.table-header i {
font-size: 10px;
}
.table-header span {
display: none; /* Başlık metinlerini gizle, sadece ikonları göster */
}
.crypto-cell {
flex-direction: column;
gap: 4px;
align-items: center;
text-align: center;
}
.crypto-icon {
width: 24px;
height: 24px;
font-size: 10px;
}
.crypto-name {
font-size: 11px;
font-weight: 700;
}
.date-cell {
text-align: center;
}
.date-day {
font-size: 14px;
}
.date-month {
font-size: 9px;
}
.trade-type {
padding: 4px 6px;
font-size: 9px;
gap: 2px;
flex-direction: column;
text-align: center;
}
.trade-type i {
font-size: 10px;
}
.trade-type span {
display: none; /* "Alım/Satış" yazısını gizle, sadece ikon göster */
}
.result-cell {
font-size: 12px;
gap: 2px;
flex-direction: column;
text-align: center;
}
.result-cell i {
font-size: 10px;
}
.status-cell {
font-size: 8px;
padding: 3px 4px;
gap: 2px;
flex-direction: column;
text-align: center;
}
.status-cell i {
font-size: 8px;
}
.status-cell span {
display: none; /* "Pozisyon Kapandı" yazısını gizle, sadece ikon göster */
}
.trades-stats {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px;
margin: 20px 0;
}
.trades-stats .stat-value {
font-size: 24px;
}
.trades-stats .stat-label {
font-size: 12px;
}
}
/* Extra Small Mobile - Very Compact */
@media (max-width: 360px) {
.trades-main-title {
font-size: 20px;
}
.trades-subtitle {
font-size: 13px;
}
.modern-table-container {
padding: 4px;
margin: 0 -8px;
}
.modern-trades-table {
min-width: 420px;
}
.modern-trades-table th,
.modern-trades-table td {
padding: 6px 2px;
font-size: 10px;
}
.crypto-icon {
width: 20px;
height: 20px;
font-size: 8px;
}
.crypto-name {
font-size: 10px;
}
.date-day {
font-size: 12px;
}
.date-month {
font-size: 8px;
}
.result-cell {
font-size: 11px;
}
.trades-stats {
padding: 12px;
}
.trades-stats .stat-value {
font-size: 20px;
}
.trades-stats .stat-label {
font-size: 10px;
}
}
/* Premium Abonelik Planları */
.subscription-section {
background: linear-gradient(135deg, #0a0f1c 0%, #1a1f2e 50%, #0a0f1c 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.subscription-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 200, 81, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 200, 81, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.subscription-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 1;
}
.subscription-header {
text-align: center;
margin-bottom: 60px;
}
.subscription-title {
font-size: 48px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
line-height: 1.2;
}
.subscription-subtitle {
font-size: 20px;
color: #94a3b8;
margin-bottom: 0;
line-height: 1.6;
}
/* Unified Features Section */
.unified-features {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
margin-top: 50px;
text-align: center;
}
.features-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 30px;
text-align: center;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: rgba(0, 200, 81, 0.1);
border: 1px solid rgba(0, 200, 81, 0.2);
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(0, 200, 81, 0.15);
border-color: rgba(0, 200, 81, 0.4);
transform: translateY(-2px);
}
.feature-item i {
color: #00C851;
font-size: 16px;
flex-shrink: 0;
}
.feature-item span {
color: #e2e8f0;
font-size: 14px;
font-weight: 500;
}
/* Simple Pricing Cards */
.simple-pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
max-width: 800px;
margin: 0 auto 50px auto;
}
.simple-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 30px 20px;
text-align: center;
position: relative;
transition: all 0.3s ease;
overflow: visible;
}
.simple-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 200, 81, 0.3);
box-shadow: 0 20px 40px rgba(0, 200, 81, 0.1);
}
.simple-card.popular {
border: 2px solid #00C851;
background: linear-gradient(145deg, rgba(0, 200, 81, 0.15) 0%, rgba(0, 200, 81, 0.05) 100%);
}
.simple-card .popular-badge {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #00C851, #00A844);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
box-shadow: 0 2px 8px rgba(0, 200, 81, 0.25);
z-index: 10;
animation: subtlePulse 3s ease-in-out infinite;
}
@keyframes subtlePulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.02); }
}
.plan-period {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
}
.simple-card .plan-price {
margin-bottom: 20px;
}
.simple-card .plan-price .currency {
font-size: 16px;
color: #00C851;
font-weight: 600;
}
.simple-card .plan-price .amount {
font-size: 36px;
font-weight: 800;
color: #ffffff;
line-height: 1;
margin-left: 2px;
}
.simple-card .savings {
display: block;
background: linear-gradient(135deg, #ff6b35, #ff4757);
color: white;
padding: 6px 16px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
margin: 12px auto 20px auto;
text-align: center;
width: fit-content;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
animation: savingsGlow 2s ease-in-out infinite alternate;
}
@keyframes savingsGlow {
0% { box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
100% { box-shadow: 0 6px 16px rgba(255, 107, 53, 0.5); }
}
.simple-btn {
width: 100%;
background: linear-gradient(135deg, #00C851 0%, #00A844 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.simple-btn:hover {
background: linear-gradient(135deg, #00A844 0%, #008A37 100%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.3);
}
.simple-btn i {
font-size: 14px;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
margin-top: 20px;
}
.pricing-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px 32px;
position: relative;
transition: all 0.4s ease;
overflow: visible;
}
.pricing-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(145deg, transparent 0%, rgba(0, 200, 81, 0.05) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.pricing-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 200, 81, 0.3);
box-shadow: 0 20px 40px rgba(0, 200, 81, 0.1);
}
.pricing-card:hover::before {
opacity: 1;
}
.pricing-card.popular {
border: 2px solid #00C851;
transform: scale(1.05);
background: linear-gradient(145deg, rgba(0, 200, 81, 0.15) 0%, rgba(0, 200, 81, 0.05) 100%);
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, #00C851, #00A844);
color: white;
padding: 8px 24px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(0, 200, 81, 0.3);
z-index: 10;
}
.card-header {
text-align: center;
margin-bottom: 32px;
}
.plan-badge {
display: inline-block;
background: rgba(0, 200, 81, 0.1);
color: #00C851;
padding: 6px 16px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
border: 1px solid rgba(0, 200, 81, 0.2);
}
.plan-name {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.plan-price {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 12px;
}
.plan-price .currency {
font-size: 20px;
color: #00C851;
font-weight: 600;
}
.plan-price .amount {
font-size: 56px;
font-weight: 800;
color: #ffffff;
line-height: 1;
margin: 0 4px;
}
.plan-price .period {
font-size: 18px;
color: #94a3b8;
font-weight: 500;
}
.savings {
display: inline-block;
background: linear-gradient(90deg, #ff6b35, #ff8e35);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
}
.plan-description {
font-size: 16px;
color: #94a3b8;
line-height: 1.5;
margin-bottom: 0;
}
.card-features {
margin-bottom: 32px;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.features-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 15px;
color: #e2e8f0;
line-height: 1.5;
}
.features-list li i {
color: #00C851;
font-size: 14px;
width: 16px;
flex-shrink: 0;
}
.plan-button {
width: 100%;
background: linear-gradient(135deg, #00C851 0%, #00A844 100%);
color: white;
border: none;
padding: 16px 24px;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-button:hover {
background: linear-gradient(135deg, #00A844 0%, #00963A 100%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.3);
}
.plan-button i {
font-size: 18px;
}
.subscription-footer {
text-align: center;
}
.guarantee-items {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.guarantee-item {
display: flex;
align-items: center;
gap: 8px;
color: #94a3b8;
font-size: 14px;
}
.guarantee-item i {
color: #00C851;
font-size: 16px;
}
/* Responsive Design */
@media (max-width: 768px) {
.subscription-section {
padding: 60px 0;
}
.subscription-title {
font-size: 36px;
}
.subscription-subtitle {
font-size: 18px;
}
.pricing-cards {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 40px;
}
.pricing-card {
padding: 32px 24px;
}
.pricing-card.popular {
transform: none;
}
.plan-price .amount {
font-size: 48px;
}
.guarantee-items {
flex-direction: column;
gap: 16px;
}
}
@media (max-width: 480px) {
.subscription-container {
padding: 0 16px;
}
.subscription-title {
font-size: 28px;
}
.subscription-subtitle {
font-size: 16px;
}
.pricing-card {
padding: 24px 20px;
}
.plan-name {
font-size: 24px;
}
.plan-price .amount {
font-size: 40px;
}
.features-list li {
font-size: 14px;
padding: 6px 0;
}
.plan-button {
font-size: 14px;
padding: 14px 20px;
}
}
/* FAQ Section */
.faq-section {
background: linear-gradient(135deg, #0f1419 0%, #1a1d29 50%, #0f1419 100%);
padding: 80px 0;
margin: 0;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(0, 200, 81, 0.2);
border-bottom: 1px solid rgba(0, 200, 81, 0.2);
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #00C851, transparent);
}
.faq-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #00C851, transparent);
}
.faq-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.faq-header {
text-align: center;
margin-bottom: 50px;
}
.faq-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 200, 81, 0.1);
border: 1px solid rgba(0, 200, 81, 0.3);
border-radius: 50px;
padding: 8px 20px;
font-size: 12px;
font-weight: 600;
color: #00C851;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.faq-title {
font-size: 42px;
font-weight: 800;
color: #ffffff;
margin-bottom: 20px;
line-height: 1.2;
background: linear-gradient(135deg, #ffffff, #e2e8f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.faq-subtitle {
font-size: 18px;
color: #94a3b8;
line-height: 1.6;
}
.faq-content {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 40px;
}
.faq-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: rgba(0, 200, 81, 0.3);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
cursor: pointer;
background: rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
}
.faq-question:hover {
background: rgba(0, 200, 81, 0.05);
}
.faq-question h3 {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin: 0;
}
.faq-question i {
color: #00C851;
font-size: 14px;
transition: transform 0.3s ease;
}
.faq-question.active i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.01);
}
.faq-answer.open {
max-height: 200px;
padding: 0 24px 20px 24px;
}
.faq-answer p {
font-size: 14px;
color: #94a3b8;
line-height: 1.6;
margin: 0;
}
/* Modern Footer */
.modern-footer {
background: linear-gradient(135deg, #0a0f1c 0%, #1a1f2e 50%, #0a0f1c 100%);
border-top: 1px solid rgba(0, 200, 81, 0.2);
position: relative;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #00C851, transparent);
}
.footer-main {
padding: 60px 0 40px;
position: relative;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 40px;
align-items: start;
}
/* Sol Bölüm - Brand */
.footer-brand {
color: #ffffff;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo .logo-indicator {
font-size: 24px;
font-weight: 300;
color: #94a3b8;
}
.footer-logo .logo-plus {
font-size: 24px;
font-weight: 700;
color: #00C851;
}
.footer-description {
font-size: 14px;
line-height: 1.6;
color: #94a3b8;
margin-bottom: 25px;
}
.footer-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.stat-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
}
.stat-number {
font-size: 16px;
font-weight: 700;
color: #00C851;
min-width: 60px;
}
.stat-label {
font-size: 12px;
color: #64748b;
}
/* Orta Bölüm - Links */
.footer-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.link-column h3.footer-col-title, .link-column h4 {
font-size: 14px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.link-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.link-column ul li {
margin-bottom: 8px;
color: #94a3b8;
font-size: 13px;
padding: 4px 0;
}
.link-column ul li a {
color: #94a3b8;
text-decoration: none;
font-size: 13px;
transition: all 0.3s ease;
display: block;
padding: 4px 0;
}
.link-column ul li a:hover {
color: #00C851;
transform: translateX(4px);
}
/* Sağ Bölüm - Contact */
.footer-contact {
color: #ffffff;
}
.footer-contact h3.footer-col-title, .footer-contact h4 {
font-size: 14px;
font-weight: 600;
color: #ffffff;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-info {
margin-bottom: 25px;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 13px;
color: #94a3b8;
}
.contact-item i {
color: #00C851;
width: 16px;
}
.social-section {
margin-bottom: 25px;
}
.social-section h4.social-section-title, .social-section h5 {
font-size: 12px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Telegram Community Styles */
.telegram-community {
margin-top: 16px;
}
.telegram-channel {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: linear-gradient(135deg, rgba(42, 171, 238, 0.1) 0%, rgba(13, 110, 253, 0.1) 100%);
border: 1px solid rgba(42, 171, 238, 0.2);
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.telegram-channel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(42, 171, 238, 0.05) 0%, rgba(13, 110, 253, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.telegram-channel:hover::before {
opacity: 1;
}
.telegram-channel:hover {
transform: translateY(-3px);
border-color: #2AABEE;
box-shadow: 0 8px 24px rgba(42, 171, 238, 0.3);
}
.telegram-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.telegram-icon i {
font-size: 24px;
color: #ffffff;
}
.telegram-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
position: relative;
z-index: 1;
}
.telegram-title {
font-size: 16px;
font-weight: 600;
color: #ffffff;
line-height: 1.2;
}
.telegram-desc {
font-size: 13px;
color: #cbd5e1;
line-height: 1.3;
}
/* Footer Bottom */
.footer-bottom {
background: rgba(15, 20, 30, 0.9);
border-top: 1px solid rgba(148, 163, 184, 0.15);
padding: 24px 0;
backdrop-filter: blur(10px);
}
.footer-bottom-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.copyright-section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 40px;
}
.copyright-text {
flex: 1;
min-width: 0;
}
.copyright-text p {
font-size: 13px;
color: #94a3b8;
margin: 0;
font-weight: 500;
}
.legal-links {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
flex: 2;
min-width: 0;
}
.legal-links a {
color: #cbd5e1;
text-decoration: none;
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 6px;
font-weight: 500;
}
.legal-links a:hover {
color: #00C851;
background: rgba(0, 200, 81, 0.1);
}
.legal-links span {
color: #64748b;
font-weight: 300;
}
.footer-live-indicator {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex: 1;
min-width: 140px;
}
.live-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #00C851;
font-weight: 600;
}
.live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #00C851;
animation: pulse 2s infinite;
flex-shrink: 0;
}
.separator {
color: #64748b;
font-weight: 300;
margin: 0 4px;
}
.last-update {
font-size: 10px;
color: #64748b;
font-weight: 400;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Footer Bottom Mobile Responsive */
@media (max-width: 768px) {
.footer-bottom {
padding: 20px 0;
}
.footer-bottom-container {
padding: 0 20px;
}
.copyright-section {
flex-direction: column;
gap: 20px;
text-align: center;
}
.copyright-text {
order: 1;
}
.footer-live-indicator {
order: 2;
align-items: center;
min-width: auto;
}
.legal-links {
order: 3;
justify-content: center;
gap: 8px;
font-size: 11px;
}
.legal-links a {
padding: 2px 6px;
}
}
@media (max-width: 480px) {
.copyright-text p {
font-size: 12px;
line-height: 1.4;
text-align: center;
}
.legal-links {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.legal-links span {
display: none;
}
/* Hero Sections Extra Small Mobile */
.hero-sections {
margin: 0 12px;
max-width: calc(100% - 24px);
}
.hero-left, .hero-right {
padding: 20px 12px;
border: none;
}
.hero-main-title {
font-size: 24px;
line-height: 1.2;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 20px;
}
.date-range.professional {
padding: 14px 12px;
margin-bottom: 16px;
}
.period-dates {
font-size: 15px;
}
.performance-details {
gap: 12px;
}
.performance-item {
padding: 16px 14px;
min-width: 110px;
}
}
/* Modern AI Features Section */
.ai-features-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.ai-features-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.features-header {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.features-title-section {
text-align: center;
margin-bottom: 40px;
}
.features-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #00C851, #00A843);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 16px rgba(0, 200, 81, 0.3);
}
.features-main-title {
font-size: 42px;
font-weight: 800;
color: #1e293b;
margin-bottom: 16px;
line-height: 1.2;
}
.features-subtitle {
font-size: 18px;
color: #64748b;
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}
.features-stats {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(203, 213, 225, 0.5);
}
.stat-value {
font-size: 28px;
font-weight: 800;
color: #00C851;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.features-grid-modern {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 24px;
position: relative;
z-index: 2;
}
.feature-card-modern {
background: white;
border-radius: 20px;
padding: 32px;
border: 1px solid rgba(203, 213, 225, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--card-color), var(--card-color-dark));
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.feature-card-modern:hover::before {
opacity: 1;
}
.feature-card-modern.primary {
--card-color: #00C851;
--card-color-dark: #00A843;
}
.feature-card-modern.secondary {
--card-color: #3B82F6;
--card-color-dark: #2563EB;
}
.feature-card-modern.tertiary {
--card-color: #8B5CF6;
--card-color-dark: #7C3AED;
}
.feature-card-modern.quaternary {
--card-color: #F59E0B;
--card-color-dark: #D97706;
}
.feature-card-modern.security {
--card-color: #EF4444;
--card-color-dark: #DC2626;
}
.feature-card-modern.mobile {
--card-color: #10B981;
--card-color-dark: #059669;
}
.feature-card-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
.feature-icon-modern {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--card-color), var(--card-color-dark));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.feature-title-section {
flex: 1;
}
.feature-title-section h3 {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
line-height: 1.3;
}
.feature-badge-new {
background: linear-gradient(135deg, #00C851, #00A843);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-badge-hot {
background: linear-gradient(135deg, #EF4444, #DC2626);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-badge-pro {
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-badge-advanced {
background: linear-gradient(135deg, #F59E0B, #D97706);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-badge-secure {
background: linear-gradient(135deg, #EF4444, #DC2626);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-badge-mobile {
background: linear-gradient(135deg, #10B981, #059669);
color: white;
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.feature-description {
font-size: 15px;
line-height: 1.6;
color: #64748b;
margin-bottom: 24px;
}
.feature-highlights {
display: flex;
flex-direction: column;
gap: 12px;
}
.highlight-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #475569;
}
.highlight-item i {
color: var(--card-color);
font-size: 12px;
width: 16px;
flex-shrink: 0;
}
.features-cta-section {
max-width: 1000px;
margin: 80px auto 0;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 2;
}
.cta-content {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
padding: 50px;
border-radius: 24px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.cta-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(0, 168, 67, 0.1));
pointer-events: none;
}
.cta-content h3 {
font-size: 32px;
font-weight: 800;
color: white;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.cta-content p {
font-size: 16px;
color: #cbd5e1;
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
position: relative;
z-index: 1;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 28px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 14px;
}
.cta-btn.primary {
background: linear-gradient(135deg, #00C851, #00A843);
color: white;
box-shadow: 0 8px 24px rgba(0, 200, 81, 0.3);
}
.cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 200, 81, 0.4);
color: white;
}
.cta-btn.secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.cta-btn.secondary:hover {
border-color: #00C851;
background: rgba(0, 200, 81, 0.1);
color: white;
}
.cta-guarantee {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.guarantee-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #64748b;
font-weight: 600;
}
.guarantee-item i {
color: #00C851;
font-size: 16px;
}
/* Responsive Tasarım */
@media (max-width: 1200px) {
.featured-section-header {
flex-direction: column;
align-items: center;
}
.view-all-link {
margin-top: 10px;
}
.footer-section {
flex: 1 1 20%;
}
}
@media (max-width: 992px) {
.navbar-menu {
/* Sabit konum kaldırıldığı için bu satır da kaldırıldı */
}
.featured-section-header {
flex-direction: column;
align-items: center;
}
.view-all-link {
margin-top: 10px;
}
.footer-section {
flex: 1 1 20%;
}
}
@media (max-width: 768px) {
.header {
background: linear-gradient(135deg, rgba(15, 20, 30, 0.98) 0%, rgba(26, 29, 41, 0.98) 100%);
}
.navbar-logo {
font-size: 22px;
}
.mobile-controls {
display: flex;
}
.navbar-links {
display: none;
}
/* Masaüstü dil seçici gizle */
.language-selector {
display: none;
}
/* Mobil dil seçici göster */
.mobile-language-selector {
display: flex;
position: relative;
}
.mobile-language-selector .current-language {
min-width: 60px;
padding: 8px 10px;
font-size: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.mobile-language-selector .current-language:hover {
background: rgba(0, 200, 81, 0.15);
border-color: rgba(0, 200, 81, 0.3);
}
.mobile-language-selector .current-language .flag {
font-size: 14px;
}
.mobile-language-selector .language-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 120px;
background: rgba(15, 20, 30, 0.98);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 10000;
margin-top: 8px;
}
.mobile-language-selector .language-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-language-selector .language-option {
padding: 10px 12px;
font-size: 13px;
color: #e2e8f0;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
border-radius: 8px;
margin: 4px;
}
.mobile-language-selector .language-option:hover {
background: rgba(0, 200, 81, 0.15);
color: #00C851;
}
.mobile-language-selector .language-option.active {
background: rgba(0, 200, 81, 0.2);
color: #00C851;
}
.navbar-collapse {
position: fixed;
top: 0;
right: -350px;
width: 350px;
height: 100vh;
background: linear-gradient(135deg, rgba(15, 20, 30, 0.96) 0%, rgba(26, 29, 41, 0.96) 100%);
backdrop-filter: blur(25px);
border-left: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
overflow-y: auto;
}
.navbar-collapse.open {
right: 0;
}
.navbar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.navbar-overlay.open {
opacity: 1;
visibility: visible;
}
.navbar-menu {
display: flex;
flex-direction: column;
padding: 16px 24px 24px 24px;
gap: 12px;
}
.navbar-item {
padding: 18px 20px;
width: 100%;
text-align: left;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: #e2e8f0;
font-weight: 500;
font-size: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
position: relative;
overflow: hidden;
}
.navbar-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #00C851, #00A844);
transform: scaleY(0);
transition: transform 0.3s ease;
}
.navbar-item:hover {
background: rgba(0, 200, 81, 0.12);
border-color: rgba(0, 200, 81, 0.3);
color: #ffffff;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0, 200, 81, 0.15);
}
.navbar-item:hover::before {
transform: scaleY(1);
}
.navbar-item.active {
background: rgba(0, 200, 81, 0.2);
border-color: rgba(0, 200, 81, 0.4);
color: #00C851;
}
.navbar-item.active::before {
transform: scaleY(1);
}
.mobile-auth-section {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 12px;
}
.mobile-user-info {
margin-bottom: 16px;
}
.mobile-user-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: rgba(0, 200, 81, 0.1);
border: 1px solid rgba(0, 200, 81, 0.2);
border-radius: 12px;
color: #e2e8f0;
}
.mobile-user-card i {
font-size: 32px;
color: #00C851;
}
.mobile-user-name {
font-weight: 600;
color: #00C851;
font-size: 16px;
}
.mobile-user-email {
font-size: 14px;
color: #94a3b8;
margin-top: 2px;
}
.dashboard-item {
background: rgba(0, 200, 81, 0.15) !important;
border-color: rgba(0, 200, 81, 0.3) !important;
color: #00C851 !important;
}
.logout-item {
background: rgba(239, 68, 68, 0.1) !important;
border-color: rgba(239, 68, 68, 0.2) !important;
color: #ef4444 !important;
}
.logout-item:hover {
background: rgba(239, 68, 68, 0.2) !important;
border-color: rgba(239, 68, 68, 0.4) !important;
}
.auth-item {
background: linear-gradient(135deg, rgba(0, 200, 81, 0.1), rgba(0, 200, 81, 0.05)) !important;
border-color: rgba(0, 200, 81, 0.2) !important;
}
.auth-item:hover {
background: linear-gradient(135deg, rgba(0, 200, 81, 0.2), rgba(0, 200, 81, 0.1)) !important;
border-color: rgba(0, 200, 81, 0.4) !important;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px 12px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 0;
background: rgba(15, 20, 30, 0.98);
backdrop-filter: blur(25px);
}
.menu-logo {
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
font-family: 'Poppins', sans-serif;
}
.menu-logo .logo-indicator {
color: #94a3b8;
font-weight: 300;
}
.menu-logo .logo-plus {
color: #00C851;
font-weight: 700;
}
.mobile-close-btn {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #e2e8f0;
font-size: 18px;
}
.mobile-close-btn:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: #ef4444;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
.how-it-works {
flex-direction: column;
gap: 20px;
}
.step {
width: 100%;
margin-bottom: 20px;
}
.banner-section {
flex-direction: column;
align-items: center;
margin: 20px auto;
padding: 0 10px;
}
.products-section {
grid-template-columns: repeat(1, 1fr);
}
.footer-container {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.footer-links {
grid-template-columns: 1fr;
gap: 24px;
}
.copyright-section {
flex-direction: column;
gap: 12px;
text-align: center;
}
.footer-live-indicator {
align-items: center;
}
.features-grid-modern {
grid-template-columns: 1fr;
gap: 20px;
}
.features-stats {
flex-direction: column;
gap: 16px;
align-items: center;
}
.features-main-title {
font-size: 28px;
}
.cta-content {
padding: 30px 20px;
}
.cta-content h3 {
font-size: 24px;
}
.cta-buttons {
flex-direction: column;
}
.cta-guarantee {
flex-direction: column;
gap: 16px;
}
.footer-section {
flex: 1 1 100%;
margin-bottom: 20px;
padding: 0 15px;
}
/* Simplified Subscription Mobile */
.unified-features {
padding: 24px;
margin-top: 30px;
}
.features-title {
font-size: 20px;
margin-bottom: 20px;
}
.features-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.feature-item {
padding: 10px 16px;
}
.feature-item span {
font-size: 13px;
}
.simple-pricing-cards {
grid-template-columns: 1fr;
gap: 16px;
max-width: 300px;
margin-bottom: 30px;
}
.simple-card {
padding: 24px 16px;
}
.plan-period {
font-size: 16px;
}
.simple-card .plan-price .amount {
font-size: 28px;
}
.simple-btn {
padding: 10px 16px;
font-size: 13px;
}
.subscription-cards {
flex-direction: column;
align-items: center;
}
.progress-bar {
width: 90%; /* Mobil cihazlarda genişliği artır */
}
.feature-card.terminal-card {
flex-direction: column;
}
.terminal-explanations,
.terminal-visual {
max-width: 100%;
}
.footer-section {
flex: 1 1 100%;
}
/* Telegram Community Mobile */
.telegram-channel {
padding: 12px;
gap: 10px;
}
.telegram-icon {
width: 40px;
height: 40px;
}
.telegram-icon i {
font-size: 20px;
}
.telegram-title {
font-size: 14px;
}
.telegram-desc {
font-size: 12px;
}
/* FAQ Section Mobile */
.faq-section {
padding: 60px 0;
}
.faq-title {
font-size: 32px;
}
.faq-subtitle {
font-size: 16px;
}
.faq-container {
max-width: 100%;
padding: 0 15px;
}
.faq-question {
padding: 16px 20px;
}
.faq-question h3 {
font-size: 15px;
}
.faq-answer.open {
padding: 0 20px 16px 20px;
}
.faq-answer p {
font-size: 13px;
}
/* Hero Performance Showcase Mobile */
.performance-showcase-container {
min-height: 60vh;
padding: 40px 0 30px 0;
display: flex;
align-items: center;
justify-content: center;
}
.performance-content {
padding: 0;
margin: 0;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-sections {
grid-template-columns: 1fr;
min-height: auto;
gap: 0;
margin: 0 16px;
max-width: calc(100% - 32px);
}
.hero-left {
padding: 24px 16px;
border-radius: 16px 16px 0 0;
background: linear-gradient(135deg, rgba(22, 26, 35, 0.95), rgba(18, 22, 30, 0.95));
border: none;
}
.hero-left::before {
display: none;
}
.hero-right {
padding: 24px 16px;
border-radius: 0 0 16px 16px;
background: linear-gradient(135deg, rgba(18, 22, 30, 0.95), rgba(22, 26, 35, 0.95));
border: none;
}
.hero-main-title {
font-size: 28px;
line-height: 1.3;
text-align: center;
margin-bottom: 16px;
}
.hero-subtitle {
font-size: 16px;
margin-bottom: 24px;
text-align: center;
max-width: 100%;
}
.hero-header {
text-align: center;
margin-bottom: 20px;
}
.credibility-badges {
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.date-range.professional {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 12px;
text-align: center;
}
.period-info, .update-info {
align-items: center;
}
.period-dates {
font-size: 16px;
}
.last-update {
font-size: 11px;
padding: 5px 10px;
}
.period-info, .update-info {
align-items: center;
text-align: center;
}
.metrics-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.metric-card {
padding: 20px;
gap: 15px;
}
.metric-icon {
font-size: 32px;
}
.metric-number {
font-size: 28px;
}
.multiplier-value {
font-size: 36px;
}
.main-multiplier {
padding: 18px;
margin-bottom: 20px;
}
.performance-details {
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.performance-item {
min-width: 120px;
padding: 18px 16px;
}
.performance-icon {
font-size: 24px;
}
.metric-row {
gap: 16px;
}
.metric-item {
min-width: 120px;
padding: 12px 18px;
}
.ai-section-header h3 {
font-size: 22px;
}
.ai-metric-card {
padding: 18px;
gap: 14px;
}
.ai-metric-number {
font-size: 18px;
}
.performance-item {
padding: 6px 10px;
width: 100%;
max-width: 260px;
}
.performance-arrow {
transform: rotate(90deg);
}
/* Profesyonel Hesaplama Aracı Mobil */
.calc-header-professional {
padding: 12px 16px;
}
.calc-title-section {
flex-direction: column;
text-align: center;
gap: 12px;
}
.calc-main-title {
font-size: 16px;
}
.calc-subtitle {
font-size: 11px;
}
.strategy-tabs {
flex-direction: column;
gap: 8px;
}
.strategy-tab {
padding: 12px;
}
.tab-content {
flex-direction: row;
gap: 8px;
}
.calc-inputs-professional {
padding: 16px;
}
.inputs-grid {
grid-template-columns: 1fr;
}
.field-input {
padding: 12px 16px 12px 36px;
}
.field-suggestions {
justify-content: center;
}
.results-grid-professional {
grid-template-columns: 1fr;
gap: 10px;
}
.result-item-professional {
padding: 14px;
}
.result-amount {
font-size: 16px;
}
.calc-action-section {
padding: 16px;
}
.calc-btn-professional {
padding: 16px 20px;
flex-direction: column;
gap: 8px;
}
.btn-content {
gap: 8px;
}
.btn-text-group {
align-items: center;
}
.btn-arrow {
display: none;
}
.analysis-metrics {
gap: 8px;
}
.metric-item {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.metric-label {
min-width: auto;
text-align: center;
}
.metric-value {
text-align: center;
min-width: auto;
}
}
/* Masaüstünde mobil elementleri gizle */
@media (min-width: 769px) {
.mobile-menu-header,
.mobile-auth-section {
display: none !important;
}
}
/* Toast Message Styles */
.toast-message {
position: fixed;
top: 20px;
right: 20px;
min-width: 300px;
max-width: 500px;
background: rgba(26, 29, 41, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
z-index: 10000;
animation: slideInRight 0.3s ease-out;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
color: #e2e8f0;
}
.toast-success {
border-left: 4px solid #00C851;
}
.toast-error {
border-left: 4px solid #ff4757;
}
.toast-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.toast-content i {
font-size: 18px;
}
.toast-success .toast-content i {
color: #00C851;
}
.toast-error .toast-content i {
color: #ff4757;
}
.toast-close {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 4px;
border-radius: 6px;
transition: all 0.3s ease;
margin-left: 12px;
}
.toast-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.toast-message {
left: 20px;
right: 20px;
min-width: auto;
max-width: none;
}
}
/* === Önceden body sonundaki ikinci