/* ==========================================================================
   TÜRKOL YAZILIM — Tasarım Sistemi
   Renkler ve tipografi doğrudan logodan türetilmiştir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokenlar
   -------------------------------------------------------------------------- */
:root {
    /* Logodan çıkarılan marka renkleri */
    --tk-blue-900: #0A1633;
    --tk-blue-800: #101F4A;
    --tk-blue-700: #1B2CD6;
    --tk-blue:     #2D3EFF; /* logo — ana renk */
    --tk-blue-500: #3067FF; /* logo */
    --tk-sky:      #56B5FF; /* logo — vurgu */
    --tk-mist:     #7DAAF1; /* logo */

    --tk-ink-900:  #16181D;
    --tk-ink:      #444445; /* logo kelime markası */
    --tk-gray-600: #6B6D72;
    --tk-gray-400: #6E7179; /* AA: 4.88 beyaz / 4.60 zemin */
    --tk-line:     #E3E7F0;
    --tk-bg:       #F6F8FD;
    --tk-surface:  #FFFFFF;

    --tk-success:  #12A150;
    --tk-danger:   #E5484D;

    /* Tipografi */
    --tk-font-display: 'Montserrat', 'Segoe UI', sans-serif;
    --tk-font-body:    'Inter', 'Segoe UI', sans-serif;
    --tk-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Şekil — yarıçap yasası: logodan türetildi.
       Markadaki karo 127×127px ve rx=32 → yarıçap = kenar / 4.
       Ölçek bu oranı korur; her bileşen KENDİ boyutuna denk gelen jetonu kullanır.
       Üst sınır 32px: sistemdeki hiçbir yarıçap logonun kendi yarıçapını aşmaz. */
    --tk-r-3xs:  2px;   /*   8px öğe */
    --tk-r-2xs:  4px;   /*  16px öğe */
    --tk-r-xs:   6px;   /*  24px öğe — etiket, küçük çip */
    --tk-r-sm:   8px;   /*  32px öğe — rozet, küçük ikon kutusu */
    --tk-r-md:  10px;   /*  40px öğe — alan, ikon kutusu */
    --tk-r:     12px;   /*  48px öğe — buton, giriş alanı */
    --tk-r-lg:  16px;   /*  64px öğe — kart ikonu, orta yüzey */
    --tk-r-xl:  20px;   /*  80px öğe */
    --tk-r-2xl: 24px;   /*  96px öğe — kart */
    --tk-r-3xl: 32px;   /* 128px+ — büyük kart, medya (logonun karosu) */
    --tk-r-pill: 999px; /* hap biçimi — rozet, navbar */

    --tk-shadow-sm: 0 1px 2px rgba(10, 22, 51, .06), 0 2px 8px rgba(10, 22, 51, .05);
    --tk-shadow:    0 1px 2px rgba(10, 22, 51, .06), 0 8px 24px rgba(10, 22, 51, .08);
    --tk-shadow-lg: 0 2px 4px rgba(10, 22, 51, .06), 0 24px 56px rgba(10, 22, 51, .13);

    /* Ölçü */
    --tk-tile: 64px;              /* karo ızgarası birimi */
    --tk-container: 1180px;
    --tk-gutter: 24px;
    --tk-section: clamp(72px, 9vw, 128px);

    --tk-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Temel
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    font-family: var(--tk-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tk-ink);
    background: var(--tk-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip kullanılıyor: hidden, alt öğelerde position:sticky'yi bozar
       (kaydırma kabı oluşturur). clip taşmayı engeller, sticky çalışır. */
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--tk-blue); color: #fff; }

:focus-visible {
    outline: 3px solid var(--tk-sky);
    outline-offset: 3px;
    border-radius: var(--tk-r-3xs);
}

/* --------------------------------------------------------------------------
   3. Tipografi
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--tk-font-display);
    color: var(--tk-ink-900);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    text-wrap: balance;
}

h1, .tk-h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing: -.035em; line-height: 1.04; }
h2, .tk-h2 { font-size: clamp(1.95rem, 3.9vw, 3.1rem); }
h3, .tk-h3 { font-size: clamp(1.4rem, 2.3vw, 1.95rem); font-weight: 600; letter-spacing: -.02em; }
h4, .tk-h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }

p { margin: 0; }

.tk-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: var(--tk-gray-600);
    text-wrap: pretty;
}

/* Eyebrow — bölüm etiketi */
.tk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tk-font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tk-blue);
    margin-bottom: 18px;
}

.tk-eyebrow::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: var(--tk-r-3xs);
    background: var(--tk-sky);
    flex: none;
}

.tk-eyebrow--light { color: var(--tk-sky); }
.tk-eyebrow--light::before { background: var(--tk-sky); }

.tk-mono {
    font-family: var(--tk-font-mono);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Yerleşim
   -------------------------------------------------------------------------- */
.tk-container {
    width: 100%;
    max-width: var(--tk-container);
    margin-inline: auto;
    padding-inline: var(--tk-gutter);
}

.tk-section { padding-block: var(--tk-section); position: relative; }

.tk-section--tight { padding-block: clamp(48px, 6vw, 80px); }

.tk-section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.tk-section-head p { margin-top: 18px; }
.tk-section-head--center { margin-inline: auto; text-align: center; }
.tk-section-head--center .tk-eyebrow { justify-content: center; }

.tk-grid { display: grid; gap: 24px; }

@media (min-width: 640px)  { .tk-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
    .tk-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .tk-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px)  { .tk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .tk-grid--4 { grid-template-columns: 1fr; } }

.tk-dark {
    background: var(--tk-blue-900);
    color: rgba(255, 255, 255, .78);
}
.tk-dark h1, .tk-dark h2, .tk-dark h3, .tk-dark h4 { color: #fff; }
.tk-dark .tk-lead { color: rgba(255, 255, 255, .72); }

.tk-tinted { background: var(--tk-bg); }

/* --------------------------------------------------------------------------
   5. Karo ızgarası — imza öğe
   Logodaki 2×2 karo sisteminden türetildi.
   -------------------------------------------------------------------------- */
.tk-tiles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    --tile-line: rgba(45, 62, 255, .07);
    background-image:
        linear-gradient(to right, var(--tile-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--tile-line) 1px, transparent 1px);
    background-size: var(--tk-tile) var(--tk-tile);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

.tk-dark .tk-tiles { --tile-line: rgba(125, 170, 241, .12); }

/* Izgarada dolu karolar */
.tk-tiles i {
    position: absolute;
    width: var(--tk-tile);
    height: var(--tk-tile);
    border-radius: var(--tk-r-md);
    opacity: .13;
    animation: tkTile 7s var(--tk-ease) infinite;
}

@keyframes tkTile {
    0%, 100% { opacity: .10; transform: scale(1); }
    50%      { opacity: .24; transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   6. Butonlar
   -------------------------------------------------------------------------- */
.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding-inline: 26px;
    border-radius: var(--tk-r);
    font-family: var(--tk-font-body);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--tk-ease), box-shadow .2s var(--tk-ease),
                background-color .2s var(--tk-ease), color .2s var(--tk-ease),
                border-color .2s var(--tk-ease);
}

.tk-btn svg { flex: none; transition: transform .25s var(--tk-ease); }
.tk-btn:hover svg { transform: translateX(3px); }

.tk-btn--primary {
    background: var(--tk-blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(10, 22, 51, .12), 0 8px 20px rgba(45, 62, 255, .26);
}
.tk-btn--primary:hover {
    background: var(--tk-blue-700);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(10, 22, 51, .12), 0 14px 30px rgba(45, 62, 255, .34);
}

.tk-btn--ghost {
    background: var(--tk-surface);
    color: var(--tk-ink-900);
    border: 1px solid var(--tk-line);
}
.tk-btn--ghost:hover {
    border-color: var(--tk-blue);
    color: var(--tk-blue);
    transform: translateY(-2px);
    box-shadow: var(--tk-shadow-sm);
}

.tk-dark .tk-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.tk-dark .tk-btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--tk-sky);
    color: #fff;
}

.tk-btn--sm { height: 44px; padding-inline: 20px; font-size: .9rem; }

/* Metin bağlantısı */
.tk-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: .93rem;
    color: var(--tk-blue);
    transition: gap .2s var(--tk-ease), color .2s var(--tk-ease);
}
.tk-link:hover { gap: 12px; color: var(--tk-blue-700); }
.tk-dark .tk-link { color: var(--tk-sky); }

