/* IBM Plex Sans/Mono — kendi sunucumuzda (Google Fonts, SIL OFL 1.1). Yalnız latin + latin-ext (Türkçe). */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-mono-400-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-mono-500-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-mono-500-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fontlar/ibm-plex-sans-latin.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;
}

/* berkesezen.com — kurumsal profil
   Açık tek tema · IBM Plex Sans (+ Mono yalnız tarih/etiket) · lacivert + petrol.
   Kural: text-transform kullanılmaz (Türkçe İ/ı). */

:root {
  --zemin: #f5f7fa;
  --yuzey: #ffffff;
  --ara-zemin: #eef2f6;
  --lacivert: #0b2545;
  --lacivert-2: #13315c;
  --petrol: #13697a;        /* ikincil vurgu; beyazda ~6:1 */
  --petrol-acik: #e3f0f2;
  --metin: #1c2733;
  --metin-2: #3d4b5a;
  --soluk: #566473;         /* beyazda ~6:1, #f5f7fa'da ~5.6:1 */
  --cizgi: #dde3ea;
  --cizgi-2: #c8d1db;

  --f: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.1875rem;
  --t-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --t-h1: clamp(2.375rem, 1.8rem + 2vw, 3.25rem);

  --r-k: 6px;   /* kontrol */
  --r-kart: 10px;
  /* katmanlı yumuşak gölgeler (yakın + orta + uzak) */
  --golge: 0 0 0 1px var(--cizgi), 0 1px 1px rgba(16, 24, 32, 0.04), 0 2px 4px rgba(16, 24, 32, 0.04), 0 6px 16px -4px rgba(16, 24, 32, 0.06);
  --golge-hover: 0 0 0 1px var(--cizgi-2), 0 1px 2px rgba(16, 24, 32, 0.05), 0 6px 12px -2px rgba(16, 24, 32, 0.07), 0 14px 24px -10px rgba(16, 24, 32, 0.16);
  --golge-rozet: 0 0 0 1px rgba(16, 24, 32, 0.08), 0 1px 1px rgba(16, 24, 32, 0.06), 0 3px 6px -1px rgba(16, 24, 32, 0.10), 0 8px 16px -6px rgba(16, 24, 32, 0.14), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(16, 24, 32, 0.05);

  --kenar: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --bolum: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --ust-h: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .uzman:hover, .proje:hover, .sirket:hover .rozet, .kayit:hover .rozet { transform: none !important; }
}
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: var(--f); font-size: var(--t-m); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: var(--petrol); }
::selection { background: var(--petrol-acik); color: var(--lacivert); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: 3px; }
.iletisim :focus-visible { outline-color: #ffffff; }

.kap { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: var(--kenar); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.atla { position: absolute; left: 1rem; top: -100px; z-index: 50; background: var(--lacivert); color: #fff; padding: 0.75rem 1rem; border-radius: var(--r-k); font-weight: 600; }
.atla:focus { top: 0.75rem; }
main:focus { outline: none; }

/* ---------- üst bar ---------- */
.ust {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--cizgi); transition: box-shadow 0.25s;
}
.ust.kaydi { box-shadow: 0 2px 12px rgba(16, 24, 32, 0.07); }
.ust-serit { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--petrol); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.ust-ic { display: flex; align-items: center; gap: 1.5rem; min-height: var(--ust-h); }
.imza { position: relative; display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; line-height: 1.2; margin-right: auto; padding-right: 3rem; }
.imza-yazi { display: flex; flex-direction: column; justify-content: center; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.imza-foto {
  position: absolute; left: 0; top: 50%; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; border-radius: 50%; object-fit: cover;
  opacity: 0; transform: scale(0.6); box-shadow: 0 0 0 2px var(--yuzey), 0 0 0 3px var(--cizgi-2);
  transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ust.foto .imza-foto { opacity: 1; transform: none; }
.ust.foto .imza-yazi { transform: translateX(3rem); }
.imza-ad { font-weight: 700; font-size: 1.0625rem; color: var(--lacivert); letter-spacing: -0.005em; }
.imza-unvan { font-size: var(--t-xs); color: var(--soluk); }
.menu-liste { display: flex; gap: 0.25rem; }
.menu-liste a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem;
  font-size: var(--t-s); font-weight: 500; color: var(--metin-2); text-decoration: none; border-radius: var(--r-k);
  position: relative; transition: color 0.2s, background-color 0.2s;
}
.menu-liste a:hover { color: var(--lacivert); background: var(--ara-zemin); }
.menu-liste a[aria-current="true"] { color: var(--lacivert); }
.menu-liste a[aria-current="true"]::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.45rem; height: 2px; background: var(--petrol); border-radius: 2px; }
.dil { display: flex; border: 1px solid var(--cizgi-2); border-radius: var(--r-k); overflow: hidden; font-size: var(--t-xs); font-weight: 600; }
.dil > * { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.5rem; }
.dil-simdi { background: var(--lacivert); color: #fff; }
.dil a { color: var(--metin-2); text-decoration: none; }
.dil a:hover { background: var(--ara-zemin); color: var(--lacivert); }
.menu-dugme { display: none; }

@media (max-width: 64rem) {
  .ust-ic { flex-wrap: wrap; gap: 0.75rem; }
  .menu { order: 4; flex-basis: 100%; }
  .menu-liste { flex-wrap: wrap; padding-bottom: 0.5rem; margin-inline: -0.75rem; }
  .js .menu { display: none; }
  .js .ust.acik .menu { display: block; }
  .js .ust.acik .menu-liste { display: grid; margin: 0; padding: 0.25rem 0 0.75rem; border-top: 1px solid var(--cizgi); }
  .js .ust.acik .menu-liste a { min-height: 3rem; padding-inline: 0.25rem; font-size: var(--t-m); border-bottom: 1px solid var(--cizgi); border-radius: 0; }
  .js .ust.acik .menu-liste li:last-child a { border-bottom: 0; }
  .js .ust.acik .menu-liste a[aria-current="true"]::after { display: none; }
  .js .menu-dugme {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
    font: 600 var(--t-s) var(--f); color: var(--lacivert); background: var(--yuzey);
    border: 1px solid var(--cizgi-2); border-radius: var(--r-k); cursor: pointer;
  }
  .menu-dugme:hover { background: var(--ara-zemin); }
  .menu-ikon, .menu-ikon::before, .menu-ikon::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative; transition: transform 0.2s, background-color 0.2s; }
  .menu-ikon::before, .menu-ikon::after { content: ""; position: absolute; left: 0; }
  .menu-ikon::before { top: -5px; } .menu-ikon::after { top: 5px; }
  .ust.acik .menu-ikon { background: transparent; }
  .ust.acik .menu-ikon::before { transform: translateY(5px) rotate(45deg); }
  .ust.acik .menu-ikon::after { transform: translateY(-5px) rotate(-45deg); }
}
@media (max-width: 26rem) {
  .imza-unvan { display: none; }
  .menu-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .js .menu-dugme { padding: 0; width: 2.75rem; justify-content: center; }
}

/* ---------- düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.875rem; padding: 0.625rem 1.25rem; line-height: 1.4;
  font: 600 var(--t-s) var(--f); text-decoration: none; border-radius: var(--r-k); border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.dugme-ana { background: var(--lacivert); color: #fff; }
.dugme-ana:hover { background: var(--lacivert-2); box-shadow: var(--golge-hover); }
.dugme-ikincil { background: var(--yuzey); color: var(--lacivert); border-color: var(--cizgi-2); }
.dugme-ikincil:hover { border-color: var(--lacivert); }
.dugme-acik { background: #fff; color: var(--lacivert); overflow-wrap: anywhere; }
.dugme-acik:hover { background: var(--petrol-acik); }
.dugme-cizgi { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.dugme-cizgi:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- açılış ---------- */
.hero { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); overflow-x: clip; padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero-ic { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ust-etiket { font-size: var(--t-s); font-weight: 600; color: var(--petrol); margin-bottom: 0.5rem; }
.hero h1 { font-size: var(--t-h1); line-height: 1.1; font-weight: 700; color: var(--lacivert); letter-spacing: -0.015em; }
.hero-unvan { margin-top: 0.5rem; font-size: var(--t-l); font-weight: 500; color: var(--metin-2); }
.hero-soz { margin-top: 1.75rem; font-size: var(--t-xl); line-height: 1.4; font-weight: 600; color: var(--lacivert); max-width: 36rem; }
.hero-soz em { font-style: normal; color: var(--petrol); }
.hero-giris { margin-top: 1rem; color: var(--metin-2); max-width: 40rem; }
.hero-eylem { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.profil-kart {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--yuzey); border: 0; border-radius: var(--r-kart);
  box-shadow: 0 0 0 1px var(--cizgi), 0 1px 1px rgba(16, 24, 32, 0.04), 0 4px 8px -2px rgba(16, 24, 32, 0.06), 0 16px 28px -14px rgba(16, 24, 32, 0.20);
  padding: 2.75rem 1.5rem 1.375rem; text-align: center;
  transition: box-shadow 0.3s, transform 0.3s ease-out;
}
/* üst bant: teknik çizim paftası — foto merkezli eş merkezli izohips halkaları, eksen çizgisi,
   fotonun Ø ölçü çizgisi ve alt kenarda cetvel çentikleri; zemin lacivertten petrole çapraz ışık geçişi.
   Desen durağan (satır içi SVG): bir kez boyanır, kaydırmada maliyeti yok. */
.profil-kart::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5.75rem; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 92' fill='none' stroke='%23fff' stroke-width='.8'%3E %3Ccircle cx='200' cy='108' r='76' stroke-opacity='0.2'/%3E%3Ccircle cx='200' cy='108' r='90' stroke-opacity='0.15'/%3E%3Ccircle cx='200' cy='108' r='106' stroke-opacity='0.115'/%3E%3Ccircle cx='200' cy='108' r='124' stroke-opacity='0.09'/%3E%3Ccircle cx='200' cy='108' r='145' stroke-opacity='0.07'/%3E%3Ccircle cx='200' cy='108' r='169' stroke-opacity='0.055'/%3E%3Ccircle cx='200' cy='108' r='196' stroke-opacity='0.045'/%3E%3Ccircle cx='200' cy='108' r='226' stroke-opacity='0.035'/%3E %3Cpath d='M200 24V40' stroke-opacity='.32' stroke-dasharray='7 2.5 1.5 2.5'/%3E %3Cpath d='M136 6V52M264 6V52' stroke-opacity='.16'/%3E %3Cpath d='M136 16H264' stroke-opacity='.34'/%3E %3Cpath d='M136 16l7 -2.6v5.2z' fill='%23fff' fill-opacity='.42' stroke='none'/%3E%3Cpath d='M264 16l-7 -2.6v5.2z' fill='%23fff' fill-opacity='.42' stroke='none'/%3E %3Ccircle cx='200' cy='9.5' r='3.2' stroke-opacity='.45'/%3E%3Cpath d='M195.8 13.7l8.4-8.4' stroke-opacity='.45'/%3E %3Cpath d='M0 92v-7M8 92v-3.5M16 92v-3.5M24 92v-3.5M32 92v-3.5M40 92v-7M48 92v-3.5M56 92v-3.5M64 92v-3.5M72 92v-3.5M80 92v-7M88 92v-3.5M96 92v-3.5M104 92v-3.5M112 92v-3.5M120 92v-7M128 92v-3.5M136 92v-3.5M144 92v-3.5M152 92v-3.5M160 92v-7M168 92v-3.5M176 92v-3.5M184 92v-3.5M192 92v-3.5M200 92v-7M208 92v-3.5M216 92v-3.5M224 92v-3.5M232 92v-3.5M240 92v-7M248 92v-3.5M256 92v-3.5M264 92v-3.5M272 92v-3.5M280 92v-7M288 92v-3.5M296 92v-3.5M304 92v-3.5M312 92v-3.5M320 92v-7M328 92v-3.5M336 92v-3.5M344 92v-3.5M352 92v-3.5M360 92v-7M368 92v-3.5M376 92v-3.5M384 92v-3.5M392 92v-3.5M400 92v-7' stroke-opacity='.16'/%3E %3C/svg%3E") 50% 0 / 25rem 5.75rem no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(118deg, var(--lacivert) 0%, var(--lacivert-2) 52%, #175d70 100%);
  box-shadow: inset 0 -1px 0 rgba(95, 176, 191, 0.45);
}
.profil-kart::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.profil-kart:hover { box-shadow: 0 0 0 1px var(--cizgi-2), 0 2px 4px rgba(16, 24, 32, 0.05), 0 10px 18px -6px rgba(16, 24, 32, 0.10), 0 22px 36px -18px rgba(16, 24, 32, 0.24); }
.profil-foto {
  position: relative; display: block; width: 8rem; height: 8rem; margin: 0 auto 1rem; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--petrol), #5fb0bf, var(--lacivert-2), var(--petrol));
  box-shadow: 0 2px 4px rgba(16, 24, 32, 0.10), 0 8px 18px -6px rgba(16, 24, 32, 0.28);
}
.profil-kart img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--yuzey); }
.kart-ad { font-weight: 700; font-size: var(--t-xl); line-height: 1.25; color: var(--lacivert); letter-spacing: -0.01em; }
.kart-unvan { font-size: var(--t-s); color: var(--soluk); margin-bottom: 1.25rem; }
.profil-kart dl { text-align: left; display: grid; gap: 0.375rem; }
.profil-kart dl div {
  display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.5rem; align-items: center; padding: 0.5rem 0.625rem;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px; transition: border-color 0.2s, background-color 0.2s;
}
.profil-kart dl div:hover { border-color: #c9e0e4; background: var(--petrol-acik); }
.profil-kart dt { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); color: var(--soluk); }
.profil-kart dt svg { flex: none; color: var(--petrol); }
.profil-kart dd { font-size: var(--t-s); font-weight: 500; color: var(--metin); line-height: 1.4; }

