/* ===================================================================== KodImzalama.com — v4 tasarım sistemi Yalnız iken yüklenir (includes/head.php, ?tasarim=v4). Tüm seçiciler html.v4 ile başlar; tp-ui.css (k-*) ve theme-pro.css katmanlarını ezer. Kurallar ve kullanım: includes/views/v4/_design.md ===================================================================== */ /* --------------------------------------------------------------------- 0. Token'lar --------------------------------------------------------------------- */ html.v4 { --kz-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --kz-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --kz-ink: #0a1020; --kz-text: #283244; --kz-muted: #5a6477; --kz-subtle: #8a93a3; --kz-line: #e2e7ef; --kz-line-2: #edf1f6; --kz-line-strong: #c9d2df; --kz-bg: #ffffff; --kz-bg-soft: #f6f8fb; --kz-bg-sunk: #eef2f7; --kz-n-950: #050a16; --kz-n-900: #0a1224; --kz-n-850: #0e1830; --kz-n-800: #13203d; --kz-n-700: #1d2c4f; --kz-d-text: #cdd6e4; --kz-d-soft: #b3bfd2; --kz-d-muted: #93a0b6; --kz-d-line: rgba(255, 255, 255, .09); --kz-d-line-2: rgba(255, 255, 255, .06); --kz-d-fill: rgba(255, 255, 255, .04); --kz-blue: #2563eb; --kz-blue-h: #1d4ed8; --kz-blue-50: #eff5ff; --kz-blue-100: #dbe7fe; --kz-blue-300: #93c5fd; --kz-sky: #7dd3fc; --kz-cyan: #22d3ee; --kz-grad: linear-gradient(120deg, #2563eb 0%, #0ea5e9 55%, #22d3ee 100%); --kz-grad-text: linear-gradient(100deg, #93c5fd 0%, #67e8f9 100%); --kz-ok: #047857; --kz-ok-bg: #ecfdf5; --kz-ok-line: #bbf7d0; --kz-ok-d: #34d399; --kz-warn: #b45309; --kz-warn-bg: #fffbeb; --kz-warn-line: #fde68a; --kz-warn-d: #fbbf24; --kz-err: #b91c1c; --kz-err-bg: #fef2f2; --kz-err-line: #fecaca; --kz-err-d: #f87171; --kz-star: #f59e0b; --kz-wa: #179a4c; --kz-1: 4px; --kz-2: 8px; --kz-3: 12px; --kz-4: 16px; --kz-5: 24px; --kz-6: 32px; --kz-7: 40px; --kz-8: 48px; --kz-9: 64px; --kz-10: 80px; --kz-sec: 80px; --kz-sec-tight: 48px; --kz-gutter: 24px; --kz-max: 1200px; --kz-hdr-h: 64px; --kz-r-xs: 6px; --kz-r-sm: 8px; --kz-r: 12px; --kz-r-lg: 16px; --kz-r-xl: 24px; --kz-sh-1: 0 1px 2px rgba(10, 16, 32, .06); --kz-sh-2: 0 1px 2px rgba(10, 16, 32, .04), 0 12px 32px -16px rgba(10, 16, 32, .2); --kz-sh-3: 0 0 0 1px rgba(10, 16, 32, .03), 0 32px 72px -32px rgba(10, 16, 32, .42); --kz-sh-d: 0 0 0 1px rgba(147, 197, 253, .1), 0 40px 90px -40px rgba(0, 0, 0, .85); --kz-ring: 0 0 0 3px rgba(37, 99, 235, .28); --kz-ease: cubic-bezier(.2, .7, .2, 1); /* Eski katman token'ları → v4 (view'lardaki yerel stiller otomatik uyar) */ --tp-ink: var(--kz-ink); --tp-ink-2: var(--kz-n-850); --tp-text: var(--kz-text); --tp-muted: var(--kz-muted); --tp-line: var(--kz-line); --tp-line-2: var(--kz-line-2); --tp-surface: var(--kz-bg-soft); --tp-white: #fff; --tp-brand: var(--kz-blue); --tp-brand-600: var(--kz-blue-h); --tp-brand-50: var(--kz-blue-50); --tp-brand-100: var(--kz-blue-100); --tp-ok: #059669; --tp-radius-sm: 8px; --tp-radius: 12px; --tp-radius-lg: 16px; --tp-shadow-sm: var(--kz-sh-1); --tp-shadow: var(--kz-sh-1); --tp-shadow-lg: var(--kz-sh-2); --tp-font: var(--kz-font); --tp-font-head: var(--kz-font); --tp-ease: var(--kz-ease); --k-grad: var(--kz-grad); --k-grad-h: var(--kz-grad); --k-grad-text: var(--kz-grad-text); --k-grad-soft: var(--kz-blue-50); --k-glow: none; --theme-primary: var(--kz-blue); --theme-accent: var(--kz-cyan); } @media (max-width: 991px) { html.v4 { --kz-sec: 64px; --kz-sec-tight: 40px; } } @media (max-width: 767px) { html.v4 { --kz-sec: 48px; --kz-sec-tight: 32px; --kz-gutter: 16px; } } /* --------------------------------------------------------------------- 1. Temel --------------------------------------------------------------------- */ html.v4 { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.v4 body { font-family: var(--kz-font); font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--kz-text); background: var(--kz-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.v4 h1, html.v4 h2, html.v4 h3, html.v4 h4, html.v4 h5, html.v4 h6 { font-family: var(--kz-font); letter-spacing: -.02em; } html.v4 [id] { scroll-margin-top: calc(var(--kz-hdr-h) + 16px); } html.v4 ::selection { background: #cfe0ff; color: var(--kz-ink); } html.v4 :focus-visible { outline: 2px solid var(--kz-blue) !important; outline-offset: 2px !important; } html.v4 .k-hero :focus-visible, html.v4 .k-section--dark :focus-visible, html.v4 .k-cta :focus-visible, html.v4 .kz-ftr :focus-visible, html.v4 .kz-ann :focus-visible { outline-color: var(--kz-sky) !important; } html.v4::-webkit-scrollbar-thumb, html.v4 ::-webkit-scrollbar-thumb { background: #c3cad6; border-radius: 8px; } html.v4::-webkit-scrollbar-thumb:hover, html.v4 ::-webkit-scrollbar-thumb:hover { background: #9aa4b4; } html.v4 .container, html.v4 .k-page .container { width: 100%; max-width: calc(var(--kz-max) + 2 * var(--kz-gutter)); padding-left: var(--kz-gutter); padding-right: var(--kz-gutter); margin-left: auto; margin-right: auto; } html.v4 .k-page { --k-header-h: var(--kz-hdr-h); background: var(--kz-bg); color: var(--kz-text); } html.v4 .kz-skip { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 16px; border-radius: var(--kz-r-sm); background: var(--kz-ink); color: #fff !important; font-size: 14px; font-weight: 600; transform: translateY(-150%); transition: transform .15s var(--kz-ease); } html.v4 .kz-skip:focus { transform: none; } html.v4 .kz-anchor-main { display: block; height: 0; outline: 0; } html.v4 .kz-mono { font-family: var(--kz-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } html.v4 .kz-num { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- 2. Bölümler ve başlıklar --------------------------------------------------------------------- */ html.v4 .k-section { padding: var(--kz-sec) 0; } html.v4 .k-section--tight { padding: var(--kz-sec-tight) 0; } html.v4 .k-section--band { padding: 20px 0; border-bottom: 1px solid var(--kz-line-2); } html.v4 .k-section--alt { background: var(--kz-bg-soft); border-top: 1px solid var(--kz-line-2); border-bottom: 1px solid var(--kz-line-2); } html.v4 .k-section--alt + .k-section--alt { border-top: 0; } html.v4 .k-section--dark { position: relative; isolation: isolate; background: var(--kz-n-900); color: var(--kz-d-text); border: 0; } html.v4 .k-section--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(760px 320px at 50% 0%, rgba(37, 99, 235, .16), transparent 70%); } html.v4 .k-section--dark .k-h2, html.v4 .k-section--dark .k-h3, html.v4 .k-section--dark h2, html.v4 .k-section--dark h3 { color: #fff; } html.v4 .k-section--dark .k-lead, html.v4 .k-section--dark p { color: var(--kz-d-muted); } html.v4 .k-head { max-width: 720px; margin-bottom: 40px; } html.v4 .k-head .k-lead { max-width: 620px; } html.v4 .k-head--center { text-align: center; margin-left: auto; margin-right: auto; } html.v4 .k-head--center .k-lead { margin-left: auto; margin-right: auto; } html.v4 .k-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; } html.v4 .k-head--split > div { max-width: 660px; } @media (max-width: 767px) { html.v4 .k-head { margin-bottom: 28px; } html.v4 .k-head--split { align-items: flex-start; } } /* --------------------------------------------------------------------- 3. Tipografi --------------------------------------------------------------------- */ html.v4 .k-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--kz-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-blue); } html.v4 .k-eyebrow::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; background: var(--kz-blue); box-shadow: 0 0 0 3px var(--kz-blue-100); } html.v4 .k-hero .k-eyebrow, html.v4 .k-section--dark .k-eyebrow, html.v4 .k-cta .k-eyebrow { color: var(--kz-sky); background: none; border: 0; } html.v4 .k-hero .k-eyebrow::before, html.v4 .k-section--dark .k-eyebrow::before, html.v4 .k-cta .k-eyebrow::before { background: var(--kz-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); } html.v4 .k-h1, html.v4 .k-pd-title { font-family: var(--kz-font); font-size: clamp(2.125rem, 1.45rem + 2.7vw, 3.5rem); font-weight: 650; line-height: 1.06; letter-spacing: -.04em; color: var(--kz-ink); margin: 0 0 16px; text-wrap: balance; } html.v4 .k-h1--sm, html.v4 .k-pd-title { font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem); line-height: 1.08; } html.v4 .k-h2 { font-family: var(--kz-font); font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 650; line-height: 1.1; letter-spacing: -.035em; color: var(--kz-ink); margin: 0 0 12px; text-wrap: balance; } html.v4 .k-h3 { font-family: var(--kz-font); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--kz-ink); margin: 0 0 8px; } html.v4 .k-lead { font-size: 1.125rem; line-height: 1.6; color: var(--kz-muted); margin: 0; } @media (max-width: 767px) { html.v4 .k-lead { font-size: 1.0625rem; } } html.v4 .k-muted { color: var(--kz-muted); } html.v4 .k-text-grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--kz-blue); } html.v4 .k-hero .k-text-grad, html.v4 .k-section--dark .k-text-grad, html.v4 .k-cta .k-text-grad { background: var(--kz-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.v4 .k-link { display: inline-flex; align-items: center; gap: 6px; color: var(--kz-blue) !important; font-weight: 550; text-decoration: none !important; } html.v4 .k-link:hover { color: var(--kz-blue-h) !important; } html.v4 .k-link i { font-size: .8em; transition: transform .15s var(--kz-ease); } html.v4 .k-link:hover i { transform: translateX(3px); } html.v4 .k-hero .k-link, html.v4 .k-section--dark .k-link { color: var(--kz-sky) !important; } /* Uzun metin */ html.v4 .k-prose { font-size: 16px; line-height: 1.75; color: var(--kz-text); } @media (min-width: 768px) { html.v4 .k-prose { font-size: 17px; } } html.v4 .k-prose > :first-child { margin-top: 0; } html.v4 .k-prose h2, html.v4 .k-prose h3, html.v4 .k-prose h4 { font-family: var(--kz-font); color: var(--kz-ink); font-weight: 650; letter-spacing: -.025em; line-height: 1.25; margin: 1.8em 0 .6em; } html.v4 .k-prose h2 { font-size: 1.625rem; } html.v4 .k-prose h3 { font-size: 1.25rem; } html.v4 .k-prose h4 { font-size: 1.0625rem; } html.v4 .k-prose p { margin: 0 0 1.15em; } html.v4 .k-prose ul, html.v4 .k-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } html.v4 .k-prose li { margin-bottom: .45em; } html.v4 .k-prose li::marker { color: var(--kz-blue); } html.v4 .k-prose a { color: var(--kz-blue); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(37, 99, 235, .35); text-underline-offset: 3px; } html.v4 .k-prose a:hover { text-decoration-color: currentColor; } html.v4 .k-prose strong { color: var(--kz-ink); font-weight: 600; } html.v4 .k-prose img { max-width: 100%; height: auto; border-radius: var(--kz-r); border: 1px solid var(--kz-line); } html.v4 .k-prose code { font-family: var(--kz-mono); font-size: .88em; padding: .15em .4em; border-radius: var(--kz-r-xs); background: var(--kz-bg-sunk); color: var(--kz-ink); } html.v4 .k-prose pre { font-family: var(--kz-mono); font-size: 14px; line-height: 1.7; padding: 16px 20px; border-radius: var(--kz-r); background: var(--kz-n-900); color: var(--kz-d-text); overflow-x: auto; margin: 0 0 1.4em; } html.v4 .k-prose pre code { background: none; padding: 0; color: inherit; } html.v4 .k-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--kz-blue); color: var(--kz-ink); font-size: 1.05em; } html.v4 .k-prose table { width: 100%; display: block; overflow-x: auto; border: 1px solid var(--kz-line); border-radius: var(--kz-r); border-collapse: separate; border-spacing: 0; font-size: 15px; margin: 1.4em 0; } html.v4 .k-prose th, html.v4 .k-prose td { border: 0; border-bottom: 1px solid var(--kz-line-2); padding: 11px 14px; text-align: left; vertical-align: top; } html.v4 .k-prose th { background: var(--kz-bg-soft); color: var(--kz-ink); font-weight: 600; font-size: 14px; white-space: nowrap; } html.v4 .k-prose tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------------------- 4. Butonlar, rozetler --------------------------------------------------------------------- */ html.v4 .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-height: 0; padding: 0 18px; border-radius: var(--kz-r-sm); border: 1px solid transparent; font-family: var(--kz-font); font-size: 15px; font-weight: 550; letter-spacing: -.005em; line-height: 1; text-decoration: none !important; white-space: nowrap; cursor: pointer; box-shadow: none; transform: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } html.v4 .k-btn:hover { transform: none; } html.v4 .k-btn i { font-size: .88em; } html.v4 .k-btn .fa-arrow-right { transition: transform .15s var(--kz-ease); } html.v4 .k-btn:hover .fa-arrow-right { transform: translateX(2px); } html.v4 .k-btn--primary { background: var(--kz-blue); border-color: var(--kz-blue); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 16, 32, .2); } html.v4 .k-btn--primary:hover { background: var(--kz-blue-h); border-color: var(--kz-blue-h); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px -8px rgba(37, 99, 235, .7); } html.v4 .k-btn--dark { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff !important; } html.v4 .k-btn--dark:hover { background: var(--kz-n-800); border-color: var(--kz-n-800); } html.v4 .k-btn--light { background: #fff; border-color: #fff; color: var(--kz-ink) !important; } html.v4 .k-btn--light:hover { background: var(--kz-bg-sunk); border-color: var(--kz-bg-sunk); } html.v4 .k-btn--ghost { background: #fff; border-color: #d3dae5; color: var(--kz-ink) !important; box-shadow: var(--kz-sh-1); } html.v4 .k-btn--ghost:hover { background: var(--kz-bg-soft); border-color: #b6c0cf; } html.v4 .k-btn--ghost-dark { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .18); color: #fff !important; } html.v4 .k-btn--ghost-dark:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); } html.v4 .k-btn--lg { height: 52px; padding: 0 24px; font-size: 16px; } html.v4 .k-btn--sm { height: 36px; padding: 0 12px; font-size: 14px; } html.v4 .k-btn--block { width: 100%; } html.v4 .k-btn[disabled], html.v4 .k-btn.is-disabled { opacity: .5; pointer-events: none; } @media (pointer: coarse) { html.v4 .k-btn--sm { height: 44px; } } html.v4 .k-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--kz-r-xs); border: 1px solid var(--kz-line); background: var(--kz-bg-soft); color: var(--kz-text); font-family: var(--kz-font); font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; box-shadow: none; } html.v4 .k-badge i { font-size: 10px; } html.v4 .k-badge--brand { background: var(--kz-blue-50); border-color: var(--kz-blue-100); color: var(--kz-blue-h); } html.v4 .k-badge--dark { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; } html.v4 .k-badge--ok { background: var(--kz-ok-bg); border-color: var(--kz-ok-line); color: var(--kz-ok); } html.v4 .k-badge--warn { background: var(--kz-warn-bg); border-color: var(--kz-warn-line); color: var(--kz-warn); } html.v4 .k-badge--glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--kz-d-text); } html.v4 .k-off { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--kz-r-xs); background: var(--kz-ok-bg); border: 1px solid var(--kz-ok-line); color: var(--kz-ok); font-size: 11.5px; font-weight: 650; } /* --------------------------------------------------------------------- 5. Kart, ikon, ızgara, listeler --------------------------------------------------------------------- */ html.v4 .k-card { background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r); padding: 24px; height: 100%; box-shadow: none; transform: none; } html.v4 .k-card--hover { transition: border-color .2s, box-shadow .2s; } html.v4 .k-card--hover:hover { background: #fff; border-color: var(--kz-line-strong); box-shadow: var(--kz-sh-2); transform: none; } html.v4 .k-card p { margin: 0; color: var(--kz-muted); font-size: 15px; line-height: 1.6; } html.v4 .k-section--dark .k-card, html.v4 .k-hero .k-card { background: var(--kz-d-fill); border-color: var(--kz-d-line); } html.v4 .k-section--dark .k-card:hover { background: rgba(255, 255, 255, .06); border-color: rgba(125, 211, 252, .24); box-shadow: none; transform: none; } html.v4 .k-section--dark .k-card p { color: var(--kz-d-muted); } html.v4 .k-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--kz-r-sm); background: var(--kz-blue-50); border: 1px solid var(--kz-blue-100); color: var(--kz-blue); font-size: 16px; box-shadow: none; margin-bottom: 16px; } html.v4 .k-icon i { color: inherit; } html.v4 .k-icon--dark { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; } html.v4 .k-section--dark .k-icon, html.v4 .k-hero .k-icon, html.v4 .k-cta .k-icon { background: rgba(255, 255, 255, .05); border: 1px solid var(--kz-d-line); color: var(--kz-sky); box-shadow: none; } html.v4 .k-section--dark .k-icon i, html.v4 .k-hero .k-icon i { color: var(--kz-sky); } html.v4 .k-grid { display: grid; gap: 24px; } @media (max-width: 767px) { html.v4 .k-grid { gap: 16px; } } html.v4 .k-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } html.v4 .k-checks li { position: relative; padding-left: 28px; line-height: 1.5; font-size: 15px; color: var(--kz-text); } html.v4 .k-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--kz-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat; } html.v4 .k-checks li.is-off { color: var(--kz-muted); } html.v4 .k-checks li.is-off::before { background: var(--kz-bg-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a93a3'%3E%3Cpath d='m6 5 4 4 4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z'/%3E%3C/svg%3E") center/12px no-repeat; } html.v4 .k-section--dark .k-checks li, html.v4 .k-hero .k-checks li, html.v4 .k-cta .k-checks li { color: var(--kz-d-text); } html.v4 .k-section--dark .k-checks li::before, html.v4 .k-hero .k-checks li::before, html.v4 .k-cta .k-checks li::before { background-color: rgba(125, 211, 252, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237dd3fc'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E"); } html.v4 .k-mini { display: flex; gap: 14px; height: 100%; padding: 16px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; } html.v4 .k-mini .k-icon { width: 36px; height: 36px; flex: 0 0 36px; margin: 0; font-size: 14px; } html.v4 .k-mini h3, html.v4 .k-mini strong { display: block; margin: 0 0 4px; font-family: var(--kz-font); font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--kz-ink); } html.v4 .k-mini p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-muted); } html.v4 .k-section--dark .k-mini { background: var(--kz-d-fill); border-color: var(--kz-d-line); } html.v4 .k-section--dark .k-mini h3, html.v4 .k-section--dark .k-mini strong { color: #fff; } html.v4 .k-section--dark .k-mini p { color: var(--kz-d-muted); } html.v4 .k-feature { display: flex; gap: 16px; } html.v4 .k-feature .k-icon { margin: 0; } html.v4 .k-feature p { margin: 0; font-size: 15px; color: var(--kz-muted); line-height: 1.6; } html.v4 .k-feat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; font-size: 14.5px; font-weight: 500; color: var(--kz-ink); } html.v4 .k-feat i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--kz-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--kz-blue-50); color: var(--kz-blue); font-size: 13px; } html.v4 .k-chip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; } html.v4 .k-chip i { font-size: 18px; color: var(--kz-ink); width: 24px; text-align: center; } html.v4 .k-chip strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--kz-ink); } html.v4 .k-chip small { display: block; font-size: 13px; color: var(--kz-muted); } html.v4 .k-plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html.v4 .k-plist li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; font-family: var(--kz-mono); font-size: 12px; line-height: 1.4; color: var(--kz-muted); } html.v4 .k-plist i { flex: 0 0 20px; width: 20px; text-align: center; font-size: 17px; color: var(--kz-ink); } html.v4 .k-plist strong { display: block; font-family: var(--kz-font); font-size: 14.5px; font-weight: 600; color: var(--kz-ink); margin-bottom: 1px; } html.v4 .k-plist--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 991px) { html.v4 .k-plist--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { html.v4 .k-plist, html.v4 .k-plist--4 { grid-template-columns: minmax(0, 1fr); } } html.v4 .k-subhead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--kz-font); font-size: 16px; font-weight: 650; color: var(--kz-ink); } html.v4 .k-kv { border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; overflow: hidden; } html.v4 .k-kv__title { margin: 0; padding: 12px 16px; background: var(--kz-bg-soft); border-bottom: 1px solid var(--kz-line-2); font-family: var(--kz-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-kv__row { padding: 10px 16px; font-size: 14px; } html.v4 .k-kv dd { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- 6. Hero'lar --------------------------------------------------------------------- */ html.v4 .k-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--kz-n-950); color: var(--kz-d-text); padding: 72px 0 64px; box-shadow: inset 0 -1px 0 var(--kz-d-line); } html.v4 .k-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; animation: none; background: radial-gradient(820px 480px at 78% -12%, rgba(37, 99, 235, .34), transparent 64%), radial-gradient(560px 380px at 104% 70%, rgba(34, 211, 238, .08), transparent 60%), radial-gradient(520px 360px at -8% 110%, rgba(37, 99, 235, .12), transparent 62%); } html.v4 .k-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 20%, #000 20%, transparent 75%); } html.v4 .k-hero .k-h1 { color: #fff; } html.v4 .k-hero .k-lead { color: var(--kz-d-soft); max-width: 560px; } html.v4 .k-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } html.v4 .k-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 24px; } html.v4 .k-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--kz-d-muted); } html.v4 .k-hero__meta span { display: inline-flex; align-items: center; gap: 8px; } html.v4 .k-hero__meta i { color: var(--kz-ok-d); font-size: 13px; } html.v4 .k-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; padding-top: 0; border-top: 1px solid var(--kz-d-line); } html.v4 .k-hero__stats > div { padding: 20px 24px 0 0; } html.v4 .k-hero__stats strong { display: block; font-family: var(--kz-font); font-size: 1.75rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; } html.v4 .k-hero__stats span { font-size: 14px; color: var(--kz-d-muted); } @media (max-width: 991px) { html.v4 .k-hero { padding: 48px 0 48px; } html.v4 .k-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } @media (max-width: 767px) { html.v4 .k-hero { padding: 40px 0; } html.v4 .k-hero__actions { margin: 24px 0 20px; } html.v4 .k-hero__actions .k-btn { flex: 1 1 100%; } html.v4 .k-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; } html.v4 .k-hero__stats > div { padding: 16px 12px 0 0; } html.v4 .k-hero__stats strong { font-size: 1.5rem; } } /* Açık hero (ürün, liste, kurumsal, blog, sepet) */ html.v4 .k-pd-hero { position: relative; isolation: isolate; padding: 24px 0 48px; background: var(--kz-bg-soft); border-bottom: 1px solid var(--kz-line); } html.v4 .k-pd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(10, 16, 32, .09) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(ellipse 55% 90% at 100% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 90% at 100% 0%, #000 10%, transparent 70%); } html.v4 .k-pd-hero .k-lead, html.v4 .k-pd-desc { font-size: 1.0625rem; line-height: 1.6; color: var(--kz-muted); max-width: 680px; } html.v4 .k-pd-desc { margin: 0 0 24px; } @media (max-width: 767px) { html.v4 .k-pd-hero { padding: 16px 0 32px; } } html.v4 .k-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 13.5px; color: var(--kz-muted); } html.v4 .k-crumbs a { color: var(--kz-muted) !important; text-decoration: none !important; } html.v4 .k-crumbs a:hover { color: var(--kz-ink) !important; } html.v4 .k-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--kz-line-strong); } html.v4 .k-crumbs li[aria-current] { color: var(--kz-ink); font-weight: 500; } html.v4 .k-hero .k-crumbs, html.v4 .k-hero .k-crumbs a { color: var(--kz-d-muted) !important; } html.v4 .k-hero .k-crumbs li[aria-current] { color: #fff; } html.v4 .k-pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } @media (max-width: 1099px) { html.v4 .k-pd-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; } } @media (max-width: 991px) { html.v4 .k-pd-grid { grid-template-columns: minmax(0, 1fr); } } html.v4 .k-pd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } html.v4 .k-pd-logo { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r-sm); margin-right: 4px; } html.v4 .k-pd-logo img { width: auto !important; height: auto !important; max-width: 112px; max-height: 20px; object-fit: contain; } html.v4 .k-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; margin-bottom: 24px; overflow: hidden; } html.v4 .k-spec { padding: 12px 16px; border-right: 1px solid var(--kz-line-2); } html.v4 .k-spec:last-child { border-right: 0; } html.v4 .k-spec span { display: block; font-family: var(--kz-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--kz-muted); margin-bottom: 4px; } html.v4 .k-spec strong { display: block; font-size: 15px; font-weight: 600; color: var(--kz-ink); line-height: 1.35; } @media (max-width: 767px) { html.v4 .k-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.v4 .k-spec:nth-child(2) { border-right: 0; } html.v4 .k-spec:nth-child(-n+2) { border-bottom: 1px solid var(--kz-line-2); } html.v4 .k-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.v4 .k-specs--3 .k-spec { padding: 10px 12px; border-bottom: 0; } html.v4 .k-specs--3 .k-spec:nth-child(2) { border-right: 1px solid var(--kz-line-2); } } html.v4 .k-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } html.v4 .k-pd-req { margin-top: 24px; padding: 16px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; } html.v4 .k-pd-req__head strong { font-family: var(--kz-font); font-weight: 650; } html.v4 .k-assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--kz-text); } html.v4 .k-assure i { color: var(--kz-ok); } /* Terminal görseli */ html.v4 .k-term { background: var(--kz-n-850); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--kz-r-lg); box-shadow: var(--kz-sh-d); overflow: hidden; font-family: var(--kz-mono); font-size: 13px; } html.v4 .k-term__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--kz-d-line); color: var(--kz-d-muted); font-size: 12px; } html.v4 .k-term__bar span, html.v4 .k-term__bar span:nth-child(1), html.v4 .k-term__bar span:nth-child(2), html.v4 .k-term__bar span:nth-child(3) { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } html.v4 .k-term__bar b { margin-left: auto; font-weight: 500; } html.v4 .k-term__body { padding: 18px 20px 20px; line-height: 1.85; color: var(--kz-d-text); overflow-x: auto; white-space: nowrap; } html.v4 .k-term__body .p { color: var(--kz-blue-300); } html.v4 .k-term__body .c { color: var(--kz-d-muted); } html.v4 .k-term__body .ok { color: var(--kz-ok-d); } html.v4 .k-term__foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--kz-d-line); background: rgba(255, 255, 255, .02); font-family: var(--kz-font); } html.v4 .k-term__foot .k-icon { margin: 0; width: 36px; height: 36px; flex-basis: 36px; background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .25); color: var(--kz-ok-d); } html.v4 .k-term__foot .k-icon i { color: var(--kz-ok-d); } html.v4 .k-term__foot strong { display: block; color: #fff; font-size: 14px; font-weight: 600; } html.v4 .k-term__foot small { color: var(--kz-d-muted); font-size: 12.5px; } @media (max-width: 767px) { html.v4 .k-term { font-size: 12px; } } /* --------------------------------------------------------------------- 7. Ürünler: kart, fiyat, sekme, araç çubuğu, tablo, varyant --------------------------------------------------------------------- */ html.v4 .k-pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r); padding: 20px; height: 100%; box-shadow: none; transform: none; transition: border-color .2s, box-shadow .2s; } html.v4 .k-pcard:hover { background: #fff; border-color: var(--kz-line-strong); box-shadow: var(--kz-sh-2); transform: none; } html.v4 .k-pcard--featured, html.v4 .k-pcard--featured:hover { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box; box-shadow: 0 24px 48px -36px rgba(37, 99, 235, .6); } html.v4 .k-pcard__ribbon, html.v4 .k-pcard__ribbon.k-badge--dark { position: absolute; top: -11px; left: 18px; height: 22px; padding: 0 8px; background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; font-family: var(--kz-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; } html.v4 .k-pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 16px; } html.v4 .k-pcard__brand { display: inline-flex; align-items: center; width: 108px; height: 26px; } html.v4 .k-pcard__brand img { width: auto !important; height: auto !important; max-width: 108px; max-height: 24px; object-fit: contain; } html.v4 .k-logo-text { font-family: var(--kz-font); font-weight: 650; letter-spacing: -.02em; color: var(--kz-ink); } html.v4 .k-pcard__title { font-family: var(--kz-font); font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; margin: 0 0 8px; } html.v4 .k-pcard__title a { color: var(--kz-ink) !important; text-decoration: none !important; } html.v4 .k-pcard__title a::after { border-radius: var(--kz-r); } html.v4 .k-pcard__title a:focus-visible { outline: 0 !important; } html.v4 .k-pcard__title a:focus-visible::after { outline: 2px solid var(--kz-blue); outline-offset: 2px; } html.v4 .k-pcard__sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--kz-muted); margin: 0 0 16px; } html.v4 .k-pcard__sub i { font-size: 12px; color: var(--kz-subtle); } html.v4 .k-pcard .k-checks { gap: 8px; margin-bottom: 20px; } html.v4 .k-pcard .k-checks li { font-size: 14px; padding-left: 26px; } html.v4 .k-pcard .k-checks li::before { width: 18px; height: 18px; top: 1px; } html.v4 .k-pcard__price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--kz-line-2); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } html.v4 .k-price__old { font-size: 13px; color: var(--kz-muted); text-decoration: line-through; } html.v4 .k-price__now, html.v4 .k-pcard .k-price__now { font-family: var(--kz-font); font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: var(--kz-ink); line-height: 1.15; font-variant-numeric: tabular-nums; } html.v4 .k-price__now small { font-family: var(--kz-font); font-size: 13px; font-weight: 500; color: var(--kz-muted); letter-spacing: 0; } /* Segment sekmeleri */ html.v4 .k-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--kz-bg-sunk); border: 1px solid var(--kz-line); border-radius: 10px; flex-wrap: wrap; } html.v4 .k-tabs button { border: 0; background: transparent; color: var(--kz-text); font-family: var(--kz-font); font-size: 14px; font-weight: 550; height: 36px; padding: 0 14px; border-radius: 7px; cursor: pointer; box-shadow: none; transition: background-color .15s, color .15s, box-shadow .15s; } html.v4 .k-tabs button:hover { color: var(--kz-ink); } html.v4 .k-tabs button.is-active { background: #fff; color: var(--kz-ink); box-shadow: var(--kz-sh-1), 0 0 0 1px var(--kz-line); } html.v4 .k-tabs button span { font-family: var(--kz-mono); font-size: 11.5px; color: var(--kz-muted); font-weight: 500; margin-left: 4px; } @media (max-width: 767px) { html.v4 .k-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } html.v4 .k-tabs::-webkit-scrollbar { display: none; } html.v4 .k-tabs button { flex: 0 0 auto; height: 40px; } } html.v4 .k-toolbar { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--kz-line); } html.v4 .k-toolbar .k-tabs button { height: 32px; padding: 0 12px; font-size: 13.5px; } @media (pointer: coarse) { html.v4 .k-toolbar .k-tabs button { height: 40px; } } html.v4 .k-select { height: 38px; border: 1px solid var(--kz-line); border-radius: var(--kz-r-sm); font-family: var(--kz-font); font-size: 14px; color: var(--kz-ink); } html.v4 .k-select:focus { outline: 0; border-color: var(--kz-blue); box-shadow: var(--kz-ring); } html.v4 .k-fchip { border-radius: var(--kz-r-xs); } html.v4 .k-ptable thead th { font-family: var(--kz-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; } html.v4 .k-ptable__price strong { font-family: var(--kz-font); font-weight: 650; font-variant-numeric: tabular-nums; } html.v4 .k-variant { background: var(--kz-bg-sunk); border-color: var(--kz-line); border-radius: 10px; padding: 3px; } html.v4 .k-variant__opt { border-radius: 7px; } html.v4 .k-variant__opt.is-current { box-shadow: var(--kz-sh-1), 0 0 0 1px var(--kz-line); } /* Liste/grid: JS'nin hidden özniteliği */ html.v4 .k-page [hidden] { display: none !important; } /* --------------------------------------------------------------------- 8. Ürün detay: satın alma, alt gezinme, mobil çubuk --------------------------------------------------------------------- */ html.v4 .k-buy { position: sticky; top: calc(var(--k-header-h) + 16px); background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r-lg); box-shadow: var(--kz-sh-2); overflow: hidden; } html.v4 .k-buy__body { padding: 20px 24px 24px; } html.v4 .k-buy__label { font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-buy__price strong { font-family: var(--kz-font); font-size: 40px; font-weight: 650; letter-spacing: -.045em; color: var(--kz-ink); line-height: 1; font-variant-numeric: tabular-nums; } html.v4 .k-buy__note { border-radius: var(--kz-r-sm); background: var(--kz-bg-soft); border-color: var(--kz-line-2); } html.v4 .k-buy__list { background: var(--kz-bg-soft); border-top: 1px solid var(--kz-line-2); } html.v4 .k-buy__list i { color: var(--kz-ok); } html.v4 .k-buy__pay { color: var(--kz-subtle); } @media (max-width: 991px) { html.v4 .k-buy { position: static; box-shadow: none; } } html.v4 .k-subnav { position: sticky; top: var(--k-header-h); z-index: 90; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--kz-line); } html.v4 .k-subnav .container { height: 52px; } html.v4 .k-subnav nav a { height: 36px; padding: 0 12px; border-radius: var(--kz-r-sm); font-size: 14px; font-weight: 500; color: var(--kz-muted) !important; } html.v4 .k-subnav nav a:hover { background: var(--kz-bg-soft); color: var(--kz-ink) !important; } html.v4 .k-subnav nav a.is-active { background: var(--kz-bg-sunk); color: var(--kz-ink) !important; } html.v4 .k-subnav__buy strong { font-family: var(--kz-font); font-weight: 650; font-variant-numeric: tabular-nums; } html.v4 [id].k-anchor { scroll-margin-top: calc(var(--k-header-h) + 68px); } @media (max-width: 991px) { html.v4 .k-mbuy { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--kz-line); box-shadow: 0 -12px 32px -20px rgba(10, 16, 32, .3); } html.v4 .k-mbuy strong { font-family: var(--kz-font); font-weight: 650; font-variant-numeric: tabular-nums; } } /* Özellik ızgarası, zaman çizelgesi */ html.v4 .k-timeline { border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; } html.v4 .k-timeline__item { padding: 20px; } html.v4 .k-timeline__item::before { height: 2px; background: var(--kz-line); } html.v4 .k-timeline__item:first-child::before { background: var(--kz-blue); } html.v4 .k-timeline__when { height: 22px; border-radius: var(--kz-r-xs); font-family: var(--kz-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; } html.v4 .k-timeline__item h3 { font-family: var(--kz-font); font-size: 15.5px; font-weight: 600; } html.v4 .k-timeline__item h3::before { font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; color: var(--kz-blue); } /* --------------------------------------------------------------------- 9. İçerik kalıpları: adımlar, karşılaştırma, SSS, CTA, blog, logolar, istatistik --------------------------------------------------------------------- */ html.v4 .k-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: kstep; position: relative; } html.v4 .k-steps::before { content: ""; position: absolute; top: 18px; left: 18px; right: 18px; height: 0; border-top: 1px dashed var(--kz-line-strong); background: none; } html.v4 .k-step { position: relative; counter-increment: kstep; } html.v4 .k-step::before, html.v4 .k-step:first-child::before, html.v4 .k-steps .k-step::before { content: counter(kstep, decimal-leading-zero); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--kz-r-sm); background: #fff; border: 1px solid var(--kz-line); color: var(--kz-blue); font-family: var(--kz-mono); font-size: 12.5px; font-weight: 500; margin-bottom: 16px; box-shadow: 0 0 0 6px var(--kz-bg); } html.v4 .k-section--alt .k-step::before { box-shadow: 0 0 0 6px var(--kz-bg-soft); } html.v4 .k-step p { font-size: 15px; line-height: 1.6; color: var(--kz-muted); margin: 0; } @media (max-width: 991px) { html.v4 .k-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } html.v4 .k-steps::before { display: none; } } @media (max-width: 575px) { html.v4 .k-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } html.v4 .k-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; } html.v4 .k-step::before { grid-row: span 3; margin: 0; } } html.v4 .k-compare { border: 1px solid var(--kz-line); border-radius: var(--kz-r); overflow: hidden; background: #fff; box-shadow: none; } html.v4 .k-compare table { width: 100%; border-collapse: collapse; font-size: 15px; } html.v4 .k-compare th, html.v4 .k-compare td { padding: 14px 18px; border-bottom: 1px solid var(--kz-line-2); text-align: left; vertical-align: middle; } html.v4 .k-compare thead th { background: var(--kz-bg-soft) !important; background-image: none !important; color: var(--kz-ink) !important; font-family: var(--kz-font); font-size: 15px; font-weight: 650; border-bottom: 1px solid var(--kz-line) !important; } html.v4 .k-compare thead th small { display: block; font-family: var(--kz-font); font-size: 13px; font-weight: 400; color: var(--kz-muted); } html.v4 .k-compare thead th.is-hl { background: var(--kz-ink) !important; background-image: none !important; color: #fff !important; } html.v4 .k-compare thead th.is-hl small { color: var(--kz-d-muted); } html.v4 .k-compare td:first-child { color: var(--kz-ink); font-weight: 500; } html.v4 .k-compare td.is-hl { background: #f7faff; } html.v4 .k-compare tr:last-child td { border-bottom: 0; } html.v4 .k-yes, html.v4 .k-no { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; } html.v4 .k-yes { color: var(--kz-ok); } html.v4 .k-no { color: var(--kz-muted); } @media (max-width: 767px) { html.v4 .k-compare { overflow-x: auto; } html.v4 .k-compare table { min-width: 560px; } html.v4 .k-compare th, html.v4 .k-compare td { padding: 12px 14px; font-size: 14px; } } html.v4 .k-faq { border-top: 1px solid var(--kz-line); } html.v4 .k-faq details { border-bottom: 1px solid var(--kz-line); } html.v4 .k-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 18px 0; font-family: var(--kz-font); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--kz-ink); cursor: pointer; letter-spacing: -.01em; } html.v4 .k-faq summary::-webkit-details-marker { display: none; } html.v4 .k-faq summary::after { content: ""; flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--kz-r-sm); border: 1px solid var(--kz-line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230a1020'%3E%3Cpath d='M9.25 4h1.5v5.25H16v1.5h-5.25V16h-1.5v-5.25H4v-1.5h5.25z'/%3E%3C/svg%3E") center/13px no-repeat; transition: transform .2s var(--kz-ease), background-color .2s; } html.v4 .k-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--kz-bg-sunk); } html.v4 .k-faq summary:hover { color: var(--kz-blue); } html.v4 .k-faq__a { padding: 0 48px 20px 0; color: var(--kz-muted); font-size: 15px; line-height: 1.7; } html.v4 .k-faq__a p:last-child { margin-bottom: 0; } html.v4 .k-faq--compact summary { padding: 16px 0; font-size: 15.5px; } @media (max-width: 767px) { html.v4 .k-faq__a { padding-right: 0; } } html.v4 .k-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--kz-r-xl); background: var(--kz-n-900); color: var(--kz-d-soft); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; box-shadow: none; border: 1px solid var(--kz-n-800); } html.v4 .k-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 300px at 100% 0%, rgba(37, 99, 235, .42), transparent 62%), radial-gradient(420px 260px at 0% 120%, rgba(34, 211, 238, .12), transparent 60%); } html.v4 .k-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); } html.v4 .k-cta .k-h2 { color: #fff; margin-bottom: 8px; max-width: 640px; } html.v4 .k-cta p { margin: 0; font-size: 16px; max-width: 560px; color: var(--kz-d-soft); } html.v4 .k-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 767px) { html.v4 .k-cta { padding: 28px 20px; border-radius: var(--kz-r-lg); } html.v4 .k-cta__actions, html.v4 .k-cta__actions .k-btn { width: 100%; } } html.v4 .k-post { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: inherit; } html.v4 .k-post__img { aspect-ratio: 16 / 9; border-radius: var(--kz-r); overflow: hidden; background: var(--kz-bg-sunk); border: 1px solid var(--kz-line); margin-bottom: 16px; } html.v4 .k-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--kz-ease); } html.v4 .k-post:hover .k-post__img img { transform: scale(1.02); } html.v4 .k-post__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-family: var(--kz-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-post__meta b { color: var(--kz-blue); font-weight: 500; } html.v4 .k-post h3 { font-family: var(--kz-font); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; color: var(--kz-ink); margin: 0 0 8px; transition: color .15s; } html.v4 .k-post:hover h3 { color: var(--kz-blue); } html.v4 .k-post p { font-size: 15px; color: var(--kz-muted); line-height: 1.6; margin: 0; } html.v4 .k-logos__label { font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-logos__items img { filter: grayscale(1); opacity: .55; } html.v4 .k-stats { border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: #fff; } html.v4 .k-stat strong { font-family: var(--kz-font); font-weight: 650; font-variant-numeric: tabular-nums; } /* İki sütun düzenleri */ html.v4 .k-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: start; } html.v4 .k-split__aside { position: sticky; top: calc(var(--k-header-h) + 32px); } html.v4 .k-cols { gap: 40px; } @media (max-width: 991px) { html.v4 .k-split { grid-template-columns: minmax(0, 1fr); gap: 24px; } html.v4 .k-split__aside { position: static; } html.v4 .k-cols { gap: 28px; } } /* --------------------------------------------------------------------- 10. v4 bileşenleri (kz-*) --------------------------------------------------------------------- */ /* Duyuru hapı */ html.v4 .kz-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 32px; padding: 3px 12px 3px 3px; margin-bottom: 24px; border-radius: 999px; border: 1px solid var(--kz-d-line); background: rgba(255, 255, 255, .04); color: var(--kz-d-text) !important; font-size: 13.5px; line-height: 1.3; text-decoration: none !important; transition: border-color .15s, background-color .15s; } html.v4 .kz-pill:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); } html.v4 .kz-pill__tag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--kz-blue); color: #fff; font-family: var(--kz-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } html.v4 .kz-pill i { font-size: 11px; color: var(--kz-d-muted); transition: transform .15s var(--kz-ease); } html.v4 .kz-pill:hover i { transform: translateX(2px); } html.v4 .kz-pill--light { border-color: var(--kz-line); background: #fff; color: var(--kz-text) !important; } /* Display başlık (yalnız ana sayfa H1) */ html.v4 .kz-display { font-family: var(--kz-font); font-size: clamp(2.375rem, 1.35rem + 4vw, 4.25rem); font-weight: 650; line-height: 1.02; letter-spacing: -.045em; color: #fff; margin: 0 0 20px; text-wrap: balance; } /* Ana sayfa hero */ html.v4 .kz-hero { padding: 80px 0 0; } html.v4 .kz-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 64px; align-items: center; } html.v4 .kz-hero__copy { max-width: 600px; } html.v4 .kz-hero__lead { font-size: 1.125rem; line-height: 1.6; color: var(--kz-d-soft); max-width: 540px; margin: 0; } html.v4 .kz-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 24px; } html.v4 .kz-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--kz-d-muted); } html.v4 .kz-hero__meta li { display: inline-flex; align-items: center; gap: 8px; } html.v4 .kz-hero__meta i { color: var(--kz-ok-d); font-size: 13px; } html.v4 .kz-hero__visual { position: relative; padding: 28px 0 88px; } html.v4 .kz-hero__visual > .kz-window { margin-right: 40px; } html.v4 .kz-hero__foot { margin-top: 64px; } @media (max-width: 991px) { html.v4 .kz-hero { padding-top: 48px; } html.v4 .kz-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } html.v4 .kz-hero__visual { max-width: 620px; padding: 28px 0 88px; } html.v4 .kz-hero__foot { margin-top: 40px; } } @media (max-width: 767px) { html.v4 .kz-hero { padding-top: 32px; } html.v4 .kz-hero__actions { margin: 24px 0 20px; } html.v4 .kz-hero__actions .k-btn { flex: 1 1 100%; } } /* Yüzen kartlar (hero görseli üstünde) */ html.v4 .kz-float { position: absolute; z-index: 2; } html.v4 .kz-float--tl { top: 0; left: -28px; } html.v4 .kz-float--br { right: 0; bottom: 0; } @media (max-width: 1199px) { html.v4 .kz-float--tl { left: -8px; } } @media (max-width: 575px) { html.v4 .kz-float { display: none; } html.v4 .kz-hero__visual { padding: 0 0 8px; } html.v4 .kz-hero__visual > .kz-window { margin-right: 0; } } /* Uygulama penceresi (mockup kabuğu) */ html.v4 .kz-window { position: relative; border-radius: var(--kz-r-lg); background: var(--kz-n-850); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--kz-sh-d); overflow: hidden; color: var(--kz-d-text); font-size: 13.5px; line-height: 1.5; text-align: left; } html.v4 .kz-window__bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--kz-d-line); background: rgba(255, 255, 255, .02); } html.v4 .kz-window__bar > i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } html.v4 .kz-window__title { margin-left: 10px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--kz-mono); font-size: 12px; color: var(--kz-d-muted); } html.v4 .kz-window__meta { margin-left: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--kz-mono); font-size: 11px; color: var(--kz-d-muted); } html.v4 .kz-window__body { padding: 20px; } html.v4 .kz-window--light { background: #fff; border-color: var(--kz-line); box-shadow: var(--kz-sh-3); color: var(--kz-text); } html.v4 .kz-window--light .kz-window__bar { background: var(--kz-bg-soft); border-bottom-color: var(--kz-line); } html.v4 .kz-window--light .kz-window__bar > i { background: #d5dbe5; } html.v4 .kz-window--light .kz-window__title, html.v4 .kz-window--light .kz-window__meta { color: var(--kz-muted); } /* Durum çipi + nokta */ html.v4 .kz-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--kz-r-xs); font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .06); border: 1px solid var(--kz-d-line); color: var(--kz-d-text); } html.v4 .kz-chip--ok { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .28); color: var(--kz-ok-d); } html.v4 .kz-chip--warn { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); color: var(--kz-warn-d); } html.v4 .kz-window--light .kz-chip--ok, html.v4 .kz-cert .kz-chip--ok { background: var(--kz-ok-bg); border-color: var(--kz-ok-line); color: var(--kz-ok); } html.v4 .kz-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--kz-subtle); } html.v4 .kz-dot--ok { background: var(--kz-ok-d); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); } html.v4 .kz-dot--err { background: var(--kz-err-d); box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); } html.v4 .kz-dot--warn { background: var(--kz-warn-d); box-shadow: 0 0 0 3px rgba(251, 191, 36, .18); } /* İmzalama paneli */ html.v4 .kz-sign__file { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--kz-d-line); border-radius: var(--kz-r); background: rgba(255, 255, 255, .03); } html.v4 .kz-sign__ficon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--kz-r-sm); background: rgba(37, 99, 235, .18); color: var(--kz-blue-300); font-size: 15px; } html.v4 .kz-sign__fname { min-width: 0; flex: 1 1 auto; } html.v4 .kz-sign__fname b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--kz-mono); font-size: 13px; font-weight: 500; color: #fff; } html.v4 .kz-sign__fname small { font-size: 12px; color: var(--kz-d-muted); } html.v4 .kz-sign__rows { display: grid; gap: 0; margin: 16px 0; } html.v4 .kz-sign__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--kz-d-line); } html.v4 .kz-sign__rows dt { font-weight: 400; color: var(--kz-d-muted); font-size: 12.5px; } html.v4 .kz-sign__rows dd { margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--kz-mono); font-size: 12.5px; color: var(--kz-d-text); text-align: right; } html.v4 .kz-sign__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; } html.v4 .kz-sign__bar span { display: block; height: 100%; background: var(--kz-grad); transform-origin: 0 50%; } html.v4 .kz-sign__done { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--kz-ok-d); font-weight: 500; } html.v4 .kz-sign__done small { margin-left: auto; font-family: var(--kz-mono); font-size: 11.5px; color: var(--kz-d-muted); font-weight: 400; } @media (prefers-reduced-motion: no-preference) { html.v4 .kz-sign__bar span { animation: kzFill 2.2s var(--kz-ease) .5s both; } html.v4 .kz-sign__done { animation: kzFade .4s var(--kz-ease) 2.6s both; } } @keyframes kzFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes kzFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Sertifika kartı */ html.v4 .kz-cert { width: 290px; max-width: 100%; padding: 16px; border-radius: var(--kz-r); background: #fff; border: 1px solid var(--kz-line); box-shadow: var(--kz-sh-3); color: var(--kz-text); font-size: 13px; text-align: left; } html.v4 .kz-cert__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } html.v4 .kz-cert__seal { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--kz-r-sm); background: var(--kz-ink); color: #fff; font-size: 15px; } html.v4 .kz-cert__name { min-width: 0; flex: 1 1 auto; } html.v4 .kz-cert__name b { display: block; font-size: 13.5px; font-weight: 600; color: var(--kz-ink); line-height: 1.3; } html.v4 .kz-cert__name small { font-family: var(--kz-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-cert__rows { margin: 0; display: grid; gap: 0; } html.v4 .kz-cert__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--kz-line-2); } html.v4 .kz-cert__rows dt { font-weight: 400; color: var(--kz-muted); } html.v4 .kz-cert__rows dd { margin: 0; font-weight: 600; color: var(--kz-ink); text-align: right; } html.v4 .kz-cert__fp { margin-top: 10px; padding: 8px 10px; border-radius: var(--kz-r-sm); background: var(--kz-bg-soft); font-family: var(--kz-mono); font-size: 10.5px; color: var(--kz-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Bildirim (toast) */ html.v4 .kz-toast { display: flex; align-items: center; gap: 12px; width: 280px; max-width: 100%; padding: 12px 14px; border-radius: var(--kz-r); background: #fff; border: 1px solid var(--kz-line); box-shadow: var(--kz-sh-3); text-align: left; } html.v4 .kz-toast__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--kz-ok-bg); color: var(--kz-ok); font-size: 14px; } html.v4 .kz-toast b { display: block; font-size: 13.5px; font-weight: 600; color: var(--kz-ink); line-height: 1.3; } html.v4 .kz-toast small { font-size: 12px; color: var(--kz-muted); } /* SmartScreen önce / sonra */ html.v4 .kz-ss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } html.v4 .kz-ss__item { margin: 0; display: flex; flex-direction: column; gap: 12px; } html.v4 .kz-ss__cap { display: flex; align-items: center; gap: 10px; font-family: var(--kz-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-ss__note { margin: 0; font-size: 14.5px; color: var(--kz-muted); line-height: 1.55; } html.v4 .kz-ss__note strong { color: var(--kz-ink); } html.v4 .kz-dialog { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; border-radius: var(--kz-r); overflow: hidden; text-align: left; font-size: 14px; line-height: 1.5; } html.v4 .kz-dialog__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; font-size: 12px; } html.v4 .kz-dialog__body { flex: 1 1 auto; padding: 20px 22px; } html.v4 .kz-dialog__title { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } html.v4 .kz-dialog__title i { margin-top: 3px; font-size: 18px; } html.v4 .kz-dialog__text { margin: 0 0 16px; font-size: 13.5px; } html.v4 .kz-dialog__kv { margin: 0 0 18px; display: grid; gap: 6px; font-size: 13.5px; } html.v4 .kz-dialog__kv > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; } html.v4 .kz-dialog__kv dt { font-weight: 400; } html.v4 .kz-dialog__kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } html.v4 .kz-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; } html.v4 .kz-fakebtn { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 32px; padding: 0 12px; border-radius: var(--kz-r-xs); font-size: 13px; font-weight: 600; } /* Uyarı penceresi (imzasız) */ html.v4 .kz-dialog--warn { background: var(--kz-n-850); border: 1px solid var(--kz-n-700); color: var(--kz-d-soft); box-shadow: 0 24px 48px -32px rgba(10, 16, 32, .7); } html.v4 .kz-dialog--warn .kz-dialog__bar { background: rgba(251, 191, 36, .1); border-bottom: 1px solid rgba(251, 191, 36, .22); color: var(--kz-warn-d); font-family: var(--kz-mono); letter-spacing: .04em; } html.v4 .kz-dialog--warn .kz-dialog__title { color: #fff; } html.v4 .kz-dialog--warn .kz-dialog__title i { color: var(--kz-warn-d); } html.v4 .kz-dialog--warn dt { color: var(--kz-d-muted); } html.v4 .kz-dialog--warn dd { color: #fff; } html.v4 .kz-dialog--warn .is-bad { color: var(--kz-warn-d); } html.v4 .kz-dialog--warn .kz-fakebtn { border: 1px solid rgba(255, 255, 255, .2); color: var(--kz-d-text); } html.v4 .kz-dialog--warn .kz-fakebtn--pri { background: #fff; border-color: #fff; color: var(--kz-ink); } /* Onay penceresi (imzalı) */ html.v4 .kz-dialog--ok { background: #fff; border: 1px solid var(--kz-line); color: var(--kz-text); box-shadow: var(--kz-sh-3); } html.v4 .kz-dialog--ok .kz-dialog__bar { background: var(--kz-bg-soft); border-bottom: 1px solid var(--kz-line); color: var(--kz-muted); font-family: var(--kz-mono); letter-spacing: .04em; } html.v4 .kz-dialog--ok .kz-dialog__title { color: var(--kz-ink); } html.v4 .kz-dialog--ok .kz-dialog__title i { color: var(--kz-ok); } html.v4 .kz-dialog--ok dt { color: var(--kz-muted); } html.v4 .kz-dialog--ok dd { color: var(--kz-ink); } html.v4 .kz-dialog--ok .is-good { display: inline-flex; align-items: center; gap: 6px; color: var(--kz-ok); } html.v4 .kz-dialog--ok .kz-fakebtn { border: 1px solid var(--kz-line-strong); color: var(--kz-ink); } html.v4 .kz-dialog--ok .kz-fakebtn--pri { background: var(--kz-blue); border-color: var(--kz-blue); color: #fff; } @media (max-width: 767px) { html.v4 .kz-ss { grid-template-columns: minmax(0, 1fr); gap: 28px; } html.v4 .kz-dialog__body { padding: 18px; } } /* CI/CD adımları */ html.v4 .kz-pipe { border-radius: var(--kz-r); border: 1px solid var(--kz-d-line); background: rgba(5, 10, 22, .55); overflow: hidden; font-size: 13px; text-align: left; } html.v4 .kz-pipe__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--kz-d-line); font-family: var(--kz-mono); font-size: 11.5px; color: var(--kz-d-muted); } html.v4 .kz-pipe__head b { color: var(--kz-d-text); font-weight: 500; } html.v4 .kz-pipe__steps { list-style: none; margin: 0; padding: 6px 0; } html.v4 .kz-pipe__step { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; color: var(--kz-d-muted); } html.v4 .kz-pipe__step b { display: block; font-weight: 500; color: var(--kz-d-text); } html.v4 .kz-pipe__step small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--kz-mono); font-size: 11px; color: var(--kz-d-muted); } html.v4 .kz-pipe__step time { font-family: var(--kz-mono); font-size: 11px; color: var(--kz-d-muted); font-variant-numeric: tabular-nums; } html.v4 .kz-pipe__ico { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); } html.v4 .kz-pipe__step.is-done .kz-pipe__ico { border-color: transparent; background: var(--kz-ok-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23050a16'%3E%3Cpath d='M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat; } html.v4 .kz-pipe__step.is-active { background: rgba(37, 99, 235, .12); box-shadow: inset 2px 0 0 var(--kz-blue); } html.v4 .kz-pipe__step.is-active b { color: #fff; } html.v4 .kz-pipe__step.is-active .kz-pipe__ico { border-color: rgba(147, 197, 253, .25); border-top-color: var(--kz-blue-300); } @media (prefers-reduced-motion: no-preference) { html.v4 .kz-pipe__step.is-active .kz-pipe__ico { animation: kzSpin 1s linear infinite; } } @keyframes kzSpin { to { transform: rotate(360deg); } } /* Logo şeridi (kayan) */ html.v4 .kz-logos { display: flex; align-items: center; gap: 16px 40px; } html.v4 .kz-logos__label { flex: 0 0 auto; max-width: 220px; font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-marquee { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } html.v4 .kz-marquee__track { display: flex; width: max-content; } html.v4 .kz-marquee__group { display: flex; align-items: center; gap: 56px; padding-right: 56px; list-style: none; margin: 0; } html.v4 .kz-marquee__group li { flex: 0 0 auto; } html.v4 .kz-marquee a { display: inline-flex; align-items: center; min-height: 44px; } html.v4 .kz-marquee img { display: block; width: auto !important; height: 26px !important; max-width: none; max-height: 26px; filter: grayscale(1); opacity: .55; transition: opacity .2s, filter .2s; } html.v4 .kz-marquee a:hover img { filter: none; opacity: 1; } html.v4 .kz-marquee .k-logo-text { font-size: 18px; color: var(--kz-subtle); } @media (prefers-reduced-motion: no-preference) { html.v4 .kz-marquee__track { animation: kzMarquee 36s linear infinite; } html.v4 .kz-marquee:hover .kz-marquee__track { animation-play-state: paused; } } @keyframes kzMarquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { html.v4 .kz-marquee { -webkit-mask-image: none; mask-image: none; } html.v4 .kz-marquee__track { width: 100%; } html.v4 .kz-marquee__group { flex-wrap: wrap; justify-content: center; gap: 16px 40px; padding-right: 0; width: 100%; } html.v4 .kz-marquee__group[aria-hidden="true"] { display: none; } } @media (min-width: 992px) { html.v4 .kz-marquee--fit-lg { -webkit-mask-image: none; mask-image: none; } html.v4 .kz-marquee--fit-lg .kz-marquee__track { width: 100%; animation: none; } html.v4 .kz-marquee--fit-lg .kz-marquee__group { flex: 1 1 auto; justify-content: space-between; padding-right: 0; gap: 32px; } html.v4 .kz-marquee--fit-lg .kz-marquee__group[aria-hidden="true"] { display: none; } } @media (max-width: 991px) { html.v4 .kz-logos { flex-direction: column; align-items: stretch; gap: 12px; } html.v4 .kz-logos__label { max-width: none; text-align: center; } } /* İstatistik bandı */ html.v4 .kz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--kz-line); } html.v4 .kz-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 24px 24px 24px 0; } html.v4 .kz-stats__item + .kz-stats__item { padding-left: 24px; border-left: 1px solid var(--kz-line); } html.v4 .kz-stats dt { font-size: 14px; font-weight: 400; color: var(--kz-muted); line-height: 1.4; } html.v4 .kz-stats dd { margin: 0; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; color: var(--kz-ink); font-variant-numeric: tabular-nums; } html.v4 .kz-stats--dark { border-top-color: var(--kz-d-line); } html.v4 .kz-stats--dark .kz-stats__item + .kz-stats__item { border-left-color: var(--kz-d-line); } html.v4 .kz-stats--dark dt { color: var(--kz-d-muted); } html.v4 .kz-stats--dark dd { color: #fff; } @media (max-width: 767px) { html.v4 .kz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.v4 .kz-stats__item, html.v4 .kz-stats__item + .kz-stats__item { padding: 18px 12px 18px 0; border-left: 0; } html.v4 .kz-stats__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--kz-line); } html.v4 .kz-stats--dark .kz-stats__item:nth-child(even) { border-left-color: var(--kz-d-line); } html.v4 .kz-stats__item:nth-child(n+3) { border-top: 1px solid var(--kz-line); } html.v4 .kz-stats--dark .kz-stats__item:nth-child(n+3) { border-top-color: var(--kz-d-line); } } /* Bento ızgarası */ html.v4 .kz-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } html.v4 .kz-bento__cell { grid-column: span 4; display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: var(--kz-r-lg); border: 1px solid var(--kz-line); background: #fff; overflow: hidden; } html.v4 .kz-bento__cell--12 { grid-column: span 12; } html.v4 .kz-bento__cell--8 { grid-column: span 8; } html.v4 .kz-bento__cell--7 { grid-column: span 7; } html.v4 .kz-bento__cell--6 { grid-column: span 6; } html.v4 .kz-bento__cell--5 { grid-column: span 5; } html.v4 .kz-bento__cell--4 { grid-column: span 4; } html.v4 .kz-bento__cell--3 { grid-column: span 3; } html.v4 .kz-bento__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-blue); } html.v4 .kz-bento__cell h3 { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--kz-ink); } html.v4 .kz-bento__cell p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kz-muted); max-width: 520px; } html.v4 .kz-bento__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: var(--kz-r-sm); background: var(--kz-blue-50); border: 1px solid var(--kz-blue-100); color: var(--kz-blue); font-size: 15px; } html.v4 .kz-bento__media { margin-top: auto; padding-top: 24px; } html.v4 .kz-bento__media .kz-cert { width: 100%; max-width: 380px; } html.v4 .k-section--dark .kz-bento__cell { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border-color: var(--kz-d-line); } html.v4 .k-section--dark .kz-bento__cell h3 { color: #fff; } html.v4 .k-section--dark .kz-bento__cell p { color: var(--kz-d-muted); } html.v4 .k-section--dark .kz-bento__kicker { color: var(--kz-sky); } html.v4 .k-section--dark .kz-bento__ico { background: rgba(255, 255, 255, .05); border-color: var(--kz-d-line); color: var(--kz-sky); } @media (max-width: 1099px) { html.v4 .kz-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } html.v4 .kz-bento__cell, html.v4 .kz-bento__cell--4, html.v4 .kz-bento__cell--3 { grid-column: span 3; } html.v4 .kz-bento__cell--12, html.v4 .kz-bento__cell--8, html.v4 .kz-bento__cell--7, html.v4 .kz-bento__cell--6, html.v4 .kz-bento__cell--5 { grid-column: span 6; } } @media (max-width: 639px) { html.v4 .kz-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; } html.v4 .kz-bento__cell, html.v4 .kz-bento__cell[class*="kz-bento__cell--"] { grid-column: auto; padding: 20px; } /* Görselsiz küçük hücreler telefonda ikon + metin satırına dönüşür */ html.v4 .kz-bento__cell:has(> .kz-bento__ico) { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px; } html.v4 .kz-bento__cell:has(> .kz-bento__ico) > .kz-bento__ico { grid-row: span 2; margin: 0; } html.v4 .kz-bento__cell:has(> .kz-bento__ico) h3 { font-size: 1rem; margin-bottom: 4px; } html.v4 .kz-bento__cell:has(> .kz-bento__ico) p { font-size: 14px; } } /* Metin + görsel yan yana */ html.v4 .kz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } html.v4 .kz-split--top { align-items: start; } @media (min-width: 992px) { html.v4 .kz-split--reverse > :first-child { order: 2; } } @media (max-width: 991px) { html.v4 .kz-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* Özellik satırı (ikon + metin) */ html.v4 .kz-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } html.v4 .kz-flist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } html.v4 .kz-flist--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } html.v4 .kz-flist__item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } html.v4 .kz-flist__ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--kz-r-sm); background: var(--kz-blue-50); border: 1px solid var(--kz-blue-100); color: var(--kz-blue); font-size: 15px; } html.v4 .kz-flist h3, html.v4 .kz-flist__t { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--kz-ink); } html.v4 .kz-flist p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--kz-muted); } html.v4 .k-section--dark .kz-flist__ico { background: rgba(255, 255, 255, .05); border-color: var(--kz-d-line); color: var(--kz-sky); } html.v4 .k-section--dark .kz-flist h3, html.v4 .k-section--dark .kz-flist__t { color: #fff; } html.v4 .k-section--dark .kz-flist p { color: var(--kz-d-muted); } @media (max-width: 991px) { html.v4 .kz-flist--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { html.v4 .kz-flist--2col, html.v4 .kz-flist--3col { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* Plan / fiyat kartı */ html.v4 .kz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } html.v4 .kz-plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--kz-line); border-radius: var(--kz-r-lg); background: #fff; } html.v4 .kz-plan--hl { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box; box-shadow: 0 28px 56px -40px rgba(37, 99, 235, .7); } html.v4 .kz-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.v4 .kz-plan__name { margin: 0 0 4px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.025em; color: var(--kz-ink); } html.v4 .kz-plan__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--kz-muted); } html.v4 .kz-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 16px 0; border-top: 1px solid var(--kz-line-2); border-bottom: 1px solid var(--kz-line-2); } html.v4 .kz-plan__price small { flex: 1 1 100%; font-family: var(--kz-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-plan__price strong { font-size: 2rem; font-weight: 650; letter-spacing: -.04em; line-height: 1; color: var(--kz-ink); font-variant-numeric: tabular-nums; } html.v4 .kz-plan__price span { font-size: 14px; color: var(--kz-muted); } html.v4 .kz-plan .k-checks { flex: 1 1 auto; } @media (max-width: 767px) { html.v4 .kz-plans { grid-template-columns: minmax(0, 1fr); } } /* Müşteri yorumu */ html.v4 .kz-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } html.v4 .kz-quote { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; border: 1px solid var(--kz-line); border-radius: var(--kz-r-lg); background: #fff; } html.v4 .kz-quote__stars { display: flex; gap: 3px; color: var(--kz-star); font-size: 13px; } html.v4 .kz-quote blockquote { margin: 0; flex: 1 1 auto; font-size: 15.5px; line-height: 1.65; color: var(--kz-ink); } html.v4 .kz-quote figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--kz-line-2); } html.v4 .kz-quote figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--kz-ink); } html.v4 .kz-quote figcaption small { font-size: 13px; color: var(--kz-muted); } html.v4 .kz-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--kz-ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; } html.v4 .kz-rating { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--kz-muted); } html.v4 .kz-rating strong { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; color: var(--kz-ink); } html.v4 .kz-rating i { color: var(--kz-star); font-size: 13px; } @media (max-width: 991px) { html.v4 .kz-quotes { grid-template-columns: minmax(0, 1fr); } } /* Güven satırı */ html.v4 .kz-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--kz-text); } html.v4 .kz-trust li { display: inline-flex; align-items: center; gap: 8px; } html.v4 .kz-trust i { color: var(--kz-ok); font-size: 14px; } html.v4 .k-hero .kz-trust, html.v4 .k-section--dark .kz-trust, html.v4 .kz-ftr .kz-trust { color: var(--kz-d-text); } html.v4 .k-hero .kz-trust i, html.v4 .k-section--dark .kz-trust i, html.v4 .kz-ftr .kz-trust i { color: var(--kz-sky); } /* Gradyan kenarlı kart */ html.v4 .kz-gcard { position: relative; padding: 24px; border: 1px solid transparent; border-radius: var(--kz-r-lg); background: linear-gradient(#fff, #fff) padding-box, var(--kz-grad) border-box; } html.v4 .k-section--dark .kz-gcard, html.v4 .k-hero .kz-gcard { background: linear-gradient(var(--kz-n-850), var(--kz-n-850)) padding-box, var(--kz-grad) border-box; } /* Bölüm ayırıcı */ html.v4 .kz-divider { display: flex; align-items: center; gap: 16px; margin: 48px 0; border: 0; height: auto; opacity: 1; font-family: var(--kz-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-divider::before, html.v4 .kz-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--kz-line) 20%, var(--kz-line) 80%, transparent); } html.v4 hr.kz-divider::after { display: none; } /* Ürün ızgarasını kısalt / "tümünü göster" */ html.v4 .kz-more { display: none; } html.v4.k-js .kz-more { display: flex; justify-content: center; margin-top: 24px; } html.v4.k-js .kz-collapse:not(.is-open) > .k-pcard:nth-child(n+7) { display: none; } @media (max-width: 639px) { html.v4.k-js .kz-collapse:not(.is-open) > .k-pcard:nth-child(n+5) { display: none; } } html.v4 .kz-collapse.is-open + .kz-more { display: none; } html.v4 .kz-center { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* --------------------------------------------------------------------- 11. Header --------------------------------------------------------------------- */ html.v4 .kz-ann { position: relative; z-index: 1001; background: var(--kz-n-950); color: var(--kz-d-text); font-size: 13px; border-bottom: 1px solid var(--kz-d-line); } html.v4 .kz-ann[hidden] { display: none; } html.v4 .kz-ann__inner { display: flex; align-items: center; gap: 16px; max-width: 1440px; min-height: 40px; margin: 0 auto; padding: 0 8px 0 24px; } html.v4 .kz-ann__link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; min-height: 40px; color: var(--kz-d-text) !important; text-decoration: none !important; } html.v4 .kz-ann__tag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--kz-r-xs); background: var(--kz-blue); color: #fff; font-family: var(--kz-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } html.v4 .kz-ann__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html.v4 .kz-ann__text strong { color: #fff; font-weight: 600; } html.v4 .kz-ann__sub { color: var(--kz-d-muted); } html.v4 .kz-ann__link > i { flex: 0 0 auto; font-size: 10px; color: var(--kz-d-muted); transition: transform .15s var(--kz-ease); } html.v4 .kz-ann__link:hover > i { transform: translateX(3px); } html.v4 .kz-ann__contact { display: none; flex: 0 0 auto; align-items: center; gap: 20px; } html.v4 .kz-ann__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--kz-d-muted) !important; text-decoration: none !important; } html.v4 .kz-ann__contact a:hover { color: #fff !important; } html.v4 .kz-ann__contact i { font-size: 11px; color: var(--kz-sky); } html.v4 .kz-ann__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--kz-r-sm); background: none; color: var(--kz-d-muted); cursor: pointer; } html.v4 .kz-ann__close:hover { color: #fff; background: rgba(255, 255, 255, .06); } @media (min-width: 992px) { html.v4 .kz-ann__contact { display: flex; } } @media (max-width: 767px) { html.v4 .kz-ann__inner { padding-left: 16px; } html.v4 .kz-ann__sub { display: none; } } html.v4 .kz-hdr { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--kz-line); transition: box-shadow .2s; } html.v4 .kz-hdr.no-sticky { position: relative; } html.v4 .kz-hdr.is-scrolled { box-shadow: 0 10px 30px -22px rgba(10, 16, 32, .45); } html.v4 .kz-hdr__inner { position: relative; display: flex; align-items: center; gap: 16px; max-width: 1440px; height: var(--kz-hdr-h); margin: 0 auto; padding: 0 24px; } @media (max-width: 767px) { html.v4 .kz-hdr__inner { padding: 0 12px 0 16px; gap: 8px; } } /* Logo */ html.v4 .kz-logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; color: var(--kz-ink) !important; text-decoration: none !important; } html.v4 .kz-logo__mark { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; } html.v4 .kz-logo__mark svg { display: block; width: 32px; height: 32px; } html.v4 .kz-logo__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } html.v4 .kz-logo__text b { font-size: 16px; font-weight: 650; letter-spacing: -.025em; color: inherit; white-space: nowrap; } html.v4 .kz-logo__text small { margin-top: 2px; font-family: var(--kz-mono); font-size: 10px; letter-spacing: .04em; color: var(--kz-muted); white-space: nowrap; } html.v4 .kz-logo__text small strong { font-weight: 600; color: var(--kz-ink); } html.v4 .kz-logo__img { display: block; height: 36px; width: auto; max-width: 190px; object-fit: contain; } html.v4 .kz-logo--dark { color: #fff !important; } html.v4 .kz-logo--dark .kz-logo__text small { color: var(--kz-d-muted); } html.v4 .kz-logo--dark .kz-logo__text small strong { color: var(--kz-d-text); } /* Masaüstü menü */ html.v4 .kz-nav { display: none; flex: 1 1 auto; min-width: 0; margin-left: 8px; } html.v4 .kz-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } html.v4 .kz-nav__item { position: relative; display: flex; align-items: center; } html.v4 .kz-nav__item--mega { position: static; } html.v4 .kz-nav__item--home { display: none; } html.v4 .kz-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--kz-r-sm); background: none; font-family: var(--kz-font); font-size: 14.5px; font-weight: 500; color: var(--kz-text) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; } html.v4 .kz-nav__link:hover, html.v4 .kz-nav__item.is-open > .kz-nav__link { color: var(--kz-ink) !important; background: var(--kz-bg-sunk); } html.v4 .kz-nav__item.is-current > .kz-nav__link { color: var(--kz-ink) !important; } html.v4 .kz-nav__item.is-current > .kz-nav__link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -12px; height: 2px; border-radius: 2px; background: var(--kz-blue); } html.v4 .kz-nav__item--has > .kz-nav__link { padding-right: 4px; } html.v4 .kz-nav__caret { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 40px; margin-left: -2px; padding: 0; border: 0; border-radius: var(--kz-r-sm); background: none; color: var(--kz-subtle); cursor: pointer; } html.v4 .kz-nav__caret i, html.v4 .kz-nav__link .kz-nav__chev { font-size: 9.5px; transition: transform .2s var(--kz-ease); } html.v4 .kz-nav__item.is-open .kz-nav__caret i, html.v4 .kz-nav__item.is-open > .kz-nav__link .kz-nav__chev { transform: rotate(180deg); } html.v4 .kz-nav__caret:hover { color: var(--kz-ink); } html.v4 .kz-nbadge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--kz-blue-50); border: 1px solid var(--kz-blue-100); color: var(--kz-blue-h); font-family: var(--kz-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } html.v4 .kz-nav .kz-nbadge { display: none; } /* Açılır panel */ html.v4 .kz-dd { position: absolute; top: calc(100% + 12px); left: -8px; z-index: 30; min-width: 320px; padding: 8px; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r); box-shadow: var(--kz-sh-3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s var(--kz-ease), transform .16s var(--kz-ease), visibility 0s linear .16s; } html.v4 .kz-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } html.v4 .kz-nav__item.is-open > .kz-dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { html.v4 .kz-nav__item:hover > .kz-dd { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html.v4 .kz-nav__item:hover .kz-nav__caret i { transform: rotate(180deg); } html.v4 .kz-nav__item.is-closing > .kz-dd { opacity: 0; visibility: hidden; } } html.v4 .kz-dd__link { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: var(--kz-r-sm); color: var(--kz-text) !important; text-decoration: none !important; transition: background-color .12s; } html.v4 .kz-dd__link:hover, html.v4 .kz-dd__link:focus-visible { background: var(--kz-bg-soft); } html.v4 .kz-dd__link[aria-current="page"] { background: var(--kz-blue-50); } html.v4 .kz-dd__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--kz-r-sm); background: var(--kz-bg-sunk); border: 1px solid var(--kz-line); color: var(--kz-ink); font-size: 13px; } /* Tür ikonları: dolu renkli kutu */ html.v4 .kz-dd__ico--ov, html.v4 .kz-dd__ico--ev { font-family: var(--kz-mono); font-size: 10.5px; font-weight: 600; color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -4px var(--kz-ico-glow, rgba(15, 23, 42, .35)); } html.v4 .kz-dd__ico--ov { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --kz-ico-glow: rgba(37, 99, 235, .55); } html.v4 .kz-dd__ico--ev { background: linear-gradient(135deg, #10b981 0%, #059669 100%); --kz-ico-glow: rgba(5, 150, 105, .5); } html.v4 .kz-dd__ico--cloud { background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); border: 0; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -4px rgba(8, 145, 178, .5); } /* Marka ikonları: kurumsal rengin açık tonu + o renkte ikon */ html.v4 .kz-dd__ico[class*="kz-dd__ico--b-"] { background: color-mix(in srgb, var(--kz-bc) 12%, #fff); border-color: color-mix(in srgb, var(--kz-bc) 24%, #fff); color: var(--kz-bc); } html.v4 .kz-dd__ico--b-digicert { --kz-bc: #0174c3; } html.v4 .kz-dd__ico--b-sectigo { --kz-bc: #16a34a; } html.v4 .kz-dd__ico--b-globalsign { --kz-bc: #1e4fa3; } html.v4 .kz-dd__ico--b-certum { --kz-bc: #0891d1; } html.v4 .kz-dd__ico--b-ssltrus { --kz-bc: #ea580c; } html.v4 .kz-dd__ico--b-gogetssl { --kz-bc: #475569; } /* Üzerine gelince ikon kutusu hafifçe canlanır */ html.v4 .kz-dd__ico { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } html.v4 .kz-dd__link:hover .kz-dd__ico, html.v4 .kz-dd__link:focus-visible .kz-dd__ico { transform: translateY(-1px); } html.v4 .kz-dd__link:hover .kz-dd__ico[class*="kz-dd__ico--b-"] { background: var(--kz-bc); border-color: var(--kz-bc); color: #fff; } @media (prefers-reduced-motion: reduce) { html.v4 .kz-dd__ico { transition: none; } html.v4 .kz-dd__link:hover .kz-dd__ico { transform: none; } } html.v4 .kz-dd__txt { min-width: 0; padding-top: 1px; } html.v4 .kz-dd__t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--kz-ink); } html.v4 .kz-dd__d { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--kz-muted); } /* Mega menü */ html.v4 .kz-dd--mega { top: 100%; left: 50%; width: min(960px, calc(100vw - 48px)); padding: 20px 20px 0; transform: translate(-50%, 4px); } html.v4 .kz-nav__item.is-open > .kz-dd--mega { transform: translate(-50%, 0); } @media (hover: hover) and (pointer: fine) { html.v4 .kz-nav__item:hover > .kz-dd--mega { transform: translate(-50%, 0); } } html.v4 .kz-mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; } html.v4 .kz-mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.v4 .kz-mega__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } html.v4 .kz-mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html.v4 .kz-mega__title { margin: 0 0 6px; padding: 0 10px 8px; border-bottom: 1px solid var(--kz-line-2); font-family: var(--kz-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px -20px 0; padding: 14px 30px; border-top: 1px solid var(--kz-line); background: var(--kz-bg-soft); border-radius: 0 0 var(--kz-r) var(--kz-r); font-size: 13.5px; color: var(--kz-muted); } /* Header eylemleri */ html.v4 .kz-hdr__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; } html.v4 .kz-cur { position: relative; } html.v4 .kz-cur__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--kz-line); border-radius: var(--kz-r-sm); background: #fff; font-family: var(--kz-mono); font-size: 12.5px; font-weight: 500; color: var(--kz-ink); cursor: pointer; transition: border-color .15s, background-color .15s; } html.v4 .kz-cur__btn:hover { border-color: var(--kz-line-strong); background: var(--kz-bg-soft); } html.v4 .kz-cur__btn i { font-size: 9px; color: var(--kz-subtle); transition: transform .2s var(--kz-ease); } html.v4 .kz-cur.open .kz-cur__btn i { transform: rotate(180deg); } html.v4 .kz-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 160px; padding: 6px; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-r); box-shadow: var(--kz-sh-3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s var(--kz-ease), transform .15s var(--kz-ease), visibility 0s linear .15s; } html.v4 .open > .kz-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html.v4 .kz-menu a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--kz-r-sm); font-size: 14px; color: var(--kz-text) !important; text-decoration: none !important; } html.v4 .kz-menu a:hover { background: var(--kz-bg-soft); color: var(--kz-ink) !important; } html.v4 .kz-menu a.active { color: var(--kz-blue) !important; font-weight: 600; } html.v4 .kz-menu a i { width: 16px; text-align: center; font-size: 13px; color: var(--kz-muted); } html.v4 .kz-cur .kz-menu a { font-family: var(--kz-mono); font-size: 13px; } html.v4 .kz-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--kz-r-sm); background: none; color: var(--kz-ink) !important; font-size: 16px; text-decoration: none !important; cursor: pointer; transition: background-color .15s; } html.v4 .kz-iconbtn:hover { background: var(--kz-bg-sunk); } html.v4 .kz-cart__n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kz-blue); color: #fff; font-size: 11px; font-weight: 650; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; } html.v4 .kz-hdr__login { display: none; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--kz-r-sm); font-size: 14.5px; font-weight: 500; color: var(--kz-text) !important; text-decoration: none !important; white-space: nowrap; } html.v4 .kz-hdr__login:hover { background: var(--kz-bg-sunk); color: var(--kz-ink) !important; } html.v4 .kz-hdr__cta { display: none !important; } html.v4 .kz-user { position: relative; display: none; } html.v4 .kz-user__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--kz-line); border-radius: 999px; background: #fff; font-family: var(--kz-font); font-size: 14px; font-weight: 500; color: var(--kz-ink); cursor: pointer; } html.v4 .kz-user__btn:hover { border-color: var(--kz-line-strong); } html.v4 .kz-user__btn .kz-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } html.v4 .kz-user__btn > i { font-size: 9px; color: var(--kz-subtle); } html.v4 .kz-user .kz-menu { min-width: 260px; } html.v4 .kz-user__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--kz-line-2); } html.v4 .kz-user__head b { display: block; font-size: 14px; color: var(--kz-ink); } html.v4 .kz-user__head small { display: block; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--kz-muted); } html.v4 .kz-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--kz-line-2); opacity: 1; } html.v4 .kz-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--kz-r-sm); background: none; cursor: pointer; } html.v4 .kz-burger:hover { background: var(--kz-bg-sunk); } html.v4 .kz-burger span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--kz-ink); } @media (min-width: 1200px) { html.v4 .kz-nav { display: block; } html.v4 .kz-burger { display: none; } html.v4 .kz-hdr__login { display: inline-flex; } html.v4 .kz-user { display: block; } } @media (min-width: 1360px) { html.v4 .kz-nav__link { padding: 0 12px; } html.v4 .kz-nav__item--has > .kz-nav__link { padding-right: 4px; } html.v4 .kz-nav .kz-nbadge { display: inline-flex; } html.v4 .kz-hdr__cta { display: inline-flex !important; } } @media (max-width: 1199px) { html.v4 .kz-cur__btn, html.v4 .kz-iconbtn { width: auto; min-width: 44px; height: 44px; } html.v4 .kz-cur__btn { border-color: transparent; background: none; } } @media (max-width: 399px) { html.v4 .kz-cur__sym { display: none; } html.v4 .kz-logo__text b { font-size: 15px; } } /* Bayi fiyat çubuğu */ html.v4 .kz-rbar { background: var(--kz-ok-bg); border-bottom: 1px solid var(--kz-ok-line); color: var(--kz-ok); font-size: 13.5px; } html.v4 .kz-rbar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; max-width: 1440px; min-height: 40px; margin: 0 auto; padding: 6px 24px; text-align: center; } html.v4 .kz-rbar a { color: var(--kz-ok) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; } /* Mobil menü */ html.v4 .kz-mm { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1101; display: flex; flex-direction: column; width: min(420px, 100%); background: #fff; box-shadow: -24px 0 64px -24px rgba(5, 10, 22, .45); transform: translateX(100%); visibility: hidden; transition: transform .28s var(--kz-ease), visibility 0s linear .28s; } html.v4 .kz-mm.active { transform: none; visibility: visible; transition-delay: 0s; } html.v4 .kz-mm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; height: var(--kz-hdr-h); padding: 0 8px 0 16px; border-bottom: 1px solid var(--kz-line); } html.v4 .kz-mm__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--kz-r-sm); background: none; color: var(--kz-ink); font-size: 18px; cursor: pointer; } html.v4 .kz-mm__close:hover { background: var(--kz-bg-sunk); } html.v4 .kz-mm__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; } html.v4 .kz-mm__list { list-style: none; margin: 0; padding: 0; } html.v4 .kz-mm__list > li { border-bottom: 1px solid var(--kz-line-2); } html.v4 .kz-mm__link, html.v4 .kz-mm__toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 4px 4px; border: 0; background: none; font-family: var(--kz-font); font-size: 16px; font-weight: 500; color: var(--kz-ink) !important; text-align: left; text-decoration: none !important; cursor: pointer; } html.v4 .kz-mm__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--kz-r-sm); background: var(--kz-bg-soft); border: 1px solid var(--kz-line); color: var(--kz-blue); font-size: 13px; } html.v4 .kz-mm__label { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } html.v4 .kz-mm__chev { margin-left: auto; font-size: 11px; color: var(--kz-subtle); transition: transform .2s var(--kz-ease); } html.v4 .kz-mm__toggle[aria-expanded="true"] .kz-mm__chev { transform: rotate(180deg); } html.v4 .kz-mm__sub { padding: 0 0 12px 48px; } html.v4 .kz-mm__sub[hidden] { display: none; } html.v4 .kz-mm__sub a { display: flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--kz-text) !important; text-decoration: none !important; } html.v4 .kz-mm__sub a:hover, html.v4 .kz-mm__sub a[aria-current="page"] { color: var(--kz-blue) !important; } html.v4 .kz-mm__sub a.kz-mm__all { color: var(--kz-blue) !important; font-weight: 550; gap: 8px; } html.v4 .kz-mm__sub a.kz-mm__all i { font-size: 11px; } html.v4 .kz-mm__grp { display: block; margin: 12px 0 2px; padding: 0 4px; font-family: var(--kz-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .kz-mm__foot { flex: 0 0 auto; display: grid; gap: 12px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kz-line); background: var(--kz-bg-soft); } html.v4 .kz-mm__auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html.v4 .kz-mm__auth .k-btn { height: 44px; } html.v4 .kz-mm__cur { display: flex; flex-wrap: wrap; gap: 6px; } html.v4 .kz-mm__cur a { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 64px; height: 44px; border: 1px solid var(--kz-line); border-radius: var(--kz-r-sm); background: #fff; font-family: var(--kz-mono); font-size: 13px; color: var(--kz-text) !important; text-decoration: none !important; } html.v4 .kz-mm__cur a.active { border-color: var(--kz-blue); color: var(--kz-blue) !important; box-shadow: inset 0 0 0 1px var(--kz-blue); } html.v4 .kz-mm__contact { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; } html.v4 .kz-mm__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--kz-text) !important; text-decoration: none !important; } html.v4 .kz-mm__contact i { color: var(--kz-blue); font-size: 13px; } html.v4 .kz-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(5, 10, 22, .5); opacity: 0; visibility: hidden; transition: opacity .25s var(--kz-ease), visibility 0s linear .25s; } html.v4 .kz-backdrop.active { opacity: 1; visibility: visible; transition-delay: 0s; } html.v4 body.kz-lock { overflow: hidden; } @media (min-width: 1200px) { html.v4 .kz-mm, html.v4 .kz-backdrop { display: none; } } /* --------------------------------------------------------------------- 12. Footer, sabit butonlar, ilerleme çubuğu --------------------------------------------------------------------- */ html.v4 .kz-ftr { position: relative; background: var(--kz-n-950); color: var(--kz-d-muted); font-size: 14px; padding-top: 64px; } html.v4 .kz-ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .5), rgba(34, 211, 238, .45), transparent); } html.v4 .kz-ftr__top { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(0, 3fr) minmax(220px, 1.1fr); gap: 48px; padding-bottom: 48px; } html.v4 .kz-ftr__brand p { margin: 16px 0 20px; max-width: 320px; line-height: 1.65; color: var(--kz-d-muted); } html.v4 .kz-ftr__social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } html.v4 .kz-ftr__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--kz-d-line); border-radius: var(--kz-r-sm); color: var(--kz-d-text) !important; text-decoration: none !important; transition: border-color .15s, background-color .15s; } html.v4 .kz-ftr__social a:hover { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .05); } html.v4 .kz-ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; } html.v4 .kz-ftr__title { margin: 0 0 14px; font-family: var(--kz-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; } html.v4 .kz-ftr__links { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } html.v4 .kz-ftr__links a { display: inline-flex; align-items: center; gap: 8px; color: var(--kz-d-muted) !important; text-decoration: none !important; line-height: 1.4; transition: color .15s; } html.v4 .kz-ftr__links a:hover { color: #fff !important; } html.v4 .kz-ftr__links .kz-nbadge { background: rgba(37, 99, 235, .18); border-color: rgba(147, 197, 253, .25); color: var(--kz-blue-300); } html.v4 .kz-ftr__contact { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } html.v4 .kz-ftr__contact li { display: flex; gap: 12px; align-items: flex-start; } html.v4 .kz-ftr__contact i { width: 16px; margin-top: 4px; text-align: center; color: var(--kz-sky); font-size: 13px; } html.v4 .kz-ftr__contact a, html.v4 .kz-ftr__contact span { color: var(--kz-d-text) !important; text-decoration: none !important; line-height: 1.45; } html.v4 .kz-ftr__contact a:hover { color: #fff !important; } html.v4 .kz-ftr__contact small { display: block; font-size: 12.5px; color: var(--kz-d-muted); } html.v4 .kz-ftr__trust { padding: 20px 0; border-top: 1px solid var(--kz-d-line); border-bottom: 1px solid var(--kz-d-line); } html.v4 .kz-ftr__trust .kz-trust { justify-content: space-between; font-size: 13.5px; } html.v4 .kz-ftr__trust .kz-trust span { color: var(--kz-d-muted); } html.v4 .kz-ftr__trust .kz-trust b { color: var(--kz-d-text); font-weight: 600; } html.v4 .kz-ftr__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 20px 0 28px; font-size: 13px; } html.v4 .kz-ftr__bottom p { margin: 0; color: var(--kz-d-muted); } html.v4 .kz-ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; } html.v4 .kz-ftr__legal a { color: var(--kz-d-muted) !important; text-decoration: none !important; } html.v4 .kz-ftr__legal a:hover { color: #fff !important; } @media (max-width: 1099px) { html.v4 .kz-ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } html.v4 .kz-ftr__cols { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 767px) { html.v4 .kz-ftr { padding-top: 48px; } html.v4 .kz-ftr__top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; } html.v4 .kz-ftr__cols { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } html.v4 .kz-ftr__trust .kz-trust { justify-content: flex-start; gap: 12px 20px; } html.v4 .kz-ftr__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 88px; } } @media (pointer: coarse) { html.v4 .kz-ftr__links { gap: 0; } html.v4 .kz-ftr__links a, html.v4 .kz-ftr__legal a { min-height: 44px; display: inline-flex; align-items: center; } html.v4 .kz-ftr__social a { width: 44px; height: 44px; } } /* Sabit butonlar */ html.v4 .kz-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1030; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--kz-r); border: 0; font-size: 20px; text-decoration: none !important; cursor: pointer; transition: opacity .2s var(--kz-ease), transform .2s var(--kz-ease), visibility 0s, background-color .15s; } html.v4 .kz-fab--wa { background: var(--kz-wa); color: #fff !important; font-size: 24px; box-shadow: 0 10px 24px -10px rgba(23, 154, 76, .7); } html.v4 .kz-fab--wa:hover { background: #13843f; } html.v4 .kz-fab--top { background: #fff; border: 1px solid var(--kz-line); color: var(--kz-ink); font-size: 15px; box-shadow: var(--kz-sh-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--kz-ease), transform .2s var(--kz-ease), visibility 0s linear .2s; } html.v4 .kz-fab--top.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html.v4 .kz-fab--wa ~ .kz-fab--top { bottom: 80px; } @media (max-width: 991px) { html.v4 body:has(.k-mbuy) .kz-fab { bottom: 88px; } html.v4 body:has(.k-mbuy) .kz-fab--wa ~ .kz-fab--top { bottom: 148px; } } @media (max-width: 767px) { html.v4 .kz-fab { right: 16px; bottom: 16px; } html.v4 .kz-fab--wa ~ .kz-fab--top { bottom: 76px; } } /* Kaydırma ilerlemesi */ html.v4 .kz-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: 2px; background: var(--kz-grad); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } html.v4 #scroll-progress:not(.kz-progress) { display: none !important; } /* --------------------------------------------------------------------- 13. Hareket --------------------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html.v4 .kz-rise { animation: kzRise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } } } @keyframes kzRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.v4 { scroll-behavior: auto; } html.v4 *, html.v4 *::before, html.v4 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html.v4 .kz-marquee__track, html.v4 .kz-pipe__step.is-active .kz-pipe__ico { animation: none !important; } } /* --------------------------------------------------------------------- 14. Ana sayfa (v4/home.php) — sayfaya özel küçük düzenlemeler --------------------------------------------------------------------- */ html.v4 .kz-page--home .kz-seo__aside { display: grid; gap: 16px; } html.v4 .kz-page--home .kz-steps-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; } html.v4 .kz-page--home .kz-steps-wrap .k-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } html.v4 .kz-page--home .kz-steps-wrap .k-steps::before { display: none; } html.v4 .kz-page--home .kz-compare-wrap { display: grid; gap: 24px; } @media (max-width: 991px) { html.v4 .kz-page--home .kz-steps-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 575px) { html.v4 .kz-page--home .kz-steps-wrap .k-steps { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } } /* --------------------------------------------------------------------- İmza paketi seçici (bulut kod imzalama) — includes/views/_signing-packages.php Ürün detay satın alma kutusu ve /siparis sayfası --------------------------------------------------------------------- */ html.v4 .k-pkgs { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; } html.v4 .k-pkgs__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; float: none; width: 100%; margin: 0 0 8px; padding: 0; font-family: var(--kz-font); font-size: 14px; font-weight: 600; color: var(--kz-ink); } html.v4 .k-pkgs__title small { font-family: var(--kz-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-pkgs__table { border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: var(--kz-bg); overflow: hidden; } html.v4 .k-pkgs__head, html.v4 .k-pkgs__row { display: grid; grid-template-columns: 18px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; } html.v4 .k-pkgs__head { background: var(--kz-bg-soft); border-bottom: 1px solid var(--kz-line); font-family: var(--kz-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--kz-muted); } html.v4 .k-pkgs__head span:last-child, html.v4 .k-pkgs__price { text-align: right; } html.v4 .k-pkgs__row { position: relative; margin: 0; border-top: 1px solid var(--kz-line-2); font-size: 14px; color: var(--kz-text); cursor: pointer; transition: background-color .15s var(--kz-ease), box-shadow .15s var(--kz-ease); } html.v4 .k-pkgs__head + .k-pkgs__row { border-top: 0; } html.v4 .k-pkgs__row:hover { background: var(--kz-bg-soft); } html.v4 .k-pkgs__row.is-selected { background: var(--kz-blue-50); box-shadow: inset 0 0 0 2px var(--kz-blue); } html.v4 .k-pkgs__row input { width: 16px; height: 16px; margin: 0; accent-color: var(--kz-blue); } html.v4 .k-pkgs__row input:focus-visible { outline: none; box-shadow: var(--kz-ring); border-radius: 50%; } html.v4 .k-pkgs__name { font-weight: 600; color: var(--kz-ink); } html.v4 .k-pkgs__sig, html.v4 .k-pkgs__price { font-variant-numeric: tabular-nums; } html.v4 .k-pkgs__price { font-weight: 600; color: var(--kz-ink); } html.v4 .k-pkgs__note { margin: 6px 0 0; font-size: 12px; color: var(--kz-muted); } html.v4 .k-cart-pkg { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--kz-blue-100); border-radius: var(--kz-r-xs); background: var(--kz-blue-50); font-size: 12.5px; font-weight: 500; color: var(--kz-blue-h); font-variant-numeric: tabular-nums; }