/* --------------------------------------------------------------------------
   7. Kartlar
   -------------------------------------------------------------------------- */
.tk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-3xl);
    overflow: hidden;
    transition: transform .28s var(--tk-ease), box-shadow .28s var(--tk-ease),
                border-color .28s var(--tk-ease);
}

/* Kart köşesindeki karo — hover'da doluyor */
.tk-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--tk-sky), var(--tk-blue));
    opacity: 0;
    transform: translate(14px, -14px);
    transition: opacity .3s var(--tk-ease), transform .3s var(--tk-ease);
    border-bottom-left-radius: var(--tk-r);
}

a.tk-card:hover, .tk-card--hover:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 62, 255, .28);
    box-shadow: var(--tk-shadow);
}
a.tk-card:hover::after, .tk-card--hover:hover::after {
    opacity: .16;
    transform: translate(0, 0);
}

.tk-card h3, .tk-card h4 { margin-bottom: 10px; }
.tk-card p { color: var(--tk-gray-600); font-size: .95rem; }

/* Kart numarası — karo içinde */
.tk-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: var(--tk-r-sm);
    background: rgba(45, 62, 255, .08);
    color: var(--tk-blue);
    font-family: var(--tk-font-mono);
    font-size: .82rem;
    font-weight: 700;
    flex: none;
}

.tk-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    border-radius: var(--tk-r);
    background: rgba(45, 62, 255, .08);
    color: var(--tk-blue);
    flex: none;
}
.tk-card-icon svg { width: 22px; height: 22px; }

/* Teknoloji etiketleri */
.tk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 20px;
}

.tk-tag {
    font-family: var(--tk-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 5px 10px;
    border-radius: var(--tk-r-sm);
    background: var(--tk-bg);
    color: var(--tk-gray-600);
    border: 1px solid var(--tk-line);
    white-space: nowrap;
}

.tk-dark .tk-tag {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .75);
}

/* Rozet */
.tk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--tk-r-pill);
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--tk-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(18, 161, 80, .1);
    color: var(--tk-success);
}
.tk-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Alan rozeti — "Siber güvenlik" gibi kategori etiketleri */
.tk-badge--accent {
    background: rgba(45, 62, 255, .09);
    color: var(--tk-blue-700);
}

/* --------------------------------------------------------------------------
   8. Başlık / navigasyon
   -------------------------------------------------------------------------- */
.tk-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--tk-ease), box-shadow .3s var(--tk-ease);
}
.tk-header.is-stuck {
    border-bottom-color: var(--tk-line);
    box-shadow: 0 2px 16px rgba(10, 22, 51, .05);
}

/* Tam ekran hero'lu sayfalarda başlık açılışta gizli; ilk kaydırmada iner.
   JS yoksa hiç gizlenmez — erişilebilirlik için menü her zaman ulaşılabilir. */
html.js .tk-header.is-gizli {
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
}
.tk-header {
    transition: transform .42s var(--tk-ease), opacity .28s var(--tk-ease),
                border-color .3s var(--tk-ease), box-shadow .3s var(--tk-ease);
    will-change: transform;
}
/* Klavyeyle "İçeriğe atla" bağlantısına odaklanınca başlık geri gelir */
html.js .tk-header.is-gizli:focus-within {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tk-header { transition: opacity .2s linear; }
    html.js .tk-header.is-gizli { transform: none; }
}

.tk-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 76px;
}

.tk-logo { display: flex; align-items: center; flex: none; }
.tk-logo img { height: 30px; width: auto; }

.tk-nav { margin-left: auto; }
.tk-nav ul { display: flex; align-items: center; gap: 4px; }

/* Menü içindeki CTA yalnızca mobil menüde görünür */
.tk-nav .tk-nav__cta { display: none; }

.tk-nav a {
    position: relative;
    display: block;
    padding: 9px 14px;
    border-radius: var(--tk-r-sm);
    font-size: .93rem;
    font-weight: 500;
    color: var(--tk-ink);
    transition: color .2s var(--tk-ease), background-color .2s var(--tk-ease);
}
.tk-nav a:hover { color: var(--tk-blue); background: rgba(45, 62, 255, .06); }
.tk-nav a[aria-current="page"] { color: var(--tk-blue); font-weight: 600; }

.tk-header__cta { flex: none; }

.tk-burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-r-sm);
    border: 1px solid var(--tk-line);
    flex: none;
}
.tk-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--tk-ink-900);
    position: relative;
    transition: background-color .2s;
}
.tk-burger span::before, .tk-burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--tk-ink-900);
    transition: transform .28s var(--tk-ease);
}
.tk-burger span::before { top: -6px; }
.tk-burger span::after  { top: 6px; }

.tk-burger[aria-expanded="true"] span { background: transparent; }
.tk-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.tk-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
    .tk-burger { display: flex; }
    .tk-header__cta { display: none; }
    .tk-nav {
        position: fixed;
        inset: 76px 0 auto;
        background: #fff;
        border-bottom: 1px solid var(--tk-line);
        padding: 12px var(--tk-gutter) 24px;
        box-shadow: var(--tk-shadow);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: .25s var(--tk-ease);
        max-height: calc(100vh - 76px);
        overflow-y: auto;
    }
    .tk-nav.is-open { transform: none; opacity: 1; visibility: visible; }
    .tk-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .tk-nav a { padding: 13px 12px; font-size: 1rem; }
    .tk-nav .tk-nav__cta { display: block; margin-top: 8px; }
    .tk-nav .tk-btn { width: 100%; }
}

/* Sayfa gövdesi başlık altından başlar */
.tk-main { padding-top: 76px; }

/* Tam ekran hero: başlık üstte yüzer, gövde boşluğu yok */
.tk-main--hero { padding-top: 0; }

/* --------------------------------------------------------------------------
   9. Hero — koyu kart + alttan yükselen ışık kemeri
   Referans: Cybersecurity Hero. Yapı ve ışık kurgusu alındı; palet logodan,
   tipografi Poppins/Inter/JetBrains Mono olarak korundu (magenta yok).
   -------------------------------------------------------------------------- */
.tk-hero { position: relative; }

/* Kenardan kenara, açılışta tam ekran — çerçeve yok. */
.tk-hero__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0A1024;
    padding: clamp(64px, 8vh, 120px) clamp(20px, 4vw, 56px) clamp(96px, 13vh, 190px);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* İmza görsel: alttan yükselen ışık kemeri.
   Dev bir dairenin dış kenarı kartın alt kısmında beliriyor. */
.tk-hero__arc {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% -78%,
            rgba(45, 62, 255, .00) 66%,
            rgba(45, 62, 255, .07) 74%,
            rgba(48, 103, 255, .16) 80%,
            rgba(48, 103, 255, .30) 85%,
            rgba(86, 181, 255, .46) 89%,
            rgba(86, 181, 255, .64) 93%,
            rgba(125, 170, 241, .80) 96%,
            rgba(214, 234, 255, .93) 98.5%,
            #ffffff 100%),
        radial-gradient(760px 420px at 50% 30%, rgba(48, 103, 255, .14), transparent 62%);
}

/* Izgara yalnızca kemerin içinde görünür */
.tk-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% -78%, transparent 58%, #000 76%, transparent 93%);
            mask-image: radial-gradient(circle at 50% -78%, transparent 58%, #000 76%, transparent 93%);
}

.tk-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tk-hero h1 {
    color: #fff;
    margin-bottom: 22px;
    max-width: 24ch;
}
.tk-hero__muted { color: rgba(255, 255, 255, .55); }
.tk-hero .tk-lead {
    max-width: 58ch;
    color: rgba(255, 255, 255, .68);
}