.anahtar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid var(--cizgi);
}
.anahtar > div { padding: 1.25rem 1.25rem 1.5rem 0; }
.anahtar > div + div { padding-left: 1.25rem; border-left: 1px solid var(--cizgi); }
.anahtar dt { font-size: var(--t-xs); font-weight: 600; color: var(--petrol); margin-bottom: 0.375rem; }
.anahtar dd { display: grid; gap: 0.125rem; }
.anahtar strong { font-weight: 600; color: var(--lacivert); line-height: 1.35; }
.anahtar dd span { font-size: var(--t-s); color: var(--soluk); line-height: 1.45; font-variant-numeric: tabular-nums; }

@media (max-width: 60rem) {
  .hero-ic { grid-template-columns: 1fr; }
  .profil-kart { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; text-align: left; align-items: center; max-width: 34rem; padding: 1.25rem; }
  .profil-kart::before {
    inset: 0 auto 0 0; width: 6.25rem; height: auto; box-shadow: inset -1px 0 0 rgba(95, 176, 191, 0.45);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 400' fill='none' stroke='%23fff' stroke-width='.8'%3E %3Ccircle cx='64' cy='64' r='52' stroke-opacity='0.2'/%3E%3Ccircle cx='64' cy='64' r='62' stroke-opacity='0.15'/%3E%3Ccircle cx='64' cy='64' r='74' stroke-opacity='0.115'/%3E%3Ccircle cx='64' cy='64' r='88' stroke-opacity='0.09'/%3E%3Ccircle cx='64' cy='64' r='104' stroke-opacity='0.07'/%3E%3Ccircle cx='64' cy='64' r='122' stroke-opacity='0.055'/%3E%3Ccircle cx='64' cy='64' r='142' stroke-opacity='0.045'/%3E%3Ccircle cx='64' cy='64' r='164' stroke-opacity='0.035'/%3E %3Cpath d='M64 116V174' stroke-opacity='.3' stroke-dasharray='7 2.5 1.5 2.5'/%3E %3Cpath d='M3 20H40M3 108H40' stroke-opacity='.16'/%3E %3Cpath d='M9 20V108' stroke-opacity='.34'/%3E %3Cpath d='M9 20l-2.6 7h5.2z' fill='%23fff' fill-opacity='.42' stroke='none'/%3E%3Cpath d='M9 108l-2.6 -7h5.2z' fill='%23fff' fill-opacity='.42' stroke='none'/%3E %3Cpath d='M100 0h-7M100 8h-3.5M100 16h-3.5M100 24h-3.5M100 32h-3.5M100 40h-7M100 48h-3.5M100 56h-3.5M100 64h-3.5M100 72h-3.5M100 80h-7M100 88h-3.5M100 96h-3.5M100 104h-3.5M100 112h-3.5M100 120h-7M100 128h-3.5M100 136h-3.5M100 144h-3.5M100 152h-3.5M100 160h-7M100 168h-3.5M100 176h-3.5M100 184h-3.5M100 192h-3.5M100 200h-7M100 208h-3.5M100 216h-3.5M100 224h-3.5M100 232h-3.5M100 240h-7M100 248h-3.5M100 256h-3.5M100 264h-3.5M100 272h-3.5M100 280h-7M100 288h-3.5M100 296h-3.5M100 304h-3.5M100 312h-3.5M100 320h-7M100 328h-3.5M100 336h-3.5M100 344h-3.5M100 352h-3.5M100 360h-7M100 368h-3.5M100 376h-3.5M100 384h-3.5M100 392h-3.5M100 400h-7' stroke-opacity='.16'/%3E %3C/svg%3E") 0 0 / 6.25rem 25rem no-repeat,
      linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
      linear-gradient(200deg, var(--lacivert) 0%, var(--lacivert-2) 55%, #175d70 100%);
  }
  .profil-foto { width: 5.5rem; height: 5.5rem; margin: 0; grid-row: span 2; }
  .kart-unvan { margin: 0; }
  .profil-kart dl { grid-column: 1 / -1; margin-top: 1.25rem; }
  .anahtar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anahtar > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .anahtar > div:nth-child(n + 3) { border-top: 1px solid var(--cizgi); }
}
@media (max-width: 30rem) {
  .anahtar { grid-template-columns: 1fr; }
  .anahtar > div, .anahtar > div + div { padding: 1rem 0; border-left: 0; }
  .anahtar > div + div { border-top: 1px solid var(--cizgi); }
  .hero-eylem .dugme { flex: 1 1 100%; }
}

/* ---------- bölüm ---------- */
.bolum { padding-block: var(--bolum); }
.bolum-ara { background: var(--yuzey); border-block: 1px solid var(--cizgi); }
.bolum-bas { margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); max-width: 44rem; }
.bolum-bas h2 { font-size: var(--t-h2); line-height: 1.2; font-weight: 700; color: var(--lacivert); letter-spacing: -0.01em; }
.bolum-bas h2::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--petrol); border-radius: 2px; margin-bottom: 1rem; }
.bolum-bas p { margin-top: 0.625rem; color: var(--soluk); font-size: var(--t-m); }

