/* ========================================================================== Hadi Sende Kariyer - Herkese açık sayfalar (index, blog, hakkımızda, KVKK) "Apple mağazası" tarzı tasarım sistemi. - Yalnızca taşıyan sayfalarda etkilidir; panel/dashboard, /ilan ve /firma sayfaları (main.css + odensa-theme.css) hiç etkilenmez. - Tüm sınıflar "ap-" önekiyle başlar. main.css'in modal / harita / kart (hcard) bileşenleri aynen çalışmaya devam eder; burada yalnızca görünümleri bu tasarım diline uyarlanır. - Apple'ın logo/görsel varlıkları kullanılmaz; yalnızca tasarım DİLİ (beyaz + açık gri bölümler, dev başlıklar, yuvarlak kartlar, cam üst bar, mavi pill düğmeler, koyu istatistik bölümü) uygulanır. - Dış yazı tipi/CDN yok (CSP: font-src 'self'); sistem yazı tipi yığını. ========================================================================== */ :root { --ap-bg: #ffffff; --ap-alt: #f5f5f7; --ap-ink: #1d1d1f; --ap-mute: #6e6e73; --ap-soft: #86868b; --ap-line: #d2d2d7; --ap-blue: #0071e3; --ap-blue-h: #0077ed; --ap-link: #0066cc; --ap-green: #30d158; --ap-orange: #ff9f0a; --ap-purple: #bf5af2; --ap-red: #ff453a; --ap-teal: #64d2ff; --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; --ap-ease: cubic-bezier(.16, 1, .3, 1); --ap-w: 1120px; --ap-nav-h: 52px; --ap-safe-top: env(safe-area-inset-top, 0px); } html { height: auto; scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; } body.ap { height: auto; min-height: 100%; margin: 0; background: var(--ap-bg); color: var(--ap-ink); font-family: var(--ap-font); font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; overscroll-behavior: auto; } body.ap.ap-menu-open, body.ap.map-fullscreen-lock { overflow: hidden; } :where(.ap) *, :where(.ap) *::before, :where(.ap) *::after { box-sizing: border-box; } :where(.ap) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; padding: 0; } :where(.ap) :is(ul, ol) { list-style: none; } :where(.ap) a { color: inherit; text-decoration: none; } :where(.ap) button { font-family: inherit; } :where(.ap) svg { display: block; } :where(.ap) :focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 3px; border-radius: 6px; } :where(.ap) ::selection { background: rgba(0, 113, 227, .22); } .ap-live-dot[hidden] { display: none; } .ap-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--ap-ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: top .2s; } .ap-skip:focus { top: 10px; } .ap-wrap { max-width: var(--ap-w); margin: 0 auto; padding: 0 22px; } .ap-wrap--narrow { max-width: 820px; } .ap-sec { padding: clamp(72px, 11vw, 140px) 0; position: relative; } .ap-sec--alt { background: var(--ap-alt); } .ap-sec--dark { background: #000; color: #f5f5f7; } .ap-sec--tight { padding: clamp(48px, 7vw, 88px) 0; } .ap-center { text-align: center; } /* -------------------------------------------------------------------- */ /* Tipografi */ /* -------------------------------------------------------------------- */ .ap-eyebrow { display: inline-block; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; letter-spacing: -.01em; color: #c93400; margin-bottom: 14px; } .ap-eyebrow--blue { color: var(--ap-blue); } .ap-eyebrow--green { color: #1d9a3d; } .ap-sec--dark .ap-eyebrow { color: var(--ap-orange); } .ap-h1 { font-size: clamp(44px, 9.2vw, 96px); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; } .ap-h2 { font-size: clamp(32px, 5.6vw, 64px); font-weight: 700; line-height: 1.07; letter-spacing: -.03em; } .ap-h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; } .ap-lead { font-size: clamp(19px, 2.3vw, 28px); line-height: 1.24; font-weight: 500; letter-spacing: -.015em; color: var(--ap-mute); } .ap-body { font-size: 19px; line-height: 1.5; color: var(--ap-mute); } .ap-grad { background: linear-gradient(92deg, #0071e3 0%, #5e5ce6 45%, #bf5af2 75%, #ff375f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ap-head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; } .ap-head .ap-lead { margin-top: 20px; } .ap-head--left { margin-left: 0; text-align: left; } .ap-sec--dark .ap-lead, .ap-sec--dark .ap-body { color: #a1a1a6; } /* -------------------------------------------------------------------- */ /* Düğmeler ve bağlantılar */ /* -------------------------------------------------------------------- */ .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 980px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; font: 600 17px/1 var(--ap-font); letter-spacing: -.01em; transition: background-color .25s, color .25s, transform .25s var(--ap-ease), box-shadow .25s, border-color .25s; } .ap-btn:active { transform: scale(.97); } .ap-btn--primary { background: var(--ap-blue); color: #fff; } .ap-btn--primary:hover { background: var(--ap-blue-h); box-shadow: 0 10px 30px -10px rgba(0, 113, 227, .6); } .ap-btn--outline { background: transparent; color: var(--ap-blue); border-color: var(--ap-blue); } .ap-btn--outline:hover { background: var(--ap-blue); color: #fff; } .ap-btn--light { background: #fff; color: var(--ap-ink); } .ap-btn--light:hover { background: #f0f0f2; } .ap-btn--glass { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .5); } .ap-btn--glass:hover { background: rgba(255, 255, 255, .28); } .ap-btn--dark { background: var(--ap-ink); color: #fff; } .ap-btn--dark:hover { background: #000; } .ap-btn--sm { min-height: 34px; padding: 0 16px; font-size: 14px; } .ap-btn--lg { min-height: 56px; padding: 0 34px; font-size: 19px; } .ap-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ap-link); font: 400 clamp(17px, 1.7vw, 21px)/1.2 var(--ap-font); letter-spacing: -.01em; } .ap-link::after { content: "›"; font-size: 1.25em; line-height: .8; transition: transform .25s var(--ap-ease); } .ap-link:hover { text-decoration: underline; } .ap-link:hover::after { transform: translateX(3px); } .ap-sec--dark .ap-link { color: #2997ff; } .ap-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; } /* -------------------------------------------------------------------- */ /* Üst bar (cam efektli, 52px) + mobil menü */ /* -------------------------------------------------------------------- */ .ap-nav { position: sticky; top: 0; z-index: 1000; height: calc(var(--ap-nav-h) + var(--ap-safe-top)); padding-top: var(--ap-safe-top); background: rgba(255, 255, 255, .72); border-bottom: 1px solid transparent; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: background-color .3s, border-color .3s; } .ap-nav.is-scrolled { background: rgba(255, 255, 255, .86); border-bottom-color: rgba(0, 0, 0, .08); } .ap-nav__in { max-width: var(--ap-w); height: var(--ap-nav-h); margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ap-logo { display: inline-flex; align-items: baseline; gap: 7px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--ap-ink); white-space: nowrap; } .ap-logo__sub { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ap-blue); } .ap-nav__links { display: flex; align-items: center; gap: 4px; } .ap-nav__links a { font-size: 13px; font-weight: 400; color: rgba(29, 29, 31, .82); padding: 8px 12px; border-radius: 980px; letter-spacing: -.005em; transition: color .2s, background-color .2s; } .ap-nav__links a:hover, .ap-nav__links a[aria-current="page"] { color: #000; background: rgba(0, 0, 0, .05); } .ap-nav__cta { display: flex; align-items: center; gap: 8px; } .ap-nav__contact { background: none; border: 0; cursor: pointer; color: rgba(29, 29, 31, .82); font: 400 13px/1 var(--ap-font); padding: 8px 12px; border-radius: 980px; transition: background-color .2s, color .2s; } .ap-nav__contact:hover { color: #000; background: rgba(0, 0, 0, .05); } .ap-burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; } .ap-burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ap-ink); border-radius: 2px; transition: transform .35s var(--ap-ease), top .35s var(--ap-ease), opacity .2s; } .ap-burger span:nth-child(1) { top: 19px; } .ap-burger span:nth-child(2) { top: 25px; } .ap-menu-open .ap-burger span:nth-child(1) { top: 22px; transform: rotate(45deg); } .ap-menu-open .ap-burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); } .ap-menu { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 990; padding: calc(var(--ap-nav-h) + var(--ap-safe-top) + 12px) 28px 40px; background: rgba(255, 255, 255, .985); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--ap-ease), visibility 0s .3s; } .ap-menu-open .ap-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .ap-menu nav a { display: block; width: 100%; text-align: left; font: 600 28px/1.2 var(--ap-font); letter-spacing: -.025em; color: var(--ap-ink); padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); } .ap-menu__cta { display: grid; gap: 12px; margin-top: 28px; } @media (max-width: 899px) { .ap-nav__links, .ap-nav__cta .ap-nav__contact, .ap-nav__cta .ap-btn { display: none; } .ap-burger { display: block; } } /* -------------------------------------------------------------------- */ /* Kaydırınca beliren öğeler (JS yoksa her şey görünür kalır) */ /* -------------------------------------------------------------------- */ .ap-js .ap-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ap-ease), transform 1s var(--ap-ease); transition-delay: var(--d, 0s); } .ap-js .ap-reveal.is-in { opacity: 1; transform: none; } .ap-js .ap-reveal--scale { transform: scale(.94) translateY(20px); } .ap-js .ap-reveal--scale.is-in { transform: none; } /* Kelime kelime koyulaşan büyük metin */ .ap-scrub { font-size: clamp(28px, 5.2vw, 60px); line-height: 1.12; font-weight: 700; letter-spacing: -.032em; color: var(--ap-ink); } .ap-js .ap-scrub .w { color: #d2d2d7; transition: color .35s ease; } .ap-js .ap-scrub .w.on { color: var(--ap-ink); } .ap-scrub .ap-grad-w { } /* -------------------------------------------------------------------- */ /* Hero */ /* -------------------------------------------------------------------- */ .ap-hero { padding: clamp(44px, 7vw, 88px) 0 0; text-align: center; overflow: hidden; position: relative; } .ap-hero__pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 8px; border-radius: 980px; background: var(--ap-alt); font-size: 14px; font-weight: 500; color: var(--ap-ink); margin-bottom: 26px; } .ap-hero__pill b { background: var(--ap-blue); color: #fff; border-radius: 980px; padding: 3px 10px; font-size: 12px; font-weight: 600; } .ap-hero .ap-lead { max-width: 660px; margin: 22px auto 34px; } .ap-hero__note { margin-top: 18px; font-size: 14px; color: var(--ap-soft); } .ap-stage { position: relative; margin: clamp(44px, 7vw, 80px) auto 0; width: min(880px, 100%); padding-bottom: 0; transform: translateY(calc(var(--hp, 0) * 46px)) scale(calc(1 - var(--hp, 0) * .05)); transform-origin: 50% 0; will-change: transform; } .ap-stage::before { content: ""; position: absolute; left: 50%; top: 4%; width: min(760px, 120%); height: 84%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 113, 227, .22), rgba(94, 92, 230, .12) 55%, transparent 75%); filter: blur(30px); z-index: 0; } .ap-device { position: relative; z-index: 2; width: min(292px, 74vw); margin: 0 auto; aspect-ratio: 9 / 17.2; border-radius: 48px; padding: 9px; background: linear-gradient(145deg, #2b2b2e, #0b0b0c); box-shadow: 0 0 0 1.5px #48484a inset, 0 50px 90px -30px rgba(0, 0, 0, .45), 0 24px 50px -24px rgba(0, 113, 227, .35); -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, #000 93%, transparent 100%); transition: transform .25s ease-out; } .ap-device__screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #e8eef3; } .ap-device__island { position: absolute; z-index: 6; top: 10px; left: 50%; width: 30%; height: 21px; transform: translateX(-50%); background: #000; border-radius: 20px; } .ap-map { position: absolute; inset: 0; width: 100%; height: 100%; } .ap-map svg { width: 100%; height: 100%; } .ap-search { position: absolute; z-index: 5; left: 12px; right: 12px; top: 44px; height: 38px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .12); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12.5px; color: var(--ap-soft); letter-spacing: 0; } .ap-search svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ap-pin { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .28); } .ap-pin::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--ap-blue)); } .ap-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c, var(--ap-blue)); opacity: 0; animation: ap-ping 2.8s ease-out infinite; animation-delay: var(--pd, 0s); } .ap-pin--main { width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 4; animation: ap-bob 3.2s ease-in-out infinite; } .ap-pin--main::before { width: 20px; height: 20px; } @keyframes ap-ping { 0% { transform: scale(.7); opacity: .8; } 80%, 100% { transform: scale(2.1); opacity: 0; } } @keyframes ap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .ap-sheet { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 12px; border-radius: 22px; background: #fff; padding: 14px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .16); text-align: left; letter-spacing: -.01em; animation: ap-rise 1.1s var(--ap-ease) .5s both; } @keyframes ap-rise { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } } .ap-sheet__top { display: flex; align-items: center; gap: 10px; } .ap-sheet__ava { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #0071e3, #5e5ce6); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .ap-sheet__t { font-size: 14px; font-weight: 700; color: var(--ap-ink); line-height: 1.2; } .ap-sheet__s { font-size: 11.5px; color: var(--ap-mute); margin-top: 2px; } .ap-sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 12px; } .ap-chip { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 980px; background: var(--ap-alt); color: var(--ap-mute); letter-spacing: 0; } .ap-chip--ok { background: rgba(48, 209, 88, .14); color: #1a8a3a; } .ap-sheet__btn { display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: var(--ap-blue); border-radius: 12px; padding: 10px 0; } .ap-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 20px; text-align: left; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .04); font-size: 13.5px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; animation: ap-drift 6s ease-in-out infinite; animation-delay: var(--fd, 0s); } .ap-float small { display: block; font-weight: 500; font-size: 12px; color: var(--ap-mute); margin-top: 1px; } .ap-float__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: var(--fc, var(--ap-blue)); } .ap-float__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ap-float--l1 { left: 0; top: 16%; } .ap-float--l2 { left: 6%; top: 58%; --fd: -2s; } .ap-float--r1 { right: 0; top: 24%; --fd: -1s; } .ap-float--r2 { right: 5%; top: 64%; --fd: -3.4s; } @keyframes ap-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (max-width: 820px) { .ap-float--l2, .ap-float--r2 { display: none; } .ap-float { padding: 9px 12px 9px 9px; font-size: 12px; border-radius: 16px; } .ap-float__ic { width: 30px; height: 30px; border-radius: 10px; } .ap-float small { display: none; } .ap-float--l1 { left: -4px; top: 48%; } .ap-float--r1 { right: -4px; top: 17%; } } .ap-livestrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 820px; margin: 0 auto; padding: 34px 0 0; border-top: 0; } .ap-livestrip > div { padding: 0 12px; text-align: center; } .ap-livestrip > div + div { border-left: 1px solid var(--ap-line); } .ap-livestrip__n { font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; } .ap-livestrip__l { margin-top: 8px; font-size: 14px; color: var(--ap-mute); letter-spacing: -.005em; } /* -------------------------------------------------------------------- */ /* Kısaca / tanım bloğu (GEO: yapay zekâ özetleri için net tanım) */ /* -------------------------------------------------------------------- */ .ap-tldr { max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 22px 26px; border-radius: 22px; background: var(--ap-alt); font-size: 17px; line-height: 1.5; color: var(--ap-mute); text-align: left; } .ap-tldr strong { color: var(--ap-ink); font-weight: 600; } /* -------------------------------------------------------------------- */ /* Bento kutuları */ /* -------------------------------------------------------------------- */ .ap-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .ap-c12 { grid-column: span 12; } .ap-c8 { grid-column: span 8; } .ap-c7 { grid-column: span 7; } .ap-c6 { grid-column: span 6; } .ap-c5 { grid-column: span 5; } .ap-c4 { grid-column: span 4; } .ap-tile { position: relative; overflow: hidden; border-radius: 28px; background: var(--ap-alt); padding: clamp(28px, 3.2vw, 44px); min-height: 420px; display: flex; flex-direction: column; isolation: isolate; transition: transform .5s var(--ap-ease), box-shadow .5s var(--ap-ease); } .ap-tile:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .28); } .ap-tile--dark { background: #000; color: #f5f5f7; } .ap-tile--blue { background: linear-gradient(160deg, #0a84ff, #5e5ce6); color: #fff; } .ap-tile__eyebrow { font-size: 14px; font-weight: 600; color: #c93400; letter-spacing: -.005em; margin-bottom: 8px; } .ap-tile--dark .ap-tile__eyebrow { color: var(--ap-orange); } .ap-tile--blue .ap-tile__eyebrow { color: rgba(255, 255, 255, .8); } .ap-tile h3 { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.08; font-weight: 700; letter-spacing: -.028em; margin-bottom: 14px; max-width: 460px; } .ap-tile p { font-size: 17px; line-height: 1.42; color: var(--ap-mute); max-width: 460px; } .ap-tile--dark p { color: #a1a1a6; } .ap-tile--blue p { color: rgba(255, 255, 255, .82); } .ap-tile__vis { margin-top: auto; padding-top: 30px; position: relative; } /* Mini harita görseli */ .ap-minimap { position: relative; height: 230px; border-radius: 22px; overflow: hidden; background: #e8eef3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); } .ap-tile--wide .ap-tile__vis { position: absolute; right: -6%; bottom: -6%; width: 58%; padding: 0; margin: 0; } .ap-tile--wide .ap-minimap { height: 340px; border-radius: 28px 0 0 0; } .ap-tile--wide .ap-tile__txt { max-width: 44%; } @media (max-width: 899px) { .ap-tile--wide .ap-tile__vis { position: relative; right: auto; bottom: auto; width: auto; margin-top: auto; padding-top: 30px; } .ap-tile--wide .ap-minimap { height: 260px; border-radius: 22px; } .ap-tile--wide .ap-tile__txt { max-width: none; } } .ap-minimap .ap-pin { animation: none; } .ap-tag { position: absolute; z-index: 5; padding: 6px 12px; border-radius: 980px; font-size: 12px; font-weight: 600; background: #fff; color: var(--ap-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .16); letter-spacing: -.005em; white-space: nowrap; } /* Uygunluk kontrol listesi */ .ap-checklist { display: grid; gap: 9px; } .ap-checklist li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 11px 14px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .ap-checklist li > span:not(.ap-tick) { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ap-soft); } .ap-tick { width: 24px; height: 24px; border-radius: 50%; background: var(--ap-green); display: grid; place-items: center; transform: scale(0); flex-shrink: 0; } .ap-tick svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } .ap-reveal.is-in .ap-tick, .ap-no-js .ap-tick { animation: ap-pop .55s var(--ap-ease) forwards; animation-delay: var(--d, 0s); } @keyframes ap-pop { from { transform: scale(0); } to { transform: scale(1); } } .ap-js .ap-tile:not(.is-in) .ap-tick { transform: scale(0); } html:not(.ap-js) .ap-tick { transform: scale(1); } /* Süresi biten ilan satırları */ .ap-jobrows { display: grid; gap: 9px; } .ap-jobrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; } .ap-jobrow small { display: block; font-weight: 500; font-size: 12px; color: var(--ap-soft); margin-top: 1px; } .ap-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 980px; background: rgba(48, 209, 88, .15); color: #1a8a3a; white-space: nowrap; } .ap-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ap-blink 2s ease-in-out infinite; } .ap-pill--off { background: #ececee; color: var(--ap-soft); } .ap-pill--off::before { animation: none; } @keyframes ap-blink { 50% { opacity: .35; } } .ap-jobrow--swap { position: relative; } .ap-swap { position: relative; display: inline-block; min-width: 92px; height: 24px; } .ap-swap .ap-pill { position: absolute; right: 0; top: 0; } .ap-swap .ap-pill:first-child { animation: ap-swap-a 6s ease-in-out infinite; } .ap-swap .ap-pill:last-child { animation: ap-swap-b 6s ease-in-out infinite; } @keyframes ap-swap-a { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } } @keyframes ap-swap-b { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } } .ap-jobrow--swap .ap-jobrow__t { animation: ap-dim 6s ease-in-out infinite; } @keyframes ap-dim { 0%, 42% { opacity: 1; } 50%, 92% { opacity: .45; } 100% { opacity: 1; } } /* Tek dokunuşla başvur */ .ap-apply { display: grid; place-items: center; padding: 26px 0 6px; } .ap-apply__btn { position: relative; width: min(320px, 100%); height: 62px; border-radius: 980px; overflow: hidden; display: block; background: var(--ap-blue); color: #fff; font-size: 19px; font-weight: 600; text-align: center; line-height: 62px; animation: ap-apply-bg 5.5s ease-in-out infinite; } .ap-apply__btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; } .ap-apply__btn span:first-child { animation: ap-apply-a 5.5s ease-in-out infinite; } .ap-apply__btn span:last-child { animation: ap-apply-b 5.5s ease-in-out infinite; } .ap-apply__btn svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } @keyframes ap-apply-a { 0%, 44% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } } @keyframes ap-apply-b { 0%, 44% { opacity: 0; transform: translateY(14px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(14px); } } @keyframes ap-apply-bg { 0%, 40% { background: var(--ap-blue); transform: scale(1); } 44% { transform: scale(.96); } 48%, 92% { background: #30b455; transform: scale(1); } 100% { background: var(--ap-blue); } } .ap-apply__hint { margin-top: 16px; font-size: 13px; color: #86868b; } /* Sohbet balonları */ .ap-chat { display: grid; gap: 8px; } .ap-bubble { max-width: 82%; padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.3; letter-spacing: -.01em; opacity: 0; transform: translateY(12px) scale(.96); } .ap-bubble--in { background: #fff; color: var(--ap-ink); border-bottom-left-radius: 6px; justify-self: start; } .ap-bubble--out { background: var(--ap-blue); color: #fff; border-bottom-right-radius: 6px; justify-self: end; } .ap-reveal.is-in .ap-bubble { animation: ap-bubble .6s var(--ap-ease) forwards; animation-delay: var(--d, 0s); } html:not(.ap-js) .ap-bubble { opacity: 1; transform: none; } @keyframes ap-bubble { to { opacity: 1; transform: none; } } .ap-read { justify-self: end; font-size: 11px; color: var(--ap-soft); margin-top: -2px; } /* 81 il */ .ap-big81 { position: relative; height: 210px; margin-top: auto; display: grid; place-items: center; } .ap-big81::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0, 113, 227, .35) 1.6px, transparent 2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); animation: ap-drift-bg 14s linear infinite; } @keyframes ap-drift-bg { to { background-position: 44px 22px; } } .ap-big81 b { position: relative; font-size: clamp(96px, 12vw, 148px); font-weight: 700; letter-spacing: -.06em; line-height: 1; } .ap-big81 b.ap-grad { display: block; } /* Onay rozeti */ .ap-verify { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); } .ap-verify__logo { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #34c759, #0a84ff); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; } .ap-verify__n { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; } .ap-verify__n svg { width: 18px; height: 18px; color: var(--ap-blue); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ap-verify__s { font-size: 12.5px; color: var(--ap-mute); margin-top: 1px; } .ap-verify + .ap-verify { margin-top: 9px; } /* -------------------------------------------------------------------- */ /* Nasıl çalışır */ /* -------------------------------------------------------------------- */ .ap-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: ap-s; } .ap-step { position: relative; background: #fff; border-radius: 28px; padding: 36px 32px 32px; min-height: 340px; display: flex; flex-direction: column; overflow: hidden; } .ap-step__n { font-size: 88px; line-height: .9; font-weight: 700; letter-spacing: -.06em; margin-bottom: 20px; background: linear-gradient(180deg, #0071e3, #a5c8f5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ap-step h3 { font-size: 26px; line-height: 1.12; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; } .ap-step p { font-size: 17px; color: var(--ap-mute); line-height: 1.42; } .ap-step__ic { margin-top: auto; padding-top: 24px; display: flex; gap: 8px; align-items: center; color: var(--ap-blue); } .ap-step__ic svg { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: rgba(0, 113, 227, .1); stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ap-note { max-width: 720px; margin: 44px auto 0; text-align: center; font-size: 19px; color: var(--ap-mute); } .ap-note strong { color: var(--ap-ink); font-weight: 600; } /* -------------------------------------------------------------------- */ /* Canlı ilan / işletme şeritleri (SSR kartları, main.css bileşenleri) */ /* -------------------------------------------------------------------- */ .ap-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .ap-rail-head h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; } .ap-rail-head p { font-size: 17px; color: var(--ap-mute); margin-top: 6px; } .ap-rail-block + .ap-rail-block { margin-top: clamp(44px, 6vw, 72px); } .ap .hcards { margin: 0 -22px; padding: 12px 22px 34px; gap: 16px; scroll-snap-type: x mandatory; scroll-padding: 0 22px; scrollbar-width: none; } .ap .hcards::-webkit-scrollbar { display: none; } .ap .hcard-company, .ap .hcard-job { width: 272px; max-width: 80vw; padding: 22px; border: 0; border-radius: 24px; background: var(--ap-alt); box-shadow: none; scroll-snap-align: start; transition: transform .45s var(--ap-ease), box-shadow .45s var(--ap-ease), background-color .3s; } .ap .hcard-company::before, .ap .hcard-job::before { display: none; } .ap .hcard-company:hover, .ap .hcard-job:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .05); border-color: transparent; } .ap .hcard-company__name, .ap .hcard-job__title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); } .ap .hcard-company__loc, .ap .hcard-job__loc { color: var(--ap-mute); } .ap .hcard-company__jobs { color: var(--ap-blue); } .ap .hcard-job__deadline { border-top-color: var(--ap-line); color: var(--ap-soft); } .ap .hcards__empty { color: var(--ap-mute); } .ap-rail-all { margin-top: 4px; } /* -------------------------------------------------------------------- */ /* Rakamlar (koyu bölüm) + grafikler */ /* -------------------------------------------------------------------- */ .ap-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; } .ap-stat { padding: 28px 0 8px; border-top: 1px solid #38383a; } .ap-stat__n { font-size: clamp(56px, 9vw, 116px); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #7c7c82); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ap-stat__l { margin-top: 12px; font-size: 19px; color: #a1a1a6; line-height: 1.3; } .ap-live-dot { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 13px; color: #a1a1a6; } .ap-live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-green); box-shadow: 0 0 0 0 rgba(48, 209, 88, .6); animation: ap-live 2s infinite; } @keyframes ap-live { 70% { box-shadow: 0 0 0 10px rgba(48, 209, 88, 0); } 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); } } .ap-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-top: clamp(40px, 6vw, 72px); } .ap-chart { background: #1d1d1f; border-radius: 28px; padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; } .ap-chart h3 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 4px; } .ap-chart__s { font-size: 14.5px; color: #a1a1a6; margin-bottom: 26px; } .ap-bars { display: grid; gap: 15px; min-height: 240px; align-content: start; } .ap-bar { display: grid; grid-template-columns: minmax(70px, 108px) 1fr 44px; align-items: center; gap: 14px; font-size: 15px; } .ap-bar__l { color: #f5f5f7; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-bar__t { height: 12px; border-radius: 12px; background: #2c2c2e; overflow: hidden; } .ap-bar__f { display: block; height: 100%; width: 100%; border-radius: 12px; background: linear-gradient(90deg, #0a84ff, #64d2ff); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ap-ease); transition-delay: var(--d, 0s); } .ap-bars.go .ap-bar__f { transform: scaleX(var(--w, 0)); } .ap-bar__v { text-align: right; color: #a1a1a6; font-variant-numeric: tabular-nums; } .ap-empty { color: #86868b; font-size: 15px; padding: 30px 0; } .ap-ring { display: grid; place-items: center; position: relative; margin: 6px auto 4px; width: min(230px, 70%); aspect-ratio: 1; } .ap-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .ap-ring__bg { fill: none; stroke: #2c2c2e; stroke-width: 12; } .ap-ring__fg { fill: none; stroke: url(#apRingGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.8s var(--ap-ease) .2s; } .ap-ring__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .ap-ring__c b { font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .ap-ring__c span { font-size: 13px; color: #a1a1a6; margin-top: 6px; } .ap-ring__cap { text-align: center; font-size: 14.5px; color: #a1a1a6; margin-top: 16px; } .ap-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 72px); } .ap-fact { border-top: 1px solid #38383a; padding-top: 22px; } .ap-fact b { display: block; font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; } .ap-fact span { display: block; margin-top: 10px; font-size: 15px; color: #a1a1a6; line-height: 1.35; } /* -------------------------------------------------------------------- */ /* Hedef kitleler */ /* -------------------------------------------------------------------- */ .ap-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ap-audcard { border-radius: 32px; padding: clamp(32px, 4.4vw, 56px); background: #fff; display: flex; flex-direction: column; } .ap-audcard--biz { background: #000; color: #f5f5f7; } .ap-audcard h3 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; margin: 6px 0 14px; } .ap-audcard > p { font-size: 19px; line-height: 1.4; color: var(--ap-mute); } .ap-audcard--biz > p { color: #a1a1a6; } .ap-feat { display: grid; gap: 4px; margin: 32px 0; } .ap-feat li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .08); align-items: start; } .ap-audcard--biz .ap-feat li { border-top-color: #38383a; } .ap-feat__ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 113, 227, .1); color: var(--ap-blue); display: grid; place-items: center; } .ap-audcard--biz .ap-feat__ic { background: rgba(48, 209, 88, .16); color: #30d158; } .ap-feat__ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ap-feat b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.015em; } .ap-feat div > span { display: block; font-size: 15.5px; color: var(--ap-mute); margin-top: 2px; line-height: 1.4; } .ap-audcard--biz .ap-feat div > span { color: #a1a1a6; } .ap-audcard__foot { margin-top: auto; } .ap-audnote { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--ap-alt); font-size: 15px; color: var(--ap-mute); margin-bottom: 22px; } .ap-audcard--biz .ap-audnote { background: #1d1d1f; color: #d2d2d7; } .ap-audnote b { color: var(--ap-ink); font-weight: 600; } .ap-audcard--biz .ap-audnote b { color: #fff; } .ap-audnote svg { width: 22px; height: 22px; flex-shrink: 0; color: #1d9a3d; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------- */ /* Karşılaştırma tablosu */ /* -------------------------------------------------------------------- */ .ap-table { width: 100%; border-collapse: collapse; font-size: 17px; } .ap-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ap-table th, .ap-table td { text-align: left; padding: 22px 18px; border-bottom: 1px solid var(--ap-line); vertical-align: top; } .ap-table thead th { font-size: 14px; font-weight: 600; color: var(--ap-soft); padding-bottom: 16px; letter-spacing: -.005em; } .ap-table thead th:last-child { color: var(--ap-blue); } .ap-table tbody th { font-weight: 600; width: 26%; letter-spacing: -.015em; } .ap-table td { color: var(--ap-mute); width: 37%; } .ap-table td:last-child { color: var(--ap-ink); font-weight: 500; background: linear-gradient(90deg, rgba(0, 113, 227, .05), rgba(0, 113, 227, .02)); } .ap-yes { display: inline-flex; vertical-align: -3px; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--ap-green); align-items: center; justify-content: center; } .ap-yes svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 720px) { .ap-table, .ap-table tbody, .ap-table tr, .ap-table th, .ap-table td { display: block; width: 100% !important; } .ap-table thead { display: none; } .ap-table tr { padding: 18px 0; border-bottom: 1px solid var(--ap-line); } .ap-table th, .ap-table td { border: 0; padding: 4px 0; } .ap-table td::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 600; color: var(--ap-soft); margin-top: 8px; } .ap-table td:last-child { background: none; } .ap-table td:last-child::before { color: var(--ap-blue); } } /* -------------------------------------------------------------------- */ /* Güven şeridi + iller */ /* -------------------------------------------------------------------- */ .ap-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ap-sec--alt .ap-trust > div { background: #fff; } .ap-trust > div { background: var(--ap-alt); border-radius: 24px; padding: 30px; } .ap-trust svg { width: 30px; height: 30px; stroke: var(--ap-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; } .ap-trust h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; } .ap-trust p { font-size: 16px; color: var(--ap-mute); line-height: 1.45; } .ap-trust a { color: var(--ap-link); } .ap-trust a:hover { text-decoration: underline; } .ap-cities { margin-top: 32px; } .ap-cities summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ap-link); font-size: 17px; } .ap-cities summary::-webkit-details-marker { display: none; } .ap-cities summary::after { content: "›"; font-size: 22px; line-height: .8; transition: transform .3s var(--ap-ease); } .ap-cities[open] summary::after { transform: rotate(90deg); } .ap-cities ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .ap-cities li { font-size: 14px; padding: 7px 14px; border-radius: 980px; background: #fff; color: var(--ap-mute); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); } /* -------------------------------------------------------------------- */ /* SSS */ /* -------------------------------------------------------------------- */ .ap-faq { max-width: 820px; margin: 0 auto; } .ap-faq details { border-bottom: 1px solid var(--ap-line); } .ap-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .ap-faq summary::-webkit-details-marker { display: none; } .ap-faq summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--ap-ink), var(--ap-ink)) center / 12px 1.6px no-repeat, linear-gradient(var(--ap-ink), var(--ap-ink)) center / 1.6px 12px no-repeat, rgba(0, 0, 0, .06); transition: transform .4s var(--ap-ease), background-color .3s; } .ap-faq details[open] summary::after { transform: rotate(45deg); } .ap-faq summary:hover::after { background-color: rgba(0, 0, 0, .1); } .ap-faq__a { padding: 0 52px 28px 0; font-size: 18px; line-height: 1.5; color: var(--ap-mute); animation: ap-open .5s var(--ap-ease); } .ap-faq__a a { color: var(--ap-link); } .ap-faq__a a:hover { text-decoration: underline; } @keyframes ap-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------- */ /* Kapanış çağrısı */ /* -------------------------------------------------------------------- */ .ap-cta { position: relative; overflow: hidden; border-radius: 36px; padding: clamp(48px, 8vw, 104px) clamp(24px, 6vw, 80px); text-align: center; color: #fff; background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 55%, #bf5af2 100%); isolation: isolate; } .ap-cta::before, .ap-cta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5; } .ap-cta::before { width: 420px; height: 420px; background: #64d2ff; left: -120px; top: -160px; animation: ap-orb 12s ease-in-out infinite; } .ap-cta::after { width: 380px; height: 380px; background: #ff375f; right: -100px; bottom: -180px; animation: ap-orb 14s ease-in-out infinite reverse; } @keyframes ap-orb { 50% { transform: translate(40px, 30px) scale(1.12); } } .ap-cta h2 { font-size: clamp(34px, 6vw, 68px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; } .ap-cta p { font-size: clamp(18px, 2.2vw, 24px); color: rgba(255, 255, 255, .86); max-width: 620px; margin: 18px auto 34px; line-height: 1.3; } /* -------------------------------------------------------------------- */ /* Altbilgi */ /* -------------------------------------------------------------------- */ .ap-footer { background: var(--ap-alt); color: var(--ap-mute); font-size: 13px; line-height: 1.5; padding: 56px 0 calc(28px + env(safe-area-inset-bottom, 0px)); letter-spacing: -.005em; } .ap-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--ap-line); } .ap-footer__brand p { max-width: 340px; margin-top: 12px; font-size: 13.5px; } .ap-footer h4 { font-size: 12px; font-weight: 600; color: var(--ap-ink); margin-bottom: 12px; letter-spacing: -.005em; } .ap-footer li + li { margin-top: 9px; } .ap-footer a:hover { color: var(--ap-ink); text-decoration: underline; } .ap-social { display: flex; gap: 10px; margin-top: 18px; } .ap-social a { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ap-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .3s var(--ap-ease), background-color .2s, color .2s; } .ap-social a:hover { background: var(--ap-blue); color: #fff; text-decoration: none; transform: translateY(-2px); } .ap-social svg { width: 17px; height: 17px; } .ap-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; } .ap-footer__bottom a { margin-left: 14px; } /* -------------------------------------------------------------------- */ /* Alt sayfa başlıkları, blog, makale, KVKK, hakkımızda */ /* -------------------------------------------------------------------- */ .ap-crumbs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 13px; color: var(--ap-soft); margin-bottom: 26px; } .ap-crumbs a:hover { color: var(--ap-ink); text-decoration: underline; } .ap-crumbs li + li::before { content: "›"; margin-right: 6px; } .ap-pagehead { padding: clamp(56px, 9vw, 110px) 0 clamp(36px, 5vw, 64px); text-align: center; } .ap-pagehead .ap-lead { max-width: 700px; margin: 22px auto 0; } .ap-pagehead--left { text-align: left; } .ap-pagehead--left .ap-crumbs { justify-content: flex-start; } .ap-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; } .ap-filter button { border: 0; cursor: pointer; padding: 10px 20px; border-radius: 980px; background: var(--ap-alt); font: 500 15px/1 var(--ap-font); color: var(--ap-ink); transition: background-color .2s, color .2s; } .ap-filter button:hover { background: #e8e8ed; } .ap-filter button.is-on { background: var(--ap-ink); color: #fff; } .ap-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ap-post { display: flex; flex-direction: column; background: var(--ap-alt); border-radius: 28px; overflow: hidden; transition: transform .5s var(--ap-ease), box-shadow .5s var(--ap-ease); } .ap-post:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .3); } .ap-post[hidden] { display: none; } .ap-post--feat { grid-column: 1 / -1; flex-direction: row; min-height: 420px; } .ap-post--feat .ap-post__cover { flex: 1.1; min-height: 100%; aspect-ratio: auto; } .ap-post--feat .ap-post__body { flex: 1; justify-content: center; padding: clamp(28px, 4vw, 56px); } .ap-post--feat h2, .ap-post--feat h3 { font-size: clamp(28px, 3.6vw, 44px); } .ap-post__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--cv, linear-gradient(135deg, #0a84ff, #5e5ce6)); } .ap-post__cover::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .35), transparent 45%), radial-gradient(circle at 85% 90%, rgba(0, 0, 0, .25), transparent 50%); } .ap-post__cover svg { position: relative; width: 34%; max-width: 150px; min-width: 70px; height: auto; stroke: #fff; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25)); transition: transform .8s var(--ap-ease); } .ap-post:hover .ap-post__cover svg { transform: scale(1.08) rotate(-3deg); } .ap-post__body { display: flex; flex-direction: column; gap: 10px; padding: 28px; flex: 1; } .ap-post__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--ap-soft); } .ap-post__meta b { color: var(--ap-blue); font-weight: 600; } .ap-post h2, .ap-post h3 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } .ap-post p { font-size: 16.5px; line-height: 1.45; color: var(--ap-mute); } .ap-post__more { margin-top: auto; padding-top: 10px; color: var(--ap-link); font-size: 16px; } .ap-post__more::after { content: " ›"; } .ap-post a.ap-post__stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; } .ap-post { position: relative; } .ap-article { max-width: 720px; margin: 0 auto; } .ap-article__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 14px; color: var(--ap-soft); margin-top: 22px; } .ap-article__meta b { color: var(--ap-blue); font-weight: 600; } .ap-article h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.028em; margin: 56px 0 16px; scroll-margin-top: 80px; } .ap-article h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 10px; } .ap-article p { font-size: 20px; line-height: 1.55; letter-spacing: -.016em; color: #333336; margin-bottom: 22px; } .ap-article ul, .ap-article ol { margin: 0 0 26px; padding: 0; display: grid; gap: 12px; } .ap-article ul li, .ap-article ol li { font-size: 19px; line-height: 1.5; color: #333336; padding-left: 30px; position: relative; letter-spacing: -.014em; } .ap-article ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-blue); } .ap-article ol { counter-reset: ap-ol; } .ap-article ol li { counter-increment: ap-ol; } .ap-article ol li::before { content: counter(ap-ol); position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--ap-blue); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; } .ap-article a { color: var(--ap-link); } .ap-article a:hover { text-decoration: underline; } .ap-article strong { font-weight: 600; color: var(--ap-ink); } .ap-callout { margin: 34px 0; padding: 26px 28px; border-radius: 24px; background: var(--ap-alt); } .ap-callout h3 { margin: 0 0 8px; font-size: 20px; } .ap-callout p:last-child, .ap-callout ul:last-child { margin-bottom: 0; } .ap-callout p { font-size: 18px; } .ap-callout--blue { background: linear-gradient(135deg, rgba(10, 132, 255, .1), rgba(94, 92, 230, .1)); } .ap-progress { position: fixed; left: 0; top: 0; height: 3px; z-index: 1100; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #0a84ff, #bf5af2); } .ap-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ap-back { margin-bottom: 8px; } .ap-legal { display: grid; grid-template-columns: 250px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .ap-legal > * { min-width: 0; } .ap-toc { position: sticky; top: 84px; } .ap-toc__h { font-size: 13px; font-weight: 600; color: var(--ap-soft); margin-bottom: 12px; letter-spacing: -.005em; } .ap-legal .ap-toc a { display: block; padding: 9px 14px; margin-left: -14px; border-radius: 12px; font-size: 15px; color: var(--ap-mute); transition: background-color .2s, color .2s; } .ap-legal .ap-toc a:hover { background: var(--ap-alt); color: var(--ap-ink); } .ap-legal .ap-toc a.is-active { background: var(--ap-alt); color: var(--ap-ink); font-weight: 600; } .ap-legal section { padding-bottom: 44px; scroll-margin-top: 84px; } .ap-legal h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; margin-bottom: 16px; } .ap-legal p { font-size: 18px; line-height: 1.55; color: #333336; } .ap-legal p + p { margin-top: 14px; } .ap-legal ul { display: grid; gap: 12px; margin-top: 4px; } .ap-legal ul li { font-size: 18px; line-height: 1.5; color: #333336; padding-left: 30px; position: relative; } .ap-legal ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-blue); } .ap-legal a { color: var(--ap-link); } .ap-legal a:hover { text-decoration: underline; } .ap-legal .ap-note-box { margin-top: 4px; padding: 22px 26px; border-radius: 22px; background: var(--ap-alt); } .ap-rights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; } .ap-rights li { padding: 14px 16px 14px 44px !important; background: var(--ap-alt); border-radius: 16px; font-size: 15.5px !important; line-height: 1.4 !important; } .ap-rights li::before { left: 16px !important; top: 1.05em !important; } .ap-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ap-ccard { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 24px; background: var(--ap-alt); transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease), background-color .3s; } .ap-ccard:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .05); } .ap-ccard svg { width: 28px; height: 28px; stroke: var(--ap-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; } .ap-ccard b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; } .ap-ccard span { font-size: 15px; color: var(--ap-mute); } .ap-sec--alt .ap-ccard { background: #fff; } .ap-sec--alt .ap-ccard:hover { background: #fbfbfd; } .ap-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .ap-split + .ap-split { margin-top: clamp(64px, 9vw, 120px); } .ap-split--rev .ap-split__vis { order: -1; } .ap-split h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.032em; line-height: 1.06; margin-bottom: 18px; } .ap-split p { font-size: 19px; line-height: 1.5; color: var(--ap-mute); } .ap-split p + p { margin-top: 16px; } .ap-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ap-ba > div { border-radius: 24px; padding: 20px; background: var(--ap-alt); min-height: 300px; display: flex; flex-direction: column; } .ap-ba small { font-size: 12.5px; font-weight: 600; color: var(--ap-soft); margin-bottom: 14px; } .ap-ba__list { display: grid; gap: 9px; } .ap-ba__list i { display: block; height: 32px; border-radius: 10px; background: #e3e3e8; position: relative; overflow: hidden; } .ap-ba__list i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-100%); animation: ap-shimmer 2.6s infinite; animation-delay: var(--sd, 0s); } .ap-ba__list i:nth-child(2n) { width: 82%; } .ap-ba__list i:nth-child(3n) { width: 68%; } @keyframes ap-shimmer { to { transform: translateX(100%); } } .ap-ba .ap-minimap { height: auto; flex: 1; min-height: 210px; border-radius: 16px; } .ap-ba--map { background: linear-gradient(160deg, #eaf3ff, #f1eaff) !important; } .ap-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ap-val { background: #fff; border-radius: 28px; padding: 36px 30px; } .ap-val svg { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: rgba(0, 113, 227, .1); stroke: var(--ap-blue); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 22px; } .ap-val h3 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 10px; } .ap-val p { font-size: 16.5px; line-height: 1.45; color: var(--ap-mute); } .ap-val a { color: var(--ap-link); } .ap-val a:hover { text-decoration: underline; } /* -------------------------------------------------------------------- */ /* Duyarlı düzen */ /* -------------------------------------------------------------------- */ @media (max-width: 1023px) { .ap-footer__grid { grid-template-columns: 1fr 1fr; } .ap-footer__brand { grid-column: 1 / -1; } } @media (max-width: 899px) { .ap-bento { gap: 14px; } .ap-c7, .ap-c5, .ap-c4, .ap-c8, .ap-c6 { grid-column: span 12; } .ap-tile { min-height: 0; } .ap-steps { grid-template-columns: 1fr; } .ap-step { min-height: 0; } .ap-charts { grid-template-columns: 1fr; } .ap-facts { grid-template-columns: repeat(2, 1fr); } .ap-aud { grid-template-columns: 1fr; } .ap-trust { grid-template-columns: 1fr; } .ap-split { grid-template-columns: 1fr; } .ap-split--rev .ap-split__vis { order: 0; } .ap-vals { grid-template-columns: 1fr; } .ap-contact-cards { grid-template-columns: 1fr; } .ap-post--feat { flex-direction: column; min-height: 0; } .ap-post--feat .ap-post__cover { aspect-ratio: 16 / 10; flex: none; } .ap-legal { grid-template-columns: 1fr; } .ap-toc { position: static; margin-bottom: 8px; } .ap-toc nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 8px; scrollbar-width: none; } .ap-toc nav::-webkit-scrollbar { display: none; } .ap-toc a { margin: 0; white-space: nowrap; background: var(--ap-alt); } } @media (max-width: 640px) { .ap-stats3 { grid-template-columns: 1fr; } .ap-posts { grid-template-columns: 1fr; } .ap-related { grid-template-columns: 1fr; } .ap-rights { grid-template-columns: 1fr; } .ap-ba > div { min-height: 240px; padding: 14px; } .ap-livestrip > div { padding: 0 4px; } .ap-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .ap-article p { font-size: 18.5px; } .ap-faq__a { padding-right: 0; font-size: 17px; } .ap-bar { grid-template-columns: minmax(64px, 90px) 1fr 38px; gap: 10px; font-size: 14px; } .ap-cta { border-radius: 28px; } .ap-btn--lg { min-height: 52px; padding: 0 26px; font-size: 17px; } .ap-hero .ap-actions { flex-direction: column; gap: 16px; } .ap-hero .ap-actions .ap-btn { width: min(320px, 100%); } .ap-audcard, .ap-tile, .ap-step { border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ap *, .ap *::before, .ap *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .ap-js .ap-reveal, .ap-js .ap-reveal--scale { opacity: 1; transform: none; } .ap-js .ap-scrub .w { color: var(--ap-ink); } .ap-tick, .ap-bubble { opacity: 1; transform: none; } .ap-bar__f { transform: scaleX(var(--w, 0)); } .ap-stage { transform: none; } } @media print { .ap-nav, .ap-menu, .ap-footer, .ap-cta, .ap-progress { display: none !important; } .ap-js .ap-reveal { opacity: 1; transform: none; } }