/* Dönen kelime */
.tk-rotate {
    color: var(--tk-blue);
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /* En uzun kelimeye ("üretimde") yer ayır: kelime değişince
       satır sayısı ve sayfa yüksekliği oynamaz. */
    min-width: 7.2ch;
}

@media (max-width: 560px) {
    .tk-rotate { min-width: 0; }
}
.tk-rotate::after {
    content: '';
    display: inline-block;
    width: .5ch;
    height: .78em;
    margin-left: .1em;
    vertical-align: -.06em;
    background: var(--tk-sky);
    border-radius: var(--tk-r-3xs);
    animation: tkBlink 1s steps(1) infinite;
}
@keyframes tkBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.tk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
}

/* Koyu kart üzerinde birincil buton beyaz, ikincil cam */
.tk-hero .tk-btn--primary {
    background: #fff;
    color: var(--tk-blue-900);
    box-shadow: 0 10px 30px rgba(3, 8, 24, .35);
}
.tk-hero .tk-btn--primary:hover { background: var(--tk-sky); color: var(--tk-blue-900); }

.tk-btn--glass {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.tk-btn--glass:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(86, 181, 255, .5);
    color: #fff;
}

/* İstatistikler */
.tk-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: 36px;
    border-top: 1px solid var(--tk-line);
    max-width: 620px;
}
.tk-stat__num {
    font-family: var(--tk-font-display);
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--tk-ink-900);
}
.tk-stat__num .tk-plus { color: var(--tk-sky); }
.tk-stat__label {
    margin-top: 8px;
    font-family: var(--tk-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tk-gray-600);
    line-height: 1.5;
}

/* Hero görseli — karo haritası */
.tk-hero__visual { position: relative; }

@media (min-width: 1024px) {
    .tk-hero__grid {
        display: grid;
        grid-template-columns: 1.08fr .92fr;
        gap: 56px;
        align-items: center;
    }
}
@media (max-width: 1023px) {
    .tk-hero__visual { margin-top: 48px; }
    .tk-stats { max-width: none; }
}
@media (max-width: 520px) {
    .tk-stats { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   10. Logo şeridi (ticker)
   -------------------------------------------------------------------------- */
.tk-marquee {
    position: relative;
    overflow: hidden;
    padding-block: 30px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.tk-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 72px;
    /* Az sayıda logo var: yavaş aksın ki döngü hemen başa sarmış gibi görünmesin. */
    animation: tkMarquee 96s linear infinite;
}
.tk-marquee:hover .tk-marquee__track { animation-play-state: paused; }
@keyframes tkMarquee { to { transform: translateX(-50%); } }

.tk-marquee img {
    height: 46px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    opacity: .85;
    /* Beyaz zeminli dosyaların zemini şeffaflaştırıldı (assets/clients/_orijinal
       altında yedeği var); multiply kalan halkaları da yutuyor. */
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.08) brightness(.72);
    transition: opacity .3s var(--tk-ease), filter .3s var(--tk-ease);
}
.tk-marquee img:hover { opacity: 1; filter: none; mix-blend-mode: normal; }

.tk-marquee__label {
    text-align: center;
    font-family: var(--tk-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tk-gray-400);
    margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   11. Süreç
   -------------------------------------------------------------------------- */
.tk-steps { counter-reset: step; display: grid; gap: 20px; }
@media (min-width: 900px) { .tk-steps { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.tk-step { position: relative; padding: 28px 24px 28px 0; }

@media (min-width: 900px) {
    .tk-step { padding: 34px 26px 0 0; border-top: 2px solid var(--tk-line); }
    .tk-step::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(to right, var(--tk-blue), var(--tk-sky));
        transition: width 1s var(--tk-ease);
    }
    .tk-step.is-in::before { width: 100%; }
}

.tk-step__num {
    font-family: var(--tk-font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tk-blue);
    margin-bottom: 12px;
    display: block;
}
.tk-step h3 { font-size: 1.15rem; margin-bottom: 10px; }
.tk-step p { color: var(--tk-gray-600); font-size: .93rem; }

/* --------------------------------------------------------------------------
   12. Ürün blokları
   -------------------------------------------------------------------------- */
.tk-product {
    display: grid;
    gap: 36px;
    align-items: center;
    padding-block: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--tk-line);
}
.tk-product:first-of-type { border-top: 0; }

@media (min-width: 900px) {
    .tk-product { grid-template-columns: .9fr 1.1fr; gap: 56px; }
    .tk-product--flip .tk-product__media { order: -1; }
}

.tk-product__media {
    border-radius: var(--tk-r-3xl);
    overflow: hidden;
    border: 1px solid var(--tk-line);
    box-shadow: var(--tk-shadow);
    background: var(--tk-bg);
}
.tk-product__media img { width: 100%; }

.tk-product__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tk-product__head h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.tk-feature-list { display: grid; gap: 12px; margin: 22px 0; }
.tk-feature-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .95rem;
    color: var(--tk-gray-600);
}
.tk-feature-list svg { flex: none; margin-top: 5px; color: var(--tk-blue); width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   13. Referanslar
   -------------------------------------------------------------------------- */
.tk-quotes {
    display: grid;
    gap: 20px;
}
@media (min-width: 900px) { .tk-quotes { grid-template-columns: repeat(2, 1fr); } }

.tk-quote {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(30px, 3.4vw, 44px);
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-3xl);
    box-shadow: var(--tk-shadow-sm);
    transition: transform .3s var(--tk-ease), box-shadow .3s var(--tk-ease),
                border-color .3s var(--tk-ease);
}
/* Üstte ince marka çizgisi */
.tk-quote::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--tk-blue), var(--tk-sky) 55%, transparent);
    opacity: .85;
}
.tk-quote:hover {
    transform: translateY(-3px);
    box-shadow: var(--tk-shadow);
    border-color: rgba(45, 62, 255, .26);
}

/* Büyük tırnak — dekoratif, metnin arkasında */
.tk-quote__mark {
    position: absolute;
    top: -18px;
    right: 18px;
    z-index: -1;
    font-family: var(--tk-font-display);
    font-size: 9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tk-blue);
    opacity: .07;
    pointer-events: none;
}

.tk-quote blockquote {
    margin: 0 0 28px;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.7;
    color: var(--tk-ink);
    text-wrap: pretty;
}

.tk-quote figcaption {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid var(--tk-line);
}
/* Logolar kendi renginde: bazı dosyalar koyu zeminli, filtre uygulanınca
   siyah kutuya dönüşüyordu. Yuvarlatma bu kutuları rozet gibi gösteriyor. */
.tk-quote figcaption img {
    height: 32px;
    width: auto;
    max-width: 108px;
    object-fit: contain;
    border-radius: var(--tk-r-xs);
}
.tk-quote cite {
    font-style: normal;
    font-weight: 600;
    color: var(--tk-ink-900);
    font-size: .95rem;
    display: block;
}
.tk-quote small { color: var(--tk-gray-600); font-size: .84rem; }

/* --------------------------------------------------------------------------
   14. Formlar
   -------------------------------------------------------------------------- */
.tk-form { display: grid; gap: 18px; }
.tk-form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .tk-form__row--2 { grid-template-columns: 1fr 1fr; } }

.tk-field label {
    display: block;
    margin-bottom: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--tk-ink-900);
    letter-spacing: -.005em;
}
.tk-field label .req { color: var(--tk-blue); }

.tk-field input, .tk-field textarea, .tk-field select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r);
    background: var(--tk-surface);
    font-size: .95rem;
    color: var(--tk-ink-900);
    transition: border-color .2s var(--tk-ease), box-shadow .2s var(--tk-ease);
}
.tk-field textarea { min-height: 130px; resize: vertical; }

.tk-field input::placeholder, .tk-field textarea::placeholder { color: var(--tk-gray-400); }

.tk-field input:focus, .tk-field textarea:focus, .tk-field select:focus {
    outline: none;
    border-color: var(--tk-blue);
    box-shadow: 0 0 0 4px rgba(45, 62, 255, .13);
}

.tk-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6D72' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.tk-field .hint { margin-top: 6px; font-size: .78rem; color: var(--tk-gray-600); }