.kart { background: var(--yuzey); border: 0; border-radius: var(--r-kart); box-shadow: var(--golge); }

.etiketler { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.etiketler li {
  font-size: var(--t-xs); font-weight: 500; line-height: 1.4; color: var(--lacivert-2);
  background: var(--ara-zemin); border: 1px solid var(--cizgi); border-radius: 4px; padding: 0.3rem 0.55rem;
}

/* ---------- kurum rozeti ---------- */
.rozet {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%); box-shadow: var(--golge-rozet);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.rozet img { width: 1.875rem; height: 1.875rem; object-fit: contain; }
.rozet-harf { font-size: var(--t-xs); font-weight: 700; color: var(--lacivert); letter-spacing: 0.02em; }
.sirket:hover .rozet, .kayit:hover .rozet { transform: translateY(-2px); box-shadow: var(--golge-rozet), 0 12px 20px -10px rgba(16, 24, 32, 0.25); }
.sirket-kimlik { display: flex; align-items: center; gap: 0.875rem; }
.kayit-logolu { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }

/* ---------- kart eğimi (uzmanlık + proje) ---------- */
.uzman, .proje { transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s ease-out; position: relative; }
/* imleçle hafif 3B eğim + ışık lekesi (yalnız fare, hareket azaltma kapalıyken) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .egim { transform-style: preserve-3d; }
  .egim.egik { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); transition: box-shadow 0.2s, transform 0.08s linear; }
  .egim::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
    background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(19, 105, 122, 0.07), transparent 60%);
  }
  .egim.egik::after { opacity: 1; }
  .egim.egik .ikon { transform: translateZ(18px) translateY(-1px); }
}

/* ---------- projeler ---------- */
.projeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.proje { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: box-shadow 0.2s, border-color 0.2s; }
.proje:hover { box-shadow: var(--golge-hover); border-color: var(--cizgi-2); transform: translateY(-2px); }
.proje-ust { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.durum { font-size: var(--t-xs); font-weight: 600; color: var(--petrol); background: var(--petrol-acik); border-radius: 999px; padding: 0.2rem 0.6rem; }
.proje-tarih { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--soluk); }
.proje h3 { font-size: var(--t-l); line-height: 1.35; font-weight: 600; color: var(--lacivert); }
.proje dl { display: grid; gap: 0.75rem; }
.proje dl div { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 1rem; }
.proje dt { font-size: var(--t-xs); font-weight: 600; color: var(--petrol); padding-top: 0.15rem; }
.proje dd { font-size: var(--t-s); color: var(--metin-2); line-height: 1.55; }
.proje .etiketler { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--cizgi); }
@media (max-width: 52rem) { .projeler { grid-template-columns: 1fr; } }
@media (max-width: 26rem) { .proje dl div { grid-template-columns: 1fr; gap: 0.125rem; } }

