/* ab paket: blog-v12.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 {
body:is(.single-post, .single-vaka) { --blog-r: 12px; --blog-r-sm: 8px; background: var(--bg); }
.post-head {
position: relative;
background: var(--bg);
color: var(--ink);
overflow-x: clip;
& .post-head-in { max-width: 1280px; padding-block: 36px 52px; }
& a:not(.btn) { color: inherit; text-decoration: none; }
& .pack-icon { flex-shrink: 0; width: 16px; height: 16px; }
}
.post-crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 4px 0;
margin: 0;
padding: 0;
color: var(--muted);
font-size: var(--text-xs);
list-style: none;
& li + li::before { content: "/"; margin-inline: 10px; color: var(--line-strong); }
& a { transition: color var(--dur-fast) var(--ease); }
& a:hover { color: var(--ink); }
}
.post-head-grid { margin-top: 28px; }
.post-title {
max-width: 900px;
margin: 0;
color: var(--ink);
font-size: clamp(30px, 3.5vw, 46px);
font-weight: 600;
letter-spacing: var(--tracking-title);
line-height: 1.12;
text-wrap: balance;
}
.post-dek {
max-width: 720px;
margin: 18px 0 0;
color: var(--muted);
font-size: 18px;
line-height: 1.6;
text-wrap: pretty;
@media (max-width: 760px) { font-size: var(--text-lg); }
}
.post-byline {
max-width: 720px;
margin-top: 32px;
border-radius: var(--blog-r);
background: var(--bg-alt);
}
.byline-who {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
& .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
}
.byline-person {
display: grid;
gap: 3px;
min-width: 0;
margin: 0;
}
.byline-label {
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.byline-name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 12px;
font-size: var(--text-md);
& a { color: var(--ink); font-weight: 600; transition: color var(--dur-fast) var(--ease); }
& a:hover { color: var(--accent-strong); }
}
.byline-role {
display: inline-flex;
align-items: baseline;
gap: 12px;
color: var(--muted);
&::before { content: ""; align-self: center; width: 1px; height: 14px; background: var(--line-strong); }
}
.byline-verified {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 0 auto;
padding: 6px 12px 6px 9px;
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-size: var(--text-xs);
font-weight: 500;
white-space: nowrap;
& .pack-icon { width: 15px; height: 15px; color: var(--accent); }
}
.byline-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 0;
padding: 10px 14px 10px 22px;
border-top: 1px solid var(--line);
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--muted);
font-size: var(--text-sm);
& time { color: var(--ink); }
& + .meta-item::before,
& + .ask-ai:where([data-ask-ai])::before { content: ""; width: 1px; height: 16px; margin-inline: 4px 14px; background: var(--line-strong); }
}
.meta-item + .meta-item::before { margin-inline: 14px 14px; }
.byline-sources {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 11px 22px;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--blog-r) var(--blog-r);
background: var(--positive-soft);
color: var(--muted);
font-size: var(--text-xs);
& b { color: var(--positive); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
& .pack-icon { color: var(--positive); }
}
.ask-ai:where([data-ask-ai]) {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 14px;
&::before { content: ""; width: 1px; height: 16px; margin-inline: 0 14px; background: var(--line-strong); }
}
.meta-item + .ask-ai:where([data-ask-ai]) { margin-left: 0; }
.ask-ai-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 12px 0 10px;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
& .pack-icon:first-child { color: var(--accent); }
& .pack-icon:last-child { width: 12px; height: 12px; color: var(--muted); transition: rotate var(--dur) var(--ease); }
&:hover { background: var(--surface); }
&[aria-expanded="true"] { background: var(--surface); }
&[aria-expanded="true"] .pack-icon:last-child { rotate: 180deg; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.ask-ai-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: var(--z-popover);
display: grid;
width: min(256px, calc(100vw - 32px));
padding: 5px;
border: 1px solid var(--line);
border-radius: var(--blog-r);
background: var(--surface);
box-shadow: 0 28px 64px -24px rgb(24 21 22 / 0.28), 0 2px 6px rgb(24 21 22 / 0.04);
transform-origin: top left;
&.is-entering { animation: ai-menu-in 0.22s var(--ease) both; }
}
@keyframes ai-menu-in {
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
.ask-ai-menu.is-up.is-entering { animation-name: ai-menu-in-up; }
@keyframes ai-menu-in-up {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.ai-item {
display: grid;
grid-template-columns: 16px 1fr;
align-items: start;
gap: 10px;
width: 100%;
padding: 7px 10px 8px;
border: 0;
border-radius: var(--blog-r-sm);
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
&:hover, &:focus-visible { background: var(--bg-alt); outline: none; }
&.is-done .ai-txt small { color: var(--positive); }
}
.ai-ico {
display: grid;
place-items: center;
width: 16px;
height: 18px;
color: color-mix(in srgb, var(--ink) 62%, var(--surface));
& svg { width: 15px; height: 15px; }
}
.ai-txt {
display: grid;
gap: 1px;
min-width: 0;
& b { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
& b .pack-icon { width: 10px; height: 10px; color: var(--muted); }
& small { color: var(--muted); font-size: 12px; line-height: 1.35; }
}
.ai-sep { height: 1px; margin: 4px -5px; background: var(--line); }
@media (max-width: 760px) {
.post-head .post-head-in { padding-block: 22px 36px; }
.post-head-grid { margin-top: 20px; }
.post-byline { margin-top: 24px; }
.byline-who { flex-wrap: wrap; padding: 16px; }
.byline-verified { margin-left: 62px; }
.byline-meta { gap: 6px 18px; padding: 10px 12px 10px 16px; }
.meta-item + .meta-item::before { display: none; }
.ask-ai:where([data-ask-ai]) { flex-basis: 100%; margin: 6px 0 0 -4px; padding-top: 8px; border-top: 1px solid var(--line); }
.ask-ai:where([data-ask-ai])::before, .meta-item + .ask-ai:where([data-ask-ai])::before { display: none; }
.ask-ai-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.ask-ai-menu.is-entering { animation: none; }
}
}
@layer sections {
.post-body {
background: var(--bg);
color: var(--ink);
& .container { padding-block: 56px 24px; }
}
.post-grid {
display: grid;
grid-template-columns: minmax(0, 820px) 332px;
justify-content: space-between;
gap: 48px;
max-width: 1280px;
}
.post-article, .end-col { grid-column: 1; min-width: 0; }
.post-content {
color: var(--ink);
font-size: var(--text-lg);
line-height: var(--leading-loose);
overflow-wrap: break-word;
& > :first-child { margin-top: 0; }
& p { margin: 0 0 22px; text-wrap: pretty; }
& h2, & h3, & h4 {
color: var(--ink);
letter-spacing: var(--tracking-snug);
text-wrap: balance;
scroll-margin-top: calc(var(--header-h) + 72px);
}
& h2 {
margin: 56px 0 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
font-size: 26px;
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.02em;
}
& h3 { margin: 38px 0 12px; font-size: 20px; font-weight: 600; line-height: 1.35; }
& h4 { margin: 30px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.4; }
& h2 + h3 { margin-top: 26px; }
& :is(p, li) a:not(.btn) {
color: var(--ink);
text-decoration: underline dotted;
text-decoration-color: var(--muted);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
&:hover, &:focus-visible { color: var(--accent-strong); text-decoration-color: currentColor; text-decoration-style: solid; }
}
& ul, & ol { margin: 0 0 24px; padding-left: 1.4em; }
& li { margin-bottom: 8px; padding-left: 4px; }
& li::marker { color: var(--muted); }
& ol > li::marker { font-weight: 600; }
& ul.wp-block-list:not(.blog-gist *) { list-style: disc; }
& ol.wp-block-list:not(.blog-gist *) {
padding-left: 0;
list-style: none;
counter-reset: blog-ol;
& > li { position: relative; padding-left: 28px; counter-increment: blog-ol; }
& > li::before { content: counter(blog-ol) "."; position: absolute; top: 0; left: 0; color: var(--muted); font-weight: 600; }
}
& blockquote {
margin: 28px 0;
padding: 22px 26px;
border-radius: var(--blog-r);
background: var(--bg-alt);
color: var(--ink);
& p:last-child { margin-bottom: 0; }
}
& code { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--bg-alt); font-family: var(--font-mono); font-size: 0.84em; }
& pre { margin: 0 0 24px; padding: 16px 20px; overflow-x: auto; border-radius: var(--blog-r-sm); background: var(--bg-alt); font-size: var(--text-sm); }
& pre code { padding: 0; background: none; }
& figure { margin: 32px 0; }
& figure.wp-block-image { width: fit-content; max-width: 100%; margin-inline: auto; }
& figure img, & p > img {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
border: 1px solid var(--line);
border-radius: var(--blog-r-sm);
background: var(--bg-alt);
}
& figcaption {
contain: inline-size;
margin: 12px 0 0;
color: var(--muted);
font-size: var(--text-xs);
line-height: var(--leading-snug);
text-align: left;
text-wrap: pretty;
}
& hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
& .table-wrap {
margin: 28px 0;
overflow-x: auto;
overscroll-behavior-x: contain;
border-radius: var(--radius-lg);
background: var(--bg-alt);
scrollbar-width: thin;
&.is-overflow:not(.is-end) { mask-image: linear-gradient(90deg, #000 86%, transparent); }
}
& .table-wrap > figure { width: fit-content; min-width: 100%; margin: 0; }
& .table-wrap figcaption { position: sticky; left: 0; box-sizing: border-box; max-width: min(100%, calc(100vw - 2 * var(--gutter))); margin: 0; padding: 12px 16px 14px; }
& .table-wrap figure:has(figcaption) tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
& .table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
& .table-wrap table:has(tr > :nth-child(3)) { min-width: max(100%, calc(var(--cols, 3) * 150px)); }
& .table-wrap :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.5; text-align: left; vertical-align: top; }
& .table-wrap thead th { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
& .table-wrap td { color: color-mix(in srgb, var(--ink) 84%, var(--bg)); }
& .table-wrap tbody tr > :first-child { color: var(--ink); font-weight: 700; }
& .table-wrap tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-alt); }
& .table-wrap tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) {
font-size: var(--text-base);
line-height: 1.75;
& h2 { margin-top: 44px; font-size: 22px; }
& h3 { font-size: 18.5px; }
& figure { margin: 24px 0; }
}
}
.post-content .blog-note {
margin: 28px 0;
padding: 20px 24px;
border-radius: var(--blog-r);
background: var(--bg-alt);
font-size: var(--text-base);
line-height: var(--leading-body);
& > strong:first-child, & > b:first-child { color: var(--ink); font-weight: 600; }
}
.post-content .blog-notice {
margin: 28px 0;
padding: 18px 22px;
border-radius: var(--blog-r);
background: var(--bg-alt);
font-size: var(--text-base);
line-height: var(--leading-body);
& .blog-notice-title { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
& p { margin: 0 0 10px; }
& > :last-child { margin-bottom: 0; }
}
.post-content .blog-button { margin: 28px 0; }
.post-content .blog-faq {
margin: 24px 0 32px;
border-top: 1px solid var(--line);
& .accordion-heading { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: 0; scroll-margin-top: 0; }
& .accordion-label { font-size: 16.5px; }
& .accordion-body {
font-size: var(--text-base);
& p { margin: 0 0 12px; padding-right: 34px; color: var(--muted); font-size: inherit; }
& > :last-child { margin-bottom: 0; padding-bottom: 20px; }
& :is(ul, ol) { color: var(--muted); }
}
@media (max-width: 760px) { & .accordion-label { font-size: 15px; } }
}
.post-content .wp-block-embed {
& iframe { border: 0; border-radius: var(--blog-r-sm); background: var(--bg-alt); }
& .twitter-tweet { margin: 0; font-size: var(--text-base); }
& .twitter-tweet a { color: var(--muted); font-size: var(--text-sm); }
}
.blog-gist {
position: relative;
isolation: isolate;
margin: 32px 0 36px;
padding: 26px 30px 28px;
overflow: hidden;
border-radius: var(--blog-r);
background: var(--bg-alt);
& .gist-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
margin: 0 0 14px;
}
& .gist-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent-strong);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
& .pack-icon { width: 18px; height: 18px; color: var(--accent); }
}
& .gist-meta { color: var(--muted); font-size: var(--text-2xs); letter-spacing: 0.04em; }
& .gist-text { position: relative; z-index: 1; }
& .gist-text :is(p, li) {
margin: 0;
color: var(--ink);
font-size: var(--text-lg);
line-height: var(--leading-loose);
}
& .gist-text > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 12px; }
& .gist-text :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
& .gist-text li { position: relative; padding-left: 20px; }
& .gist-text li + li { margin-top: 10px; }
& .gist-text ul > li::before {
content: "";
position: absolute;
top: calc(0.5lh - 3px);
left: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
& .gist-text ol { counter-reset: gist; }
& .gist-text ol > li { counter-increment: gist; }
& .gist-text ol > li::before { content: counter(gist) "."; position: absolute; left: 0; color: var(--accent-strong); font-weight: 600; }
& .gist-text :is(strong, b) { color: var(--ink); }
& .gist-mark {
position: absolute;
right: -18px;
bottom: -34px;
z-index: -1;
width: 150px;
height: auto;
fill: #e9e9ed;
pointer-events: none;
}
@media (max-width: 760px) {
margin: 24px 0 28px;
padding: 20px 20px 22px;
border-radius: var(--blog-r);
& .gist-text :is(p, li) { font-size: var(--text-base); line-height: 1.72; }
& .gist-mark { width: 104px; right: -14px; bottom: -24px; }
}
}
.post-side { grid-column: 2; grid-row: 1; min-width: 0; }
.side-sticky {
position: sticky;
top: calc(var(--header-h) + 72px);
display: grid;
gap: 20px;
}
.post-toc {
--toc-max: min(46vh, 400px);
position: relative;
}
.toc-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 0 0 12px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
text-align: left;
cursor: default;
}
.toc-title { color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.toc-left { margin-left: auto; color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.toc-chev { display: none; }
.toc-bar { display: none; }
.toc-body {
position: relative;
max-height: var(--toc-max);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
.toc-list {
position: relative;
margin: 0;
padding: 0 0 0 16px;
list-style: none;
&::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; border-radius: 2px; background: var(--line-soft); }
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2px;
height: var(--ind-h, 0px);
border-radius: 2px;
background: var(--accent);
transform: translateY(var(--ind-y, 0px));
opacity: var(--ind-o, 0);
transition: transform 0.45s var(--ease), height 0.45s var(--ease), opacity var(--dur) var(--ease);
}
& li { margin: 0; }
& a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
color: var(--muted);
font-size: var(--text-sm);
line-height: var(--leading-snug);
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
&:hover { color: var(--ink); }
&.is-active { color: var(--ink); font-weight: 500; }
}
}
.toc-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.toc-mark { display: none; }
.blog-cta {
padding: 22px 22px 18px;
border-radius: var(--blog-r);
background: var(--bg-alt);
& .cta-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--accent-strong); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
& .cta-title { margin: 0 0 8px; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: var(--tracking-snug); }
& .cta-text { margin: 0 0 18px; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-body); }
& .cta-text strong { color: var(--ink); }
& .cta-btn { --btn-h: 46px; --btn-fs: var(--text-sm); width: 100%; }
& .cta-btn .pack-icon { width: 18px; height: 18px; }
& .cta-note { margin: 10px 0 0; color: var(--muted); font-size: var(--text-2xs); text-align: center; }
}
@media (max-width: 1080px) {
.post-body .container { padding-block: 28px 8px; }
.post-grid { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
.post-side { grid-column: 1; grid-row: 1; margin-bottom: 28px; }
.post-article { grid-row: 2; }
.side-sticky { position: static; display: block; }
.side-cta, .side-author { display: none; }
.post-toc {
--toc-max: 60vh;
border-radius: var(--blog-r);
background: var(--bg-alt);
}
.toc-toggle { min-height: 52px; margin: 0; padding: 0 18px; cursor: pointer; }
.toc-title { color: var(--ink); font-size: var(--text-sm); letter-spacing: 0.02em; text-transform: none; }
.toc-chev { display: inline-flex; color: var(--muted); transition: rotate var(--dur) var(--ease); }
.toc-chev .pack-icon { width: 14px; height: 14px; }
.toc-toggle[aria-expanded="true"] .toc-chev { rotate: 180deg; }
.toc-body { padding: 0 18px 14px; }
.post-toc.is-collapsed .toc-body,
.post-toc:not([data-ready]) .toc-body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.toc-list::after, .toc-chev, .toc-bar i { transition: none; }
}
}
@layer sections {
.post-end {
background: var(--bg);
color: var(--ink);
& .container { padding-block: 8px var(--section-pad); }
& a:not(.btn) { color: inherit; text-decoration: none; }
& .pack-icon { flex-shrink: 0; width: 16px; height: 16px; }
}
.end-col { display: grid; gap: 40px; }
.end-q {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--ink);
font-size: var(--text-base);
font-weight: 600;
}
.end-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }
.end-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
padding-block: 24px;
border-block: 1px solid var(--line);
}
.end-feedback {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
}
.fb-btns { display: flex; gap: 8px; }
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 16px 0 13px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
&:hover { border-color: var(--ink); }
& .pack-icon { color: var(--muted); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.fb-thanks {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--positive);
font-size: var(--text-sm);
font-weight: 500;
animation: end-fade 0.35s var(--ease) both;
}
@keyframes end-fade { from { opacity: 0; transform: translateY(4px); } }
.end-share { display: flex; align-items: center; gap: 14px; }
.end-share .end-q .pack-icon { color: var(--muted); }
.share-btns { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.share-btn {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface);
color: var(--ink);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
& .pack-icon { width: 17px; height: 17px; }
&:hover { border-color: var(--ink); }
&.is-done { border-color: var(--positive-line); color: var(--positive); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.end-author {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 20px;
padding: 26px 28px;
border-radius: var(--blog-r);
background: var(--bg-alt);
& .avatar { width: 72px; height: 72px; border-radius: 50%; }
}
.author-kicker { margin: 0 0 6px; color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.author-name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 12px;
margin: 0 0 10px;
& a { font-size: 18px; font-weight: 600; letter-spacing: var(--tracking-snug); transition: color var(--dur-fast) var(--ease); }
& a:hover { color: var(--accent-strong); }
& span { color: var(--muted); font-size: var(--text-sm); }
}
.author-bio { margin: 0 0 16px; color: var(--ink); font-size: var(--text-base); line-height: var(--leading-body); }
.author-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.author-verified {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--muted);
font-size: var(--text-xs);
& .pack-icon { color: var(--accent); }
& time { color: var(--ink); }
}
.author-links {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
& .share-btn { width: 36px; height: 36px; }
& .text-link { margin-left: 10px; }
}
.cases-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.cases-list { margin: 0; padding: 0; list-style: none; }
.cases-list a {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 16px 4px;
border-bottom: 1px solid var(--line-soft);
transition: color var(--dur-fast) var(--ease);
&:hover .case-txt b { color: var(--accent-strong); }
}
.case-no { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.case-txt {
display: grid;
gap: 2px;
min-width: 0;
& b { font-size: var(--text-base); font-weight: 600; transition: color var(--dur-fast) var(--ease); }
& span { color: var(--muted); font-size: var(--text-sm); }
}
.case-res { color: var(--accent-strong); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.end-cta { display: none; }
.end-cta.is-always { display: block; }
@media (max-width: 1080px) {
.end-cta { display: block; }
.post-end .post-grid { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
@media (max-width: 760px) {
.end-col { gap: 32px; }
.end-actions { display: grid; gap: 22px; }
.end-share { flex-wrap: wrap; }
.share-btn { width: 44px; height: 44px; }
.chip { min-height: 44px; }
.end-author { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
.end-author .avatar { width: 60px; height: 60px; }
.author-links .share-btn { width: 44px; height: 44px; }
.cases-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; }
.case-no { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fb-thanks { animation: none; }
}
}
@layer sections {
body.blog-v12 {
--v12-paper: var(--surface);
--v12-ink: var(--ink);
--v12-muted: var(--muted);
--v12-line: var(--line);
--v12-line-soft: var(--line-soft);
--v12-alt: var(--bg-alt);
--v12-positive: var(--positive);
--v12-dtile: #221d1e;
--v12-dline: color-mix(in srgb, var(--light) 8%, transparent);
--v12-top: 80px;
--v12-gap: 48px;
}
body.blog-v12 .v12-band { position: relative; }
body.blog-v12 .v12-band .v12-band-in { max-width: 1280px; padding-block: 32px 0; }
body.blog-v12 .v12-cover {
position: relative;
isolation: isolate;
padding: 56px;
border-radius: var(--blog-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);
color: var(--ink);
&::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);
pointer-events: none;
}
}
body.blog-v12 .v12-cat {
margin: 0 0 20px;
& a { display: inline-block; padding-block: 8px; margin-block: -8px; }
& span {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 11px;
border-radius: var(--blog-r-sm);
background: rgb(255 255 255 / 0.08);
color: rgb(255 255 255 / 0.86);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.01em;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
& a:hover span { background: rgb(255 255 255 / 0.14); color: var(--light); }
& a:focus-visible { outline: none; }
& a:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
}
body.blog-v12 .v12-head-main { min-width: 0; }
body.blog-v12 .v12-title {
max-width: 800px;
margin: 0;
color: var(--light);
font-size: clamp(32px, 3.4vw, 44px);
font-weight: 700;
line-height: 1.14;
letter-spacing: var(--tracking-title);
text-wrap: balance;
}
body.blog-v12 .v12-dek {
max-width: 720px;
margin: 16px 0 0;
color: rgb(255 255 255 / 0.72);
font-size: 17px;
line-height: 1.6;
}
body.blog-v12 .v12-ico {
display: inline-grid;
flex: none;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--light) 10%, transparent);
border-radius: var(--blog-r-sm);
background: linear-gradient(180deg, color-mix(in srgb, var(--light) 8%, transparent), color-mix(in srgb, var(--light) 2%, transparent));
color: var(--accent);
& .pack-icon { width: 17px; height: 17px; }
}
body.blog-v12 .v12-ico.is-light {
border-color: var(--line);
background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 40%, var(--fill)));
box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent);
}
body.blog-v12 .post-body .container { padding-block: 0 var(--section-pad); }
body.blog-v12 .post-grid {
grid-template-columns: minmax(0, 820px) 332px;
justify-content: space-between;
gap: 0 48px;
max-width: 1280px;
}
body.blog-v12 .v12-body .post-article { grid-column: 1; grid-row: 2; padding-top: 40px; }
body.blog-v12 .v12-side { grid-column: 2; grid-row: 1 / span 3; min-width: 0; margin-top: 24px; }
body.blog-v12 .v12-body .v12-end-col { grid-column: 1; grid-row: 3; padding-top: 24px; }
body.blog-v12 .v12-byline {
grid-column: 1;
grid-row: 1;
container-type: inline-size;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px 0;
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
body.blog-v12 .v12-by {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding-right: 22px;
& .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
}
body.blog-v12 .v12-by-text { display: grid; gap: 2px; min-width: 0; margin: 0; }
body.blog-v12 .v12-by-label {
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
body.blog-v12 .v12-by-who {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
font-size: 15px;
line-height: 1.35;
}
body.blog-v12 .v12-by-role { display: none; color: var(--muted); font-size: var(--text-sm); }
body.blog-v12 .v12-meta {
display: flex;
align-items: stretch;
min-width: 0;
}
body.blog-v12 .v12-cell {
display: grid;
align-content: center;
gap: 2px;
margin: 0;
padding-inline: 22px;
border-left: 1px solid var(--line);
white-space: nowrap;
}
body.blog-v12 .v12-cell-val {
color: var(--ink);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
body.blog-v12 .v12-byline { position: relative; z-index: 5; }
body.blog-v12 .v12-by { position: relative; }
body.blog-v12 .v12-by-name {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 12px 0;
margin: -12px 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease), scale 0.18s var(--ease);
&::before {
content: "";
position: absolute;
inset: 7px -8px;
z-index: -1;
border-radius: var(--blog-r-sm);
background: var(--bg-alt);
opacity: 0;
scale: 0.9;
transition: opacity 0.22s var(--ease), scale 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
&:hover::before { opacity: 0.7; scale: 1; }
&[aria-expanded="true"]::before { opacity: 1; scale: 1; }
&:active { scale: 0.96; }
& .pack-icon { width: 12px; height: 12px; color: var(--muted); transition: rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1), color var(--dur-fast) var(--ease); }
&:hover, &[aria-expanded="true"] { color: var(--accent-strong); }
&:hover .pack-icon, &[aria-expanded="true"] .pack-icon { color: var(--accent-strong); }
&[aria-expanded="true"] .pack-icon { rotate: 180deg; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
}
body.blog-v12 .v12-pop {
position: absolute;
top: calc(100% + 14px);
left: -10px;
z-index: 30;
display: grid;
gap: 14px;
width: min(340px, calc(100vw - 2 * var(--gutter)));
padding: 16px 18px 0;
border: 1px solid var(--line);
border-radius: var(--blog-r);
background: var(--surface);
box-shadow:
0 1px 2px rgb(24 21 22 / 0.05),
0 12px 28px -14px rgb(24 21 22 / 0.16),
0 36px 72px -36px rgb(24 21 22 / 0.30);
color: var(--ink);
font-size: 13.5px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
text-align: left;
text-transform: none;
white-space: normal;
opacity: 0;
visibility: hidden;
translate: 0 -4px;
scale: 0.94;
filter: blur(4px);
transform-origin: var(--v12-notch, 96px) 0;
margin-left: var(--v12-pop-shift, 0px);
transition: opacity 0.14s ease-in, translate 0.14s ease-in, scale 0.14s ease-in, filter 0.14s ease-in, visibility 0s linear 0.14s;
&::before {
content: "";
position: absolute;
top: -6px;
left: calc(var(--v12-notch, 96px) - 5px);
width: 10px;
height: 10px;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
border-radius: 2px 0 0 0;
background: var(--surface);
rotate: 45deg;
}
& > * { opacity: 0; translate: 0 4px; transition: opacity 0.12s ease-in, translate 0.12s ease-in; }
}
body.blog-v12 .v12-by.is-up .v12-pop {
top: auto;
bottom: calc(100% + 14px);
transform-origin: var(--v12-notch, 96px) 100%;
&::before { top: auto; bottom: -6px; rotate: 225deg; }
}
body.blog-v12 .v12-by.is-up:not(.is-open) .v12-pop { translate: 0 4px; }
body.blog-v12 .v12-by.is-open .v12-pop {
opacity: 1;
visibility: visible;
translate: 0 0;
scale: 1;
filter: none;
transition: opacity 0.2s var(--ease), translate 0.42s cubic-bezier(0.16, 1, 0.3, 1), scale 0.42s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s var(--ease), visibility 0s;
& > * { opacity: 1; translate: 0 0; transition: opacity 0.32s var(--ease), translate 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
& > :nth-child(1) { transition-delay: 0.06s; }
& > :nth-child(2) { transition-delay: 0.11s; }
& > :nth-child(3) { transition-delay: 0.16s; }
}
body.blog-v12 .v12-pop-bio { display: block; color: var(--muted); text-wrap: pretty; }
body.blog-v12 .v12-pop-ver {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: center;
gap: 5px 8px;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
& > .pack-icon { width: 18px; height: 18px; color: var(--accent); }
& > span { display: contents; }
}
body.blog-v12 .v12-pop-ver-text { grid-column: 1 / -1; }
body.blog-v12 .v12-pop-ver-title { color: var(--ink); font-size: 13px; font-weight: 600; }
body.blog-v12 .v12-pop-ver-text { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }
body.blog-v12 .v12-pop-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 2px -18px 0;
overflow: hidden;
border-top: 1px solid var(--line-soft);
border-radius: 0 0 calc(var(--blog-r) - 1px) calc(var(--blog-r) - 1px);
background: var(--bg-alt);
& a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 46px;
color: var(--ink);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
& a + a { border-left: 1px solid var(--line-soft); }
& a .pack-icon { width: 14px; height: 14px; transition: translate var(--dur-fast) var(--ease); }
& a:hover { background: color-mix(in srgb, var(--ink) 4%, var(--bg-alt)); color: var(--accent-strong); }
& a:hover .pack-icon { translate: 2px 0; }
& a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}
@media (max-width: 760px) {
body.blog-v12 .v12-pop { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
body.blog-v12 .v12-pop, body.blog-v12 .v12-pop > * { translate: none !important; scale: none !important; filter: none !important; transition-delay: 0s !important; }
body.blog-v12 .v12-by-name { scale: none !important; }
}
body.blog-v12 .v12-ask {
margin: 0 0 0 14px;
padding: 0;
border: 0;
&::before { display: none; }
}
body.blog-v12 .v12-ask .ask-ai-btn {
min-height: 44px;
padding: 0 13px 0 12px;
border: 1px solid var(--line-strong);
border-radius: var(--blog-r-sm);
background: var(--surface);
color: var(--ink);
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
box-shadow: 0 1px 2px rgb(24 21 22 / 0.05);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
& .pack-icon:first-child { width: 16px; height: 16px; color: var(--accent); }
&:hover, &[aria-expanded="true"] { border-color: #b9b9c0; background: var(--surface); box-shadow: 0 4px 12px -6px rgb(24 21 22 / 0.18); }
}
body.blog-v12 .v12-ask .ask-ai-menu { left: auto; right: 0; transform-origin: top right; }
@container (max-width: 711px) {
body.blog-v12 .v12-by { grid-column: 1 / 3; grid-row: 1; }
body.blog-v12 .v12-by-role { display: inline-flex; align-items: baseline; gap: 8px; }
body.blog-v12 .v12-by-role::before { content: ""; align-self: center; width: 1px; height: 12px; background: var(--line-strong); }
body.blog-v12 .v12-ask { grid-column: 3; grid-row: 1; margin-left: 16px; }
body.blog-v12 .v12-meta { grid-column: 1 / -1; grid-row: 2; padding-top: 14px; border-top: 1px solid var(--line-soft); }
body.blog-v12 .v12-cell:first-child { padding-left: 0; border-left: 0; }
}
@container (max-width: 440px) {
body.blog-v12 .v12-by { grid-column: 1 / -1; padding-right: 0; }
body.blog-v12 .v12-ask { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; }
body.blog-v12 .v12-ask .ask-ai-btn { width: 100%; justify-content: center; }
body.blog-v12 .v12-ask .ask-ai-menu { left: 0; right: auto; transform-origin: top left; }
}
body.blog-v12 .v12-toc-slot { margin: 30px 0 0; }
body.blog-v12 .v12-toc-slot:empty { display: none; }
body.blog-v12 .v12-toc-slot + h2 { margin-top: 40px; }
body.blog-v12 .post-content .v12-toc {
font-size: 14px;
line-height: 1.5;
& p { margin: 0; }
& ol { margin: 0; padding: 0; list-style: none; }
& li { margin: 0; padding: 0; }
& li::marker { content: none; }
& li a { text-decoration: none; }
}
body.blog-v12 .v12-tile {
min-width: 0;
border-radius: var(--blog-r);
background: var(--bg-alt);
}
body.blog-v12 :is(.v12-sq, .v12-vote) {
display: inline-grid;
place-items: center;
height: 40px;
border: 1px solid var(--line);
border-radius: var(--blog-r-sm);
background: var(--surface);
color: var(--ink);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
&:hover { border-color: var(--line-strong); color: var(--ink); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
& .pack-icon { width: 17px; height: 17px; }
}
body.blog-v12 .v12-sq {
width: 40px;
text-decoration: none;
&.is-done { border-color: var(--positive-line); background: var(--positive-soft); color: var(--positive); }
}
body.blog-v12 .v12-side { min-width: 0; }
body.blog-v12 .v12-side-tiles { display: grid; gap: 10px; }
body.blog-v12 .v12-author { padding: 18px 18px 14px; }
body.blog-v12 .v12-author-row {
display: flex;
align-items: center;
gap: 12px;
& .avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
}
body.blog-v12 .v12-author-id { display: grid; gap: 1px; min-width: 0; margin: 0; }
body.blog-v12 .v12-author-name {
justify-self: start;
padding-block: 8px;
margin-block: -8px;
color: var(--ink);
font-size: var(--text-md);
font-weight: 600;
letter-spacing: var(--tracking-snug);
line-height: 1.3;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
&:hover { color: var(--accent-strong); }
}
body.blog-v12 .v12-author-role { color: var(--muted); font-size: var(--text-xs); }
body.blog-v12 .v12-author-side {
margin: 14px 0 10px;
color: var(--muted);
font-size: var(--text-sm);
line-height: 1.6;
text-wrap: pretty;
}
body.blog-v12 .v12-author-links { display: flex; gap: 2px; margin: 0 0 0 -8px; }
body.blog-v12 .v12-soc {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: var(--blog-r-sm);
color: var(--muted);
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
& .pack-icon { width: 17px; height: 17px; }
&:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
body.blog-v12 .v12-verified { padding: 16px 18px 17px; }
body.blog-v12 .v12-verified-head {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
color: var(--ink);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.3;
& .pack-icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
}
body.blog-v12 :is(.v12-verified-text, .v12-cta-text, .v12-analiz-text) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
body.blog-v12 .v12-cta {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--blog-r);
background: var(--surface);
}
body.blog-v12 .v12-cta-copy { display: grid; gap: 10px; padding: 22px 20px 20px; }
body.blog-v12 .v12-cta-kicker {
margin: 0;
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
body.blog-v12 .v12-cta-title {
margin: 0;
color: var(--ink);
font-size: 19px;
font-weight: 600;
line-height: 1.28;
letter-spacing: var(--tracking-snug);
text-wrap: balance;
}
body.blog-v12 .v12-cta-text strong { color: var(--ink); font-weight: 500; }
body.blog-v12 .v12-cta-act {
display: grid;
gap: 14px;
padding: 16px 20px 14px;
border-top: 1px solid var(--line);
background: var(--bg-alt);
}
body.blog-v12 .v12-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
& li {
display: grid;
gap: 1px;
min-width: 0;
padding: 10px 10px 9px;
border-radius: var(--blog-r-sm);
background: var(--surface);
box-shadow: 0 0 0 1px var(--line-soft);
}
}
body.blog-v12 .v12-stat-val { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.blog-v12 .v12-stat-lbl { color: var(--muted); font-size: 11px; line-height: 1.3; }
body.blog-v12 .v12-wa {
--btn-h: 46px;
--btn-px: 16px;
--btn-fs: 14px;
--btn-bg: var(--ink);
--btn-bg-hover: #2c2829;
--btn-fg: var(--light);
gap: 10px;
width: 100%;
border-radius: var(--blog-r-sm);
font-weight: 600;
& > svg { flex: none; width: 22px; height: 22px; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
body.blog-v12 .v12-cta-note { margin: 0; color: var(--muted); font-size: 11.5px; text-align: center; }
body.blog-v12 .v12-sticky {
position: sticky;
top: var(--v12-top);
display: block;
margin-top: 10px;
}
body.blog-v12 .v12-toc {
--toc-max: min(calc(100vh - var(--v12-top) - 400px), 520px);
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--blog-r);
background: var(--surface);
}
body.blog-v12 .v12-prog { padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
body.blog-v12 .v12-prog-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 12px;
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
body.blog-v12 .v12-prog-left {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--ink);
font-weight: 500;
& .pack-icon { width: 15px; height: 15px; color: var(--muted); }
}
body.blog-v12 .v12-prog-pct { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
body.blog-v12 .v12-toc .v12-segs {
display: flex;
gap: 3px;
height: 4px;
& i {
position: relative;
flex: 1 1 0;
overflow: hidden;
border-radius: 2px;
background: var(--line);
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--accent);
transform: scaleX(var(--f, 0));
transform-origin: left;
transition: transform 0.22s linear, background-color var(--dur) var(--ease);
}
&.is-read::after { background: var(--ink); transform: scaleX(1); }
}
}
body.blog-v12 .v12-toc .toc-toggle { margin: 0; padding: 14px 18px 6px; }
body.blog-v12 .v12-toc .toc-title {
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
body.blog-v12 .v12-toc .toc-body { padding: 0 8px 8px; }
body.blog-v12 .v12-toc .toc-list {
padding: 0;
&::before, &::after { display: none; }
& li + li { margin-top: 2px; }
& a {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 0;
padding: 8px 10px;
border-radius: var(--blog-r-sm);
color: color-mix(in srgb, var(--ink) 74%, var(--surface));
font-size: var(--text-sm);
line-height: var(--leading-snug);
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
&:hover { color: var(--ink); background: color-mix(in srgb, var(--bg-alt) 60%, var(--surface)); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
&.is-active { color: var(--ink); font-weight: 500; background: var(--bg-alt); }
&.is-read { color: var(--muted); }
&.is-read:hover { color: var(--ink); }
}
}
body.blog-v12 .v12-analiz {
display: grid;
gap: 8px;
margin-top: 10px;
padding: 20px 18px 14px;
border-radius: var(--blog-r);
background: var(--bg-alt);
}
body.blog-v12 .v12-analiz-kicker {
margin: 0 0 2px;
color: var(--muted);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
body.blog-v12 .v12-analiz-text { margin-bottom: 6px; }
body.blog-v12 .v12-analiz-field {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 46px;
padding: 0 5px 0 12px;
border: 1px solid var(--line);
border-radius: var(--blog-r-sm);
background: var(--surface);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
&:focus-within { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 6%, transparent); }
& svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
& input {
flex: 1 1 0;
width: 0;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--ink);
font: inherit;
font-size: 14px;
outline: none;
appearance: none;
&::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
}
& button {
flex: none;
height: 36px;
padding: 0 13px;
border: 0;
border-radius: 6px;
background: var(--ink);
color: var(--light);
font: inherit;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
&:hover { background: #2c2829; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
}
body.blog-v12 .v12-analiz-engine {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 5px;
margin: 4px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.6;
& img { width: 15px; height: 11px; }
& b { color: var(--ink); font-weight: 600; }
}
body.blog-v12 .v12-toc .toc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.blog-v12 .v12-toc .toc-mark {
display: inline-flex;
align-items: center;
width: 16px;
height: calc(var(--text-sm) * 1.4);
& svg { width: 16px; height: 16px; overflow: visible; }
& circle { fill: none; stroke-width: 1.6; }
& .m-base { stroke: var(--line-strong); transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); }
& .m-ring {
stroke: var(--ink);
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--p, 0) * 100);
opacity: 0;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: opacity var(--dur) var(--ease);
}
& .m-tick { fill: none; stroke: var(--light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur) var(--ease); }
}
body.blog-v12 .v12-toc .toc-list a.is-active .m-ring { opacity: 1; }
body.blog-v12 .v12-toc .toc-list a.is-read {
& .m-base { fill: var(--ink); stroke: var(--ink); }
& .m-tick { opacity: 1; }
}
body.blog-v12 .post-content .blog-gist {
padding: 22px 28px 26px;
border-radius: var(--blog-r);
background: var(--bg-alt);
& .gist-head { margin: 0 0 14px; }
& .gist-kicker {
gap: 8px;
color: var(--ink);
font-size: var(--text-2xs);
letter-spacing: var(--tracking-caps);
& .pack-icon { width: 15px; height: 15px; color: var(--accent); }
}
& .gist-mark { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
}
body.blog-v12 .post-end .container { padding-block: 24px var(--section-pad); }
body.blog-v12 .v12-end-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 12px;
& > :is(.v12-colophon, .v12-share, .v12-end-side, .v12-abox, .v12-cases) { grid-column: 1 / -1; }
}
body.blog-v12 .v12-colophon {
margin-bottom: 4px;
padding: 24px;
border-radius: var(--blog-r);
background: var(--bg-alt);
color: var(--muted);
font-size: 13px;
line-height: 1.75;
& p { margin: 0; text-wrap: pretty; }
& p + p { margin-top: 12px; }
& b { color: var(--ink); font-weight: 600; }
& a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
& a:hover { color: var(--ink); text-decoration-color: currentColor; }
& hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
& code {
padding: 1px 6px;
border-radius: 6px;
background: color-mix(in srgb, var(--ink) 7%, var(--bg-alt));
color: var(--ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.86em;
}
}
body.blog-v12 .v12-q {
margin: 0;
color: var(--ink);
font-size: var(--text-md);
font-weight: 600;
line-height: 1.35;
}
body.blog-v12 .v12-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
body.blog-v12 .v12-share { padding: 22px 24px 24px; border-radius: var(--blog-r); background: var(--bg-alt); }
body.blog-v12 .v12-share-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
body.blog-v12 .v12-share-text { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
body.blog-v12 .v12-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.blog-v12 .v12-share-btns { display: contents; margin: 0; padding: 0; list-style: none; }
body.blog-v12 :is(.v12-share-chip, .v12-share-copy) {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px 0 12px;
border-radius: var(--blog-r-sm);
font: inherit;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
& .pack-icon { flex: none; width: 17px; height: 17px; }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
body.blog-v12 .v12-share-chip {
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease);
&:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
}
body.blog-v12 .v12-share-copy {
border: 0;
background: var(--ink);
color: var(--light);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
&:hover { background: #2c2829; }
&.is-done span { display: none; }
&.is-done::after { content: attr(data-done); }
}
body.blog-v12 .v12-end-side { display: none; }
body.blog-v12 .v12-abox { padding: 22px 24px 18px; border-radius: var(--blog-r); background: var(--bg-alt); }
body.blog-v12 .v12-abox-head {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: 16px;
& .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
}
body.blog-v12 .v12-abox-id { min-width: 0; }
body.blog-v12 .v12-abox-label { margin: 0 0 3px; color: var(--muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
body.blog-v12 .v12-abox-name {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
& a { color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: var(--tracking-snug); line-height: 1.3; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
& a:hover { color: var(--accent-strong); }
}
body.blog-v12 .v12-abox-seal { display: inline-grid; place-items: center; color: var(--accent); & .pack-icon { width: 17px; height: 17px; } }
body.blog-v12 .v12-abox-bio { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; text-wrap: pretty; }
body.blog-v12 .v12-abox-links {
display: flex;
gap: 2px;
margin: 10px 0 0 -9px;
& a {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--blog-r-sm);
color: color-mix(in srgb, var(--ink) 70%, var(--bg-alt));
transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
& .pack-icon { width: 18px; height: 18px; }
&:hover { color: var(--ink); background: var(--surface); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
}
body.blog-v12 .v12-cases { margin-top: 20px; }
body.blog-v12 .v12-cases-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
body.blog-v12 .v12-cases-all { padding-block: 13px; margin-block: -13px; }
body.blog-v12 .v12-cases-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
& li { min-width: 0; }
}
body.blog-v12 .v12-cases-list a {
display: flex;
flex-direction: column;
height: 100%;
padding: 18px;
border: 1px solid transparent;
border-radius: var(--blog-r);
background: var(--bg-alt);
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
& .v12-ico { margin-bottom: 18px; }
}
body.blog-v12 .v12-case-name { color: var(--ink); font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
body.blog-v12 .v12-case-what { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; text-wrap: pretty; }
body.blog-v12 .v12-case-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 18px;
& .pack-icon { width: 16px; height: 16px; color: var(--muted); transition: translate var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
}
body.blog-v12 .v12-case-res {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 9px;
border-radius: var(--blog-r-sm);
background: var(--surface);
color: var(--accent-strong);
font-size: var(--text-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
body.blog-v12 .v12-cases-list a:hover {
border-color: var(--line);
background: var(--surface);
& .v12-case-res { background: var(--bg-alt); }
& .v12-case-foot .pack-icon { translate: 3px 0; color: var(--ink); }
}
}
@media (max-width: 1080px) {
body.blog-v12 .v12-band .v12-band-in { max-width: calc(720px + 2 * var(--gutter)); padding-block: 24px 0; }
body.blog-v12 .v12-cover { padding: 44px 40px; }
body.blog-v12 :is(.v12-title, .v12-dek) { max-width: none; }
body.blog-v12 .post-body .container { padding-block: 0 max(var(--gutter), min((100vw - 720px) / 2, var(--section-pad))); }
body.blog-v12 .post-grid { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
body.blog-v12 .v12-side { grid-column: 1; grid-row: 2; margin: 24px 0 0; }
body.blog-v12 .v12-side:not(:has([data-toc-root])) { display: none; }
body.blog-v12 .v12-body .post-article { grid-row: 3; padding-top: 28px; }
body.blog-v12 .v12-body .v12-end-col { grid-row: 4; padding-top: 32px; }
body.blog-v12 .v12-side-tiles { display: none; }
body.blog-v12 .v12-sticky { position: static; margin: 0; }
body.blog-v12 .v12-prog { display: none; }
body.blog-v12 .v12-toc { --toc-max: 60vh; }
body.blog-v12 .v12-toc .toc-toggle {
min-height: 52px;
margin: 0;
padding: 0 18px;
border-top: 0;
}
body.blog-v12 .v12-toc .toc-title { color: var(--ink); font-size: var(--text-sm); letter-spacing: 0.02em; text-transform: none; }
body.blog-v12 .v12-toc .toc-chev { margin-left: auto; }
body.blog-v12 .v12-toc .toc-body { padding: 8px; border-top: 1px solid var(--line-soft); }
body.blog-v12 .v12-toc .toc-list a { min-height: 44px; padding: 12px 10px; }
body.blog-v12 .v12-end-side { display: block; }
}
@media (max-width: 900px) {
body.blog-v12 .v12-end-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
body.blog-v12 .v12-band .v12-band-in { padding-block: 16px 0; }
body.blog-v12 .v12-cover { padding: 28px 20px 30px; }
body.blog-v12 .v12-cat { margin-bottom: 16px; }
body.blog-v12 .v12-dek { margin-top: 12px; font-size: var(--text-lg); }
body.blog-v12 .v12-byline { padding: 20px 0; }
body.blog-v12 .post-content .blog-gist { padding: 18px 20px 22px; }
body.blog-v12 .post-end .container { padding-top: 32px; }
body.blog-v12 .v12-share { padding: 20px; }
body.blog-v12 .v12-share-row {
flex-wrap: nowrap;
margin: 14px -20px 0;
padding: 2px 20px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: 20px;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 44px), transparent);
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 44px), transparent);
&::-webkit-scrollbar { display: none; }
&.is-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px); mask-image: linear-gradient(90deg, transparent 0, #000 16px); }
&.is-peeking { scroll-snap-type: none; }
}
body.blog-v12 .v12-share-btns li { flex: none; scroll-snap-align: start; }
body.blog-v12 :is(.v12-share-chip, .v12-share-copy) { flex: none; height: 44px; scroll-snap-align: start; }
body.blog-v12 .v12-share-copy { grid-column: 1 / -1; justify-content: center; }
body.blog-v12 .v12-colophon { padding: 20px; }
body.blog-v12 :is(.v12-sq, .v12-vote) { height: 44px; }
body.blog-v12 .v12-sq { width: 44px; }
body.blog-v12 .v12-abox { padding: 20px 20px 14px; }
body.blog-v12 .v12-abox-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; & .avatar { width: 52px; height: 52px; } }
body.blog-v12 .v12-abox-links a { width: 44px; height: 44px; }
body.blog-v12 .v12-cases { margin-top: 16px; }
body.blog-v12 .v12-cases-list { grid-template-columns: minmax(0, 1fr); }
body.blog-v12 .v12-cases-list a { padding: 16px; }
body.blog-v12 .v12-cases-list a .v12-ico { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
body.blog-v12 .v12-segs i::after { transition: none; }
body.blog-v12 :is(.v12-toc .toc-list a, .v12-toc .toc-mark *, .v12-sq, .v12-vote, .v12-all .pack-icon, .v12-cases-list a, .v12-case-foot .pack-icon, .v12-case-res, .v12-cat span) { 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; }
}