.tk-field input[aria-invalid="true"], .tk-field textarea[aria-invalid="true"] {
    border-color: var(--tk-danger);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .12);
}
.tk-field .err { display: none; margin-top: 6px; font-size: .78rem; color: var(--tk-danger); font-weight: 500; }
.tk-field .err.is-shown { display: block; }

.tk-form__note { font-size: .8rem; color: var(--tk-gray-600); }
.tk-form__note a { color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; }

.tk-form-status {
    display: none;
    padding: 13px 16px;
    border-radius: var(--tk-r-sm);
    font-size: .9rem;
    font-weight: 500;
}
.tk-form-status.is-ok   { display: block; background: rgba(18, 161, 80, .1); color: var(--tk-success); }
.tk-form-status.is-err  { display: block; background: rgba(229, 72, 77, .1); color: var(--tk-danger); }

/* Bal küpü — spam tuzağı. Gözden gizli; ekran okuyucudan `aria-hidden`,
   klavyeden `tabindex="-1"` ile ayrıca gizleniyor (bkz. js/turkol.js form bloğu).
   `display:none` yerine kırpma kullanılıyor: botlar gizli alanı da doldursun.
   Negatif konumlandırma yok — 390px'te yatay taşma yaratmaz. */
.tk-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   16. Footer — temel ölçüler
   Görsel düzen (iki kart) bölüm 30'da; burada yalnızca ortak ölçü/tipografi.
   -------------------------------------------------------------------------- */
.tk-footer {
    padding-block: clamp(56px, 7vw, 80px) 14px;
    font-size: .92rem;
    overflow: clip;
}
.tk-footer a { transition: color .2s var(--tk-ease); }

/* --------------------------------------------------------------------------
   17. Sayfa başlığı (alt sayfalar)
   -------------------------------------------------------------------------- */
.tk-pagehead {
    position: relative;
    overflow: hidden;
    padding-block: clamp(52px, 6.5vw, 88px);
    background:
        radial-gradient(880px 460px at 88% -12%, rgba(86, 181, 255, .16), transparent 62%),
        var(--tk-bg);
    border-bottom: 1px solid var(--tk-line);
}
.tk-pagehead__inner { position: relative; z-index: 1; }
.tk-pagehead h1 { max-width: 20ch; margin-bottom: 20px; }
/* Sayfa başlığındaki mavi tonlu zemin (radial rgba(86,181,255,.16)) gri-600'ü
   4.17:1'e düşürüyordu; --tk-ink ile aynı zeminde 7.8:1. Koyu varyant 1935.
   satırdaki kuralla beyaza dönüyor, bu kural onu ezmiyor. */
.tk-pagehead .tk-lead { max-width: 62ch; color: var(--tk-ink); }

.tk-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-family: var(--tk-font-mono);
    font-size: .72rem;
    color: var(--tk-gray-600);
}
.tk-crumbs a:hover { color: var(--tk-blue); }
/* Ayraç "/" dekoratif (aria-hidden) ama yine de ekranda okunuyordu:
   .45 opaklık açık zeminde 1.84:1, koyu zeminde 2.21:1 veriyordu. */
.tk-crumbs span[aria-hidden] { opacity: 1; }
.tk-crumbs [aria-current] { color: var(--tk-ink-900); }

/* --------------------------------------------------------------------------
   18. İçerik (hukuki / detay metin)
   -------------------------------------------------------------------------- */
.tk-prose { max-width: 74ch; }
.tk-prose > * + * { margin-top: 20px; }
.tk-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 52px; }
.tk-prose h3 { font-size: 1.2rem; margin-top: 34px; }
.tk-prose p, .tk-prose li { color: var(--tk-ink); line-height: 1.75; }
.tk-prose ul { list-style: none; display: grid; gap: 11px; }
.tk-prose ul li { position: relative; padding-left: 24px; }
.tk-prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: var(--tk-r-3xs);
    background: var(--tk-sky);
}
.tk-prose a { color: var(--tk-blue); text-decoration: underline; text-underline-offset: 2px; }
.tk-prose strong { color: var(--tk-ink-900); font-weight: 600; }

/* --------------------------------------------------------------------------
   19. Reveal animasyonu
   -------------------------------------------------------------------------- */
/* Reveal yalnızca JS etkinken gizler — JS yoksa/başarısızsa içerik görünür kalır. */
.js .tk-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--tk-ease), transform .6s var(--tk-ease);
}
.js .tk-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Yardımcılar
   -------------------------------------------------------------------------- */
.tk-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.tk-skip {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--tk-blue);
    color: #fff;
    border-radius: 0 0 var(--tk-r-sm) var(--tk-r-sm);
    font-weight: 600;
    font-size: .9rem;
    transition: top .2s var(--tk-ease);
}
.tk-skip:focus { top: 0; }

.tk-stack   { display: grid; gap: 24px; }
.tk-center  { text-align: center; }
.tk-mt-lg   { margin-top: 44px; }

/* --------------------------------------------------------------------------
   21. Hareket azaltma
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .tk-reveal { opacity: 1; transform: none; }
    .tk-marquee__track { animation: none; }
    .tk-step::before { width: 100%; }
    .tk-rotate::after { animation: none; }
}

/* --------------------------------------------------------------------------
   22. Yazdırma
   -------------------------------------------------------------------------- */
@media print {
    .tk-header, .tk-footer, .tk-tiles, .tk-marquee { display: none !important; }
    .tk-main { padding-top: 0; }
    body { color: #000; }
}

/* --------------------------------------------------------------------------
   23. Etkileşimli harita — hero
   Kendi vektör verimizden canvas'a çizilir; harici kütüphane yok.
   -------------------------------------------------------------------------- */
.tk-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: var(--tk-r-3xl);
    overflow: hidden;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    /* kabartma: içeri gömülü yüzey hissi */
    box-shadow:
        inset 0 2px 5px rgba(10, 22, 51, .07),
        inset 0 -1px 0 rgba(255, 255, 255, .9),
        0 1px 2px rgba(10, 22, 51, .04);
    opacity: 0;
    transition: opacity .5s var(--tk-ease);
    touch-action: pan-y;
}
.tk-map.is-ready  { opacity: 1; }
.tk-map.is-failed { display: none; }

.tk-map canvas { display: block; width: 100%; height: 100%; }

/* katman anahtarı */
.tk-map__panel {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-radius: var(--tk-r-md);
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid var(--tk-line);
    box-shadow: var(--tk-shadow-sm);
    max-width: calc(100% - 24px);
}

.tk-map__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--tk-r-sm);
    font-family: var(--tk-font-mono);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tk-gray-600);
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all .2s var(--tk-ease);
}
.tk-map__btn::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: var(--tk-r-3xs);
    background: currentColor;
    opacity: .3;
    flex: none;
    transition: opacity .2s var(--tk-ease);
}
.tk-map__btn[aria-pressed="true"] {
    color: var(--tk-blue);
    background: rgba(45, 62, 255, .07);
    border-color: rgba(45, 62, 255, .18);
}
.tk-map__btn[aria-pressed="true"]::before { opacity: 1; }
.tk-map__btn:hover { color: var(--tk-blue); }

/* ipucu */
.tk-map__tip {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -100%);
    pointer-events: none;
    padding: 8px 11px;
    border-radius: var(--tk-r-sm);
    background: var(--tk-blue-900);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(10, 22, 51, .22);
}
.tk-map__tip strong { display: block; font-weight: 600; font-size: .84rem; }
.tk-map__tip span   { color: rgba(255, 255, 255, .68); font-size: .72rem; }
.tk-map__tip[hidden] { display: none; }

/* kullanım ipucu */
.tk-map__hint {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--tk-r-pill);
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid var(--tk-line);
    font-family: var(--tk-font-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-gray-600);
}

/* harita altı açıklama */
.tk-map-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 16px;
    font-family: var(--tk-font-mono);
    font-size: .66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tk-gray-400);
}
.tk-map-note b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--tk-gray-600);
}
.tk-map-note b::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tk-blue);
}
.tk-map-note b.merkez::before { background: var(--tk-sky); }