/* ---------- eğitim ---------- */
.iki-sutun { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.liste-kart { padding: 1.5rem; }
.liste-kart > h3 { font-size: var(--t-m); font-weight: 600; color: var(--lacivert); padding-bottom: 0.75rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--cizgi); }
.kayit { padding-block: 1rem; }
.kayit + .kayit { border-top: 1px solid var(--cizgi); }
.kayit:last-child { padding-bottom: 0; }
.kayit-tarih { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--soluk); margin-bottom: 0.25rem; }
.kayit h4 { font-size: var(--t-m); font-weight: 600; color: var(--metin); line-height: 1.4; }
.kayit-alt { font-size: var(--t-s); color: var(--soluk); }
.kayit-aciklama { font-size: var(--t-s); color: var(--metin-2); margin-top: 0.375rem; line-height: 1.55; }
.dil-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.dil-liste .kayit + .kayit { border-top: 0; }
@media (max-width: 52rem) { .iki-sutun { grid-template-columns: 1fr; } }

/* ---------- şu sıralar ---------- */
.simdi { background: var(--petrol-acik); border-block: 1px solid #c9e0e4; padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.simdi-ic { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.simdi-bas h2 { font-size: var(--t-xl); font-weight: 700; color: var(--lacivert); line-height: 1.25; }
.simdi-bas p { font-size: var(--t-s); color: #2f4650; margin-top: 0.375rem; }
.simdi-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.simdi-liste li { border-left: 3px solid var(--petrol); padding-left: 1rem; }
.simdi-liste h3 { font-size: var(--t-m); font-weight: 600; color: var(--lacivert); line-height: 1.35; }
.simdi-liste p { font-size: var(--t-s); color: #2f4650; margin-top: 0.25rem; line-height: 1.5; }
@media (max-width: 60rem) { .simdi-ic { grid-template-columns: 1fr; gap: 1.25rem; } }
@media (max-width: 44rem) { .simdi-liste { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- iletişim ---------- */
.iletisim { background: var(--lacivert); color: #fff; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.iletisim-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.iletisim h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.2; }
.iletisim-cumle { margin-top: 0.5rem; color: #c9d6e5; font-size: var(--t-l); max-width: 34rem; }
.iletisim-yan { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: flex-end; }
.iletisim-yer { flex-basis: 100%; text-align: right; font-size: var(--t-s); color: #c9d6e5; font-variant-numeric: tabular-nums; }
@media (max-width: 52rem) {
  .iletisim-ic { grid-template-columns: 1fr; }
  .iletisim-yan { justify-content: flex-start; }
  .iletisim-yer { text-align: left; }
}
.dugme-kopya { position: relative; width: 2.875rem; padding: 0; cursor: pointer; background: transparent; }
.dugme-kopya.tamam { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.kopya-durum:not(:empty) {
  position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; background: #fff; color: var(--lacivert); padding: 0.25rem 0.6rem; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
@media (max-width: 30rem) { .iletisim-yan .dugme { flex: 1 1 100%; } .iletisim-yan .dugme-kopya { flex: 0 0 2.875rem; } .iletisim-yan .dugme-acik { flex: 1 1 0; } }

/* ---------- alt bilgi ---------- */
.alt { background: #07192f; color: #b4c3d4; font-size: var(--t-xs); }
.alt-ic { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; }
.alt a { display: inline-flex; align-items: center; min-height: 2.75rem; color: #fff; text-underline-offset: 3px; }

/* ---------- açılış: ilk yüklemede kademeli giriş (toplam ≈1 sn, yalnız transform/opacity) ---------- */
@keyframes giris { from { opacity: 0; transform: translateY(10px); } }
@keyframes giris-perde { from { opacity: 0; transform: translateY(0.3em); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10% 0); } }
@keyframes giris-kart { from { opacity: 0; transform: translateX(40px) scale(0.98); } }
@keyframes giris-kart-dik { from { opacity: 0; transform: translateY(12px); } }
@keyframes giris-sag { from { opacity: 0; transform: translateX(10px); } }
@keyframes giris-foto { from { opacity: 0; transform: scale(0.9); } }
@keyframes giris-ust { from { transform: translateY(-100%); } }
@keyframes giris-cizgi { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .js .ust { animation: giris-ust 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .hero-sol > *, .js .profil-kart, .js .profil-foto, .js .profil-kart > p, .js .profil-kart dl > div, .js .anahtar > div {
    animation: giris 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--g, 0s);
  }
  .js .hero h1 { animation-name: giris-perde; animation-duration: 0.55s; }
  .js .profil-kart { animation-name: giris-kart; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); transform-origin: 100% 50%; }
  .js .profil-kart > p, .js .profil-kart dl > div { animation-name: giris-sag; animation-duration: 0.4s; }
  .js .profil-foto { animation-name: giris-foto; }
  .js .ust-etiket { --g: 0s; } .js .hero h1 { --g: 0.04s; } .js .hero-unvan { --g: 0.10s; }
  .js .hero-soz { --g: 0.14s; } .js .hero-giris { --g: 0.18s; } .js .hero-eylem { --g: 0.22s; }
  /* önce yazılar, sonra kart sağdan kayar, en son kartın içi dolar */
  .js .profil-kart { --g: 0.12s; } .js .profil-foto { --g: 0.26s; } .js .profil-kart > p { --g: 0.32s; }
  .js .profil-kart dl > div:nth-child(1) { --g: 0.36s; } .js .profil-kart dl > div:nth-child(2) { --g: 0.40s; } .js .profil-kart dl > div:nth-child(3) { --g: 0.44s; }
  .js .anahtar > div:nth-child(1) { --g: 0.36s; } .js .anahtar > div:nth-child(2) { --g: 0.41s; }
  .js .anahtar > div:nth-child(3) { --g: 0.46s; } .js .anahtar > div:nth-child(4) { --g: 0.51s; }
  .js .anahtar { position: relative; }
  .js .anahtar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--petrol); transform-origin: 0 50%; opacity: 0.6; animation: giris-cizgi 0.6s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  /* kaydırmaya bağlı geri çekilme: transform/opacity'yi site.js doğrudan yazar (özel özellik yok → alt ağaçta stil hesabı yok) */
  /* will-change yok: kalıcı katman, kartı (overflow + isolation) bazı Chrome derlemelerinde çizilmez bırakıyordu */
  [data-hero-kart] { transform-origin: 50% 0; }
  /* giriş bitince kartın alt ağacındaki animasyonlar kaldırılır (site.js .girdi): Chrome, biten birleşik (compositor)
     animasyonun son karesini bayat bırakıp kartı opaklık 0'da çizilmez gösterebiliyordu; animation:none taze boyama zorlar */
  .js .girdi .profil-kart, .js .girdi .profil-kart * { animation: none; }
}
/* yavaş açılışta (ilk kare 1 sn'den geç, bkz. head betiği .giris-yok) kademeli giriş atlanır: içerik beklemeden görünür */
.giris-yok .ust, .giris-yok .hero *, .giris-yok .hero *::before { animation: none !important; }
@media (prefers-reduced-motion: no-preference) and (max-width: 60rem) {
  /* tek sütunda kart alttadır: yatay kayma taşma yapardı → kısa dikey giriş */
  .js .profil-kart { animation-name: giris-kart-dik; }
}

/* ---------- hareket: yalnız çok hafif belirme ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rk, 0s), transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rk, 0s); }
  .js [data-reveal].gorundu { opacity: 1; transform: none; }
}

@media print {
  .ust, .atla, .hero-eylem, .iletisim-yan .dugme-cizgi { display: none; }
  .iletisim, .alt { background: none; color: #000; }
}


/* === ek/20-uzmanlik.css === */
/* ---------- uzmanlık ---------- */
.uzmanliklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.uzman { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: box-shadow 0.2s, border-color 0.2s; }
@supports (grid-template-rows: subgrid) {
  .uzmanliklar { grid-template-rows: repeat(4, auto); }
  .uzman { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.75rem; }
}
.uzman .etiketler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; align-self: end; border-top: 1px solid var(--cizgi); padding-top: 1rem; margin-top: 0.5rem; }
.uzman .etiketler li { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 0.4rem; }
.uzman:hover { box-shadow: var(--golge-hover); border-color: var(--cizgi-2); transform: translateY(-2px); }
.uzman-ust { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.25rem; }
.uzman-no { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--petrol); padding-top: 0.25rem; }
/* izometrik illüstrasyon: karo yok; SVG kendi zemin gölgesini taşır. Görselin iç boşluğu
   (~%10) negatif kenar boşluğuyla telafi edilir ki çizim başlıkla aynı sol hizada dursun. */
.ikon { position: relative; isolation: isolate; display: block; width: 6rem; height: 6rem; margin: -0.75rem 0 -0.625rem -0.75rem; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ikon img { width: 100%; height: 100%; }
.ikon::before {
  content: ""; position: absolute; inset: 12% 8% 4%; border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(closest-side, rgba(19, 105, 122, 0.14), transparent);
}
.uzman:hover .ikon, .uzman:focus-within .ikon { transform: translateY(-3px); }
.uzman:hover .ikon::before, .uzman:focus-within .ikon::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .uzman:hover .ikon, .uzman:focus-within .ikon { transform: none; } }
.uzman h3 { font-size: var(--t-l); line-height: 1.35; font-weight: 600; color: var(--lacivert); }
.uzman p { font-size: var(--t-s); color: var(--metin-2); line-height: 1.55; }
@supports not (grid-template-rows: subgrid) { .uzman .etiketler { margin-top: auto; } }
@media (max-width: 68rem) { .uzmanliklar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .uzmanliklar { grid-template-columns: 1fr; } }



/* === ek/30-deneyim.css === */
/* ---------- deneyim (zaman çizelgesi) ----------
   Varsayılan (JS yok / hareket azaltma): her şey görünür, omurga ve ray dolu, durağan.
   Hareket yalnız JS'in .cizelge-kap'a koyduğu [data-canli] altında açılır. */
.cizelge-kap {
  --om-x: 1rem;          /* omurganın yatay merkezi */
  --om-bosluk: 3rem;     /* omurga sütunu genişliği */
  --sirket-p: 1.5rem;
  --nokta-y: calc(var(--sirket-p) + 1.375rem); /* rozet merkezi hizası */
  --egri: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; padding-left: var(--om-bosluk);
}
.cizelge { display: grid; gap: 1.25rem; }
.kalem { position: relative; }

/* omurga: iz + dolgu + parlayan uç (konumu JS ölçer; JS yoksa yaklaşık) */
.omurga { position: absolute; left: calc(var(--om-x) - 1px); width: 2px; top: var(--om-ust, var(--nokta-y)); height: var(--om-boy, calc(100% - var(--nokta-y) - 2rem)); background: var(--cizgi); border-radius: 2px; }
.omurga-dolu { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--petrol), var(--lacivert-2)); transform-origin: 50% 0; }
.omurga-uc { display: none; }

/* kurum düğümü */
.kalem::before {
  content: ""; position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  left: calc(var(--om-x) - var(--om-bosluk) - 6px); top: calc(var(--nokta-y) - 6px);
  background: var(--yuzey); border: 2px solid var(--petrol); box-shadow: 0 0 0 4px var(--zemin);
}
.kalem-simdi::before { background: var(--petrol); }
.kalem-simdi::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  left: calc(var(--om-x) - var(--om-bosluk) - 6px); top: calc(var(--nokta-y) - 6px);
  background: var(--petrol); opacity: 0;
}

/* kart */
.sirket { position: relative; border: 0; border-radius: var(--r-kart); background: var(--yuzey); padding: var(--sirket-p); box-shadow: var(--golge); transition: box-shadow 0.3s ease-out; }
.sirket-bas, .rol { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.25rem 2rem; }
.cizelge-tarih { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--soluk); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.sirket-bas > .cizelge-tarih { align-self: center; }
.tarih-cip {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; line-height: 1.3;
  padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--ara-zemin); border: 1px solid var(--cizgi); color: var(--metin-2);
}
.rol-simdi .tarih-cip, .kalem-simdi .sirket-bas .tarih-cip, .tarih-cip:has(.canli) { background: var(--petrol-acik); border-color: rgba(19, 105, 122, 0.22); color: var(--petrol); font-weight: 500; }
.canli { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--petrol); }
.canli::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--petrol); opacity: 0; }
.sure { font-size: 0.75rem; color: var(--soluk); padding-left: 0.6rem; }
.sirket h3 { font-size: var(--t-xl); line-height: 1.25; font-weight: 700; color: var(--lacivert); }
.sirket-alt { font-size: var(--t-s); color: var(--soluk); margin-top: 0.125rem; }
.sirket-metin { margin-left: calc(13rem + 3.625rem); margin-top: 0.75rem; max-width: 68ch; }
.sirket-metin p, .rol-ic p { font-size: var(--t-s); color: var(--metin-2); line-height: 1.6; max-width: 33rem; }
.sirket-metin p + p, .rol-ic p + p { margin-top: 0.375rem; }

