/* ab paket: site-haritasi.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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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/ahmetabic/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 Yedek';
src: local('Arial'), local('ArialMT'), local('Liberation Sans');
size-adjust: 92%;
ascent-override: 107%;
descent-override: 31.7%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Space Grotesk Yedek R';
src: local('Roboto'), local('Roboto-Regular');
size-adjust: 93%;
ascent-override: 105.8%;
descent-override: 31.4%;
line-gap-override: 0%;
}
:root {
--font-sans: "Space Grotesk", "Space Grotesk Yedek", "Space Grotesk Yedek R", -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/ahmetabic/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/ahmet-abic-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 {
.hx {
--hx-r: 12px;
background: var(--bg);
.hx-top { max-width: 1280px; padding-block: 32px 0; }
.hx-cover {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
align-items: center;
gap: 56px;
padding: 64px 56px;
border-radius: var(--hx-r);
background:
radial-gradient(58% 95% at 100% 0%, rgb(255 255 255 / 0.075), transparent 64%),
radial-gradient(45% 80% at 0% 100%, rgb(255 255 255 / 0.025), transparent 70%),
linear-gradient(180deg, #1d191a 0%, var(--dark-bg) 100%);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.08);
&::before {
content: "";
position: absolute;
top: 0;
left: 14%;
right: 14%;
z-index: -1;
height: 1px;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.26) 50%, transparent);
}
}
.hx-title {
margin: 0;
color: var(--light);
font-size: clamp(40px, 4.4vw, 58px);
font-weight: 700;
letter-spacing: var(--tracking-title);
line-height: 1.05;
}
.hx-lead {
max-width: 560px;
margin: 18px 0 0;
color: rgb(255 255 255 / 0.72);
font-size: 18px;
line-height: 1.6;
text-wrap: pretty;
}
.hx-kunye {
padding: 22px 24px 20px;
border-radius: var(--hx-r);
background: rgb(255 255 255 / 0.06);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09);
color: var(--light);
}
.hx-kunye-kicker {
margin: 0 0 8px;
color: rgb(255 255 255 / 0.6);
font-size: 11.5px;
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.hx-kunye-list {
margin: 0;
& > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
& dt { color: rgb(255 255 255 / 0.72); font-size: 14px; }
& dd { margin: 0; color: var(--light); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
}
.hx-kunye-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
margin: 14px 0 0;
color: rgb(255 255 255 / 0.6);
font-size: 13px;
& a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--light);
font-weight: 500;
text-decoration: none;
transition: color var(--dur) var(--ease);
}
& a .pack-icon { width: 14px; height: 14px; transition: translate var(--dur-fast) var(--ease); }
& a:hover { color: rgb(255 255 255 / 0.8); }
& a:hover .pack-icon { translate: 2px -2px; }
& a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
}
.hx-groups { max-width: 1280px; padding-block: clamp(40px, 5vw, 64px) var(--section-pad); }
.hx-group {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 64px;
padding-block: 48px;
border-top: 1px solid var(--line);
&:first-child { padding-top: 0; border-top: 0; }
&:last-child { padding-bottom: 0; }
}
.hx-ghead {
position: sticky;
top: calc(var(--anchor-offset, var(--header-h)) + 28px);
align-self: start;
display: grid;
justify-items: start;
gap: 6px;
}
.hx-gtitle {
margin: 0;
color: var(--ink);
font-size: clamp(24px, 2.2vw, 30px);
font-weight: 600;
letter-spacing: var(--tracking-title);
line-height: var(--leading-tight);
}
.hx-count { margin: 0; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.hx-all {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
color: var(--ink);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
transition: color var(--dur) var(--ease);
& .pack-icon { width: 14px; height: 14px; transition: translate var(--dur-fast) var(--ease); }
&:hover { color: var(--accent-strong); }
&:hover .pack-icon { translate: 3px 0; }
}
.hx-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
list-style: none;
}
.hx-card {
position: relative;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 18px;
gap: 16px;
align-items: center;
padding: 18px 14px;
border-bottom: 1px solid var(--line);
transition: background-color var(--dur) var(--ease);
}
.hx-ico {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--accent-strong);
& svg { width: 20px; height: 20px; }
}
.hx-card-body { display: grid; gap: 3px; min-width: 0; }
.hx-card-name {
color: var(--ink);
font-size: 16px;
font-weight: 600;
letter-spacing: var(--tracking-snug);
line-height: 1.3;
text-decoration: none;
transition: color var(--dur) var(--ease);
&::after { content: ""; position: absolute; inset: 0; }
&:focus-visible { outline: none; }
}
.hx-card:has(.hx-card-name:focus-visible) { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.hx-card-text { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; text-wrap: pretty; }
.hx-path { overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hx-arrow {
display: grid;
place-items: center;
color: var(--line-strong);
transition: color var(--dur) var(--ease), translate var(--dur) var(--ease);
& .pack-icon { width: 16px; height: 16px; }
}
.hx-links {
columns: 2;
column-gap: 32px;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
list-style: none;
& li { display: flex; break-inside: avoid; border-bottom: 1px solid var(--line-soft); }
& a {
flex: 1;
padding: 13px 0;
color: var(--ink);
font-size: var(--text-base);
font-weight: 400;
line-height: 1.45;
text-decoration: none;
text-wrap: pretty;
transition: color var(--dur) var(--ease);
}
& a:hover { color: var(--accent-strong); }
& a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
}
.hx-cat + .hx-cat { margin-top: 40px; }
.hx-cat-name {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 12px;
color: var(--ink);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
& a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
& a:hover { color: var(--accent-strong); }
}
.hx-cat-n { color: var(--muted); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.hx-card:hover { background: var(--fill); }
.hx-card:hover .hx-card-name { color: var(--accent-strong); }
.hx-card:hover .hx-arrow { color: var(--accent); translate: 3px 0; }
}
@media (max-width: 1080px) {
.hx-cover { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 36px; }
.hx-kunye { max-width: 460px; }
.hx-group { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hx-ghead {
position: static;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 12px;
}
.hx-all { grid-column: 3; grid-row: 1; margin-top: 0; }
}
@media (max-width: 760px) {
.hx-top { padding: 16px var(--gutter) 0; }
.hx-cover { padding: 32px 24px; }
.hx-lead { font-size: 16.5px; }
.hx-kunye { max-width: none; padding: 18px 18px 16px; }
.hx-group { padding-block: 36px; }
.hx-cards { grid-template-columns: minmax(0, 1fr); }
.hx-links { columns: 1; }
.hx-card { gap: 14px; padding: 16px 6px; }
.hx-links a { padding: 12px 0; font-size: 15px; }
}
@media (max-width: 420px) {
.hx-ghead { grid-template-columns: minmax(0, 1fr) auto; }
.hx-count { grid-column: 1; grid-row: 2; }
.hx-all { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hx-card, .hx-card-name, .hx-arrow, .hx-links a, .hx-all, .hx-all .pack-icon, .hx-kunye-foot a, .hx-kunye-foot a .pack-icon { 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-direction: column;
align-items: flex-start;
gap: 8px;
padding: 14px 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-start;
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; }
.group-yasal { display: none; }
.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; }
.group-yasal { display: block; }
.base { display: none; }
.notice { padding: 24px 0; border-top: 0; }
.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-handler-cta {
border-radius: var(--radius-xs);
padding: 6px 16px;
font-size: 14px !important;
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--shade) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--shade) 10%, transparent);
}
.talepwp-widget-greetings-wave {
border-radius: var(--radius-xs);
background-color: var(--surface);
opacity: 1;
box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--shade) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--shade) 10%, transparent);
}
.talepwp-widget-greetings-wave-1-cta {
border-radius: 3px;
padding: 14px;
}
.talepwp-widget-greetings-wave-close {
top: 10px;
right: 10px;
width: 24px;
height: 24px;
border: 1px solid var(--line);
border-radius: 3px;
background-color: var(--surface);
color: var(--muted);
opacity: 1;
transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
&:hover {
transform: none;
border-color: var(--line-strong);
color: var(--ink);
}
> svg { width: 9px; height: 9px; }
> svg path { fill: currentColor; }
}
.talepwp-widget-form {
border-radius: var(--radius-xs);
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--shade) 10%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--shade) 10%, transparent);
}
.talepwp-widget-form-title {
border-radius: 3px 3px 0 0;
}
.talepwp-widget-form-submit button,
.talepwp-widget-form-submit .talepwp-submit-button {
border-radius: var(--radius-xs);
}
.talepwp-widget-form-title > span {
height: 3.2rem;
font-family: var(--font-sans) !important;
font-size: 1.1rem;
font-weight: 600;
}
.talepwp-widget-greetings-wave-1-cta {
box-shadow: inset 0 0 0 999px rgb(47 128 237 / 0);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
&:hover, &:focus-visible {
border-color: rgb(47 128 237 / 0.3);
box-shadow: inset 0 0 0 999px rgb(47 128 237 / 0.05);
}
}
@media (prefers-reduced-motion: reduce) {
.talepwp-widget-greetings-wave-1-cta { transition: none; }
}
@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; }
}