@media (max-width: 767px) {
    .tk-map { aspect-ratio: 4 / 3.4; }
    .tk-map__hint { display: none; }
    .tk-map__btn { font-size: .6rem; padding: 5px 8px; }
}

/* --------------------------------------------------------------------------
   24. Kabartma dokusu — ölçülü kullanım
   Yalnızca dekoratif; gerçek metin her zaman tam kontrastlı kalır.
   -------------------------------------------------------------------------- */
.tk-deboss {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-family: var(--tk-font-display);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--tk-bg);
    text-shadow:
         0 1px 0 rgba(255, 255, 255, .95),
         0 -1px 1px rgba(10, 22, 51, .07);
    opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
    .tk-map { transition: none; }
}

/* ==========================================================================
   25. Koyu vurgu bölümleri
   Referans: Sentinel AI (karo duvar), Cybersecurity Hero (ışık kemeri),
   Liquid Glass CTA (cam yüzey), Email Landing (parlayan başlık).
   Tekniği aldık; palet Türkol logosundan.
   ========================================================================== */
.tk-slab {
    position: relative;
    overflow: hidden;
    background: var(--tk-blue-900);
    color: rgba(255, 255, 255, .74);
    padding-block: var(--tk-section);
    isolation: isolate;
}
.tk-slab h1, .tk-slab h2, .tk-slab h3, .tk-slab h4 { color: #fff; }
.tk-slab .tk-lead { color: rgba(255, 255, 255, .7); }
.tk-slab .tk-eyebrow { color: var(--tk-sky); }
.tk-slab .tk-eyebrow::before { background: var(--tk-sky); }

/* Karo duvar — logonun karo sistemi, koyu yüzeyde */
.tk-slab__wall {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(125, 170, 241, .09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(125, 170, 241, .09) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 20%, transparent 95%);
            mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 20%, transparent 95%);
}

/* Alttan yükselen ışık kemeri */
.tk-slab__arc {
    position: absolute;
    left: 50%;
    bottom: -58%;
    width: min(1500px, 155%);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(closest-side,
            rgba(86, 181, 255, .40),
            rgba(48, 103, 255, .22) 46%,
            rgba(45, 62, 255, .07) 68%,
            transparent 78%);
    filter: blur(6px);
    pointer-events: none;
}

/* Koyu bölüm altı ince not */
.tk-slab__note {
    margin-top: 22px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .6);
}
.tk-slab__note a {
    color: var(--tk-sky);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tk-slab__note a:hover { color: #fff; }

/* Cam yüzey — backdrop-filter ile */
.tk-glass {
    position: relative;
    border-radius: var(--tk-r);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 18px 44px rgba(3, 8, 24, .34);
    transition: transform .3s var(--tk-ease), border-color .3s var(--tk-ease),
                background-color .3s var(--tk-ease);
}
.tk-glass:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(86, 181, 255, .34);
}

/* Parlayan başlık — ışık süpürmesi */
.tk-shine {
    background: linear-gradient(100deg,
        #fff 0%, #fff 36%,
        var(--tk-sky) 50%,
        #fff 64%, #fff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tkShine 7s var(--tk-ease) infinite;
}
@keyframes tkShine {
    0%, 62%  { background-position: 130% 0; }
    100%     { background-position: -30% 0; }
}

/* --------------------------------------------------------------------------
   26. Ajan akış hattı — AI bölümü
   Referans: Cybersecurity Hero'daki ikon boru hattı.
   -------------------------------------------------------------------------- */
.tk-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-block: 44px;
}

.tk-flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    flex: none;
    width: 116px;
}

.tk-flow__dot {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: var(--tk-r-lg);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13);
    color: var(--tk-sky);
    position: relative;
}
.tk-flow__dot svg { width: 25px; height: 25px; }

.tk-flow__node--active .tk-flow__dot {
    background: linear-gradient(150deg, var(--tk-blue-500), var(--tk-blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(45, 62, 255, .16), 0 10px 26px rgba(45, 62, 255, .4);
}

.tk-flow__label {
    font-family: var(--tk-font-mono);
    font-size: .62rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    line-height: 1.5;
}

/* Düğümler arası akan bağlantı */
.tk-flow__link {
    position: relative;
    height: 1px;
    flex: 1 1 26px;
    min-width: 26px;
    max-width: 78px;
    margin-top: -30px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.tk-flow__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--tk-sky), transparent);
    transform: translateX(-100%);
    animation: tkFlow 2.6s linear infinite;
}
.tk-flow__link:nth-of-type(2)::after { animation-delay: .5s; }
.tk-flow__link:nth-of-type(3)::after { animation-delay: 1s; }
.tk-flow__link:nth-of-type(4)::after { animation-delay: 1.5s; }

@keyframes tkFlow {
    to { transform: translateX(100%); }
}

/* Hero varyantı — kartın merkezinde, daha büyük ve ışıklı */
.tk-flow--hero {
    margin-block: 0 clamp(34px, 4vw, 52px);
    max-width: 720px;
}
.tk-flow--hero .tk-flow__dot {
    width: 54px;
    height: 54px;
    border-radius: var(--tk-r-lg);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.tk-flow--hero .tk-flow__node { width: 104px; }
.tk-flow--hero .tk-flow__dot svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Animasyonlu ikonlar — her düğüm kendi işini canlandırır.
   Flaticon'un animasyonlu ikonları lisanslı ve indirilmeye açık olmadığı için
   aynı etki kendi çizgi ikonlarımız üzerinde CSS ile kuruldu: ek dosya yok,
   ölçeklenebilir, çizgi kalınlığımızla birebir uyumlu.
   -------------------------------------------------------------------------- */
.tk-flow__dot svg *,
.tk-cap__icon svg * { transform-box: fill-box; transform-origin: center; }

/* 1 · Kurum verisi — yeni katman yazılıyor */
.tk-ikon__katman {
    animation: tkIkonKatman 3.2s var(--tk-ease) infinite;
}
@keyframes tkIkonKatman {
    0%, 100% { opacity: .45; transform: translateY(0); }
    45%      { opacity: 1;   transform: translateY(-1.6px); }
}

/* 2 · Model + RAG — anten sinyali, gözler kırpıyor */
.tk-ikon__anten { animation: tkIkonAnten 2.2s var(--tk-ease) infinite; }
@keyframes tkIkonAnten {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}
.tk-ikon__goz { animation: tkIkonGoz 4.4s steps(1, end) infinite; }
@keyframes tkIkonGoz {
    0%, 92%, 100% { transform: scaleY(1); }
    94%, 97%      { transform: scaleY(.12); }
}

/* 3 · Araç çağrısı — anahtar sıkıyor */
.tk-ikon__anahtar { animation: tkIkonAnahtar 3.6s var(--tk-ease) infinite; }
@keyframes tkIkonAnahtar {
    0%, 60%, 100% { transform: rotate(0deg); }
    72%           { transform: rotate(-14deg); }
    84%           { transform: rotate(6deg); }
}

/* 4 · Yetki sınırı — onay işareti kendini çiziyor */
.tk-ikon__tik {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation: tkIkonTik 3.4s var(--tk-ease) infinite;
}
@keyframes tkIkonTik {
    0%       { stroke-dashoffset: 10; }
    22%, 78% { stroke-dashoffset: 0; }
    92%, 100%{ stroke-dashoffset: 10; }
}

/* 5 · Gözlemlenebilirlik — göz bebeği tarıyor */
.tk-ikon__bebek { animation: tkIkonBebek 5s var(--tk-ease) infinite; }
@keyframes tkIkonBebek {
    0%, 100% { transform: translateX(0); }
    28%      { transform: translateX(-2.6px); }
    62%      { transform: translateX(2.6px); }
}

/* 6 · Sızma testi — kalkan hep tam çizili, denetim nabzıyla parlıyor.
   (Çizgiyi silen dasharray denendi ama ikon anlık olarak yarım görünüyordu.) */
.tk-ikon__kalkan { animation: tkIkonKalkan 4.6s var(--tk-ease) infinite; }
@keyframes tkIkonKalkan {
    0%, 100% { opacity: .62; }
    40%      { opacity: 1; }
}

/* 7 · Sıfır güven — kilit dili oturuyor */
.tk-ikon__kanca { animation: tkIkonKanca 3.8s var(--tk-ease) infinite; }
@keyframes tkIkonKanca {
    0%, 55%, 100% { transform: translateY(0); }
    25%           { transform: translateY(-1.8px); }
}
.tk-ikon__kilit-nokta { animation: tkIkonKilitNokta 3.8s var(--tk-ease) infinite; }
@keyframes tkIkonKilitNokta {
    0%, 45%, 100% { opacity: .5; }
    60%           { opacity: 1; }
}

/* 8 · 7/24 izleme — sabit çizginin üstünde akan nabız */
.tk-ikon__nabiz-taban { opacity: .34; }
.tk-ikon__nabiz {
    stroke-dasharray: 11 35;
    animation: tkIkonNabiz 2.4s linear infinite;
}
@keyframes tkIkonNabiz {
    from { stroke-dashoffset: 46; }
    to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-ikon__katman, .tk-ikon__anten, .tk-ikon__goz, .tk-ikon__anahtar,
    .tk-ikon__bebek, .tk-ikon__kanca, .tk-ikon__kilit-nokta { animation: none; }
    .tk-ikon__tik { animation: none; stroke-dashoffset: 0; }
    .tk-ikon__kalkan { animation: none; opacity: 1; }
    .tk-ikon__nabiz { animation: none; stroke-dasharray: none; }
    .tk-ikon__nabiz-taban { display: none; }
}

/* Etkin düğüm nefes alır */
.tk-flow--hero .tk-flow__node--active .tk-flow__dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: var(--tk-r-xl);
    border: 1px solid rgba(86, 181, 255, .45);
    animation: tkNodePulse 2.8s var(--tk-ease) infinite;
}
@keyframes tkNodePulse {
    0%, 100% { opacity: .9; transform: scale(1); }
    50%      { opacity: .25; transform: scale(1.09); }
}

