/* Menü ile slider arası — sol iletişim / sağ yapılan işlem sayacı */ #oy-kok .oy-ana-ust-alan { display: flex; flex-direction: column; width: 100%; position: relative; } #oy-kok .oy-yapilan-islem { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; z-index: auto; padding: clamp(0.65rem, 2vw, 0.95rem) clamp(0.75rem, 3vw, 1.5rem); overflow: hidden; background: #0f172a; flex: 0 0 auto; } #oy-kok .oy-yapilan-islem__zemin { position: absolute; inset: 0; background: var(--oy-yapilan-islem-grad); background-size: 220% 220%; animation: oy-yapilan-islem-grad 9s ease infinite; } #oy-kok .oy-yapilan-islem__zemin::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle at 20% 50%, rgba(255, 255, 255, 0.14) 0%, transparent 42% ), radial-gradient( circle at 80% 30%, var(--oy-yapilan-islem-zemin-isik) 0%, transparent 38% ), repeating-linear-gradient( -12deg, transparent, transparent 18px, rgba(255, 255, 255, 0.03) 18px, rgba(255, 255, 255, 0.03) 19px ); pointer-events: none; } #oy-kok .oy-yapilan-islem__zemin::after { content: ""; position: absolute; inset: -40% -20%; background: linear-gradient( 105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65% ); animation: oy-yapilan-islem-parlak 5s ease-in-out infinite; pointer-events: none; } @keyframes oy-yapilan-islem-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes oy-yapilan-islem-parlak { 0%, 100% { transform: translateX(-55%) rotate(8deg); opacity: 0.35; } 50% { transform: translateX(55%) rotate(8deg); opacity: 0.85; } } #oy-kok .oy-yapilan-islem__ic { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; } #oy-kok .oy-yapilan-islem__satir { display: flex; flex-direction: column; gap: 0.65rem; } #oy-kok .oy-yapilan-islem__sol, #oy-kok .oy-yapilan-islem__sag { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 4.25rem; padding: clamp(0.75rem, 2vw, 1rem) clamp(0.85rem, 2.5vw, 1.25rem); border-radius: 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px var(--oy-yapilan-islem-panel-dis); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #oy-kok .oy-yapilan-islem__sol { flex: 1 1 50%; flex-wrap: wrap; } #oy-kok .oy-yapilan-islem__sag { flex: 1 1 50%; flex-wrap: wrap; justify-content: space-between; gap: 0.65rem 1rem; } #oy-kok .oy-yapilan-islem__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; flex: 1 1 calc(50% - 0.3rem); min-width: 8rem; min-height: 2.65rem; padding: 0.5rem 0.85rem; border-radius: 0.75rem; font-size: clamp(0.78rem, 2.1vw, 0.9rem); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; white-space: nowrap; } #oy-kok .oy-yapilan-islem__btn:hover { transform: translateY(-2px); filter: brightness(1.06); } #oy-kok .oy-yapilan-islem__btn:active { transform: translateY(0); } #oy-kok .oy-yapilan-islem__btn--whatsapp { color: #fff; background: linear-gradient(135deg, #16a34a 0%, #22c55e 52%, #15803d 100%); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); border-color: rgba(187, 247, 208, 0.45); } #oy-kok .oy-yapilan-islem__btn--whatsapp .bi-whatsapp { font-size: 1.15rem; } #oy-kok .oy-yapilan-islem__btn--form { color: #fff; background: var(--oy-marka-birincil); box-shadow: 0 8px 22px var(--oy-marka-birincil-golge-guclu), inset 0 1px 0 rgba(255, 255, 255, 0.25); border-color: var(--oy-yapilan-islem-form-kenar); } #oy-kok .oy-yapilan-islem__etik { flex: 1 1 9rem; min-width: 0; color: #fff; font-size: clamp(0.82rem, 2.2vw, 0.98rem); font-weight: 700; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } #oy-kok .oy-yapilan-islem__sayi-wrap { flex-shrink: 0; padding: 0.35rem 0.9rem; border-radius: 0.75rem; background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 -2px 0 rgba(148, 163, 184, 0.35); } #oy-kok .oy-yapilan-islem__sayi { display: block; font-size: clamp(1.45rem, 4.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; background: var(--oy-yapilan-islem-sayi); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 2px 4px var(--oy-marka-birincil-golge-hafif)); animation: oy-yapilan-islem-sayi-canli 2.2s ease-in-out infinite; } @keyframes oy-yapilan-islem-sayi-canli { 0%, 100% { opacity: 1; filter: drop-shadow(0 2px 4px var(--oy-marka-birincil-golge-anim-normal)); } 50% { opacity: 0.62; filter: drop-shadow(0 0 14px var(--oy-marka-birincil-golge-anim-parlak)); } } #oy-kok .oy-yapilan-islem__sayi--tik { animation: oy-yapilan-islem-sayi-tik 0.55s ease-out; } @keyframes oy-yapilan-islem-sayi-tik { 0% { transform: scale(1); } 35% { transform: scale(1.08); filter: drop-shadow(0 0 18px var(--oy-marka-ikincil-golge-tik)); } 100% { transform: scale(1); } } #oy-kok.oy-tema-koyu .oy-yapilan-islem { background: #020617; } #oy-kok.oy-tema-koyu .oy-yapilan-islem__sayi-wrap { background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); } @media (max-width: 767.98px) { #oy-kok .oy-yapilan-islem__sol, #oy-kok .oy-yapilan-islem__sag { backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (min-width: 640px) { #oy-kok .oy-yapilan-islem__satir { flex-direction: row; align-items: stretch; gap: clamp(0.75rem, 2vw, 1rem); } #oy-kok .oy-yapilan-islem__sol { flex-wrap: nowrap; } #oy-kok .oy-yapilan-islem__btn { flex: 1 1 0; min-width: 0; } #oy-kok .oy-yapilan-islem__sag { flex-wrap: nowrap; } } @media (prefers-reduced-motion: reduce) { #oy-kok .oy-yapilan-islem__zemin, #oy-kok .oy-yapilan-islem__zemin::after, #oy-kok .oy-yapilan-islem__sayi { animation: none; } }