/* ══════════════════════════════════════════════════════════════════ ETKİNLİK MERKEZİ — "AT ÇAPA" Renkler emerald-elite.css'in CSS custom property'lerinden gelir (bu dosya 'de emerald-elite.css'ten sonra yüklenir). ══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { background: var(--bg-base); color: var(--text-primary); font-family: 'Inter', 'Urbanist', sans-serif; margin: 0; } .ac-page { min-height: calc(100vh - 64px); padding-bottom: 60px; } /* ─── HERO ────────────────────────────────────────────────────────── */ .ac-hero { position: relative; padding: 46px 24px 34px; text-align: center; overflow: hidden; background: radial-gradient(ellipse 80% 100% at 50% 0%, var(--em-green-glow) 0%, transparent 65%), var(--bg-base); border-bottom: 1px solid var(--border); } .ac-hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; animation: acOrbFloat 10s ease-in-out infinite; } .ac-hero-orb-1 { width: 380px; height: 380px; top: -220px; left: 12%; background: radial-gradient(circle, rgba(16, 158, 202,.16) 0%, transparent 70%); } .ac-hero-orb-2 { width: 300px; height: 300px; bottom: -200px; right: 10%; background: radial-gradient(circle, rgba(16, 158, 202,.1) 0%, transparent 70%); animation-delay: -5s; } @keyframes acOrbFloat { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(20px, -14px); } } .ac-hero-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; } .ac-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(16, 158, 202,.08); border: 1px solid rgba(16, 158, 202,.22); border-radius: 100px; padding: 6px 15px; margin-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--em-green); } .ac-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--em-green); box-shadow: 0 0 8px var(--em-green); animation: acDotPulse 1.8s ease-in-out infinite; } @keyframes acDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } } .ac-title { font-family: 'Urbanist', sans-serif; font-weight: 900; font-size: 42px; letter-spacing: -1px; margin: 0 0 12px; background: linear-gradient(120deg, #fff 0%, #C2E2F5 45%, var(--em-green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ac-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* ─── GAME SECTION ────────────────────────────────────────────────── */ .ac-game-section { max-width: 920px; margin: 0 auto; padding: 40px 24px 10px; } .ac-scene { position: relative; height: 460px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0a1216 0%, #080f12 32%, #052824 60%, #01202e 100%); border: 1px solid var(--border); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.02); } .ac-scene-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 50% 28%, rgba(0, 159, 230, .14) 0%, transparent 70%); } /* Gökyüzü */ .ac-sky { position: absolute; top: 0; left: 0; right: 0; height: 42%; z-index: 1; } .ac-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.55); animation: acTwinkle 2.6s ease-in-out infinite; } .ac-star-1 { top: 18%; left: 15%; animation-delay: 0s; } .ac-star-2 { top: 30%; left: 76%; animation-delay: .7s; width: 2px; height: 2px; } .ac-star-3 { top: 12%; left: 55%; animation-delay: 1.4s; } @keyframes acTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } } /* Yat + çapa katmanı */ .ac-boat-layer { position: absolute; top: 0; left: 0; right: 0; height: 42%; z-index: 3; display: flex; align-items: flex-end; justify-content: center; } .ac-boat-wrap { position: relative; width: 260px; animation: acBoatBob 4.2s ease-in-out infinite; transform-origin: 50% 90%; } @keyframes acBoatBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } } .ac-boat { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); } .ac-boat-shadow { fill: rgba(0,0,0,.28); filter: blur(3px); } /* Gövde */ .ac-hull { fill: url(#acHullGrad); stroke: rgba(0, 28, 40, .12); stroke-width: 1; } .ac-hull-boot { fill: #0d2d3b; opacity: .9; } .ac-hull-trim { fill: var(--em-green); } .ac-porthole { fill: #041a24; stroke: #c9d7dd; stroke-width: 1.3; } /* Güverte / korkuluk */ .ac-deck-rail { stroke: #c9d7dd; stroke-width: 2; stroke-linecap: round; fill: none; } .ac-stanchions { stroke: #c9d7dd; stroke-width: 1.3; stroke-linecap: round; fill: none; opacity: .85; } /* Kabin */ .ac-cabin { fill: url(#acCabinGrad); stroke: rgba(0, 41, 60, .15); stroke-width: 1; } .ac-cabin-roofline { fill: #b8cbd4; } .ac-cabin-door { fill: #cfdfe6; stroke: rgba(0, 41, 60, .18); stroke-width: .8; } .ac-window { fill: url(#acWindowGrad); stroke: #0a242f; stroke-width: 1.2; } /* Üst güverte (flybridge) */ .ac-flybridge { fill: url(#acCabinGrad); stroke: rgba(0, 41, 60, .15); stroke-width: 1; } .ac-flybridge-screen { fill: url(#acWindowGrad); opacity: .95; } .ac-flybridge-rail { stroke: #c9d7dd; stroke-width: 1.3; stroke-linecap: round; fill: none; } /* Direk / anten / radar / bayrak */ .ac-mast, .ac-antenna { stroke: #c9d7dd; stroke-width: 2; stroke-linecap: round; fill: none; } .ac-radar { fill: #eef5f8; stroke: #c9d7dd; stroke-width: 1.2; } .ac-flag { fill: var(--em-green-bright); } .ac-chain { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 4px; height: 0; border-radius: 4px; background: repeating-linear-gradient(180deg, #9db0b8 0, #9db0b8 6px, transparent 6px, transparent 9px); box-shadow: 0 0 6px rgba(0,0,0,.3); transition: height .55s cubic-bezier(.36,.1,.4,1); z-index: 2; } .ac-scene.is-dropping .ac-chain, .ac-scene.is-searching .ac-chain, .ac-scene.is-locking .ac-chain, .ac-scene.is-caught .ac-chain { height: 268px; } .ac-scene.is-rising .ac-chain { height: 0; transition-duration: .5s; transition-timing-function: cubic-bezier(.55,0,.85,.4); } .ac-anchor { position: absolute; left: 50%; top: 100%; width: 34px; height: auto; transform: translate(calc(-50% + var(--anchor-x, 0px)), -6px) rotate(0deg); opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); transition: transform .55s cubic-bezier(.36,.1,.4,1), opacity .25s ease, top .55s cubic-bezier(.36,.1,.4,1); z-index: 4; color: var(--em-green); } .ac-anchor-ring, .ac-anchor-stock, .ac-anchor-shank, .ac-anchor-fluke { stroke: currentColor; stroke-width: 5; stroke-linecap: round; fill: none; } .ac-anchor-ring { fill: none; } .ac-scene.is-dropping .ac-anchor, .ac-scene.is-searching .ac-anchor, .ac-scene.is-locking .ac-anchor, .ac-scene.is-caught .ac-anchor { opacity: 1; top: calc(42% + 226px); transform: translate(calc(-50% + var(--anchor-x, 0px)), 0) rotate(0deg); } .ac-scene.is-searching .ac-anchor { animation: acAnchorSway .42s ease-in-out 3; } @keyframes acAnchorSway { 0%, 100% { transform: translate(calc(-50% + var(--anchor-x, 0px)), 0) rotate(0deg); } 50% { transform: translate(calc(-50% + var(--anchor-x, 0px) - 14px), 0) rotate(-9deg); } } .ac-scene.is-caught .ac-anchor { filter: drop-shadow(0 0 12px var(--em-green-bright)) drop-shadow(0 6px 10px rgba(0,0,0,.4)); } .ac-scene.is-rising .ac-anchor { opacity: 1; top: 100%; transform: translate(-50%, -6px) rotate(0deg); transition: top .5s cubic-bezier(.2,.9,.3,1.15), transform .5s cubic-bezier(.2,.9,.3,1.15), opacity .3s ease .3s, filter .3s ease; } /* Su hattı */ .ac-waterline { position: absolute; top: 42%; left: 0; right: 0; height: 46px; z-index: 5; transform: translateY(-50%); } .ac-wave-svg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; } .ac-wave-back { fill: rgba(0, 159, 230, .10); animation: acWaveScroll 11s linear infinite; } .ac-wave-front { fill: #0b1c24; animation: acWaveScroll 7s linear infinite reverse; } @keyframes acWaveScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Derinlik */ .ac-depths { position: absolute; top: 42%; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; } .ac-bubbles { position: absolute; inset: 0; } .ac-bubbles span { position: absolute; bottom: -20px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); animation: acBubbleRise linear infinite; } .ac-bubbles span:nth-child(1) { left: 8%; width: 7px; height: 7px; animation-duration: 6s; animation-delay: 0s; } .ac-bubbles span:nth-child(2) { left: 22%; width: 5px; height: 5px; animation-duration: 8s; animation-delay: 1.4s; } .ac-bubbles span:nth-child(3) { left: 40%; width: 9px; height: 9px; animation-duration: 7s; animation-delay: .6s; } .ac-bubbles span:nth-child(4) { left: 61%; width: 6px; height: 6px; animation-duration: 9s; animation-delay: 2.2s; } .ac-bubbles span:nth-child(5) { left: 78%; width: 8px; height: 8px; animation-duration: 6.5s; animation-delay: .2s; } .ac-bubbles span:nth-child(6) { left: 90%; width: 4px; height: 4px; animation-duration: 7.5s; animation-delay: 3s; } @keyframes acBubbleRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .3; } 100% { transform: translateY(-260px) translateX(10px); opacity: 0; } } .ac-prizes { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 22px; z-index: 3; } .ac-prize-item { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: acPrizeFloat 3.4s ease-in-out infinite; transition: opacity .4s ease, transform .4s ease; } .ac-prize-item:nth-child(2n) { animation-duration: 3.9s; animation-delay: -1.1s; } .ac-prize-item:nth-child(3n) { animation-duration: 3.1s; animation-delay: -2s; } @keyframes acPrizeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ac-prize-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(16, 158, 202,.16) 0%, rgba(0, 41, 60, .3) 100%); border: 1px solid rgba(16, 158, 202,.28); color: var(--em-green-bright); box-shadow: 0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); } .ac-prize-label { font-size: 9.5px; font-weight: 700; letter-spacing: .4px; color: rgba(220, 234, 240, .55); text-transform: uppercase; white-space: nowrap; } .ac-scene.is-caught .ac-prize-item { opacity: .18; transform: scale(.92); } .ac-scene.is-caught .ac-prize-item.is-caught { opacity: 1; transform: scale(1.18) translateY(-6px); animation: none; } .ac-scene.is-caught .ac-prize-item.is-caught .ac-prize-icon { background: linear-gradient(145deg, var(--em-green) 0%, var(--em-green-dim) 100%); color: #040f14; box-shadow: 0 0 0 4px rgba(0, 159, 230, .18), 0 10px 26px rgba(16, 158, 202,.4); } .ac-sparkle-burst { position: absolute; z-index: 6; pointer-events: none; width: 0; height: 0; } .ac-sparkle-burst span { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--em-green-bright); box-shadow: 0 0 6px var(--em-green-bright); animation: acSparkleOut .7s cubic-bezier(.2,.8,.4,1) forwards; } @keyframes acSparkleOut { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; } } /* ─── KONTROLLER ──────────────────────────────────────────────────── */ .ac-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; } .ac-play-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 44px; border: none; border-radius: 100px; cursor: pointer; font-family: 'Urbanist', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .4px; color: #040f14; background: linear-gradient(135deg, var(--em-green), var(--em-green-dim)); box-shadow: 0 10px 30px rgba(16, 158, 202,.32), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .2s ease; } .ac-play-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(16, 158, 202,.45), inset 0 1px 0 rgba(255,255,255,.3); } .ac-play-btn:active:not(:disabled) { transform: translateY(-1px) scale(.98); } .ac-play-btn:disabled { opacity: .6; cursor: not-allowed; filter: grayscale(.3); transform: none; } .ac-play-btn svg { flex-shrink: 0; animation: acAnchorIconSwing 2.4s ease-in-out infinite; } @keyframes acAnchorIconSwing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } } .ac-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; } /* ─── NASIL ÇALIŞIR ───────────────────────────────────────────────── */ .ac-how { max-width: 920px; margin: 56px auto 0; padding: 0 24px; } .ac-how-title { font-family: 'Urbanist', sans-serif; font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 24px; color: var(--text-primary); } .ac-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ac-how-card { background: linear-gradient(145deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 22px 20px; text-align: center; position: relative; overflow: hidden; transition: var(--transition); } .ac-how-card::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--em-green-border), transparent); opacity: 0; transition: opacity .25s; } .ac-how-card:hover::before { opacity: 1; } .ac-how-card:hover { transform: translateY(-3px); border-color: var(--em-green-border); } .ac-how-icon { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--em-green-glow); border: 1px solid var(--em-green-border); color: var(--em-green); } .ac-how-card h3 { font-family: 'Urbanist', sans-serif; font-size: 14.5px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); } .ac-how-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* ─── SONUÇ MODALI ────────────────────────────────────────────────── */ .ac-result-modal { display: none; position: fixed; inset: 0; z-index: 99500; align-items: center; justify-content: center; background: rgba(2, 6, 8, .7); backdrop-filter: blur(10px) saturate(140%); } .ac-result-modal.active { display: flex; } .ac-result-backdrop { position: absolute; inset: 0; } .ac-result-card { position: relative; z-index: 1; width: min(380px, 88vw); background: linear-gradient(160deg, #0c181e 0%, #061015 100%); border: 1px solid var(--em-green-border); border-radius: 24px; padding: 40px 28px 28px; text-align: center; box-shadow: 0 40px 100px -20px rgba(0,0,0,.8), 0 0 100px -30px rgba(16, 158, 202,.4); animation: acResultIn .45s cubic-bezier(.2,.9,.3,1.15) both; } @keyframes acResultIn { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } } .ac-result-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.05); border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; transition: var(--transition); } .ac-result-close:hover { background: rgba(255,255,255,.1); color: var(--text-primary); } .ac-result-burst { position: absolute; top: 46px; left: 50%; width: 0; height: 0; z-index: 0; } .ac-result-icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--em-green) 0%, var(--em-green-dim) 100%); color: #040f14; box-shadow: 0 0 0 6px rgba(0, 159, 230, .14), 0 14px 34px rgba(16, 158, 202,.4); position: relative; z-index: 1; } .ac-result-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--em-green); margin-bottom: 6px; position: relative; z-index: 1; } .ac-result-title { font-family: 'Urbanist', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 10px; color: #fff; position: relative; z-index: 1; } .ac-result-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 24px; position: relative; z-index: 1; } .ac-result-btn { width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer; font-family: 'Urbanist', sans-serif; font-size: 14px; font-weight: 800; color: #040f14; background: linear-gradient(135deg, var(--em-green), var(--em-green-dim)); box-shadow: 0 6px 20px rgba(16, 158, 202,.3); transition: var(--transition); position: relative; z-index: 1; } .ac-result-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16, 158, 202,.42); } /* ─── MOBİL ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .ac-title { font-size: 30px; } .ac-sub { font-size: 13.5px; } .ac-scene { height: 400px; } .ac-boat-wrap { width: 180px; } .ac-prizes { gap: 14px; } .ac-prize-icon { width: 38px; height: 38px; border-radius: 11px; } .ac-how-grid { grid-template-columns: 1fr; } .ac-play-btn { padding: 14px 34px; font-size: 14.5px; } } @media (max-width: 480px) { .ac-scene { height: 360px; } .ac-hero { padding: 34px 18px 26px; } }