@media (max-width: 700px) {
    .tk-flow { gap: 18px 0; }
    .tk-flow__node { width: 50%; }
    .tk-flow__link { display: none; }
    .tk-flow--hero .tk-flow__node { width: 33.33%; }
    .tk-flow--hero .tk-flow__dot { width: 46px; height: 46px; }
}

/* --------------------------------------------------------------------------
   27. Yetenek listesi — koyu bölümde
   -------------------------------------------------------------------------- */
.tk-caps { display: grid; gap: 18px; }
@media (min-width: 760px) { .tk-caps { grid-template-columns: repeat(2, 1fr); } }

.tk-cap {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 22px 24px;
}
.tk-cap__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tk-r-md);
    background: rgba(86, 181, 255, .13);
    color: var(--tk-sky);
    flex: none;
}
.tk-cap__icon svg { width: 19px; height: 19px; }
.tk-cap h3 { font-size: 1.02rem; margin-bottom: 6px; }
.tk-cap p { font-size: .89rem; color: rgba(255, 255, 255, .62); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
    .tk-shine { animation: none; -webkit-text-fill-color: #fff; }
    .tk-flow__link::after { animation: none; opacity: .5; transform: none; }
    .tk-flow--hero .tk-flow__node--active .tk-flow__dot::after { animation: none; }
}

/* ==========================================================================
   28. Yatay çözüm vitrini — dikey scroll ile sürülür
   Bölüm ekrana sabitlenir (sticky), sayfa aşağı kaydıkça kartlar sola akar.
   Zamana değil, scroll ilerlemesine bağlıdır; yukarı kaydırınca geri sarar.
   GSAP yok: sticky + tek scroll dinleyicisi.
   ========================================================================== */
.tk-rail { position: relative; background: var(--tk-bg); }

/* Sürüş mesafesi JS ile ayarlanır (kart genişliğine göre) */
.tk-rail__track { position: relative; }

.tk-rail__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.tk-rail__head {
    flex: none;
    padding-block: clamp(28px, 5vh, 56px) clamp(20px, 3.5vh, 36px);
}
.tk-rail__head .tk-section-head { margin-bottom: 0; }

.tk-rail__viewport { overflow: hidden; }

.tk-rail__row {
    display: flex;
    gap: 24px;
    padding-inline: max(var(--tk-gutter), calc((100vw - var(--tk-container)) / 2 + var(--tk-gutter)));
    will-change: transform;
}

/* Editoryal, büyük kart */
.tk-rail__card {
    flex: none;
    width: min(440px, 78vw);
    display: flex;
    flex-direction: column;
    padding: 34px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-3xl);
    box-shadow: var(--tk-shadow-sm);
    transition: border-color .3s var(--tk-ease), box-shadow .3s var(--tk-ease),
                transform .3s var(--tk-ease);
    min-height: min(430px, 58vh);
    position: relative;
    overflow: hidden;
}
.tk-rail__card:hover {
    border-color: rgba(45, 62, 255, .3);
    box-shadow: var(--tk-shadow);
    transform: translateY(-3px);
}

.tk-rail__card .tk-card-icon { width: 52px; height: 52px; margin-bottom: 24px; }
.tk-rail__card .tk-card-icon svg { width: 25px; height: 25px; }

.tk-rail__num {
    position: absolute;
    top: 28px;
    right: 32px;
    font-family: var(--tk-font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tk-gray-400);
}

.tk-rail__card h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); margin-bottom: 14px; }
.tk-rail__card p  { color: var(--tk-gray-600); font-size: .97rem; line-height: 1.65; }

/* Teknoloji etiketleri kartın boş alt boşluğunu doldurur */
.tk-rail__tags { margin-top: auto; padding-top: 26px; }
.tk-rail__card .tk-link {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--tk-line);
}
.tk-rail__card--end .tk-link { border-top-color: rgba(255, 255, 255, .16); }