/* kariyer adımları (Üretim → Ar-Ge → İş Geliştirme) */
.terfi { margin: 1.25rem 0 0 13rem; max-width: 34rem; }
.terfi-baslik { font-size: var(--t-xs); font-weight: 600; color: var(--soluk); letter-spacing: 0.01em; margin-bottom: 0.625rem; }
.terfi-adim { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
/* bağlantı çizgisi: ilk noktadan son noktaya */
.terfi-adim::before, .terfi-adim::after { content: ""; position: absolute; top: 7px; left: 7px; right: calc(100% / var(--n, 3) - 7px); height: 2px; border-radius: 2px; }
.terfi-adim::before { background: var(--cizgi); }
.terfi-adim::after { background: linear-gradient(90deg, var(--cizgi-2), var(--petrol)); transform-origin: 0 50%; }
.adim { position: relative; display: grid; gap: 0.125rem; padding-right: 0.75rem; }
/* terfi: noktalar basamak basamak büyür */
.adim-nokta { position: relative; z-index: 1; width: 16px; height: 16px; display: grid; place-items: center; margin-bottom: 0.375rem; }
.adim-nokta::before { content: ""; width: calc(8px + var(--k, 0) * 2px); height: calc(8px + var(--k, 0) * 2px); border-radius: 50%; background: var(--yuzey); border: 2px solid var(--cizgi-2); box-shadow: 0 0 0 3px var(--yuzey); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.adim:not(.adim-simdi) .adim-nokta::before { border-color: var(--petrol); }
.adim-simdi .adim-nokta::before { background: var(--petrol); border-color: var(--petrol); box-shadow: 0 0 0 3px var(--yuzey), 0 0 0 6px rgba(19, 105, 122, 0.16); }
.adim-ad { font-size: var(--t-s); font-weight: 600; color: var(--lacivert); line-height: 1.3; transition: color 0.3s; }
.adim-simdi .adim-ad { color: var(--petrol); }
.adim-tarih { font-family: var(--f-mono); font-size: 0.75rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.adim-sure { font-size: var(--t-xs); color: var(--soluk); }
.adim-simdi .adim-sure { color: var(--petrol); font-weight: 500; }

/* iç içe roller ve ray */
.roller { position: relative; margin-top: 1.5rem; display: grid; gap: 0; }
.roller::before, .roller::after {
  content: ""; position: absolute; left: calc(13rem + 5.5px); width: 2px; border-radius: 2px;
  top: var(--ray-ust, 2.3rem); height: var(--ray-boy, calc(100% - 4rem));
}
.roller::before { background: var(--cizgi); }
.roller::after { background: var(--petrol); transform-origin: 50% 0; transform: scaleY(var(--ray, 1)); }
.rol { position: relative; padding-block: 1.25rem; border-top: 1px solid var(--cizgi); }
/* etkin rol: kart kenarına taşan ince vurgu bandı */
.rol::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sirket-p) * -1); right: calc(var(--sirket-p) * -1); pointer-events: none;
  background: linear-gradient(90deg, rgba(227, 240, 242, 0.9), rgba(227, 240, 242, 0.25) 60%, rgba(227, 240, 242, 0));
  box-shadow: inset 2px 0 0 var(--petrol); opacity: 0; transition: opacity 0.4s ease-out;
}
.rol:last-child::before { border-bottom-left-radius: var(--r-kart); border-bottom-right-radius: var(--r-kart); }
.rol > * { position: relative; }
.rol-ic { padding-left: 1.5rem; max-width: 72ch; }
.rol-ic::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0.45rem; width: 13px; height: 13px; border-radius: 50%;
  background: var(--yuzey); border: 2px solid var(--petrol); box-shadow: 0 0 0 3px var(--yuzey); transition: border-color 0.3s, background 0.3s, transform 0.4s var(--egri, ease-out);
}
.rol-simdi .rol-ic::before { background: var(--petrol); }
.rol h4 { font-size: var(--t-m); font-weight: 600; color: var(--lacivert); line-height: 1.4; margin-bottom: 0.375rem; transition: color 0.3s; }

