/* ============================================================ WBahis – Custom Components CSS Works alongside Tailwind CDN (loaded in ) ============================================================ */ /* ── Custom Properties ─────────────────────────────────────── */ :root { --color-primary: #fbbf24; --color-primary-hover: #f59e0b; --color-primary-glow: rgba(251, 191, 36, 0.4); --color-bg: #020617; --color-surface: rgba(15, 23, 42, 0.65); --color-text: #f8fafc; --color-text-muted: #cbd5e1; --shadow-glow: 0 0 25px var(--color-primary-glow); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ── Base ───────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { background-color: var(--color-bg); background-image: radial-gradient(circle at top center, rgba(30, 41, 59, 0.6) 0%, rgba(2, 6, 23, 1) 100%), url('https://wbahis.me/img/arkaplan.webp'); background-size: cover; background-position: center top; background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @media (max-width: 768px) { body { background-attachment: scroll; } } /* ── Logo Aspect Ratio ─────────────────────────────────────── */ .logo-aspect { aspect-ratio: 347 / 134; width: auto; object-fit: contain; } /* ── Sticky Nav ────────────────────────────────────────────── */ .nav-sticky { position: sticky; top: 0; z-index: 100; background: rgba(2, 6, 23, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ── Glass Effect ──────────────────────────────────────────── */ .glass-effect { background: var(--color-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3); transition: border-color var(--transition-normal); } .glass-effect:hover { border-color: rgba(251, 191, 36, 0.15); } /* ── Golden CTA Button ─────────────────────────────────────── */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; border-radius: 9999px; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: #000 !important; border: none; cursor: pointer; box-shadow: 0 4px 15px var(--color-primary-glow); transition: all var(--transition-normal); text-decoration: none; text-align: center; } .btn-gold:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 30px var(--color-primary-glow); background: linear-gradient(135deg, #fcd34d, var(--color-primary)); color: #000 !important; } .btn-gold:active { transform: translateY(-1px) scale(1.01); } /* ── Slot Machine ──────────────────────────────────────────── */ .slot-machine { width: 256px; height: 256px; box-shadow: var(--shadow-glow); transition: transform var(--transition-normal); cursor: pointer; } .slot-machine:hover { transform: scale(1.05) translateY(-8px); } .slot-machine.shaking { animation: shake 0.5s ease-in-out infinite; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 50% { transform: translateX(6px) rotate(2deg); } 75% { transform: translateX(-4px) rotate(-1deg); } } .pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px var(--color-primary-glow); } 50% { box-shadow: 0 0 40px var(--color-primary-glow), 0 0 60px rgba(251, 191, 36, 0.2); } } @media (max-width: 480px) { .slot-machine { width: 200px; height: 200px; } } /* ── Feature Cards ─────────────────────────────────────────── */ .feature-card { transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); } /* ── Social Cards ──────────────────────────────────────────── */ .social-card { transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); } .social-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); } /* ── FAQ Items ─────────────────────────────────────────────── */ .faq-item { overflow: hidden; background: rgba(15, 23, 42, 0.5) !important; transition: background var(--transition-fast), border-color var(--transition-fast); } .faq-item:hover { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(251, 191, 36, 0.25) !important; } /* Chevron rotation */ .faq-item [data-faq-toggle][aria-expanded="true"] .transform { transform: rotate(180deg); } /* ── Blog Carousel ─────────────────────────────────────────── */ .blog-carousel-container { position: relative; } .blog-carousel-wrapper { overflow: hidden; border-radius: 0.75rem; } .blog-carousel-track { display: flex; transition: transform 500ms ease-in-out; } .blog-card-wrapper { flex-shrink: 0; width: 100%; padding: 0 0.75rem; } @media (min-width: 768px) { .blog-card-wrapper { width: 50%; } } @media (min-width: 1024px) { .blog-card-wrapper { width: 33.3333%; } } .blog-card { transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .blog-card:hover { border-color: rgba(251, 191, 36, 0.3) !important; } /* Blog card image – 5:3 aspect ratio */ .blog-card-image { position: relative; aspect-ratio: 5 / 3; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } /* Carousel nav buttons */ .carousel-btn { border: none; cursor: pointer; transition: all var(--transition-normal); } .carousel-btn:hover { transform: translateY(-50%) scale(1.1); } .carousel-btn-prev { left: -1rem; } .carousel-btn-next { right: -1rem; } @media (max-width: 640px) { .carousel-btn-prev { left: 0.25rem; } .carousel-btn-next { right: 0.25rem; } } /* Carousel dots */ .carousel-dot { border: none; cursor: pointer; background: transparent; } .carousel-dot[aria-selected="true"] span { width: 28px; } /* ── Table ─────────────────────────────────────────────────── */ table { border-collapse: collapse; } /* ══════════════════════════════════════════════════════════════ ★ FOOTER – Blue-White Links ══════════════════════════════════════════════════════════════ */ footer[role="contentinfo"] a { color: #93c5fd !important; transition: color var(--transition-fast); } footer[role="contentinfo"] a:hover { color: #ffffff !important; } /* btn-gold keeps its own color inside footer */ footer[role="contentinfo"] .btn-gold, footer[role="contentinfo"] .btn-gold:hover { color: #000 !important; } /* ── Mobile Side Menu ──────────────────────────────────────── */ #mobile-menu { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* ── Confetti & Coins ──────────────────────────────────────── */ .confetti { position: fixed; width: 10px; height: 10px; background: #f59e0b; z-index: 9999; pointer-events: none; } .coin { position: fixed; width: 30px; height: 30px; background: radial-gradient(circle, #fbbf24, #f59e0b); border-radius: 50%; border: 2px solid #d97706; z-index: 9999; pointer-events: none; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #78350f; font-size: 18px; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.6); } @keyframes confetti-fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } } @keyframes coin-scatter { to { transform: translate(var(--tx), var(--ty)) rotate(720deg); opacity: 0; } } /* ── Animations ────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } main > header { animation: fadeIn 0.8s ease-out; } /* ── Accessibility ─────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } button:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .pulse-glow { animation: none; } } /* ── Small Screen CTA ──────────────────────────────────────── */ @media (max-width: 479px) { .btn-gold { width: 100%; padding: 0.75rem 1.5rem; font-size: 0.9rem; } } /* ── Tailwind v3 → v4 Uyumluluk ────────────────────────────── */ /* bg-opacity-* Tailwind v4'te kaldırıldı. */ /* İdeal çözüm: HTML'de bg-black bg-opacity-90 → bg-black/90 */ /* Bu fallback'ler geçiş döneminde çalışır: */ .bg-opacity-90 { --tw-bg-opacity: 0.9; } .bg-opacity-95 { --tw-bg-opacity: 0.95; } .bg-black.bg-opacity-90 { background-color: rgba(0, 0, 0, 0.9); } .bg-slate-900.bg-opacity-95 { background-color: rgba(15, 23, 42, 0.95); } /* ── Print ─────────────────────────────────────────────────── */ @media print { body { background: #fff; color: #000; } .nav-sticky, .btn-gold, .carousel-btn, .carousel-dots, #mobile-menu, footer .btn-gold { display: none; } .glass-effect { background: #fff; border: 1px solid #ccc; box-shadow: none; } }