/* ab paket: dis-klinigi-seo.css — kaynaklar assets/css (bkz. inc/assets.php) */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb54c-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb94c-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpbf4cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb54c-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb94c-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpbf4cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb54c-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb94c-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpbf4cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb54c-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb94c-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpbf4cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb54c-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpb94c-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/wp-content/themes/baybarsbilim/assets/fonts/spacegrotesk-v8mdoqdjqskftomm3t6r8e7mpbf4cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-mono: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
--accent: #e4500f;
--accent-strong: #b43d0b;
--accent-soft: #fcece3;
--accent-line: #f5d6c5;
--on-accent: #ffffff;
--ink: #181516;
--muted: #6a6a6f;
--ink-inverse: #fdfcfb;
--surface: #ffffff;
--bg: #ffffff;
--bg-alt: #f5f5f7;
--fill: var(--bg-alt);
--line-soft: #efeff2;
--line: #e4e4e8;
--line-strong: #d2d2d7;
--positive: #117d39;
--positive-soft: #f0faf4;
--positive-line: #cdeeda;
--warning: #a55a05;
--serp-url: #0a7a3d;
--serp-title: #1a44b8;
--whatsapp: #25d366;
--whatsapp-strong: #107e72;
--steel: #6296b0;
--dark-bg: #141112;
--dark-surface: #211d1e;
--dark-ink: #f4f1ee;
--dark-muted: #a8a19b;
--dark-line: rgb(255 255 255 / 0.10);
--dark-line-strong: rgb(255 255 255 / 0.14);
--dark-positive: #3ecf6e;
--shade: #181516;
--light: #ffffff;
--ink-8: color-mix(in srgb, var(--ink) 8%, transparent);
--scrim: color-mix(in srgb, var(--ink) 14%, transparent);
--glass: color-mix(in srgb, var(--ink) 60%, transparent);
--text-2xs: 11px;
--text-xs: 12.5px;
--text-sm: 13.5px;
--text-base: 15px;
--text-md: 15.5px;
--text-lg: 16.5px;
--title-section: clamp(28px, 3.2vw, 40px);
--leading-tight: 1.15;
--leading-snug: 1.4;
--leading-body: 1.65;
--leading-loose: 1.78;
--tracking-title: -0.025em;
--tracking-snug: -0.01em;
--tracking-caps: 0.14em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-24: 96px;
--container: 1280px;
--measure: 840px;
--measure-head: 640px;
--gutter: 40px;
--section-pad: 96px;
--header-h: 60px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
--ease: cubic-bezier(0.61, 1, 0.88, 1);
--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
--dur-fast: 0.25s;
--dur: 0.3s;
--dur-slow: 0.5s;
--z-raised: 3;
--z-float: 40;
--z-fab: 60;
--z-popover: 80;
--z-backdrop: 800;
--z-subnav: 900;
--z-header: 1000;
--z-drawer: 1001;
--z-toast: 1100;
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(/wp-content/themes/baybarsbilim/assets/css/%23g)'/%3E%3C/svg%3E");
}
@media (max-width: 1080px) {
:root { --gutter: 24px; --section-pad: 64px; }
}
@media (max-width: 760px) {
:root { --gutter: 16px; --section-pad: 48px; }
}
@layer reset, base, components, sections, utilities;
@layer reset {
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
input, textarea, select { all: revert; }
*, *::before, *::after { box-sizing: border-box; }
a, button { cursor: revert; }
ol, ul, menu { list-style: none; }
img { max-inline-size: 100%; max-block-size: 100%; }
table { border-collapse: collapse; }
input, textarea { -webkit-user-select: auto; }
textarea { white-space: revert; }
meter { -webkit-appearance: revert; appearance: revert; }
pre { all: revert; }
::placeholder { color: unset; }
::marker { content: initial; }
:where([hidden]) { display: none; }
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
:where([draggable="true"]) { -webkit-user-drag: element; }
:where(dialog:modal) { all: revert; }
}
@layer base {
html { font-size: 16px; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: 15px; } }
@media (max-width: 575px) { html { font-size: 14px; } }
body {
background: var(--bg-alt);
min-height: 100vh;
overflow-x: clip;
text-rendering: optimizeSpeed;
}
body, button, input, optgroup, select, textarea {
color: var(--ink);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: bold;
line-height: 1.3;
margin-block: 16px;
}
h1 { font-size: 2.67rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.875rem; }
a { color: inherit; text-decoration: none; }
a img:hover { opacity: 0.85; }
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); }
:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2px solid var(--focus-ring, var(--ink));
outline-offset: 3px;
}
input, textarea, select {
background: var(--surface);
border: 1px solid lightgray;
border-radius: 5px;
box-shadow: 0 2px 12px -8px color-mix(in srgb, var(--shade) 30%, transparent);
box-sizing: border-box;
padding: 16px;
text-align: left;
}
input:focus, textarea:focus, select:focus { border-color: var(--muted); outline: 0 none; }
input[type="submit"], button[type="submit"] {
background: var(--ink);
border-color: var(--ink);
border-radius: 5px;
color: var(--ink-inverse);
cursor: pointer;
font-weight: 500;
padding: 12px 24px;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--ink); border-color: var(--ink); }
input[type="password"] { font-family: Verdana; letter-spacing: 0.13em; }
input[type="checkbox"] { box-shadow: none; }
label { color: var(--muted); cursor: pointer; display: block; font-size: 0.9rem; padding: 0 0 8px; }
button { cursor: pointer; }
select { border: 1px solid var(--line-strong); }
textarea { width: 100%; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
img { height: auto; max-width: 100%; }
em { font-style: italic; }
s, del { text-decoration: line-through; }
strong { font-weight: bolder; }
embed, iframe, object, pre { max-width: 100%; }
iframe { border: none; }
address, cite { font-style: italic; }
code, kbd, tt, var { font-family: var(--font-mono); font-size: 0.9rem; }
ins { text-decoration: none; }
mark { background: var(--accent-soft); text-decoration: none; }
hr { background-color: var(--line); border: 0; height: 1px; margin-bottom: 1.5em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
u { text-decoration: underline; }
}
@layer components {
.tone-dark {
--bg: var(--dark-bg);
--bg-alt: var(--dark-bg);
--surface: var(--dark-surface);
--ink: var(--dark-ink);
--muted: var(--dark-muted);
--line: var(--dark-line);
--line-soft: var(--dark-line);
--line-strong: var(--dark-line-strong);
--accent-strong: var(--accent);
--accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
--accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
--positive: var(--dark-positive);
--positive-soft: color-mix(in srgb, var(--dark-positive) 10%, transparent);
--positive-line: color-mix(in srgb, var(--dark-positive) 28%, transparent);
--ink-8: color-mix(in srgb, var(--ink) 8%, transparent);
--icon-circle-bg: color-mix(in srgb, var(--ink) 12%, transparent);
--section-bg: var(--dark-bg);
color: var(--ink);
color-scheme: dark;
}
.section {
background: var(--section-bg, var(--bg));
color: var(--ink);
overflow-x: clip;
}
:where(.section a) { color: inherit; text-decoration: none; }
.section-alt {
--section-bg: var(--bg-alt);
--card-line: var(--line);
}
.container {
max-width: var(--container);
margin-inline: auto;
padding: var(--section-pad) var(--gutter);
}
.section-head {
max-width: var(--measure-head);
margin: 0 auto var(--space-12);
text-align: center;
@media (max-width: 760px) { margin-bottom: var(--space-8); }
}
.section-head-start { margin-inline: 0; text-align: start; }
.kicker {
display: block;
margin-bottom: 14px;
color: var(--accent-strong);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.title {
margin: 0 0 var(--space-4);
color: var(--ink);
font-size: var(--title-section);
font-weight: 700;
letter-spacing: var(--tracking-title);
line-height: var(--leading-tight);
}
.lead {
color: var(--muted);
font-size: var(--text-lg);
line-height: var(--leading-body);
& strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { font-size: var(--text-base); }
}
.section-foot {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-12);
@media (max-width: 760px) { margin-top: var(--space-8); }
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--btn-h, 48px);
padding: var(--btn-py, 0) var(--btn-px, 24px);
border: 1px solid var(--btn-line, transparent);
border-radius: var(--radius-pill);
background: var(--btn-bg, transparent);
color: var(--btn-fg, var(--ink));
font-size: var(--btn-fs, var(--text-base));
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
scale 0.18s var(--ease);
&:hover {
border-color: var(--btn-line-hover, var(--btn-line, transparent));
background: var(--btn-bg-hover, var(--btn-bg, transparent));
}
&:active { scale: 0.98; }
& > svg { flex-shrink: 0; width: 15px; height: 15px; }
&:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; pointer-events: none; }
}
.btn-sm {
--btn-h: 40px;
--btn-px: 18px;
--btn-fs: var(--text-sm);
}
.btn-primary {
--btn-bg: var(--ink);
--btn-bg-hover: #2e2a2b;
--btn-fg: var(--surface);
--icon-circle-bg: var(--accent);
& .icon-circle { color: var(--light); }
}
.tone-dark .btn-primary { --btn-bg-hover: #ffffff; }
.btn-outline {
--btn-bg: var(--btn-outline-bg, var(--surface));
--btn-line: var(--line-strong);
--btn-line-hover: var(--ink);
--btn-fg: var(--ink);
}
.btn-ink {
--btn-bg: var(--ink);
--btn-bg-hover: #2e2a2b;
--btn-line: var(--btn-bg);
--btn-line-hover: var(--btn-bg-hover);
--btn-fg: var(--surface);
}
.icon-circle {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--icon-circle-bg, var(--ink-8));
transition: background-color var(--dur-fast) var(--ease);
& svg {
width: var(--icon-circle-svg, 9px);
height: var(--icon-circle-svg, 9px);
fill: none;
stroke: currentColor;
stroke-width: var(--icon-circle-stroke, 2.4);
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(var(--arrow-rotate, -45deg));
transition: transform var(--dur) var(--ease);
}
}
:is(.btn, .link-arrow):hover { --arrow-rotate: var(--arrow-rotate-hover, 0deg); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-size: var(--text-base);
font-weight: 600;
transition: color var(--dur-fast) var(--ease);
&:hover { color: var(--accent); }
&:hover .icon-circle { background: var(--icon-circle-bg-hover, var(--accent-soft)); }
}
.link-arrow-down {
--arrow-rotate: 45deg;
--arrow-rotate-hover: 90deg;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--accent-strong);
font-size: var(--text-xs);
font-weight: 600;
& svg {
width: 11px;
height: 11px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: translate var(--dur-fast) var(--ease);
}
&:hover svg { translate: 3px 0; }
}
@media (prefers-reduced-motion: no-preference) {
.text-link-down:hover svg { translate: 0 2px; }
}
.card {
border: 1px solid var(--card-line, var(--line-soft));
border-radius: var(--card-radius, var(--radius-lg));
background: var(--card-bg, var(--surface));
}
.card-hover {
transition: border-color var(--dur-fast) var(--ease);
&:hover { border-color: var(--card-line-hover, var(--line-strong)); }
}
.card-title {
margin: 0 0 6px;
color: var(--ink);
font-size: var(--text-base);
font-weight: 700;
letter-spacing: var(--tracking-snug);
line-height: 1.3;
}
.card-text {
margin-bottom: var(--space-4);
color: var(--muted);
font-size: var(--text-xs);
line-height: 1.6;
}
.edge-glow {
position: relative;
&::after {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: radial-gradient(
170px circle at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--accent) 55%, transparent),
transparent 70%
);
-webkit-mask: linear-gradient(var(--light) 0 0) content-box, linear-gradient(var(--light) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
&:hover::after { opacity: 1; }
}
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--badge-py, 3px) var(--badge-px, 9px);
border: 1px solid var(--badge-line, var(--line-soft));
border-radius: var(--badge-radius, var(--radius-pill));
background: var(--badge-bg, var(--bg-alt));
color: var(--badge-fg, var(--muted));
font-size: var(--badge-fs, var(--text-2xs));
font-weight: var(--badge-fw, 600);
font-variant-numeric: tabular-nums;
line-height: 1.3;
white-space: nowrap;
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
& b { font-weight: var(--badge-b-fw, 700); }
}
.badge-positive {
--badge-bg: var(--positive-soft);
--badge-line: var(--positive-line);
--badge-fg: var(--positive);
}
.badge-accent {
--badge-bg: var(--accent-soft);
--badge-line: var(--accent-line);
--badge-fg: var(--accent-strong);
}
.badge-solid {
--badge-bg: var(--accent-strong);
--badge-line: var(--accent-strong);
--badge-fg: var(--on-accent);
}
.media-tag {
position: absolute;
z-index: var(--z-raised);
padding: 7px 14px;
background: var(--glass);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--dark-ink);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
white-space: nowrap;
}
.avatar {
display: block;
flex-shrink: 0;
width: var(--avatar-size, 40px);
height: var(--avatar-size, 40px);
border: var(--avatar-ring-w, 2px) solid var(--avatar-ring, color-mix(in srgb, var(--ink) 16%, transparent));
border-radius: 50%;
object-fit: cover;
}
.tooltip {
position: absolute;
bottom: calc(100% + var(--tooltip-gap, 10px));
left: 50%;
z-index: var(--z-raised);
padding: 7px 13px;
border-radius: var(--radius-pill);
background: var(--ink);
color: var(--ink-inverse);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
white-space: nowrap;
box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ink) 45%, transparent);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate(var(--tooltip-x, -50%), var(--tooltip-y, 6px)) scale(var(--tooltip-scale, 0.92));
transform-origin: 50% 100%;
transition:
opacity var(--dur-fast) var(--ease),
transform var(--dur) var(--ease-spring),
visibility 0s linear var(--dur-fast);
&::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
translate: -50% 0;
border: 5px solid transparent;
border-top-color: var(--ink);
}
&:empty { display: none; }
}
:is(.is-hinting, :focus-visible) > .tooltip,
.tooltip.is-visible {
--tooltip-y: 0;
--tooltip-scale: 1;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
@media (hover: hover) {
:hover > .tooltip {
--tooltip-y: 0;
--tooltip-scale: 1;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
}
[aria-expanded="true"] > .tooltip { opacity: 0; visibility: hidden; }
.tooltip-below {
--tooltip-y: -6px;
top: calc(100% + var(--tooltip-gap, 10px));
bottom: auto;
transform-origin: 50% 0;
&::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
}
.tooltip-end {
--tooltip-x: 0;
right: 0;
left: auto;
transform-origin: 100% 100%;
&::after { right: 16px; left: auto; translate: none; }
}
.signature {
display: block;
flex-shrink: 0;
width: 104px;
height: 30px;
& path {
fill: none;
stroke: var(--ink);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
}
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.signature path { stroke-dashoffset: 1; }
.is-revealed .signature path {
animation: sign-draw var(--sign-dur, 1.6s) var(--ease) var(--sign-delay, 0.5s) forwards;
}
}
.dialog {
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
overscroll-behavior: contain;
background: var(--dialog-bg, var(--surface));
color: var(--ink);
opacity: 0;
transition:
opacity var(--dur) var(--ease),
transform var(--dur) var(--ease),
overlay var(--dur) allow-discrete,
display var(--dur) allow-discrete;
&[open] {
opacity: 1;
@starting-style { opacity: 0; }
}
&::backdrop {
background: var(--scrim, color-mix(in srgb, var(--shade) 14%, transparent));
opacity: 0;
transition:
opacity var(--dur, 0.3s) var(--ease, ease),
overlay var(--dur, 0.3s) allow-discrete,
display var(--dur, 0.3s) allow-discrete;
}
&[open]::backdrop {
opacity: 1;
@starting-style { opacity: 0; }
}
}
.dialog-drawer {
inset: var(--drawer-top, 0) 0 0 auto;
width: min(440px, 100%);
height: auto;
transform: translateX(100%);
&[open] {
transform: none;
@starting-style { transform: translateX(100%); }
}
}
html:has(.dialog[open]:modal) { overflow: hidden; }
.accordion {
max-width: var(--measure);
margin-inline: auto;
border-top: 1px solid var(--line);
}
.accordion-compact {
max-width: none;
margin-inline: 0;
border-top: 0;
}
.accordion-item { border-bottom: 1px solid var(--accordion-line, var(--line)); }
.accordion-heading { margin: 0; font-size: inherit; line-height: inherit; }
.accordion-trigger {
display: flex;
align-items: center;
gap: var(--space-4);
width: 100%;
padding: var(--accordion-py, 19px) 2px;
color: inherit;
text-align: left;
cursor: pointer;
@media (max-width: 760px) {
gap: var(--space-3);
padding: var(--space-4) 2px;
}
}
.accordion-label {
flex: 1;
min-width: 0;
font-size: var(--text-md);
font-weight: 600;
letter-spacing: var(--tracking-snug);
line-height: var(--leading-snug);
transition: color var(--dur-fast) var(--ease);
@media (max-width: 760px) { font-size: 14px; }
}
.accordion-trigger:hover .accordion-label { color: var(--accent-strong); }
.accordion-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--ink-8);
transition: background-color var(--dur-fast) var(--ease);
& svg {
width: 9px;
height: 9px;
fill: none;
stroke: var(--ink);
stroke-width: 2.4;
stroke-linecap: round;
transition: transform var(--dur) var(--ease);
}
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
background: var(--ink);
& svg { stroke: var(--bg); transform: rotate(45deg); }
}
.accordion-panel {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.4s var(--ease), visibility 0s;
}
@media (scripting: enabled) {
.accordion-item:not(.is-open) .accordion-panel {
grid-template-rows: 0fr;
visibility: hidden;
transition-delay: 0s, 0.4s;
}
}
.accordion-body {
min-height: 0;
overflow: hidden;
& p {
padding: 0 34px 4px 0;
color: var(--muted);
font-size: var(--text-sm);
line-height: var(--leading-loose);
}
& p:last-child { padding-bottom: var(--space-5); }
& b { color: var(--ink); font-weight: 600; }
& .text-link { margin: 10px 0 var(--space-5); }
@media (max-width: 760px) {
& p { padding-right: var(--space-2); font-size: 13px; }
}
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
[data-reveal]:not(.is-revealed) :is([data-stagger] > *, [data-reveal-item]) {
opacity: 0;
}
[data-reveal].is-revealed [data-stagger] > * {
animation: rise var(--dur-slow) var(--ease) backwards;
animation-delay: calc(var(--stagger-start, 0ms) + var(--i, 0) * var(--stagger-step, 50ms));
}
[data-reveal].is-revealed [data-reveal-item] {
animation: rise var(--dur-slow) var(--ease) backwards;
animation-delay: var(--delay, 0s);
}
[data-reveal].is-revealed [data-reveal]:not(.is-revealed) :is([data-stagger] > *, [data-reveal-item]) {
animation: none;
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.btn, .icon-circle, .icon-circle svg, .link-arrow, .text-link svg, .card-hover,
.badge, .tooltip, .dialog, .dialog::backdrop, .accordion-panel, .accordion-icon svg {
transition: none;
}
.edge-glow::after { display: none; }
.tooltip { --tooltip-y: 0; --tooltip-scale: 1; }
.text-link:hover svg { translate: none; }
.btn:active { scale: 1; }
}
}
@keyframes rise {
from { opacity: 0; translate: 0 var(--rise-y, 8px); }
}
@keyframes rise-in {
from { opacity: 0; translate: 0 var(--rise-in-y, 14px); }
}
@keyframes spin {
to { rotate: 360deg; }
}
@keyframes sign-draw {
to { stroke-dashoffset: 0; }
}
@layer utilities {
:where(.site-main) :is(p, li, figcaption, blockquote):not(.brand, .issued, .signoff-text, .post-reply) > :is(b, strong),
:where(.site-main) :is(p, li, figcaption, blockquote) > a:not(.btn, .text-link) > :is(b, strong),
:where(.site-main) :is(p, li, dd, figcaption, blockquote) > a:not(.btn, .text-link, :has(svg, b, strong)),
:where(.site-footer) p > :is(b, strong, a:not(.btn, .text-link, :has(svg))) { font-weight: 500; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
.visually-hidden:not(:focus, :active) {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2);
left: var(--space-2);
z-index: var(--z-toast);
padding: 10px 16px;
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--ink-inverse);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
}
.skip-link:not(:focus, :active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
}
@layer components {
.table-wrap.is-folded tr.is-rest { display: none; }
.table-more {
position: relative;
z-index: 3;
margin-top: -92px;
margin-bottom: 28px;
padding-top: 60px;
background: linear-gradient(180deg, color-mix(in srgb, var(--table-more-bg, var(--surface)) 0%, transparent), color-mix(in srgb, var(--table-more-bg, var(--surface)) 88%, transparent) 46%, var(--table-more-bg, var(--surface)) 70%);
pointer-events: none;
& .link-arrow {
padding: 4px 0;
border: 0;
background: none;
font: inherit;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
pointer-events: auto;
}
& .link-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
}
.table-wrap :is(td, th)[tabindex="-1"]:focus { outline: none; }
}
@layer components {
.logo-av { position: relative; display: inline-grid; flex-shrink: 0; width: 34px; height: 34px; transition: opacity 0.25s ease; }
.logo-av > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-alt); box-shadow: 0 0 0 1px rgb(24 21 22 / 0.08); }
.logo-av::after {
content: "";
position: absolute;
right: -3px;
bottom: -3px;
width: 15px;
height: 15px;
border: 2px solid var(--surface);
border-radius: 50%;
background: #e4500f url("/wp-content/uploads/2025/10/baybars-bilim-favicon.svg") center / 100% no-repeat;
}
.logo:hover .logo-av { opacity: 0.8; }
.site-footer .logo-av::after { border-color: var(--bg-alt); }
}
@layer sections {
.site-header {
--hx-ease: cubic-bezier(0.22, 1, 0.36, 1);
--hx-panel-w: min(1120px, calc(100vw - 48px));
--hx-panel-top: calc(var(--header-bottom, var(--header-h)) + 10px);
position: sticky;
top: 0;
z-index: var(--z-header);
isolation: isolate;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: var(--header-h);
padding: 0 40px;
color: var(--ink);
transition: color 0.3s var(--hx-ease);
&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-bottom: 1px solid var(--line);
background: var(--surface);
transition: background-color 0.3s var(--hx-ease), border-color 0.3s var(--hx-ease), box-shadow 0.3s var(--hx-ease);
}
&.is-scrolled::before {
border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent);
background: color-mix(in srgb, var(--surface) 78%, transparent);
box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--shade) 40%, transparent);
-webkit-backdrop-filter: saturate(1.8) blur(18px);
backdrop-filter: saturate(1.8) blur(18px);
}
ul { margin: 0; padding: 0; list-style: none; }
.logo {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 10px;
border-radius: 10px;
& span { color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; transition: color 0.3s var(--hx-ease); }
}
.nav { position: relative; display: flex; flex: 1; align-items: center; margin-left: 20px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-trigger, .nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
height: 36px;
padding: 0 12px;
border-radius: 10px;
color: var(--ink);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s var(--hx-ease);
}
.nav-trigger > svg {
width: 12px;
height: 12px;
margin-right: -3px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.55;
transition: rotate 0.35s var(--hx-ease), opacity 0.2s;
}
.nav-trigger:hover > svg, .nav-trigger[aria-expanded="true"] > svg { opacity: 1; }
.nav-trigger[aria-expanded="true"] > svg { rotate: 180deg; }
.nav-link[aria-current="page"],
.nav-trigger[data-current] { color: var(--accent-strong); }
.panel a[aria-current="page"] b,
.panel a.aside-link[aria-current="page"],
.strip-links a[aria-current="page"] { color: var(--accent-strong); }
.nav-hover {
position: absolute;
top: 50%;
left: 0;
z-index: -1;
width: var(--w, 0px);
height: 36px;
border-radius: 10px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
opacity: 0;
translate: var(--x, 0px) -50%;
pointer-events: none;
transition: translate 0.38s var(--hx-ease), width 0.38s var(--hx-ease), opacity 0.2s ease, background-color 0.3s;
&.is-on { opacity: 1; }
&.is-snap { transition: opacity 0.2s ease; }
}
&.has-open .nav-hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mega-bg {
position: fixed;
top: var(--hx-panel-top);
left: 50%;
z-index: 20;
width: var(--hx-panel-w);
height: var(--mega-h, 0px);
border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
border-radius: 20px;
background: var(--surface);
box-shadow:
0 1px 1px color-mix(in srgb, var(--shade) 4%, transparent),
0 12px 24px -12px color-mix(in srgb, var(--shade) 14%, transparent),
0 36px 72px -24px color-mix(in srgb, var(--shade) 22%, transparent);
opacity: 0;
visibility: hidden;
translate: -50% 0;
scale: 0.985;
transform-origin: 50% 0;
pointer-events: none;
transition: height 0.42s var(--hx-ease), opacity 0.18s ease, scale 0.32s var(--hx-ease), visibility 0s linear 0.32s;
&.is-snap { transition: opacity 0.18s ease, scale 0.32s var(--hx-ease), visibility 0s; }
}
&.has-open .mega-bg {
opacity: 1;
visibility: visible;
scale: 1;
transition: height 0.42s var(--hx-ease), opacity 0.2s ease, scale 0.36s var(--hx-ease), visibility 0s;
}
.panel {
position: fixed;
top: var(--hx-panel-top);
left: 50%;
z-index: 21;
width: var(--hx-panel-w);
max-height: calc(100vh - var(--hx-panel-top) - 16px);
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 20px;
color: var(--ink);
opacity: 0;
visibility: hidden;
translate: calc(-50% + var(--px, 0px)) var(--py, 6px);
transition: opacity 0.14s linear, translate 0.36s var(--hx-ease), visibility 0s linear 0.36s;
}
.dropdown.is-open .panel {
opacity: 1;
visibility: visible;
transition: opacity 0.24s linear 0.06s, translate 0.42s var(--hx-ease), visibility 0s;
}
@media (scripting: none) {
.panel { background: var(--surface); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--shade) 30%, transparent); }
.dropdown:is(:hover, :focus-within) .panel { opacity: 1; visibility: visible; --py: 0px; }
}
.panel.is-drop {
left: var(--drop-x, 50%);
width: 256px;
padding: 6px;
border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
border-radius: 16px;
background: var(--surface);
box-shadow:
0 1px 1px color-mix(in srgb, var(--shade) 4%, transparent),
0 12px 24px -12px color-mix(in srgb, var(--shade) 14%, transparent),
0 36px 72px -24px color-mix(in srgb, var(--shade) 22%, transparent);
translate: var(--px, 0px) var(--py, 6px);
}
&.has-drop .mega-bg { opacity: 0; visibility: hidden; transition: opacity 0.14s ease, visibility 0s linear 0.14s; }
.drop-list {
display: grid;
gap: 2px;
& .icon-item { align-items: center; gap: 12px; margin: 0; padding: 7px 10px; border-radius: 10px; }
& .icon-box { width: 32px; height: 32px; border-radius: 9px; }
& .icon-box svg { width: 18px; height: 18px; }
}
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.panel-main { display: flex; flex-direction: column; min-width: 0; padding: 30px 34px 0; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; padding-bottom: 24px; }
.panel-main.is-wide { padding-top: 26px; }
.sk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 32px; margin: 0; padding: 0 0 20px; list-style: none; }
.group-label {
margin: 0 0 8px;
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.icon-item, .text-item, .case {
position: relative;
margin: 0 -10px;
padding: 10px;
border-radius: 12px;
transition: background-color 0.2s ease;
&:hover { background: var(--bg-alt); }
&:focus-visible { outline-offset: -2px; }
}
.icon-item {
display: flex;
align-items: flex-start;
gap: 14px;
& b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
& small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.45; }
}
.text-item {
display: block;
& b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
& small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
}
.quick-links {
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
margin: auto -34px 0;
padding: 16px 34px 18px;
border-top: 1px solid var(--line-soft);
& > li { display: flex; }
& a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
line-height: 1;
transition: color 0.2s ease;
&:hover { color: var(--accent-strong); }
&:hover svg { color: var(--accent); }
}
& svg { width: 16px; height: 16px; fill: currentColor; color: var(--muted); transition: color 0.2s ease; }
}
.panel-aside {
padding: 30px 30px 28px;
border-left: 1px solid var(--line-soft);
background: var(--bg-alt);
& .group-label { margin-top: 26px; }
& .group-label:first-child { margin-top: 0; }
}
.aside-link {
display: block;
padding: 7px 0;
color: var(--ink);
font-size: 14.5px;
font-weight: 500;
transition: color 0.2s ease;
&:hover { color: var(--accent-strong); }
}
.promo {
display: block;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
transition: border-color 0.25s ease;
&:hover { border-color: var(--line-strong); }
& b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
& small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
}
.promo { padding: 16px 18px; }
.promo-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
color: var(--accent-strong);
font-size: 13px;
font-weight: 600;
& svg { flex-shrink: 0; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--hx-ease); }
}
.promo:hover .promo-link svg { translate: 3px 0; }
.plain-list .aside-link { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.plain-list .aside-link svg { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; color: var(--muted); transition: color 0.2s ease; }
.plain-list .aside-link:hover svg { color: var(--accent); }
.plain-list + .group-label { margin-top: 26px; }
.panel-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
margin: auto -34px 0;
padding: 16px 34px 18px;
border-top: 1px solid var(--line-soft);
}
.strip-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
margin: 0;
font-size: 14px;
& span { color: var(--muted); font-size: 13px; }
& a { color: var(--ink); font-weight: 500; transition: color 0.2s ease; }
& a:hover { color: var(--accent-strong); }
}
.strip-all {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--accent-strong);
font-size: 14px;
font-weight: 600;
& svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--hx-ease); }
&:hover svg { translate: 3px 0; }
}
.panel-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.actions { position: relative; display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.contact {
letter-spacing: normal;
&:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.cta {
--btn-h: 38px;
--btn-px: 18px;
gap: 6px;
letter-spacing: -0.005em;
& svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: translate 0.3s var(--hx-ease); }
&:hover svg { translate: 3px 0; }
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
color: var(--ink);
cursor: pointer;
transition: background-color 0.2s ease, color 0.3s var(--hx-ease);
-webkit-tap-highlight-color: transparent;
@media (hover: hover) {
&:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
}
.burger {
position: relative;
display: block;
width: 18px;
height: 12px;
& i {
position: absolute;
left: 0;
width: 100%;
height: 1.8px;
border-radius: 2px;
background: currentColor;
transition: translate 0.4s var(--hx-ease), rotate 0.4s var(--hx-ease);
}
& i:first-child { top: 2px; }
& i:last-child { bottom: 2px; }
}
.menu-toggle[aria-expanded="true"] .burger i:first-child { translate: 0 3.1px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .burger i:last-child { translate: 0 -3.1px; rotate: -45deg; }
}
.site-header .icon-box, .mobile-menu .icon-box {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 11px;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--ink);
transition: color 0.25s ease, border-color 0.25s ease;
& svg { width: 20px; height: 20px; fill: currentColor; }
}
.site-header .icon-item:hover .icon-box,
.mobile-menu a:hover .icon-box { border-color: var(--accent-line); color: var(--accent); }
.nav-backdrop {
position: fixed;
inset: 0;
top: var(--header-bottom, var(--header-h));
z-index: 15;
background: color-mix(in srgb, var(--shade) 10%, transparent);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
&.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; }
}
html:has(.mobile-menu.is-open) { overflow: hidden; scrollbar-gutter: stable; }
html.is-menu-locked { overflow: hidden; overscroll-behavior: none; }
.mobile-menu {
--hx-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: fixed;
top: var(--header-bottom, var(--header-h));
right: 0;
bottom: 0;
left: 0;
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
background: var(--surface);
clip-path: inset(0 0 100% 0);
visibility: hidden;
transition: clip-path 0.5s var(--hx-ease), visibility 0s linear 0.5s;
&.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.55s var(--hx-ease), visibility 0s; }
ul { margin: 0; padding: 0; list-style: none; }
a:not(.btn) { color: var(--ink); }
.mobile-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px 24px 24px; -webkit-overflow-scrolling: touch; }
.mobile-body > ul > li {
opacity: 0;
translate: 0 12px;
transition: opacity 0.25s ease, translate 0.25s ease;
}
&.is-open .mobile-body > ul > li {
opacity: 1;
translate: 0 0;
transition: opacity 0.5s ease, translate 0.6s var(--hx-ease);
}
&.is-open .mobile-body > ul > li:nth-child(1) { transition-delay: 0.08s; }
&.is-open .mobile-body > ul > li:nth-child(2) { transition-delay: 0.12s; }
&.is-open .mobile-body > ul > li:nth-child(3) { transition-delay: 0.16s; }
&.is-open .mobile-body > ul > li:nth-child(4) { transition-delay: 0.2s; }
&.is-open .mobile-body > ul > li:nth-child(5) { transition-delay: 0.24s; }
&.is-open .mobile-body > ul > li:nth-child(6) { transition-delay: 0.28s; }
&.is-open .mobile-body > ul > li:nth-child(n+7) { transition-delay: 0.32s; }
.mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
}
.mobile-body > ul > li:last-child .mobile-link {
padding: 18px 0 4px;
border-bottom: 0;
color: var(--muted);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
}
.mobile-link[aria-current="page"],
details ul a[aria-current="page"],
details ul a[aria-current="page"] b,
details:has(a[aria-current="page"]) > summary { color: var(--accent-strong); }
details { border-bottom: 1px solid var(--line-soft); }
summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
&::-webkit-details-marker { display: none; }
& svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.4s var(--hx-ease), stroke 0.2s; }
}
details[open] summary svg { rotate: 180deg; stroke: var(--ink); }
.group-label {
margin: 10px 0 4px;
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
details ul { margin: 0 0 14px; padding: 0; border: 0; }
details ul a { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
details ul a > span:last-child { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
details ul b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
details ul small { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; line-height: 1.4; }
details ul.m-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
details ul.m-compact a { gap: 9px; padding: 9px 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
details ul.m-compact a svg { flex-shrink: 0; width: 18px; height: 18px; fill: currentColor; color: var(--muted); }
details ul.m-tools { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
details ul.m-single { grid-template-columns: 1fr; }
.m-links { display: grid; gap: 8px; margin: 8px 0 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.m-all {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: start;
font-size: 15px;
font-weight: 500;
& svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
}
.m-ask {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
& a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
}
.icon-box { width: 36px; height: 36px; border-radius: 10px; & svg { width: 19px; height: 19px; } }
.inline-stat { color: var(--accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.badge {
--badge-fs: 10px;
--badge-fw: 700;
--badge-py: 2px;
--badge-px: 6px;
--badge-radius: var(--radius-sm);
border: 0;
line-height: inherit;
}
.btn {
--btn-h: 44px;
--btn-px: 0;
--btn-fs: 15px;
--btn-outline-bg: var(--surface);
display: flex;
width: 100%;
letter-spacing: -0.005em;
& svg { flex-shrink: 0; width: 17px; height: 17px; }
}
.btn-outline {
& svg { fill: currentColor; }
&:active { background: var(--line); }
}
.btn-ink {
& svg { fill: currentColor; }
&:active { border-color: var(--dark-surface); background: var(--dark-surface); }
}
.btn-primary:active { border-color: var(--accent-strong); background: var(--accent-strong); }
}
@supports (interpolate-size: allow-keywords) {
.mobile-menu {
interpolate-size: allow-keywords;
details::details-content {
block-size: 0;
overflow: clip;
transition: block-size 0.45s var(--hx-ease), content-visibility 0.45s allow-discrete;
}
details[open]::details-content { block-size: auto; }
}
}
@media (max-width: 1360px) {
.site-header .contact { display: none; }
}
@media (max-width: 1280px) {
.site-header {
padding: 0 28px;
.nav-trigger, .nav-link { padding: 0 8px; }
}
}
@media (max-width: 1180px) {
.site-header {
--hx-panel-w: calc(100vw - 32px);
padding: 0 28px;
.panel-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
}
@media (max-width: 1180px) {
.site-header {
padding: 0 20px;
.nav, .contact { display: none; }
.menu-toggle { display: inline-flex; margin-right: -8px; }
.cta {
--btn-h: 34px;
--btn-px: 14px;
--btn-fs: var(--text-sm);
& svg { width: 12px; height: 12px; }
}
}
}
@media (min-width: 1181px) {
.mobile-menu { display: none; }
}
@media (max-width: 480px) {
.site-header {
gap: 10px;
padding: 0 16px;
.menu-toggle { margin-right: -8px; }
.actions { gap: 4px; }
.cta {
--btn-h: 32px;
--btn-px: 12px;
--btn-fs: 13px;
gap: 5px;
& svg { width: 11px; height: 11px; }
}
.logo { gap: 8px; }
.logo span { font-size: 16.5px; }
.logo .logo-av { width: 28px; height: 28px; }
.logo .logo-av::after { width: 13px; height: 13px; }
}
.mobile-menu .mobile-body { padding-inline: 20px; }
}
@media (max-width: 350px) {
.site-header .logo span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.site-header, .site-header::before, .site-header *, .nav-backdrop,
.mobile-menu, .mobile-menu *, .mobile-menu details::details-content { transition: none !important; }
}
}
@layer sections {
.brand-menu {
position: fixed;
z-index: var(--z-toast);
min-width: 236px;
padding: 5px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--surface);
box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--shade) 32%, transparent);
animation: rise-in 0.18s var(--ease) both;
--rise-in-y: 4px;
}
.brand-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
line-height: 1.3;
text-align: left;
text-decoration: none;
cursor: pointer;
&:hover, &:focus-visible { background: var(--bg-alt); outline: none; }
&.is-done { color: var(--positive); }
}
.brand-menu-icon {
display: inline-flex;
flex-shrink: 0;
color: var(--muted);
& svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}
.brand-menu-item.is-done .brand-menu-icon { color: var(--positive); }
@media (prefers-reduced-motion: reduce) {
.brand-menu { animation: none; }
}
}
@layer sections {
body.single-sektor {
--title-section: clamp(28px, 2.6vw, 34px);
& main :is(.section-head, .guide-head, .closing-inner) .title { font-weight: 600; }
& main :is(.section-head, .guide-head) .lead { font-size: var(--text-md); }
& main .section-head .lead { text-wrap: pretty; }
@media (max-width: 760px) { & .br-desk { display: none; } }
& main .section:not(.section-alt, .tone-dark) + .price-guide { box-shadow: inset 0 1px 0 var(--line-soft); }
@media (max-width: 760px) {
& main :is(.ai-stat-src, .faq .link-arrow) { display: inline-flex; align-items: center; min-height: 44px; }
& main .guide-author a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
& .page-subnav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
& main .guide-head { margin-bottom: 32px; }
}
}
.sk-hero {
.sk-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.sk-hero-media {
position: relative;
width: 100%;
max-width: 380px;
margin: 0;
justify-self: end;
overflow: hidden;
aspect-ratio: 1;
border-radius: var(--radius-xl);
background: var(--bg-alt);
& img { display: block; width: 100%; height: 100%; object-fit: cover; }
&.is-placeholder {
display: grid;
place-items: center;
background: radial-gradient(120% 90% at 30% 20%, var(--surface), var(--bg-alt) 62%);
}
}
.sk-hero-ph {
display: grid;
place-items: center;
width: 34%;
aspect-ratio: 1;
border: 1px solid var(--line);
border-radius: 28%;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
color: var(--ink);
& svg { width: 46%; height: 46%; }
}
.sk-hero-title { margin: 0 0 18px; color: var(--ink); font-size: clamp(32px, 3.4vw, 44px);    font-weight: 700; letter-spacing: var(--tracking-title); line-height: var(--leading-tight); }
.sk-hero-sub { margin: 0 0 16px; color: var(--ink); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: var(--tracking-snug); line-height: 1.35; text-wrap: balance; }
.sk-hero-answer { max-width: 620px; margin: 0 0 28px; text-wrap: pretty; }
.sk-hero-trust {
display: grid;
gap: 8px;
margin: 0 0 26px;
padding: 0;
list-style: none;
& li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
& .tick { flex-shrink: 0; margin-top: 2px; }
}
.sk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-hero-fresh { margin: 18px 0 0; color: var(--muted); font-size: var(--text-xs); }
@media (min-width: 961px) {
.sk-hero-copy { position: relative; }
.sk-hero-fresh { position: absolute; top: 100%; left: 0; }
}
@media (max-width: 960px) {
.sk-hero-grid { grid-template-columns: 1fr; gap: 28px; }
.sk-hero-media { order: -1; width: 100%; max-width: 560px; aspect-ratio: 3 / 2; justify-self: start; }
}
}
:is(.sk-hero, .sk-queries, .sk-diff, .sk-rules, .sk-arch, .sk-local, .sk-scope, .sk-proof, .sk-channels, .sk-invest) {
--tick-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--cross-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%236a6a6f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
.section-head .title { text-wrap: balance; }
.tick { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--tick-check) center / 100% 100% no-repeat, var(--positive); }
.cross { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--cross-x) center / 100% 100% no-repeat, var(--line-soft); }
.sk-icon {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 12px;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
color: var(--ink);
& svg { width: 20px; height: 20px; }
}
.sk-table-scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
--sk-tbg: var(--surface);
border-radius: var(--radius-xl);
background: var(--sk-tbg);
&:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
}
&:not(.section-alt) .sk-table-scroll { --sk-tbg: var(--fill); }
.sk-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
font-size: var(--text-sm);
& :is(th, td) { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); line-height: 1.5; text-align: left; vertical-align: top; }
& thead th { padding-top: 20px; padding-bottom: 12px; border-bottom-color: var(--line); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
& tbody th { color: var(--ink); font-weight: 700; }
& td { color: var(--ink); }
& tbody tr:last-child > * { border-bottom: 0; }
}
.sk-source { max-width: 900px; margin: 16px auto 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; text-align: center; text-wrap: balance;
& a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
& a:hover { color: var(--accent-strong); }
}
.sk-after { max-width: 760px; margin: 22px auto 0; color: var(--muted); font-size: var(--text-md); line-height: var(--leading-body); text-align: center; text-wrap: pretty;
& a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
& b, & strong { color: var(--ink); font-weight: 500; }
}
@media (max-width: 760px) {
.sk-table :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; min-width: 132px; background: var(--sk-tbg); }
.sk-table-scroll { mask-image: linear-gradient(90deg, #000 86%, transparent); }
}
}
}
@layer sections {
:root:has(.page-subnav) {
--subnav-h: 48px;
--anchor-offset: calc(var(--header-h) + var(--subnav-h));
--toc-offset: calc(var(--header-h) + var(--subnav-h));
}
.page-subnav {
position: sticky;
top: var(--header-h);
z-index: var(--z-subnav);
height: var(--subnav-h);
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.subnav-inner { height: 100%; padding-inline: 40px; }
.subnav-track {
position: relative;
height: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
&.is-overflow:not(.is-end) { mask-image: linear-gradient(90deg, #000 84%, transparent); }
}
.subnav-list {
display: flex;
gap: 28px;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
& li { display: flex; flex-shrink: 0; }
& a {
display: flex;
align-items: center;
color: var(--muted);
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease);
&:hover { color: var(--ink); }
&.is-active { color: var(--accent-strong); }
&:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; border-radius: 4px; }
}
}
.site-header { transition: color 0.3s var(--hx-ease), translate 0.45s var(--hx-ease); }
.page-subnav { transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
:root.subnav-only {
--anchor-offset: var(--subnav-h);
& .site-header { translate: 0 calc(-100% - 24px); }
& .page-subnav { translate: 0 calc(-1 * var(--header-h)); }
}
.page-subnav.is-reveal {
position: fixed;
inset-inline: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s var(--ease), visibility 0s linear 0.3s;
&.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
.site-header, .page-subnav, .page-subnav.is-reveal { transition: none; }
}
.site-main > section[id] { scroll-margin-top: max(0px, calc(var(--anchor-offset) - var(--section-pad) + 24px)); }
@media (max-width: 1180px) { .subnav-inner { padding-inline: 28px; } }
@media (max-width: 1100px) { .subnav-inner { padding-inline: 20px; } }
@media (max-width: 560px) {
:root:has(.page-subnav) { --subnav-h: 44px; }
.subnav-list { gap: 22px; }
}
@media (max-width: 480px) { .subnav-inner { padding-inline: 16px; } }
}
@layer sections {
.sv {
--tick-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
.sv-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.sv-card {
position: relative;
display: flex;
flex-direction: column;
padding: 24px 24px 22px;
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 4%, transparent);
}
@media (hover: hover) {
.sv-card.has-link:hover .sv-name a { color: var(--accent-strong); }
}
.sv-name a {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
transition: color 0.25s var(--ease);
&::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
&:focus-visible { outline: none; }
}
.sv-card.has-link:has(.sv-name a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-ico {
display: inline-grid;
flex-shrink: 0;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 11px;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--ink);
& svg { width: 20px; height: 20px; }
}
.sv-name { margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1.3; }
.sv-text { margin: 14px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.sv-out-label { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.sv-out {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
& li { position: relative; padding-left: 22px; color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
& li::before { content: ""; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--tick-check) center / 100% 100% no-repeat, var(--positive); }
}
.sv-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 16px;
color: var(--ink);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
& .sv-arrow { display: inline-grid; width: 16px; height: 16px; transition: translate 0.25s var(--ease); }
& svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
&:hover { color: var(--accent-strong); }
&:hover .sv-arrow { translate: 3px 0; }
}
.sv-card.is-cta .sv-text { flex: 1; }
.sv-cta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
& .sv-link { margin: 0; padding: 0; }
}
.sv-wrap { position: relative; }
.sv-wrap.is-collapsible:not(.is-open) .sv-card:nth-child(n + 7) { display: none; }
.sv-wrap.is-collapsible:not(.is-open) .sv-grid { overflow: hidden; max-height: var(--sv-clip, none); }
.sv-more {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
height: 200px;
padding-bottom: 6px;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-alt) 0%, transparent) 0%, color-mix(in srgb, var(--bg-alt) 72%, transparent) 42%, var(--bg-alt) 74%);
pointer-events: none;
& .btn {
gap: 8px;
background: var(--surface);
box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--shade) 30%, transparent);
pointer-events: auto;
& small { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
& svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--ease); }
&:hover svg { translate: 0 2px; }
}
}
@media (max-width: 1080px) {
.sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.sv-wrap.is-collapsible:not(.is-open) .sv-card:nth-child(n + 5) { display: none; }
.sv-more { height: 170px; }
.sv-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sv-card { padding: 20px 20px 18px; border-radius: var(--radius-lg); }
}
}
}
@layer sections {
.gx {
--gx-zincir: #3a3637;
--gx-platform: #a5a5ab;
--gx-diger: #e4e4e8;
.gx-ico {
display: inline-grid;
flex-shrink: 0;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 11px;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--accent);
& svg { width: 20px; height: 20px; }
}
.gx-feature {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
align-items: center;
gap: clamp(28px, 4.5vw, 72px);
padding: clamp(24px, 3.6vw, 48px);
border-radius: var(--radius-xl);
background:
radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
var(--fill);
overflow: hidden;
}
.gx-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gx-title { margin: 6px 0 0; color: var(--ink); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.gx-text { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: 1.65; }
.gx-legend {
display: grid;
grid-template-columns: repeat(2, minmax(0, auto));
gap: 10px 22px;
margin: 10px 0 0;
padding: 0;
list-style: none;
& li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--text-xs); font-weight: 500; }
}
.gx-swatch { width: 10px; height: 10px; border-radius: 3px; }
.is-klinik { background: var(--accent); }
.is-zincir { background: var(--gx-zincir); }
.is-platform { background: var(--gx-platform); }
.is-diger { background: var(--gx-diger); }
.gx-panel {
margin: 0;
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 4%, transparent), 0 24px 48px -36px color-mix(in srgb, var(--shade) 28%, transparent);
}
.gx-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 22px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
font-size: var(--text-sm);
font-weight: 600;
& span { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
}
.gx-rows { display: grid; gap: 18px; margin: 0; padding: 20px 22px 6px; list-style: none; }
.gx-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.gx-row-name {
color: var(--ink);
font-size: var(--text-sm);
font-weight: 500;
& small { margin-left: 8px; color: var(--muted); font-size: var(--text-2xs); font-weight: 400; }
}
.gx-row-val { color: var(--accent-strong); font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-bar {
display: flex;
gap: 2px;
height: 12px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--bg-alt);
}
.gx-seg { flex: 0 0 auto; width: var(--w); height: 100%; }
.gx-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.gx-seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.gx-src { margin: 0; padding: 14px 22px 18px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.5; }
.gx-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.gx-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 26px;
border-radius: var(--radius-xl);
background: var(--fill);
}
.gx-card-title { margin: 6px 0 0; color: var(--ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: 1.3; }
.gx-card-text { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
.gx-seg { scale: 0 1; transform-origin: left; transition: scale 0.9s var(--ease) calc(0.25s + var(--r, 0) * 0.12s); }
&.is-revealed .gx-seg { scale: 1 1; }
}
@media (max-width: 1080px) {
.gx-feature { grid-template-columns: minmax(0, 1fr); }
.gx-grid { grid-template-columns: minmax(0, 1fr); }
.gx-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px 16px; }
.gx-card .gx-ico { grid-row: 1 / span 2; }
.gx-card-title { margin: 0; align-self: center; }
}
@media (max-width: 560px) {
.gx-feature { padding: 22px 16px 16px; border-radius: var(--radius-lg); }
.gx-panel-head { padding: 14px 16px; }
.gx-rows { padding: 16px 16px 4px; gap: 16px; }
.gx-src { padding: 12px 16px 16px; }
.gx-legend { gap: 8px 16px; }
.gx-card { padding: 20px; border-radius: var(--radius-lg); }
}
}
}
@layer sections {
.section-alt + .sk-channels.section-alt > .container { padding-top: 0; }
.kc {
--kc-pad: 8px;
--kc-me-bg: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
--kc-me-line: var(--accent-line);
--kc-hover: color-mix(in srgb, var(--bg-alt) 55%, var(--surface));
}
.kc .kc-card {
position: relative;
padding: var(--kc-pad);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow:
0 1px 2px color-mix(in srgb, var(--shade) 4%, transparent),
0 24px 48px -36px color-mix(in srgb, var(--shade) 22%, transparent);
}
.kc .kc-scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
border-radius: calc(var(--radius-xl) - var(--kc-pad));
&:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }
}
.kc .kc-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: var(--text-sm);
& :is(th, td) {
padding: 18px 20px;
border-bottom: 1px solid var(--line-soft);
background: var(--surface);
color: var(--ink);
line-height: 1.55;
text-align: left;
vertical-align: middle;
transition: background-color var(--dur) var(--ease);
}
& thead th {
padding: 16px 20px 14px;
border-bottom-color: var(--line);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1.3;
text-transform: uppercase;
vertical-align: bottom;
}
& thead th:nth-child(1) { width: 22%; }
& thead th:nth-child(2) { width: 16%; }
& thead th:nth-child(3) { width: 16%; }
& thead th:nth-child(4) { width: 16%; }
& tbody tr:last-child > * { border-bottom-color: transparent; }
}
@media (hover: hover) {
.kc .kc-row:not(.is-seo):hover > * { background: var(--kc-hover); }
}
.kc .kc-ch {
display: flex;
gap: 14px;
align-items: center;
min-width: 0;
}
.kc .kc-ico {
display: grid;
flex: none;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 12px;
background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 40%, var(--fill)));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--ink);
& svg { width: 19px; height: 19px; }
}
.kc .kc-name {
min-width: 0;
color: var(--ink);
font-size: var(--text-base);
font-weight: 600;
letter-spacing: var(--tracking-snug);
line-height: 1.35;
text-wrap: balance;
}
.kc .kc-badge {
display: inline-flex;
gap: 7px;
align-items: center;
padding: 4px 11px 4px 9px;
border: 1px solid;
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
&.is-ok { border-color: var(--positive-line); background: var(--positive-soft); color: var(--positive); }
&.is-limit { border-color: color-mix(in srgb, var(--warning) 20%, var(--surface)); background: #fdf3e2; color: var(--warning); }
&.is-no { border-color: var(--line); background: var(--bg-alt); color: var(--muted); }
}
.kc .kc-dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.kc .is-no .kc-dot { box-shadow: none; background: transparent; outline: 1.5px solid currentColor; outline-offset: -1.5px; }
.kc .kc-ref {
display: block;
margin-top: 7px;
padding-left: 2px;
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.45;
}
.kc .kc-row.is-seo > * {
border-top: 1px solid var(--kc-me-line);
border-bottom: 1px solid var(--kc-me-line);
background: var(--kc-me-bg);
}
.kc .kc-row.is-seo > :first-child { border-left: 1px solid var(--kc-me-line); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.kc .kc-row.is-seo > :last-child { border-right: 1px solid var(--kc-me-line); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.kc .kc-row.is-seo:last-child > * { border-bottom-color: var(--kc-me-line); }
.kc .kc-row:has(+ .kc-row.is-seo) > * { border-bottom-color: transparent; }
.kc .kc-table:has(tbody > .kc-row.is-seo:first-child) thead th { border-bottom-color: transparent; }
.kc .kc-row.is-seo th { position: relative; overflow: hidden; isolation: isolate; }
.kc .kc-row.is-seo .kc-ico {
width: 42px;
height: 42px;
border-color: var(--kc-me-line);
border-radius: 50%;
background: var(--surface);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent),
0 8px 20px -8px color-mix(in srgb, var(--accent) 45%, transparent);
color: var(--accent);
& svg { width: 21px; height: 21px; }
}
.kc .kc-row.is-seo th:has(.kc-ico)::before,
.kc .kc-row.is-seo th:has(.kc-ico)::after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: calc(20px + 21px);
border-radius: 50%;
translate: -50% -50%;
pointer-events: none;
}
.kc .kc-row.is-seo th:has(.kc-ico)::before {
width: 300px;
height: 300px;
background: repeating-radial-gradient(circle, transparent 0 33px, color-mix(in srgb, var(--accent) 16%, transparent) 33px 34px);
mask-image: radial-gradient(circle, var(--shade) 0 12%, transparent 52%);
}
.kc .kc-row.is-seo th:has(.kc-ico)::after {
width: 240px;
height: 240px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 62%);
}
.kc .kc-row.is-seo .kc-name { font-weight: 700; }
.kc .kc-row.is-no > *,
.kc .kc-row.is-no .kc-name { color: var(--muted); }
.kc .kc-row.is-no .kc-name { font-weight: 500; }
.kc .kc-row.is-no .kc-ico {
border-color: var(--line-soft);
background: var(--bg-alt);
box-shadow: none;
color: var(--muted);
& svg { opacity: 0.75; }
}
.kc .kc-hint { display: none; }
@media (max-width: 760px) {
.kc { --kc-pad: 6px; }
.kc .kc-card { border-radius: var(--radius-lg); }
.kc .kc-scroll {
border-radius: calc(var(--radius-lg) - var(--kc-pad));
mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
transition: mask-image var(--dur) var(--ease);
}
.kc .kc-scroll.is-end { mask-image: none; }
.kc .kc-table {
width: 920px;
& :is(th, td) { padding: 16px 14px; }
& thead th { padding: 14px 14px 12px; }
& thead th:nth-child(1) { width: 172px; }
& thead th:nth-child(2) { width: 150px; }
& thead th:nth-child(3) { width: 160px; }
& thead th:nth-child(4) { width: 160px; }
& :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 2; }
}
.kc .kc-row.is-seo th { position: sticky; }
.kc .kc-table :is(thead th:first-child, tbody th) { transition: box-shadow var(--dur) var(--ease); }
.kc .kc-scroll.is-scrolled .kc-table :is(thead th:first-child, tbody th) { box-shadow: 10px 0 12px -10px color-mix(in srgb, var(--shade) 16%, transparent); }
.kc .kc-ch { gap: 10px; }
.kc .kc-ico { width: 32px; height: 32px; border-radius: 10px; & svg { width: 17px; height: 17px; } }
.kc .kc-row.is-seo .kc-ico { width: 34px; height: 34px; & svg { width: 18px; height: 18px; } }
.kc .kc-row.is-seo th:has(.kc-ico)::before,
.kc .kc-row.is-seo th:has(.kc-ico)::after { left: calc(14px + 17px); }
.kc .kc-name { font-size: var(--text-sm); }
.kc .kc-hint {
position: absolute;
z-index: 3;
top: 50%;
right: 12px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface);
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--shade) 30%, transparent);
translate: 0 -50%;
pointer-events: none;
transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
&::before { content: ""; width: 12px; height: 1.5px; border-radius: 1px; background: var(--ink); }
&::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); translate: calc(-50% + 2px) -50%; rotate: 45deg; }
}
.kc .kc-card.is-moved .kc-hint,
.kc .kc-card.no-overflow .kc-hint { opacity: 0; translate: 6px -50%; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.kc .kc-table tbody { --stagger-start: 120ms; --stagger-step: 60ms; --rise-y: 6px; }
.kc:not(.is-revealed) .kc-hint { opacity: 0; }
.kc.is-revealed .kc-card:not(.is-moved, .no-overflow) .kc-hint { animation: kc-hint-in 0.7s var(--ease) 0.7s backwards; }
.kc.is-revealed .kc-row.is-seo th:has(.kc-ico)::before { animation: kc-ring 0.9s var(--ease) 0.25s backwards; }
.kc.is-revealed .kc-row.is-seo th:has(.kc-ico)::after { animation: kc-glow 0.9s var(--ease) 0.25s backwards; }
}
@media (prefers-reduced-motion: reduce) {
.kc .kc-table :is(th, td), .kc .kc-scroll, .kc .kc-hint { transition: none; }
}
.kc.is-cases .kc-table {
& thead th:nth-child(1) { width: 24%; }
& thead th:nth-child(2),
& thead th:nth-child(3) { width: 38%; color: var(--ink); }
& td { font-size: var(--text-base); }
& td b { color: var(--accent-strong); font-weight: 700; }
}
.kc.is-cases .kc-row.is-seo td { font-size: var(--text-lg); font-weight: 600; }
.kc.is-cases:not(.section-alt) .kc-card { box-shadow: 0 0 0 1px var(--line-soft), 0 24px 48px -36px color-mix(in srgb, var(--shade) 22%, transparent); }
.kc .kc-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 36px;
margin: 28px 0 0;
& .link-arrow { font-size: var(--text-sm); }
}
@media (max-width: 760px) {
.kc.is-cases .kc-table {
width: 660px;
& thead th:nth-child(1) { width: 170px; }
& thead th:nth-child(2),
& thead th:nth-child(3) { width: 245px; }
& td { font-size: var(--text-sm); }
}
.kc.is-cases .kc-row.is-seo td { font-size: var(--text-base); }
.kc .kc-links { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 22px; }
}
.kc .sk-source { max-width: none; margin-inline: 0; text-align: left; text-wrap: pretty; }
@keyframes kc-hint-in { from { opacity: 0; translate: -8px -50%; } }
@keyframes kc-ring { from { opacity: 0; scale: 0.86; } }
@keyframes kc-glow { from { opacity: 0; } }
}
@layer sections {
.lw {
.lw-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.lw-panel {
display: flex;
flex-direction: column;
padding: 8px;
border-radius: var(--radius-xl);
background: var(--fill);
}
.lw-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 16px 18px;
}
.lw-title { margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.lw-sub { margin: 3px 0 0; color: var(--muted); font-size: var(--text-xs); }
.lw-badge {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 7px;
padding: 5px 11px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--muted);
font-size: 11.5px;
font-weight: 600;
}
.lw-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #a5a5ab; }
.is-open .lw-badge { border-color: var(--positive-line); background: var(--positive-soft); color: var(--positive); }
.is-open .lw-badge-dot { background: var(--positive); }
.lw-rows {
display: grid;
flex: 1;
margin: 0;
padding: 0 18px;
border-radius: 18px;
background: var(--surface);
list-style: none;
}
.lw-row {
display: flex;
align-items: center;
gap: 14px;
min-height: 72px;
padding: 12px 0;
}
.lw-row + .lw-row { border-top: 1px solid var(--line-soft); }
.lw-ico {
display: inline-grid;
flex-shrink: 0;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: 10px;
background: linear-gradient(180deg, var(--surface), var(--bg-alt));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--ink);
& svg { width: 19px; height: 19px; }
}
.is-closed .lw-ico { color: #a5a5ab; box-shadow: none; }
.lw-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.lw-row-title { color: var(--ink); font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
.is-closed .lw-row-title { color: #4a4648; }
.lw-row-text { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.lw-ref {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 6px;
background: var(--bg-alt);
color: var(--muted);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lw-switch {
position: relative;
flex-shrink: 0;
width: 38px;
height: 22px;
border-radius: var(--radius-pill);
background: #d2d2d7;
transition: background-color 0.45s var(--ease);
& span {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
transition: translate 0.45s var(--ease);
}
}
.is-open .lw-switch { background: var(--accent); & span { translate: 16px 0; } }
.lw-foot {
max-width: 940px;
margin: 26px auto 0;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.6;
text-align: center;
text-wrap: balance;
& a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color 0.25s var(--ease); }
& a:hover { color: var(--accent-strong); }
}
@media (prefers-reduced-motion: no-preference) {
.is-closed .lw-switch { background: var(--accent); transition-delay: calc(0.35s + var(--i, 0) * 0.09s); }
.is-closed .lw-switch span { translate: 16px 0; transition-delay: calc(0.35s + var(--i, 0) * 0.09s); }
.is-open .lw-switch { background: #d2d2d7; transition-delay: calc(0.9s + var(--i, 0) * 0.09s); }
.is-open .lw-switch span { translate: 0 0; transition-delay: calc(0.9s + var(--i, 0) * 0.09s); }
&.is-revealed .is-closed .lw-switch { background: #d2d2d7; }
&.is-revealed .is-closed .lw-switch span { translate: 0 0; }
&.is-revealed .is-open .lw-switch { background: var(--accent); }
&.is-revealed .is-open .lw-switch span { translate: 16px 0; }
}
@media (max-width: 960px) {
.lw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.lw-panel { padding: 6px; border-radius: var(--radius-lg); }
.lw-head { padding: 14px 12px 14px; }
.lw-rows { padding: 0 12px; border-radius: 14px; }
.lw-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico copy switch" "ico ref switch"; gap: 6px 12px; min-height: 64px; }
.lw-ico { grid-area: ico; align-self: center; }
.lw-copy { grid-area: copy; }
.lw-ref { grid-area: ref; justify-self: start; padding: 2px 7px; font-size: 10.5px; }
.lw-switch { grid-area: switch; align-self: center; }
.lw-row-title { font-size: var(--text-sm); }
.lw-foot { margin-top: 20px; font-size: var(--text-xs); }
}
}
.lw.section-alt {
.lw-panel { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lw-rows { background: var(--bg-alt); }
.lw-badge { background: var(--bg-alt); }
}
}
@layer sections {
.sk-diff {
--fx-gap: 12px;
--fx-pad: 26px;
.fx-bento {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--fx-gap);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 961px) {
.fx-bento > li { grid-column: span 4; }
.fx-bento > li:first-child { grid-column: span 7; grid-row: span 2; }
.fx-bento > li:nth-child(2),
.fx-bento > li:nth-child(3) { grid-column: span 5; }
.fx-bento:has(> li:nth-child(4):last-child) > li:first-child { grid-row: auto; }
.fx-bento:has(> li:nth-child(4):last-child) > li:nth-child(4),
.fx-bento:has(> li:nth-child(5):last-child) > li:nth-child(4) { grid-column: span 7; }
.fx-bento:has(> li:nth-child(5):last-child) > li:nth-child(5) { grid-column: span 5; }
}
@media (max-width: 960px) {
.fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-bento > li:first-child,
.fx-bento > li:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.fx-bento { grid-template-columns: minmax(0, 1fr); }
}
.fx-card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
overflow: hidden;
padding: var(--fx-pad);
border-radius: var(--radius-xl);
background: var(--fill);
& h3 { margin: 0 0 8px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1.3; text-wrap: balance; }
& p { max-width: 66ch; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.62; text-wrap: pretty; }
& p b, & p strong { color: var(--ink); font-weight: 500; }
}
.fx-top {
display: flex;
align-items: center;
min-height: 18px;
margin-bottom: 22px;
}
.fx-ico {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 12px;
background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 40%, var(--fill)));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--accent);
& svg { width: 21px; height: 21px; }
}
.fx-card:first-child {
--fx-pad: clamp(26px, 2.6vw, 34px);
--fx-ico: 56px;
& .fx-top { margin-bottom: auto; padding-bottom: 40px; }
& .fx-ico { width: var(--fx-ico); height: var(--fx-ico); border-radius: 50%; }
& .fx-ico svg { width: 28px; height: 28px; }
& h3 { margin-bottom: 10px; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
& p { max-width: 54ch; font-size: var(--text-md); line-height: var(--leading-body); }
&::before,
&::after {
content: "";
position: absolute;
z-index: -1;
top: calc(var(--fx-pad) + var(--fx-ico) / 2);
left: calc(var(--fx-pad) + var(--fx-ico) / 2);
border-radius: 50%;
translate: -50% -50%;
pointer-events: none;
}
&::before {
width: 760px;
height: 760px;
background: repeating-radial-gradient(circle, transparent 0 47px, color-mix(in srgb, var(--ink) 8%, transparent) 47px 48px);
mask-image: radial-gradient(circle, var(--shade) 0 14%, transparent 58%);
}
&:not(:has(.fx-ico))::before { display: none; }
&:not(:has(.fx-top)) h3 { margin-top: auto; }
&::after {
width: 520px;
height: 520px;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0, color-mix(in srgb, var(--accent) 5%, transparent) 38%, transparent 66%);
}
}
@media (min-width: 961px) {
.fx-card:first-child {
--fx-ico: 64px;
& .fx-top { justify-content: flex-end; }
& .fx-ico svg { width: 30px; height: 30px; }
&::before, &::after { left: auto; right: calc(var(--fx-pad) + var(--fx-ico) / 2); translate: 50% -50%; }
&::before { width: 900px; height: 900px; }
}
}
.fx-split {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(28px, 4.4vw, 64px);
align-items: center;
overflow: hidden;
margin-top: var(--fx-gap);
padding: clamp(28px, 3.6vw, 48px);
border-radius: var(--radius-xl);
background:
radial-gradient(70% 110% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
var(--fill);
& h3 { margin: 0 0 12px; color: var(--ink); font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1.25; text-wrap: balance; }
}
.fx-split-copy > p:last-child { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: var(--leading-body); text-wrap: pretty; }
.fx-split-label { margin: 0 0 12px; color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.fx-pairs {
position: relative;
margin: 0;
padding: 4px 0;
border-radius: var(--radius-lg);
background: linear-gradient(90deg, color-mix(in srgb, var(--fill) 55%, var(--surface)) 0 50%, var(--surface) 50% 100%);
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 5%, transparent), 0 18px 36px -24px color-mix(in srgb, var(--shade) 18%, transparent);
&::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); translate: -50% 0; }
}
.fx-pair {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
& + .fx-pair { border-top: 1px solid var(--line-soft); }
&::before {
content: "≠";
content: "≠" / "";
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface);
color: var(--accent-strong);
font-size: 15px;
font-weight: 600;
line-height: 1;
translate: -50% -50%;
}
& dt { padding: 17px 30px 17px 22px; color: var(--muted); font-size: var(--text-sm); font-weight: 500; line-height: 1.45; }
& dd { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 17px 22px 17px 30px; color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
& dd svg { flex: none; width: 18px; height: 18px; margin-top: 0.5px; color: var(--accent); }
}
@media (max-width: 860px) {
.fx-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.fx-card { --fx-pad: 22px; }
.fx-top { margin-bottom: 18px; }
.fx-card:first-child { --fx-pad: 24px; --fx-ico: 50px; }
.fx-card:first-child .fx-top { padding-bottom: 36px; }
.fx-card:first-child h3 { font-size: 20px; }
.fx-card:first-child p { font-size: var(--text-base); }
.fx-split { gap: 22px; padding: 26px 10px 10px; border-radius: var(--radius-xl); }
.fx-split-copy { padding-inline: 12px; }
.fx-pairs { border-radius: calc(var(--radius-xl) - 10px); }
.fx-pair::before { width: 22px; height: 22px; font-size: 13px; }
.fx-pair dt { padding: 14px 17px 14px 14px; font-size: 13px; }
.fx-pair dd { gap: 7px; padding: 14px 12px 14px 17px; font-size: 13px; }
.fx-pair dd svg { width: 15px; height: 15px; margin-top: 1.5px; }
}
&.section-alt :is(.fx-card, .fx-split) { background: var(--surface); }
& .fx-card p a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
& .fx-card p a:hover { color: var(--accent-strong); }
.fx-split.is-solo { margin-top: 0; }
.fx-split-copy > p.fx-split-src { margin: 14px 0 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.5; }
.fx-split-copy:has(> .fx-split-src) > p:nth-last-child(2) { margin: 0; color: var(--muted); font-size: var(--text-md); line-height: var(--leading-body); text-wrap: pretty; }
.fx-pairs.has-head .fx-pair.is-head {
& span { padding: 14px 30px 12px 22px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
& span + span { padding-left: 30px; color: var(--accent-strong); }
&::before { display: none; }
& + .fx-pair { border-top: 1px solid var(--line); }
}
.mz-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--fx-gap);
margin: 0;
padding: 0;
list-style: none;
& > li { grid-column: span 2; }
& > li:nth-child(4):nth-last-child(2),
& > li:nth-child(5):last-child { grid-column: span 3; }
}
.mz-card {
display: flex;
flex-direction: column;
padding: var(--fx-pad);
border-radius: var(--radius-xl);
background: var(--fill);
& h3 { margin: 18px 0 8px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1.3; text-wrap: balance; }
& p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.62; text-wrap: pretty; }
& .mz-fix { margin-top: 12px; color: var(--ink); }
& .mz-ref { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; }
}
.mz-ico {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 12px;
background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 40%, var(--fill)));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
color: var(--accent);
& svg { width: 21px; height: 21px; }
}
@media (max-width: 960px) {
.mz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-grid > li, .mz-grid > li:nth-child(4):nth-last-child(2) { grid-column: auto; }
.mz-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.mz-grid { grid-template-columns: minmax(0, 1fr); }
.mz-card { --fx-pad: 22px; border-radius: var(--radius-lg); }
}
.fx-card .fx-fix { margin-top: 12px; color: var(--ink); }
.fx-card .fx-fix b { font-weight: 600; }
.fx-card .fx-ref, .fx-card:first-child .fx-ref { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; }
.fx-note { max-width: 860px; margin: 22px auto 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.6; text-align: center; text-wrap: balance; }
.fx-note a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (max-width: 600px) {
.fx-pairs.has-head .fx-pair.is-head span { padding: 12px 17px 10px 14px; font-size: 10px; }
.fx-pairs.has-head .fx-pair.is-head span + span { padding-left: 17px; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
&.is-revealed .fx-card:first-child::before { animation: fx-ring 0.9s var(--ease) 0.12s backwards; }
&.is-revealed .fx-card:first-child::after { animation: fx-glow 0.9s var(--ease) 0.12s backwards; }
.fx-pairs { --stagger-start: 80ms; --stagger-step: 70ms; --rise-y: 6px; }
}
}
@keyframes fx-ring { from { opacity: 0; scale: 0.86; } }
@keyframes fx-glow { from { opacity: 0; } }
.sk-diff.section-alt .mz-card { background: var(--surface); }
.sk-diff.is-band {
background:
radial-gradient(55% 70% at 100% 0%, rgb(255 255 255 / 0.06), transparent 62%),
radial-gradient(45% 60% at 0% 100%, rgb(255 255 255 / 0.025), transparent 70%),
linear-gradient(180deg, #1d191a 0%, var(--dark-bg) 100%);
.mz-card { background: rgb(255 255 255 / 0.045); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.mz-ico { border-color: rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.06); box-shadow: none; }
.mz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mz-head h3 { flex: 1 0 auto; max-width: 100%; margin: 0; }
.mz-card > p:not(.mz-ref) { margin-top: 14px; }
.mz-card p { color: rgb(255 255 255 / 0.66); }
.mz-ref { color: rgb(255 255 255 / 0.5) !important; }
.fx-note { color: rgb(255 255 255 / 0.6); }
.fx-note a { color: var(--light); }
}
}
@layer sections {
.price-guide {
--guide-text: color-mix(in srgb, var(--ink) 84%, var(--bg));
& > .container { position: relative; }
& > .container::before {
content: "";
position: absolute;
top: 0;
inset-inline: var(--gutter);
height: 1px;
background: var(--line);
}
.section-alt + & > .container::before { display: none; }
.guide-layout {
display: grid;
grid-template-columns: 236px minmax(0, 720px);
grid-template-areas: "toc head" "toc body";
column-gap: clamp(32px, 4.2vw, 60px);
justify-content: center;
align-items: start;
}
.guide-toc { grid-area: toc; position: sticky; top: calc(var(--toc-offset, var(--header-h)) + 32px); }
.guide-article { grid-area: body; }
.guide-toc {
--toc-bg: var(--bg-alt);
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--toc-bg);
}
.toc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 18px 16px 14px 20px;
border: 0;
background: none;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
&:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; border-radius: var(--radius-xl); }
&:hover .toc-chevron { background: var(--surface); color: var(--ink); }
}
.toc-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.005em; }
.toc-chevron {
display: grid;
place-items: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--muted);
& svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
.guide-toc.is-collapsed .toc-chevron svg { rotate: 180deg; }
.toc-progress {
display: block;
height: 2px;
margin: 0 20px;
overflow: hidden;
border-radius: 2px;
background: color-mix(in srgb, var(--ink) 8%, transparent);
& i { display: block; width: calc(var(--done, 0) * 100%); height: 100%; border-radius: inherit; background: var(--accent); }
}
.guide-toc.is-collapsed .toc-head { padding-bottom: 18px; }
.guide-toc.is-collapsed .toc-progress { display: none; }
.toc-body {
position: relative;
max-height: 340px;
opacity: 1;
&::before, &::after {
content: "";
position: absolute;
inset-inline: 0;
z-index: 2;
height: 32px;
opacity: 0;
pointer-events: none;
}
&::before { top: 0; background: linear-gradient(to bottom, var(--toc-bg), transparent); }
&::after { bottom: 0; background: linear-gradient(to top, var(--toc-bg), transparent); }
&.is-top::before, &.is-bottom::after { opacity: 1; }
}
.guide-toc.is-collapsed .toc-body { max-height: 0; visibility: hidden; }
.toc-scroll {
max-height: 280px;
padding: 10px 10px 12px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
.toc-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc-list a {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 8px 10px;
border-radius: 12px;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.45;
&:hover { color: var(--ink); }
&.is-active { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent); }
&.is-read { color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
}
.toc-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.toc-mark {
display: block;
width: 18px;
height: 18px;
margin-top: 1px;
& svg { display: block; width: 100%; height: 100%; overflow: visible; }
& circle { fill: none; stroke-width: 1.6; }
& .m-base { stroke: var(--line-strong); }
& .m-ring { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 44; rotate: -90deg; transform-origin: 50% 50%; opacity: 0; }
& .m-tick { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
}
.toc-list a.is-active .m-base { stroke: var(--accent-line); }
.toc-list a.is-active .m-ring { opacity: 1; stroke-dashoffset: calc(44 * (1 - var(--p, 0))); }
.toc-list a.is-read .m-base { fill: var(--accent); stroke: var(--accent); }
.toc-list a.is-read .m-tick { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.toc-head { transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), gap 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.toc-body::before, .toc-body::after { transition: opacity 0.25s ease; }
.toc-chevron, .toc-chevron svg { transition: background-color 0.25s ease, color 0.25s ease, rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.toc-progress i { transition: width 0.3s ease; }
.toc-list a { transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.toc-mark :is(circle, path) { transition: stroke 0.3s ease, fill 0.3s ease, opacity 0.3s ease, stroke-dashoffset 0.2s linear; }
}
.guide-head { grid-area: head; margin-bottom: 33px; padding-bottom: 33px; border-bottom: 1px solid var(--line-soft); }
.guide-head .title { margin-bottom: 12px; }
.guide-head .lead { margin: 0; }
.guide-author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
.avatar { --avatar-size: 40px; }
& p { display: flex; flex-direction: column; margin: 0; font-size: var(--text-sm); line-height: 1.4; }
& a { color: var(--ink); font-weight: 700; }
& a:hover { color: var(--accent-strong); }
& span { color: var(--muted); font-size: var(--text-xs); }
}
.guide-intro { margin-bottom: 44px; }
.guide-intro p { margin: 0 0 18px; color: var(--guide-text); font-size: var(--text-lg); line-height: var(--leading-loose); }
.guide-intro p:last-child { margin-bottom: 0; }
.guide-section { scroll-margin-top: calc(var(--anchor-offset, var(--header-h)) + 24px); }
.guide-section + .guide-section { margin-top: 52px; }
.guide-section h2 {
margin: 0 0 16px;
color: var(--ink);
font-size: clamp(22px, 2.3vw, 28px);
font-weight: 600;
letter-spacing: var(--tracking-title);
line-height: 1.25;
}
.guide-section h3 { margin: 34px 0 10px; color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: var(--tracking-snug); line-height: 1.35; }
.guide-section :is(p, li) { color: var(--guide-text); font-size: var(--text-lg); line-height: var(--leading-loose); }
.guide-section p { margin: 0 0 18px; }
:is(.guide-intro, .guide-section) :is(p, li, td) a:not(.btn) {
color: var(--ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
&:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
}
.guide-section :is(b, strong) { color: var(--ink); font-weight: 650; }
.guide-section :is(ul, ol):not(.guide-cases) { margin: 0 0 20px; padding-left: 34px; }
.guide-section ol:not(.guide-cases) { padding-left: 0; list-style: none; counter-reset: guide-ol; }
.guide-section ol > li { position: relative; padding-left: 28px; counter-increment: guide-ol; }
.guide-section ol > li::before { content: counter(guide-ol) "."; position: absolute; top: 0; left: 0; color: var(--accent); font-weight: 700; }
.guide-section ul:not(.is-check, .guide-cases) { list-style: disc; }
.guide-section li { margin: 6px 0; padding-left: 6px; }
.guide-section li::marker { color: var(--accent); font-weight: 700; }
.guide-section ul.is-check { padding-left: 0; list-style: none; }
.guide-section ul.is-check li {
position: relative;
padding-left: 30px;
&::before {
content: "";
position: absolute;
top: 0.42em;
left: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='%23b43d0b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px;
}
}
.table-wrap {
margin: 6px 0 28px;
overflow-x: auto;
overscroll-behavior-x: contain;
border-radius: var(--radius-lg);
background: var(--bg-alt);
scrollbar-width: thin;
&.is-overflow:not(.is-end) { mask-image: linear-gradient(90deg, #000 86%, transparent); }
}
.table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); }
.table-wrap :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.5; text-align: left; vertical-align: top; }
.table-wrap thead th { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.table-wrap tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.table-wrap :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: var(--bg-alt); }
.table-wrap td { color: var(--guide-text); }
.table-wrap.is-fit table { min-width: 0; }
.table-wrap.is-fit tbody th { white-space: normal; }
.table-wrap.is-fit td:nth-child(2) { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap.is-scroll tbody th { min-width: 150px; max-width: 190px; white-space: normal; overflow-wrap: anywhere; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.guide-note {
display: block;
margin: 4px 0 24px;
padding: 16px 20px;
border-radius: var(--radius-lg);
background: var(--bg-alt);
color: var(--guide-text);
font-size: var(--text-md);
line-height: 1.65;
& b { display: block; margin-bottom: 4px; color: var(--ink); }
}
.guide-note.is-warning b { color: var(--warning); }
.guide-note a {
color: var(--ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 3px;
white-space: nowrap;
&:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
}
.guide-cases {
display: grid;
gap: 10px;
margin: 4px 0 22px;
padding: 0;
list-style: none;
& li { margin: 0; padding: 0; }
& a {
display: grid;
gap: 2px;
padding: 14px 18px;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: var(--bg-alt);
}
& a:hover { border-color: var(--line-strong); }
& b { color: var(--ink); font-size: var(--text-base); }
& span { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
}
@media (max-width: 1080px) {
.guide-layout { display: flex; flex-direction: column; align-items: stretch; max-width: 720px; margin-inline: auto; }
.guide-head { order: 0; margin: 0 0 28px; padding: 0 0 24px; }
.guide-article { display: contents; }
.guide-intro { order: 1; margin-bottom: 28px; }
.guide-toc { order: 2; position: static; margin-bottom: 40px; }
.guide-section { order: 3; }
.guide-toc.is-collapsed { align-self: flex-start; border-radius: var(--radius-pill); }
.toc-body { contain: inline-size; }
.guide-toc.is-collapsed .toc-head { gap: 14px; padding: 8px 8px 8px 18px; }
}
@media (max-width: 1080px) and (scripting: enabled) {
/* guide-toc defaults to open */
}
@media (max-width: 560px) {
.table-wrap.is-fit :is(th, td) { padding: 12px 10px; }
.guide-section :is(p, li) { font-size: var(--text-md); line-height: 1.72; }
.guide-section + .guide-section { margin-top: 42px; }
}
}
}
@layer sections {
.faq {
--faq-pad: 18px;
.faq-layout {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.faq-side {
position: sticky;
top: calc(var(--anchor-offset, var(--header-h)) + 32px);
display: flex;
flex-direction: column;
gap: 28px;
.section-head { margin-bottom: 0; }
.title { margin-bottom: 14px; }
}
.faq-nav ol {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
&::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 2px;
border-radius: 2px;
background: var(--line);
}
}
.faq-nav-indicator {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: var(--toc-h, 0);
border-radius: 2px;
background: var(--accent);
translate: 0 var(--toc-y, 0);
pointer-events: none;
}
.faq-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0 10px 20px;
color: var(--muted);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.35;
& small {
min-width: 24px;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: var(--bg-alt);
color: var(--muted);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
&:hover { color: var(--ink); }
&.is-active { color: var(--ink); }
&.is-active small { background: var(--ink); color: var(--surface); }
&:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--radius-sm); }
}
.faq-ask {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 4px 12px;
padding: 16px 18px;
border-radius: var(--radius-lg);
background: var(--bg-alt);
.avatar { --avatar-size: 40px; grid-row: span 2; }
& p { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
& .link-arrow { font-size: var(--text-xs); }
}
.faq-group {
scroll-margin-top: calc(var(--anchor-offset, var(--header-h)) + 24px);
& + .faq-group { margin-top: 34px; }
}
.faq-group-title {
margin: 0 0 6px;
padding: 0 var(--faq-pad) 10px;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.faq-item {
scroll-margin-top: calc(var(--anchor-offset, var(--header-h)) + 24px);
.accordion-trigger { padding-inline: var(--faq-pad); }
.accordion-body { padding-inline: var(--faq-pad); }
.accordion-body p { padding-right: 24px; }
.accordion-body p + p { margin-top: 2px; }
}
.faq-item.is-open { border-bottom-color: transparent; border-radius: 16px; background: var(--bg-alt); }
.faq-item:has(+ .faq-item.is-open) { border-bottom-color: transparent; }
.faq-item.is-open .accordion-label { color: var(--ink); }
.faq-item .accordion-body {
& :is(ul, ol) {
display: grid;
gap: 7px;
margin: 2px 0 14px;
padding: 0 24px 0 0;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.6;
list-style: none;
}
& li { position: relative; padding-left: 20px; }
& ul > li::before {
content: "";
position: absolute;
top: 0.62em;
left: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
& ol { counter-reset: faq-step; }
& ol > li { counter-increment: faq-step; padding-left: 28px; }
& ol > li::before {
content: counter(faq-step);
position: absolute;
top: 0.15em;
left: 0;
display: grid;
place-items: center;
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line-strong);
color: var(--ink);
font-size: 10.5px;
font-weight: 700;
line-height: 1;
}
& li b { color: var(--ink); font-weight: 600; }
& :is(ul, ol):last-child { padding-bottom: var(--space-5); margin-bottom: 0; }
}
.faq-item:not(.is-open) .accordion-body ol > li::before { background: var(--surface); }
&.section-alt :is(.faq-ask, .faq-item.is-open) { background: var(--surface); }
--stagger-start: 120ms;
--stagger-step: 80ms;
@media (prefers-reduced-motion: no-preference) {
.faq-nav a, .faq-nav a small { transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.faq-nav-indicator { transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-item { transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
}
@media (max-width: 900px) {
.faq-layout { display: flex; flex-direction: column; gap: 22px; }
.faq-side { display: contents; }
.faq-side .section-head { order: 1; }
.faq-nav { order: 2; }
.faq-main { order: 3; width: 100%; }
.faq-ask { order: 4; align-self: stretch; }
.faq-nav ol {
flex-direction: row;
gap: 8px;
margin: 0 calc(var(--gutter) * -1);
padding: 2px var(--gutter);
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
&::before { display: none; }
}
.faq-nav-indicator { display: none; }
.faq-nav li { flex: 0 0 auto; }
.faq-nav a {
padding: 8px 12px 8px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
white-space: nowrap;
&.is-active { border-color: var(--ink); }
}
}
@media (max-width: 560px) {
--faq-pad: 14px;
.faq-item .accordion-body p { padding-right: 4px; }
.faq-item .accordion-body :is(ul, ol) { padding-right: 4px; font-size: 13px; }
}
}
}
@layer sections {
.price-closing {
--section-bg: var(--dark-bg);
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(color-mix(in srgb, var(--light) 4.5%, transparent) 1px, transparent 1px);
background-size: 26px 26px;
}
> .container { position: relative; }
.closing-inner {
display: flex;
flex-direction: column;
align-items: center;
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.avatar { --avatar-size: 56px; margin-bottom: 20px; }
.title { margin-bottom: 14px; text-wrap: balance; }
.lead { margin: 0 0 28px; color: var(--muted); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.closing-note {
margin: 20px 0 0;
color: var(--muted);
font-size: var(--text-sm);
}
@media (max-width: 560px) {
.closing-actions { flex-direction: column; align-self: stretch; }
.closing-actions .btn { justify-content: center; }
}
}
}
@layer sections {
.site-footer {
--fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
--fx-tile-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
border-top: 1px solid var(--line);
background: var(--bg-alt);
color: var(--ink);
.inner { padding: 0 40px; }
.top {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 48px 72px;
padding: 64px 0 56px;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; }
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
border-radius: 10px;
& span { color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
}
.tagline {
max-width: 300px;
margin: 0 0 24px;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.65;
& strong { color: var(--ink); font-weight: 600; }
}
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.socials {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
& > li { display: flex; }
}
.social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--surface);
box-shadow: var(--fx-tile-shadow);
color: var(--ink);
transition: color 0.25s ease, border-color 0.25s ease;
& svg { width: 16px; height: 16px; }
&:hover { border-color: var(--accent-line); color: var(--accent); }
}
.ask-ai {
display: inline-flex;
align-items: center;
gap: 9px;
height: 38px;
padding: 0 8px 0 13px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
box-shadow: var(--fx-tile-shadow);
color: var(--ink);
font-size: 13px;
white-space: nowrap;
transition: border-color 0.25s ease;
& img { display: block; flex-shrink: 0; width: 16px; height: 16px; }
& b { font-weight: 600; letter-spacing: -0.005em; }
& .icon-circle { width: 22px; height: 22px; --icon-circle-svg: 10px; }
&:hover { border-color: var(--line-strong); --arrow-rotate: 0deg; }
}
.groups {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.group summary {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 14px;
color: var(--ink);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
list-style: none;
cursor: default;
pointer-events: none;
&::-webkit-details-marker { display: none; }
}
.chevron {
display: none;
width: 16px;
height: 16px;
fill: none;
stroke: var(--muted);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: rotate 0.35s var(--fx-ease);
}
.group ul {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.group a {
display: inline-block;
padding: 5px 0;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.45;
transition: color 0.2s ease;
&:hover { color: var(--accent-strong); }
}
.notice {
display: grid;
gap: 14px;
padding: 28px 0;
border-top: 1px solid var(--line);
& p { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.75; text-wrap: pretty; }
& strong { color: var(--ink); font-weight: 600; }
}
.base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding: 12px 0;
border-top: 1px solid var(--line);
}
.copyright { color: var(--muted); font-size: var(--text-xs); }
.bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
}
.operator {
margin: 0;
color: var(--muted);
font-size: var(--text-xs);
& a { color: var(--ink); font-weight: 600; transition: color 0.2s ease; }
& a img { display: inline-block; width: auto; height: 12px; margin: 0 5px 0 1px; vertical-align: -0.13em; }
& a:hover { color: var(--accent-strong); }
}
.legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px 22px;
color: var(--muted);
font-size: var(--text-xs);
& :is(a, .cookie-prefs) { white-space: nowrap; transition: color 0.2s ease; }
& :is(a, .cookie-prefs):hover { color: var(--accent-strong); }
& .cookie-prefs { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
}
.base-end { display: flex; align-items: center; gap: 16px; }
.trust:not(:has(*)) { display: none; }
.brand .trust { margin-top: 18px; min-width: 150px; }
.to-top {
color: var(--muted);
font-size: var(--text-xs);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease;
&:hover { color: var(--accent-strong); }
}
@media (max-width: 1180px) {
.top { grid-template-columns: 1fr; gap: 40px; padding: 52px 0 44px; }
.tagline { max-width: 460px; }
}
@media (max-width: 1060px) {
.inner { padding: 0 20px; }
}
@media (max-width: 760px) {
.groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.top { gap: 32px; padding: 40px 0 8px; }
.groups { grid-template-columns: 1fr; gap: 0; }
.group { border-bottom: 1px solid var(--line); }
.group:first-child { border-top: 1px solid var(--line); }
.group summary {
margin: 0;
padding: 16px 0;
font-size: 15px;
letter-spacing: -0.01em;
text-transform: none;
cursor: pointer;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
}
.chevron { display: block; }
.group details[open] .chevron { rotate: 180deg; }
.group ul { padding: 0 0 14px; }
.group a { padding: 7px 0; font-size: 14.5px; }
.group details { interpolate-size: allow-keywords; }
.group details::details-content {
block-size: 0;
overflow: clip;
transition: block-size 0.4s var(--fx-ease), content-visibility 0.4s allow-discrete;
}
.group details[open]::details-content { block-size: auto; }
.notice { padding: 24px 0; border-top: 0; }
.base-end { width: 100%; justify-content: space-between; }
.legal { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.logo .logo-av, .social, .ask-ai, .group a, .legal a, .legal .cookie-prefs, .operator a, .to-top, .chevron { transition: none; }
.group details::details-content { transition: none; }
}
}
}
.talepwp-widget{z-index:var(--z-fab)}.talepwp-widget-handler-cta,.talepwp-widget-greetings-wave,.talepwp-widget-greetings-wave-1-cta,.talepwp-widget-form{border:1px solid var(--line);font-family:var(--font-sans) !important}.talepwp-widget .talepwp-widget-greetings-wave{--tw-ease:cubic-bezier(0.22,1,0.36,1);width:300px;gap:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface) !important;opacity:1 !important;box-shadow:0 32px 64px -24px rgb(24 21 22 / 0.28),0 12px 24px -12px rgb(24 21 22 / 0.12),0 1px 2px rgb(24 21 22 / 0.06);transition:border-color 0.25s ease;&:hover{border-color:var(--line-strong)}}.talepwp-widget .talepwp-widget-greetings-person{display:flex;align-items:center;gap:10px;padding-right:32px}.talepwp-widget .talepwp-widget-greetings-person-photo{position:relative;flex:0 0 32px;width:32px;height:32px;> img{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--bg-alt)}&::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;box-sizing:border-box;border:2px solid var(--surface);border-radius:50%;background:var(--whatsapp);animation:tw-nefes 2.8s ease-in-out infinite}}.talepwp-widget .talepwp-widget-greetings-person-text{display:flex;flex-direction:column;min-width:0}.talepwp-widget .talepwp-widget-greetings-person-name{color:var(--ink);font-size:15px;font-weight:600;line-height:18px;letter-spacing:-0.01em}.talepwp-widget .talepwp-widget-greetings-person-title{color:var(--muted);font-size:11.5px;font-weight:500;line-height:14px}.talepwp-widget .talepwp-widget-greetings-wave-1 > .talepwp-widget-greetings-wave-heading,.talepwp-widget .talepwp-widget-greetings-wave-1 > .talepwp-widget-greetings-wave-message{background:var(--bg-alt);color:var(--ink) !important}.talepwp-widget .talepwp-widget-greetings-wave-heading{margin-top:12px;padding:12px 14px 2px;border-radius:4px 12px 0 0;font-size:15px !important;font-weight:600}.talepwp-widget .talepwp-widget-greetings-wave-message{padding:0 14px 12px;border-radius:0 0 12px 12px;font-size:14px !important;line-height:1.55}.talepwp-widget .talepwp-widget-greetings-wave-1-cta{margin-top:12px;min-height:44px;padding:0 16px;border:0;border-radius:8px;background:var(--whatsapp-strong) !important;box-shadow:none;color:#fff !important;font-size:14.5px;transition:background-color 0.25s ease,scale 0.15s ease;&:hover,&:focus-visible{border:0;background:#0b665d !important;box-shadow:none;filter:none}&:active{background:#09564e !important;scale:0.99;transform:none}> div:first-child{width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23fff%22 d=%22M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232%22/%3E%3C/svg%3E") center / contain no-repeat}> div:first-child > img{visibility:hidden}> div:last-child{font-weight:600}}.talepwp-widget :is(.talepwp-widget-greetings-wave-1-cta,.talepwp-widget-greetings-wave-close,.talepwp-widget-form-title > div):focus-visible{outline:2px solid rgb(16 126 114 / 0.45);outline-offset:2px}.talepwp-widget .talepwp-widget-greetings-wave-close{top:18px;right:12px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#8a8a90;transition:background-color 0.2s ease,color 0.2s ease;&:hover{background:rgb(24 21 22 / 0.06);color:var(--ink)}> svg{width:9px;height:9px}}.talepwp-widget .talepwp-widget-handler{flex-direction:row !important;align-items:center;gap:10px;height:52px;padding:6px 16px 6px 6px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 14px 28px -14px rgb(24 21 22 / 0.3),0 1px 2px rgb(24 21 22 / 0.06);transition:border-color 0.25s ease,scale 0.15s ease;&:hover{border-color:var(--line-strong)}&:active{transform:none;scale:0.98}&:focus-visible{outline:2px solid rgb(16 126 114 / 0.45);outline-offset:3px}}.talepwp-widget .talepwp-widget-handler-icon{order:1;width:40px !important;height:40px !important;border-radius:6px !important;background:url("/wp-content/uploads/2026/09/baybars-bilim-seo-danismani-avatar-96.webp") center / cover no-repeat var(--bg-alt);transform:none !important;opacity:1 !important;> img{visibility:hidden}}html[data-fc-contacted] .talepwp-widget .talepwp-widget-handler{padding-right:6px}.talepwp-widget .talepwp-widget-handler-cta{order:2;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0;border:0;border-radius:0;background:transparent !important;box-shadow:none;color:var(--muted) !important;font-size:12.5px !important;font-weight:500;line-height:16px;white-space:nowrap}.talepwp-widget .talepwp-widget-handler-cta-name{color:var(--ink);font-size:14px;font-weight:600;line-height:18px;letter-spacing:-0.01em}.talepwp-widget .talepwp-widget-handler-cta-texts{display:grid}.talepwp-widget .talepwp-widget-handler-cta-texts > *{grid-area:1 / 1;transition:opacity 0.3s ease,translate 0.4s cubic-bezier(0.22,1,0.36,1)}.talepwp-widget .talepwp-widget-handler-cta-alt{display:flex;align-items:center;gap:5px;opacity:0;translate:0 3px;&::before{content:"";flex:0 0 14px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cpath fill=%22%23fff%22 d=%22M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z%22/%3E%3Cpath fill=%22%23cfd8dc%22 d=%22M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z%22/%3E%3Cpath fill=%22%2340c351%22 d=%22M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z%22/%3E%3Cpath fill=%22%23fff%22 fill-rule=%22evenodd%22 d=%22M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z%22 clip-rule=%22evenodd%22/%3E%3C/svg%3E") center / contain no-repeat}}.talepwp-widget .talepwp-widget-handler-cta-texts.is-alt > .talepwp-widget-handler-cta-text{opacity:0}.talepwp-widget .talepwp-widget-handler-cta-texts.is-alt > .talepwp-widget-handler-cta-alt{opacity:1;translate:0 0;transition-delay:0.12s}@media (prefers-reduced-motion:reduce){.talepwp-widget .talepwp-widget-handler-cta-texts > *{transition:none}}.talepwp-widget .talepwp-widget-handler.bounce-enter-active{animation:tw-dugme-gel 0.5s cubic-bezier(0.22,1,0.36,1) both !important}.talepwp-widget .talepwp-widget-handler.bounce-enter-active .talepwp-widget-handler-cta{animation:tw-etiket-gel 0.45s 0.1s cubic-bezier(0.22,1,0.36,1) both !important}@keyframes tw-dugme-gel{from{transform:translateY(10px) scale(0.94)}}@keyframes tw-etiket-gel{from{opacity:0;transform:translateX(-6px)}}@media (prefers-reduced-motion:reduce){.talepwp-widget .talepwp-widget-handler.bounce-enter-active,.talepwp-widget .talepwp-widget-handler.bounce-enter-active .talepwp-widget-handler-cta{animation:none !important}.talepwp-widget .talepwp-widget-handler{transition:none}}html[data-fc-greeting="shown"] .talepwp-widget .talepwp-widget-greetings{animation:tw-kart-ac 0.55s cubic-bezier(0.22,1,0.36,1) both !important;transform-origin:28px 100%}html[data-fc-greeting="shown"] .talepwp-widget-greetings-wave > *{animation:tw-icerik 0.45s cubic-bezier(0.22,1,0.36,1) both}html[data-fc-greeting="shown"] .talepwp-widget-greetings-wave > .talepwp-widget-greetings-wave-heading{animation-delay:0.12s}html[data-fc-greeting="shown"] .talepwp-widget-greetings-wave > .talepwp-widget-greetings-wave-message{animation-delay:0.18s}html[data-fc-greeting="shown"] .talepwp-widget-greetings-wave > .talepwp-widget-greetings-wave-1-cta{animation-delay:0.28s}html[data-fc-greeting] .talepwp-widget .talepwp-widget-greetings.form_slide-leave-active{animation:tw-kart-kapan 0.16s ease-in both !important}@keyframes tw-kart-ac{from{transform:translateY(12px) scale(0.96)}}@keyframes tw-kart-kapan{to{opacity:0;transform:translateY(6px) scale(0.98)}}@media (prefers-reduced-motion:reduce){html[data-fc-greeting="shown"] .talepwp-widget .talepwp-widget-greetings{animation:tw-solus 0.2s ease both !important}html[data-fc-greeting="shown"] .talepwp-widget-greetings-wave > *{animation:none}.talepwp-widget .talepwp-widget-greetings-wave::after,.talepwp-widget .talepwp-widget-greetings-person-photo::after{animation:none}}.talepwp-widget-form{--tw-ease:cubic-bezier(0.22,1,0.36,1);overflow:hidden;border-color:var(--line);border-radius:12px;background:var(--surface);box-shadow:0 32px 64px -24px rgb(24 21 22 / 0.28),0 12px 24px -12px rgb(24 21 22 / 0.12),0 1px 2px rgb(24 21 22 / 0.06);transform-origin:28px calc(100% + 40px)}.talepwp-widget-right .talepwp-widget-form{transform-origin:calc(100% - 28px) calc(100% + 40px)}.talepwp-widget-form-title{position:relative;align-items:center;gap:0;padding:14px 8px 14px 16px;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg-alt) !important;color:var(--muted) !important;&::before{content:"";flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:url("/wp-content/uploads/2026/09/baybars-bilim-seo-danismani-avatar-96.webp") center / cover no-repeat var(--surface);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}&::after{content:"";position:absolute;left:49px;top:47px;width:11px;height:11px;border:2px solid var(--bg-alt);border-radius:50%;background:var(--whatsapp);animation:tw-nefes 2.8s ease-in-out infinite}}.talepwp-widget-form-title > span{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;height:auto;padding:0 0 0 13px;font-size:13px;font-weight:500;line-height:1.3;&::before{content:"Baybars Bilim";color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-0.01em}}.talepwp-widget-form-title > div{width:40px;height:40px;border-radius:50%;color:var(--muted);opacity:1;transition:color 0.2s ease,background-color 0.2s ease;&:hover{background:rgb(24 21 22 / 0.06);color:var(--ink)}> svg{width:13px;transition:translate 0.3s var(--tw-ease)}&:hover > svg{translate:0 1.5px}}.talepwp-widget-form-fields{gap:10px;padding:16px 16px 4px}.talepwp-widget-form fieldset{gap:0}.talepwp-widget-form-fields-input{min-height:48px;padding:0 14px !important;border:1px solid transparent !important;border-radius:8px !important;background:var(--bg-alt);box-shadow:none;color:var(--ink) !important;font:inherit;font-size:15px;transition:border-color 0.2s ease,background-color 0.2s ease,box-shadow 0.25s var(--tw-ease,ease);&::placeholder{color:#8a8a90 !important;transition:color 0.2s ease}&:hover{background:#efeff2}&:focus{outline:none;border-color:rgb(16 126 114 / 0.35) !important;background:var(--surface);box-shadow:0 0 0 3px rgb(16 126 114 / 0.08)}&:focus::placeholder{color:#b4b4ba !important}}textarea.talepwp-widget-form-fields-input{min-height:88px;padding:12px 14px !important;line-height:1.5;resize:none}.talepwp-widget-form-submit{padding:14px 16px 16px}.talepwp-widget-form-submit button,.talepwp-widget-form-submit .talepwp-submit-button{min-height:48px;box-sizing:border-box;gap:10px;border:1px solid transparent;border-radius:8px !important;background:var(--whatsapp-strong) !important;color:#fff !important;font-size:15px;font-weight:600;box-shadow:none;transition:background-color 0.25s ease,scale 0.15s ease;&:hover{opacity:1;background:#0b665d !important}&:active{background:#09564e !important;scale:0.99}&:focus-visible{outline:2px solid var(--ink);outline-offset:3px}> svg{width:18px}}.talepwp-widget-form-submit button.talepwp-button-sending{animation:none !important;> svg{display:none}&::before{content:"";width:16px;height:16px;border:2px solid rgb(255 255 255 / 0.35);border-top-color:#fff;border-radius:50%;animation:tw-don 0.7s linear infinite}}.talepwp-submit-error{margin:0 16px 4px !important}.talepwp-widget-form.form_slide-enter-active{animation:tw-form-ac 0.46s var(--tw-ease) both !important}.talepwp-widget-form.form_slide-leave-active{animation:tw-form-kapan 0.2s ease-in both !important}.talepwp-widget-form.form_slide-enter-active :is(.talepwp-widget-form-title,.talepwp-widget-form-fields > *,.talepwp-widget-form-submit){animation:tw-icerik 0.42s var(--tw-ease) both}.talepwp-widget-form.form_slide-enter-active .talepwp-widget-form-fields > :nth-child(1){animation-delay:0.06s}.talepwp-widget-form.form_slide-enter-active .talepwp-widget-form-fields > :nth-child(2){animation-delay:0.09s}.talepwp-widget-form.form_slide-enter-active .talepwp-widget-form-fields > :nth-child(3){animation-delay:0.12s}.talepwp-widget-form.form_slide-enter-active .talepwp-widget-form-fields > :nth-child(n+4){animation-delay:0.15s}.talepwp-widget-form.form_slide-enter-active .talepwp-widget-form-submit{animation-delay:0.18s}@keyframes tw-form-ac{from{opacity:0;transform:translateY(14px) scale(0.96)}}@keyframes tw-form-kapan{to{opacity:0;transform:translateY(8px) scale(0.98)}}@keyframes tw-icerik{from{opacity:0;transform:translateY(6px)}}@keyframes tw-don{to{rotate:360deg}}@keyframes tw-nefes{0%,100%{box-shadow:0 0 0 0 rgb(37 211 102 / 0.35)}50%{box-shadow:0 0 0 4px rgb(37 211 102 / 0)}}@media (prefers-reduced-motion:reduce){.talepwp-widget-form.form_slide-enter-active,.talepwp-widget-form.form_slide-leave-active{animation:tw-solus 0.15s ease both !important}.talepwp-widget-form.form_slide-leave-active{animation-direction:reverse !important}.talepwp-widget-form.form_slide-enter-active *{animation:none !important}.talepwp-widget-form-title::after{animation:none}.talepwp-widget-form-submit button{transition:none}@keyframes tw-solus{from{opacity:0}}}@media print{#talepwp-widgets{display:none !important}}.talepwp-widget-greetings-wave-close,.talepwp-widget-greetings-simple-close{touch-action:manipulation;&::before{content:"";position:absolute;inset:-10px}}.talepwp-widget{transition:opacity 0.4s ease,translate 0.55s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0s}:root.is-footer-near .talepwp-widget:not(:has(.talepwp-widget-form)){opacity:0;translate:0 14px;visibility:hidden;pointer-events:none;transition:opacity 0.3s ease,translate 0.45s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0.45s}@media (prefers-reduced-motion:reduce){.talepwp-widget{translate:none !important;transition:opacity 0.2s ease,visibility 0s linear 0s}:root.is-footer-near .talepwp-widget:not(:has(.talepwp-widget-form)){transition:opacity 0.2s ease,visibility 0s linear 0.2s}}.talepwp-widget-form fieldset > .talepwp-widget-form-fields-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.talepwp-widget-form-kvkk{display:flex;align-items:flex-start;gap:8px;margin-top:8px;padding:0;color:var(--muted);font-size:12.5px;line-height:18px;white-space:normal;cursor:pointer;& input{flex:0 0 16px;appearance:none;width:16px !important;min-width:16px;height:16px !important;min-height:16px !important;margin:0;padding:0 !important;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface) no-repeat center / 10px;box-shadow:none;cursor:pointer;transition:border-color 0.2s ease,background-color 0.2s ease}& input:hover{border-color:#9d9da3}& input:checked{border-color:var(--whatsapp-strong);background-color:var(--whatsapp-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}& input:focus-visible{outline:2px solid rgb(16 126 114 / 0.35);outline-offset:2px}& a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}}.talepwp-widget .bounce-enter-active{animation:tw-belir 0.3s ease both !important}.talepwp-widget .bounce-leave-active{animation:tw-belir 0.2s ease reverse both !important}@keyframes tw-belir{from{opacity:0;transform:translateY(4px)}}.talepwp-widget-form *{font-family:var(--font-sans) !important}.talepwp-widget-form-subtitle{display:block;font-variant-numeric:tabular-nums}.tw-alt-enter-active{transition:opacity 0.35s ease,translate 0.35s cubic-bezier(0.22,1,0.36,1)}.tw-alt-leave-active{transition:opacity 0.18s ease}.tw-alt-enter-from{opacity:0;translate:0 3px}.tw-alt-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.tw-alt-enter-active,.tw-alt-leave-active{transition:none}}


.talepwp-widget-form-hp{display:none!important}