/* ===== canlı kip (JS + hareket serbest) ===== */
[data-canli] .omurga-dolu { transform: scaleY(0); }
[data-canli] .omurga-uc {
  display: block; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--yuzey); border: 2px solid var(--petrol); opacity: 0; transition: opacity 0.3s;
  box-shadow: 0 0 0 3px rgba(19, 105, 122, 0.14), 0 1px 3px rgba(16, 24, 32, 0.22);
}
[data-canli] .omurga-uc.acik { opacity: 1; }
[data-canli] .kalem::before { border-color: var(--cizgi-2); transition: border-color 0.3s, background 0.3s, transform 0.35s var(--egri); }
[data-canli] .kalem.gecti::before { border-color: var(--petrol); transform: scale(1.15); }
[data-canli] .kalem-simdi:not(.gecti)::before { background: var(--yuzey); }
[data-canli] .kalem-simdi.gecti::after { animation: halka 2.8s ease-out infinite; }
[data-canli] .roller::after { transform: scaleY(var(--ray, 0)); }
[data-canli] .rol-ic::before { border-color: var(--cizgi-2); }
[data-canli] .rol.gecti .rol-ic::before { border-color: var(--petrol); }
[data-canli] .rol-simdi:not(.gecti) .rol-ic::before { background: var(--yuzey); }
[data-canli] .rol.etkin::before { opacity: 1; }
[data-canli] .rol.etkin .rol-ic::before { transform: scale(1.2); }
[data-canli] .rol.etkin h4 { color: var(--lacivert-2); }
[data-canli] .adim.etkin .adim-ad { color: var(--petrol); }
[data-canli] .adim.etkin .adim-nokta::before { box-shadow: 0 0 0 3px var(--yuzey), 0 0 0 6px rgba(19, 105, 122, 0.22); }
[data-canli] .canli::after { animation: halka 2.4s ease-out infinite; }
@keyframes halka { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* giriş: kart sırayla kayar, içi kademeli dolar; yukarı kaydırınca (öğe alttan çıkınca) geri sarılır.
   Gizli hâlde gecikme yok → geri dönüş anında; görünürde gecikmeler kademe verir. translate/scale ayrı
   özellikler: site.css'teki hover transform'larıyla çakışmaz. */
[data-canli] .kalem { opacity: 0; translate: -6px 10px; transition: opacity 0.35s var(--egri), translate 0.4s var(--egri); }
[data-canli] .kalem.gir { opacity: 1; translate: none; }
[data-canli] .kalem::before { scale: 0; transition: scale 0.35s var(--egri), border-color 0.3s, background 0.3s, transform 0.35s var(--egri); }
[data-canli] .kalem.gir::before { scale: 1; transition-delay: 0.05s, 0s, 0s, 0s; }
[data-canli] .kalem .rozet { opacity: 0; scale: 0.85; }
[data-canli] .kalem.gir .rozet { animation: rozet-pop 0.35s var(--egri) 0.06s backwards; opacity: 1; scale: 1; }
@keyframes rozet-pop { from { opacity: 0; scale: 0.85; } }
[data-canli] .kalem .tarih-cip, [data-canli] .kalem .sure { opacity: 0; translate: -8px 0; transition: opacity 0.3s var(--egri), translate 0.35s var(--egri); }
[data-canli] .kalem.gir .tarih-cip, [data-canli] .kalem.gir .sure { opacity: 1; translate: none; }
[data-canli] .kalem.gir .sirket-bas .tarih-cip { transition-delay: 0.08s; }
[data-canli] .kalem .sirket-kimlik h3, [data-canli] .kalem .sirket-alt, [data-canli] .kalem .sirket-metin { opacity: 0; translate: 0 8px; transition: opacity 0.3s var(--egri), translate 0.35s var(--egri); }
[data-canli] .kalem.gir .sirket-kimlik h3, [data-canli] .kalem.gir .sirket-alt, [data-canli] .kalem.gir .sirket-metin { opacity: 1; translate: none; }
[data-canli] .kalem.gir .sirket-kimlik h3 { transition-delay: 0.05s; }
[data-canli] .kalem.gir .sirket-alt { transition-delay: 0.09s; }
[data-canli] .kalem.gir .sirket-metin { transition-delay: 0.13s; }
/* terfi şeridi: çizgi soldan çizilir, basamaklar sırayla yanar */
[data-canli] .terfi-adim::after { transform: scaleX(0); transition: transform 0.5s var(--egri); }
[data-canli] .kalem.gir .terfi-adim::after { transform: scaleX(1); transition-delay: 0.16s; }
[data-canli] .adim { opacity: 0; translate: 0 6px; transition: opacity 0.3s var(--egri), translate 0.35s var(--egri); }
[data-canli] .kalem.gir .adim { opacity: 1; translate: none; transition-delay: calc(0.18s + var(--k, 0) * 0.06s); }
[data-canli] .terfi-baslik { opacity: 0; transition: opacity 0.3s; }
[data-canli] .kalem.gir .terfi-baslik { opacity: 1; transition-delay: 0.12s; }
/* roller kademeli */
[data-canli] .rol > .cizelge-tarih, [data-canli] .rol > .rol-ic { opacity: 0; translate: 0 10px; transition: opacity 0.35s var(--egri), translate 0.4s var(--egri); }
[data-canli] .kalem.gir .rol > .cizelge-tarih, [data-canli] .kalem.gir .rol > .rol-ic { opacity: 1; translate: none; }
[data-canli] .kalem.gir .rol:nth-child(1) > * { transition-delay: 0.18s; }
[data-canli] .kalem.gir .rol:nth-child(2) > * { transition-delay: 0.23s; }
[data-canli] .kalem.gir .rol:nth-child(3) > * { transition-delay: 0.28s; }
[data-canli] .kalem.gir .rol:nth-child(n+4) > * { transition-delay: 0.33s; }
/* site.js'in genel belirmesi kartta bizim girişimizle üst üste binmesin */
.js #experience .sirket[data-reveal] { opacity: 1; transform: none; transition: box-shadow 0.3s ease-out; }

/* üstüne gelince: imleci izleyen ince kenar ışığı + yumuşak ışık lekesi */
@media (hover: hover) and (pointer: fine) {
  .sirket:hover { box-shadow: var(--golge-hover); }
  .sirket::before, .sirket::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease-out; }
  .sirket::before {
    padding: 1px;
    background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgba(19, 105, 122, 0.65), rgba(19, 105, 122, 0.12) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .sirket::after { background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(19, 105, 122, 0.045), transparent 65%); }
  .sirket:hover::before, .sirket:hover::after { opacity: 1; }
  .sirket > * { position: relative; z-index: 1; }
  .kalem:hover::before { box-shadow: 0 0 0 4px var(--zemin), 0 0 0 7px rgba(19, 105, 122, 0.14); }
}