/* Son kart — koyu kapanış */
.tk-rail__card--end {
    background: linear-gradient(150deg, var(--tk-blue-900), var(--tk-blue-800));
    border-color: transparent;
    justify-content: center;
}
.tk-rail__card--end h3 { color: #fff; }
.tk-rail__card--end p  { color: rgba(255, 255, 255, .72); }
.tk-rail__card--end .tk-link { color: var(--tk-sky); }


/* Mobil / hareket azaltma / JS yok:
   sabitleme kapanır, kartlar dikey listeye döner. */
@media (max-width: 900px) {
    .tk-rail__stage { position: static; height: auto; overflow: visible; }
    .tk-rail__track { height: auto !important; }
    .tk-rail__viewport { overflow: visible; }
    .tk-rail__row {
        transform: none !important;
        flex-direction: column;
        padding-inline: var(--tk-gutter);
        max-width: var(--tk-container);
        margin-inline: auto;
    }
    .tk-rail__card { width: 100%; min-height: 0; }
    .tk-rail__head { padding-block: 0 32px; }
    .tk-rail { padding-block: var(--tk-section); }
}

@media (prefers-reduced-motion: reduce) {
    .tk-rail__stage { position: static; height: auto; overflow: visible; }
    .tk-rail__track { height: auto !important; }
    .tk-rail__viewport { overflow-x: auto; }
    .tk-rail__row { transform: none !important; }
}

/* overflow:clip desteklenmiyorsa sticky güvenilmez — dikey listeye dön. */
@supports not (overflow-x: clip) {
    .tk-rail__stage { position: static; height: auto; overflow: visible; }
    .tk-rail__track { height: auto !important; }
    .tk-rail__viewport { overflow-x: auto; }
    .tk-rail__row { transform: none !important; }
}

html:not(.js) .tk-rail__stage { position: static; height: auto; overflow: visible; }
html:not(.js) .tk-rail__viewport { overflow-x: auto; }

/* ==========================================================================
   29. Hero yükseltmesi
   Yüzen hap navbar (Interactive Discovery) + hero derinliği.
   ========================================================================== */
@media (min-width: 1024px) {
    .tk-header {
        background: transparent;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        border-bottom: 0;
        padding-top: 14px;
    }
    .tk-header.is-stuck { box-shadow: none; border-bottom-color: transparent; }

    /* İçerik hap içine alınır */
    .tk-header__inner {
        height: 64px;
        padding-inline: 10px 10px;
        border-radius: var(--tk-r-pill);
        background: rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
                backdrop-filter: saturate(180%) blur(16px);
        border: 1px solid rgba(227, 231, 240, .9);
        box-shadow: 0 1px 2px rgba(10, 22, 51, .04), 0 10px 30px rgba(10, 22, 51, .07);
        transition: box-shadow .3s var(--tk-ease), background-color .3s var(--tk-ease);
    }
    .tk-header.is-stuck .tk-header__inner {
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 2px 6px rgba(10, 22, 51, .06), 0 14px 40px rgba(10, 22, 51, .1);
    }
    .tk-logo { padding-left: 12px; }
    .tk-main { padding-top: 92px; }
    .tk-main--hero { padding-top: 0; }
    html { scroll-padding-top: 104px; }
}

/* Hero başlığı — dönen kelimeye ışık süpürmesi (koyu kart üzerinde) */
.tk-rotate {
    background: linear-gradient(100deg,
        var(--tk-sky) 0%, var(--tk-sky) 34%,
        #fff 50%,
        var(--tk-sky) 66%, var(--tk-sky) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tkShine 7s var(--tk-ease) infinite;
}
.tk-rotate::after { -webkit-text-fill-color: initial; }

@media (prefers-reduced-motion: reduce) {
    /* Kural .tk-rotate tanımından SONRA gelmeli; kaynak sırası kazanır. */
    .tk-rotate { animation: none; -webkit-text-fill-color: var(--tk-sky); }
    .tk-rotate::after { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   29a. İmleci izleyen ışık (Interactive Discovery deseni)
   Yüzey imlece tepki verir; dokunmatikte ve hareket kısıtlıyken kapalı.
   -------------------------------------------------------------------------- */
.tk-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s var(--tk-ease);
    background: radial-gradient(460px 460px at var(--tk-gx, 50%) var(--tk-gy, 40%),
        rgba(86, 181, 255, .22), transparent 68%);
}
.is-imlecte .tk-glow { opacity: 1; }

/* Koyu hero kartında imleç ışığı biraz daha belirgin */
.tk-hero__card .tk-glow {
    z-index: -1;
    background: radial-gradient(520px 520px at var(--tk-gx, 50%) var(--tk-gy, 40%),
        rgba(86, 181, 255, .20), transparent 66%);
}

@media (prefers-reduced-motion: reduce) {
    .tk-glow { display: none; }
}

/* --------------------------------------------------------------------------
   29b. Amiral gemisi sayfa başlığı — yapay zekâ ve siber güvenlik
   Koyu zemin, karo duvarı ve ışık kemeri; ana sayfadaki koyu bölümle aynı dil.
   -------------------------------------------------------------------------- */
.tk-pagehead--dark {
    background: var(--tk-blue-900);
    border-bottom: 0;
    color: rgba(255, 255, 255, .74);
    isolation: isolate;
    padding-block: clamp(64px, 8vw, 108px) clamp(72px, 9vw, 120px);
}
.tk-pagehead--dark h1 { color: #fff; }
.tk-pagehead--dark .tk-lead { color: rgba(255, 255, 255, .72); }
.tk-pagehead--dark .tk-eyebrow { color: var(--tk-sky); }
.tk-pagehead--dark .tk-eyebrow::before { background: var(--tk-sky); }
.tk-pagehead--dark .tk-crumbs { color: rgba(255, 255, 255, .55); }
.tk-pagehead--dark .tk-crumbs a:hover { color: var(--tk-sky); }
.tk-pagehead--dark .tk-crumbs [aria-current] { color: #fff; }

/* Kemer bu bağlamda üstten değil, başlığın altından yükselir */
.tk-pagehead--dark .tk-slab__arc { bottom: -64%; opacity: .9; }

/* --------------------------------------------------------------------------
   30. Footer yükseltmesi — iki kartlı düzen (Kresna deseni)
   -------------------------------------------------------------------------- */
.tk-footer { background: var(--tk-bg); color: var(--tk-gray-600); }

.tk-footer__cards {
    display: grid;
    gap: 16px;
    margin-bottom: 44px;
}
@media (min-width: 900px) { .tk-footer__cards { grid-template-columns: 380px 1fr; } }

/* Sol kart — koyu, çağrı */
.tk-footer__cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--tk-r-3xl);
    padding: 36px;
    background:
        radial-gradient(560px 320px at 82% 8%, rgba(86, 181, 255, .3), transparent 62%),
        linear-gradient(150deg, var(--tk-blue-900), var(--tk-blue-800) 60%, #17278F);
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
/* Video arka plan — Kresna Footer deseni.
   Kaynak klip yerelleştirildi ve 3,1 MB'tan 160 KB'a sıkıştırıldı; yalnızca
   geniş ekranda ve hareket kısıtı yokken JS tarafından yükleniyor. */
.tk-footer__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
}
/* Metin okunurluğu için ölçülü perde — klip koyu ama sol alt köşesi parlıyor */
.tk-footer__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Perde ortada .32'ye kadar inceliyordu; paragraf tam oraya (kartın
       %43–%57 bandına) denk geliyor. Klibin parlak kareleri geldiğinde
       rgba(255,255,255,.74) metin 3.89:1'e düşüyordu. Orta durak .62'ye
       çıkarıldı: aynı parlak karede 6.4:1, teorik bembeyaz karede 4.7:1. */
    background:
        linear-gradient(180deg, rgba(6, 12, 34, .70) 0%, rgba(6, 12, 34, .62) 45%, rgba(6, 12, 34, .82) 100%);
    pointer-events: none;
}

/* Sosyal satır */
.tk-footer__social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
}
.tk-footer__social > span {
    font-family: var(--tk-font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.tk-footer__social > div { display: flex; gap: 8px; }
.tk-footer__social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--tk-r-md);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: background-color .2s var(--tk-ease), transform .18s var(--tk-ease);
}
.tk-footer__social a svg { width: 17px; height: 17px; }
.tk-footer__social a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }

/* Kabartmalı dev kelime markası — Kresna'daki filigran, Türkol dokusuyla */
.tk-footer__mark {
    max-width: var(--tk-container);
    margin: clamp(24px, 3.4vw, 48px) auto -.2em;
    padding-inline: var(--tk-gutter);
    text-align: center;
    font-family: var(--tk-font-display);
    font-weight: 700;
    font-size: clamp(3.6rem, 25.4vw, 21.5rem);
    letter-spacing: -.05em;
    /* Satır kutusu tam (harf mürekkebi kutunun içinde kalır), altındaki boş
       alt-uzantı boşluğu negatif marjla kesiliyor — footer'daki overflow:clip
       yalnızca bu boş alanı kırpar, harfleri değil. */
    line-height: 1;
    color: #EFF2F9;
    text-shadow:
        0 2px 1px rgba(255, 255, 255, 1),
        0 -1px 1px rgba(10, 22, 51, .14),
        0 5px 12px rgba(10, 22, 51, .06);
    user-select: none;
    pointer-events: none;
}

