/* ab paket: kullanim-kosullari.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 {
.policy {
--policy-text: color-mix(in srgb, var(--ink) 84%, var(--bg));
& .container { padding-top: clamp(40px, 5vw, 72px); }
}
.policy-head {
max-width: 760px;
margin-bottom: clamp(36px, 4.5vw, 56px);
padding-bottom: clamp(28px, 3.5vw, 40px);
border-bottom: 1px solid var(--line-soft);
& .title { margin-bottom: 14px; font-size: clamp(32px, 4vw, 48px); }
& .lead { margin: 0; max-width: 680px; }
}
.policy-body {
display: grid;
grid-template-columns: 250px minmax(0, 760px);
gap: clamp(40px, 5vw, 72px);
align-items: start;
}
.policy-rail {
position: sticky;
top: calc(var(--header-h) + 28px);
}
.policy-rail-label {
margin: 0 0 12px;
padding-left: 12px;
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.policy-list {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
& a {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px;
border-radius: 12px;
color: var(--muted);
font-size: var(--text-md);
font-weight: 500;
line-height: 1.35;
transition: color 0.25s ease, background-color 0.25s ease;
}
& a:hover { color: var(--ink); background: var(--bg-alt); }
& a[aria-current="page"] { color: var(--ink); font-weight: 650; background: var(--bg-alt); }
& .pack-icon { flex-shrink: 0; width: 18px; height: 18px; color: currentColor; opacity: 0.8; }
& a[aria-current="page"] .pack-icon { color: var(--accent); opacity: 1; }
}
.policy-rail-note {
margin: 20px 0 0;
padding: 16px 12px 0;
border-top: 1px solid var(--line-soft);
color: var(--muted);
font-size: var(--text-xs);
line-height: 1.6;
& a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
& a:hover { color: var(--accent-strong); }
}
.policy-text {
min-width: 0;
& > p, & .policy-section :is(p, li) { color: var(--policy-text); font-size: var(--text-lg); line-height: var(--leading-loose); }
& > p, & .policy-section p { margin: 0 0 18px; }
& :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; }
}
& :is(b, strong) { color: var(--ink); font-weight: 650; }
}
.policy-section {
scroll-margin-top: calc(var(--header-h) + 24px);
margin-top: 52px;
& h2 {
margin: 0 0 16px;
color: var(--ink);
font-size: clamp(22px, 2.3vw, 28px);
font-weight: 700;
letter-spacing: var(--tracking-title);
line-height: 1.25;
}
& h3 { margin: 34px 0 10px; color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: var(--tracking-snug); line-height: 1.35; }
& ul { margin: 0 0 20px; padding-left: 34px; list-style: disc; }
& ol { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: policy-ol; }
& ol > li { position: relative; padding-left: 28px; counter-increment: policy-ol; }
& ol > li::before { content: counter(policy-ol) "."; position: absolute; top: 0; left: 0; color: var(--accent); font-weight: 700; }
& li { margin: 6px 0; padding-left: 6px; }
& li::marker { color: var(--accent); font-weight: 700; }
}
.policy-statement {
margin: 0 0 36px;
padding: 26px 28px 24px;
border-radius: var(--radius-xl);
background: var(--bg-alt);
& p { margin: 0 0 16px; color: var(--policy-text); font-size: var(--text-lg); line-height: 1.7; }
& strong { color: var(--ink); font-weight: 650; }
@media (max-width: 560px) { padding: 22px 20px 20px; }
}
.policy-statement .policy-statement-label {
margin: 0 0 10px;
color: var(--accent-strong);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1.4;
text-transform: uppercase;
}
.policy-statement-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
& li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: var(--text-md); font-weight: 500; line-height: 1.55; }
& .pack-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); }
}
.policy-evidence {
margin: 6px 0 26px;
padding: 22px 24px 20px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--bg);
@media (max-width: 560px) { padding: 20px 18px 18px; }
}
.policy-text .policy-evidence {
& p { margin: 0 0 10px; font-size: var(--text-md); line-height: 1.65; }
& > :last-child { margin-bottom: 0; }
& b { color: var(--ink); font-weight: 650; }
}
.policy-text .policy-evidence .policy-evidence-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--ink);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1;
text-transform: uppercase;
& .pack-icon {
flex-shrink: 0;
box-sizing: border-box;
width: 24px;
height: 24px;
padding: 5px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-strong);
}
}
.policy-text .policy-evidence .policy-evidence-src { margin: 14px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.policy .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); }
}
.policy .table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); }
.policy .table-wrap :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.55; text-align: left; vertical-align: top; }
.policy .table-wrap thead th { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.policy .table-wrap tbody th { min-width: 140px; max-width: 200px; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.policy .table-wrap :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: var(--bg-alt); }
.policy .table-wrap td { color: var(--policy-text); }
.policy .table-wrap tbody tr:last-child > * { border-bottom: 0; }
.policy .table-wrap.policy-map table, .policy .table-wrap.policy-contact table { min-width: 0; }
.policy .table-wrap.policy-map td:first-child { color: var(--ink); }
.policy .table-wrap.policy-map td:last-child { width: 34%; white-space: nowrap; }
.policy pre {
margin: 6px 0 24px;
padding: 20px 22px;
overflow-x: auto;
border-radius: var(--radius-lg);
background: var(--bg-alt);
color: var(--ink);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13.5px;
line-height: 1.7;
white-space: pre-wrap;
}
.policy-text > .policy-date {
margin: 56px 0 0;
padding-top: 20px;
border-top: 1px solid var(--line-soft);
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.6;
}
@media (max-width: 940px) {
.policy-body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.policy-rail { position: static; order: 2; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.policy-text { order: 1; }
}
@media (prefers-reduced-motion: reduce) {
.policy-list a { transition: none; }
}
}
@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}