@media (max-width: 48rem) {
  .cizelge-kap { --om-x: 0.4375rem; --om-bosluk: 1.5rem; --sirket-p: 1.25rem; --nokta-y: calc(var(--sirket-p) + 0.875rem); }
  .kalem::before, .kalem-simdi::after { width: 10px; height: 10px; left: calc(var(--om-x) - var(--om-bosluk) - 5px); top: calc(var(--nokta-y) - 5px); }
  .sirket-bas, .rol { grid-template-columns: 1fr; }
  .sirket-bas { gap: 0.625rem; }
  .sirket-bas > .cizelge-tarih { order: -1; align-self: start; flex-direction: row; flex-wrap: wrap; }
  .rol .cizelge-tarih { padding: 0 0 0.375rem 1.5rem; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sure { padding-left: 0.25rem; }
  .sirket-metin { margin-left: 0; }
  .terfi { margin-left: 0; }
  .adim { padding-right: 0.5rem; }
  .adim-ad { font-size: var(--t-xs); }
  .adim-tarih { font-size: 0.6875rem; }
  .adim-sure { font-size: 0.75rem; }
  .roller::before, .roller::after { left: 5.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kalem-simdi::after, .canli::after { display: none; }
}
@media print {
  .omurga, .kalem::before, .kalem-simdi::after, .terfi { display: none; }
  .cizelge-kap { padding-left: 0; }
}


/* === ek/50-yetkinlik.css === */
/* ---------- teknik yetkinlikler: ikonlu grup kartları + marka logoları + grup süzgeci ---------- */
.yt-arac { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.yt-arac[hidden] { display: none; }
.yt-suz {
  font: inherit; font-size: var(--t-xs); font-weight: 500; line-height: 1.3; color: var(--metin-2);
  background: var(--yuzey); border: 1px solid var(--cizgi-2); border-radius: 999px;
  min-height: 2.25rem; padding: 0.45rem 0.9rem; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.yt-suz:hover { border-color: var(--petrol); color: var(--lacivert); }
.yt-suz[aria-pressed="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }

.yt-semboller { position: absolute; width: 0; height: 0; overflow: hidden; }

/* düzenli ızgara: üstte 3 sütun (yazılım kartı 2 sütun kaplar), altta yöntem grupları 2 sütun.
   Aynı satırdaki kartlar eşit yükseklikte. (Önceki çok sütunlu "masonry" düzen Chrome'da üstüne gelince
   kartı kaybettiriyordu: multicol + transform hatası — bu yüzden grid.) */
.yt-kutu { position: relative; }
.yt-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.yt-genis { grid-column: span 2; }
.yt-alt { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.yt-alt:not(:has(.yt-kart:not([hidden]))), .yt-izgara:not(:has(.yt-kart:not([hidden]))) { display: none; }
/* orta genişlik: 2 sütun; yazılım tam satır, medya sistemin yanına iner (yalnız kalan kart olmaz) */
@media (max-width: 64rem) { .yt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; } .yt-r-medya { grid-column: auto; }
  .yt-izgara .yt-r-medya .yt-liste, .yt-izgara .yt-yontem .yt-liste { grid-template-columns: minmax(0, 1fr); }
  .yt-izgara .yt-r-medya .yt-liste > li, .yt-izgara .yt-yontem .yt-liste > li { grid-column: auto; } }
@media (max-width: 44rem) { .yt-izgara, .yt-alt { grid-template-columns: minmax(0, 1fr); } .yt-genis { grid-column: auto; } }

.yt-kart {
  position: relative; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem 1.25rem 1.375rem;
  background: var(--yuzey); border-radius: var(--r-kart); box-shadow: var(--golge);
  transition: box-shadow 0.2s ease-out;
}
.yt-kart[hidden] { display: none; }
.yt-kart::before { /* üst kenarda grup renginde ince çizgi; üstüne gelince tam boy */
  content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--v, var(--petrol)); opacity: 0.55; transform: scaleX(0.35); transform-origin: 0 50%; transition: transform 0.3s ease-out, opacity 0.3s;
}
.yt-kart:hover { box-shadow: var(--golge-hover); }
.yt-kart:hover::before, .yt.tek .yt-kart::before { transform: scaleX(1); opacity: 1; }

.yt-bas { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--cizgi); }
.yt-ikon {
  flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px;
  color: var(--v, var(--petrol)); background: color-mix(in srgb, var(--v, var(--petrol)) 12%, #fff); transition: background-color 0.2s, color 0.2s;
}
.yt-ikon svg { overflow: visible; }
.yt-ikon .d { fill: currentColor; fill-opacity: 0.18; stroke: none; }
.yt-kart:hover .yt-ikon { background: var(--v, var(--petrol)); color: #fff; }
.yt-kart:hover .yt-ikon .d { fill-opacity: 0.28; }
.yt-bas h3 { flex: 1; min-width: 0; font-size: var(--t-m); font-weight: 600; line-height: 1.3; color: var(--lacivert); }
.yt-sayi { flex: none; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--soluk); white-space: nowrap; }

/* ---- öğe satırları: her kartta aynı şema. Solda 2.25rem kare kutu (logo ya da işaret), sağda ad + açıklama.
   Geniş kartlarda (yazılım, alt gruplar) satırlar iki sütuna dizilir; dar kartlarda alt alta. */
/* liste kartın kalan yüksekliğini doldurur: satırlar eşit pay alır (1fr), aynı satırdaki kısa kartta boşluk kalmaz */
.yt-liste { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(3rem, 1fr); gap: 0.375rem; }
/* iki sütunlu listede tek kalan son öğe tüm genişliği alır: yarım satır boşluğu olmaz */
.yt-genis .yt-liste > li:last-child:nth-child(odd), .yt-yontem .yt-liste > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.yt-genis .yt-liste, .yt-yontem .yt-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; }
@media (max-width: 34rem) { .yt-genis .yt-liste, .yt-yontem .yt-liste { grid-template-columns: minmax(0, 1fr); } }
.yt-oge {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.4375rem 0.625rem 0.4375rem 0.4375rem;
  border-radius: var(--r-k); background: color-mix(in srgb, var(--v, var(--petrol)) 3%, #fff);
  border: 1px solid color-mix(in srgb, var(--v, var(--petrol)) 9%, #fff); transition: background-color 0.15s, border-color 0.15s;
}
.yt-oge:hover { background: color-mix(in srgb, var(--v, var(--petrol)) 6%, #fff); border-color: color-mix(in srgb, var(--v, var(--petrol)) 18%, #fff); }
.yt-al {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px;
  background: #fff; box-shadow: 0 0 0 1px var(--cizgi), 0 1px 2px rgba(16, 24, 32, 0.05);
}
.yt-logo { display: block; width: 1.375rem; height: 1.375rem; }
.yt-logosuz .yt-al { background: color-mix(in srgb, var(--v, var(--petrol)) 10%, #fff); box-shadow: none; color: var(--v, var(--petrol)); }
.yt-isaret { width: 1rem; height: 1rem; }
.yt-metin { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.yt-metin strong { font-size: var(--t-s); font-weight: 600; line-height: 1.35; color: var(--lacivert-2); }
.yt-metin span { font-size: var(--t-xs); line-height: 1.4; color: var(--soluk); }

/* ---- grup rengi (--v): ikon karosu, üst çizgi, satır vurgusu ve işaretlerde hafif ton */
.yt-r-analiz { --v: #b5650d; }
.yt-r-tasarim { --v: #2563b8; }
.yt-r-uretim { --v: #0f7a6c; }
.yt-r-kurumsal { --v: #6d4bc4; }
.yt-r-veri { --v: #2f8a4c; }
.yt-r-vt { --v: #3f55c6; }
.yt-r-yazilim { --v: #13697a; }
.yt-r-sistem { --v: #4f6375; }
.yt-r-medya { --v: #b33a6b; }

/* tek grup seçiliyken: kart tam genişlik, satırlar üç sütuna kadar */
.yt.tek .yt-izgara, .yt.tek .yt-alt { grid-template-columns: minmax(0, 1fr); }
.yt.tek .yt-genis { grid-column: auto; }
@media (min-width: 48rem) { .yt.tek .yt-liste { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }

@media (max-width: 30rem) {
  .yt-kart { padding: 1.125rem 1rem 1.25rem; }
  .yt-arac { gap: 0.375rem; }
}

/* belirme (yalnız transform/opacity): kart 10px yukarı kayarak 320 ms, öğeler 20 ms arayla (en çok 8 adım).
   Yalnız JS + hareket serbestken; JS kapalıyken her şey görünür. Süzgeç geçişi: .yt-kutu yüksekliği (JS). */
@media (prefers-reduced-motion: no-preference) {
  .js .yt-hazir .yt-kart { opacity: 0; transform: translateY(10px); transition: opacity 0.32s ease-out, transform 0.32s ease-out, box-shadow 0.2s ease-out; transition-delay: calc(var(--k, 0) * 45ms); }
  .js .yt-hazir .yt-kart li { opacity: 0; transition: opacity 0.3s ease-out, background-color 0.15s, border-color 0.15s, color 0.15s; transition-delay: calc(var(--k, 0) * 45ms + 80ms + min(var(--i, 0), 8) * 20ms); }
  .js .yt-hazir .yt-kart.gorundu, .js .yt-hazir .yt-kart.gorundu li { opacity: 1; transform: none; }
  .js .yt-hazir .yt-kart.oturdu, .js .yt-hazir .yt-kart.oturdu li { transition-delay: 0s; }
  .yt-kutu.yt-gecis { overflow: hidden; transition: height 0.3s ease-out; }
}