/* Kart içi karo dokusu — logonun ızgara dili, çok düşük opaklıkta */
.tk-footer__cta__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(to right, rgba(125, 170, 241, .16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(125, 170, 241, .16) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 5%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 80% 70% at 85% 5%, #000, transparent 72%);
    pointer-events: none;
}

.tk-footer__cta h2 {
    color: #fff;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    margin-bottom: 12px;
    max-width: 16ch;
}
/* Oynayan video üzerindeki tek metin; .74 opaklık parlak karede AA'nın
   altına düşüyordu. .88 hâlâ ikincil görünüyor ama en kötü karede 4.7:1. */
.tk-footer__cta p { color: rgba(255, 255, 255, .88); font-size: .93rem; max-width: 34ch; }
.tk-footer__cta .tk-btn { margin-top: auto; align-self: flex-start; }
.tk-footer__cta .tk-btn--primary { background: #fff; color: var(--tk-blue-900); box-shadow: none; }
.tk-footer__cta .tk-btn--primary:hover { background: var(--tk-sky); }
.tk-footer__cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }

/* Sağ kart — açık, bağlantılar */
.tk-footer__links {
    border-radius: var(--tk-r-3xl);
    padding: 36px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
}

.tk-footer__grid {
    display: grid;
    gap: 32px;
    padding-bottom: 0;
}
@media (min-width: 640px) { .tk-footer__grid { grid-template-columns: repeat(3, 1fr); } }

/* Yalnızca sağ karttaki sütun başlıkları — koyu CTA kartının başlığını kapsamaz. */
.tk-footer__links h2 {
    color: var(--tk-ink-900);
    font-family: var(--tk-font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.tk-footer li { margin-bottom: 10px; font-size: .92rem; }
.tk-footer a:hover { color: var(--tk-blue); }
.tk-footer address { font-style: normal; line-height: 1.7; font-size: .92rem; }

.tk-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    margin-top: 36px;
    border-top: 1px solid var(--tk-line);
    font-size: .83rem;
    color: var(--tk-gray-400);
}
.tk-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.tk-footer__bottom li { margin: 0; }

.tk-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tk-footer__brand img { height: 26px; width: auto; filter: none; }

/* ==========================================================================
   31. Süreç merdiveni
   Referans: NexaCore Results — aşamalar soldan sağa kademeli yükselir,
   her aşama kendi dikey çizgisi boyunca çıktılarını listeler; altta akan
   çizgi demeti ilerlemeyi taşır. Palet ve içerik Türkol'un.
   ========================================================================== */
.tk-stair {
    position: relative;
    margin-top: 56px;
    /* dalga demetine yer aç: çizgiler metnin altından geçsin */
    padding-bottom: 104px;
}

.tk-stair__row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 28px;
}

/* Kademe: sıra numarası arttıkça içerik yukarı taşınır */
.tk-stair__step { padding-bottom: calc(var(--i, 0) * 34px); }

.tk-stair__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tk-font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tk-blue-700);
    margin-bottom: 12px;
}
.tk-stair__tag::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--tk-blue);
    background: var(--tk-surface);
    flex: none;
}

.tk-stair__step h3 {
    font-size: 1.06rem;
    line-height: 1.35;
    margin-bottom: 16px;
    max-width: 15ch;
}

/* Çıktı listesi — solunda degradeli dikey çizgi */
.tk-stair__items {
    position: relative;
    display: grid;
    gap: 9px;
    padding-left: 18px;
}
.tk-stair__items::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(180deg, var(--tk-blue) 0%, var(--tk-sky) 55%, transparent 100%);
}
.tk-stair__items li {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--tk-gray-600);
}

/* Altta akan çizgi demeti */
.tk-stair__wave {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: 0;
    width: 112%;
    height: 138px;
    z-index: 0;
    pointer-events: none;
    opacity: .85;
    animation: tkWaveDrift 18s ease-in-out infinite alternate;
}
@keyframes tkWaveDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-28px, 6px, 0); }
}

@media (max-width: 900px) {
    .tk-stair { margin-top: 40px; padding-bottom: 0; }
    .tk-stair__row { grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
    .tk-stair__step { padding-bottom: 0; }
    .tk-stair__step h3 { max-width: none; }
    .tk-stair__wave { display: none; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .tk-stair__row { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
    .tk-stair__step { padding-bottom: calc(var(--i, 0) * 14px); }
}

@media (prefers-reduced-motion: reduce) {
    .tk-stair__wave { animation: none; }
}


/* --------------------------------------------------------------------------
   32. Dil değiştirici — TR/EN
   -------------------------------------------------------------------------- */
.tk-dil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--tk-r-pill);
    border: 1px solid var(--tk-line);
    background: var(--tk-surface);
    font-family: var(--tk-font-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--tk-gray-600);
    transition: border-color .2s var(--tk-ease), color .2s var(--tk-ease),
                background-color .2s var(--tk-ease);
}
.tk-dil b { color: var(--tk-ink-900); font-weight: 700; }
/* Pasif dil kodu .55 opaklıkta beyaz zeminde 2.20:1 kalıyordu. Opaklık yerine
   hiyerarşiyi renk taşıyor: b = ink-900 (14.9:1), span = gri-600 (5.18:1). */
.tk-dil span { opacity: 1; color: var(--tk-gray-600); }
.tk-dil:hover { border-color: rgba(45, 62, 255, .35); color: var(--tk-blue); }
.tk-dil:hover span { color: var(--tk-blue); }

@media (max-width: 1023px) {
    .tk-dil { padding: 6px 10px; font-size: .66rem; }
}

/* ==========================================================================
   33. İletişim sayfası
   Form kart içine alındı; yan sütun koyu iletişim kartı + üç adımlık şerit.
   ========================================================================== */
.tk-iletisim {
    display: grid;
    gap: 24px;
    align-items: start;
}
@media (min-width: 960px) {
    .tk-iletisim { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 28px; }
}

.tk-form-card {
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-3xl);
    box-shadow: var(--tk-shadow-sm);
    padding: clamp(26px, 3.4vw, 44px);
}

.tk-iletisim__yan { display: grid; gap: 20px; }

.tk-iletisim__kart {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--tk-r-3xl);
    padding: clamp(26px, 3vw, 36px);
    background:
        radial-gradient(520px 300px at 85% 6%, rgba(86, 181, 255, .28), transparent 62%),
        linear-gradient(150deg, var(--tk-blue-900), var(--tk-blue-800) 62%, #17278F);
    color: #fff;
}
.tk-iletisim__ic { position: relative; z-index: 2; }
.tk-iletisim__kart h3 {
    color: #fff;
    font-size: 1.22rem;
    margin-bottom: 22px;
    max-width: 18ch;
}

.tk-iletisim__satir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    margin-bottom: 10px;
    border-radius: var(--tk-r-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: background-color .22s var(--tk-ease), border-color .22s var(--tk-ease),
                transform .22s var(--tk-ease);
}
.tk-iletisim__satir:hover {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(86, 181, 255, .45);
    transform: translateY(-2px);
}
.tk-iletisim__ikon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--tk-r-md);
    background: rgba(86, 181, 255, .16);
    color: var(--tk-sky);
}
.tk-iletisim__ikon svg { width: 19px; height: 19px; }
.tk-iletisim__satir b {
    display: block;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}
.tk-iletisim__satir small {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
}
.tk-iletisim__not {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .86rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .64);
}

/* Üç adımlık şerit */
.tk-adimlar {
    display: grid;
    gap: 10px;
    padding: 20px 22px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-r-2xl);
}
.tk-adimlar li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .92rem;
    color: var(--tk-gray-600);
}
.tk-adimlar b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--tk-r-xs);
    background: rgba(45, 62, 255, .09);
    color: var(--tk-blue-700);
    font-family: var(--tk-font-mono);
    font-size: .72rem;
    font-weight: 700;
}

/* ==========================================================================
   40. Odak halkası — çift tonlu (WCAG 2.1 / 1.4.11 Non-text Contrast)
   Tek renk gökyüzü mavisi (#56B5FF) beyaz ve #F6F8FD zeminde yalnızca
   2.22:1 veriyordu; odak göstergesi için gereken 3:1'in altında. Halka
   artık iki tonlu: içte gökyüzü (koyu zeminde 8.0:1), dışta lacivert
   (açık zeminde 17.9:1). Hangi zeminde olursa olsun bir tonu görünür,
   iki ton birbirine karşı da 8.0:1 kontrast taşır. Geometri değişmedi
   (3px halka + 3px offset), yalnızca boşluk gökyüzü tonuyla doluyor.

   Blok dosyanın SONUNDA ve !important ile: .tk-btn, .tk-card gibi
   bileşenler kendi box-shadow'larını daha sonra tanımlıyor, .tk-field
   input:focus ise outline'ı tamamen kaldırıyordu.
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--tk-blue-900) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px var(--tk-sky) !important;
}