/* ==========================================================================
   KODNUKE  —  ortak tema katmanı v3
   Sıcak ada / jungle paleti: krem zemin, koyu kahve, altın, jungle yeşili, mercan.
   3D efektler, sayfa geçişleri, açılış ekranı, yukarıdan düşen kartlar.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Outfit:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* palet — sıcak ada */
    --kn-cream:    #fffaf0;
    --kn-sand-1:   #f8ecd6;
    --kn-sand-2:   #f0dfc2;
    --kn-clay:     #d8a866;
    --kn-bark:     #3a2a1b;
    --kn-bark-2:   #6d5942;
    --kn-bark-3:   #9a866e;
    --kn-jungle:   #1c7a4f;
    --kn-jungle-2: #2ea36a;
    --kn-jungle-3: #a8e0bd;
    --kn-lagoon:   #1098a6;
    --kn-sun:      #ef9f16;
    --kn-sun-2:    #f8c95c;
    --kn-ember:    #dd4f2c;
    --kn-plum:     #8e3d6b;

    --kn-ink:      var(--kn-bark);
    --kn-mute:     var(--kn-bark-2);
    --kn-faint:    var(--kn-bark-3);

    --kn-card:     rgba(255, 255, 255, .68);
    --kn-card-2:   rgba(255, 255, 255, .88);
    --kn-line:     rgba(58, 42, 27, .13);
    --kn-line-2:   rgba(58, 42, 27, .22);
    --kn-line-hot: rgba(28, 122, 79, .42);

    --kn-shadow-s: 0 2px 6px rgba(90, 60, 30, .07);
    --kn-shadow-m: 0 14px 34px -18px rgba(90, 60, 30, .38);
    --kn-shadow-l: 0 34px 70px -32px rgba(90, 60, 30, .45);

    /* tipografi */
    --kn-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --kn-body:    'Outfit', 'Segoe UI', sans-serif;
    --kn-mono:    'JetBrains Mono', 'Consolas', monospace;

    /* geometri */
    --kn-r:    22px;
    --kn-r-sm: 14px;
    --kn-r-lg: 32px;
    --kn-nav-h: 66px;
    --kn-maxw: 1280px;

    /* hareket */
    --kn-ease:    cubic-bezier(.16, 1, .3, 1);
    --kn-ease-io: cubic-bezier(.65, 0, .35, 1);
    --kn-spring:  cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   2. SAYFA ZEMİNİ
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.kn-body {
    margin: 0;
    min-height: 100vh;
    background: var(--kn-cream);
    color: var(--kn-ink);
    font-family: var(--kn-body);
    font-weight: 300;
    line-height: 1.68;
    letter-spacing: .005em;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}

/* güneş ışığı / sıcak renk lekeleri */
body.kn-body::before {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: -3;
    background:
        radial-gradient(38% 40% at 14% 8%,  rgba(248, 201, 92, .55), transparent 62%),
        radial-gradient(42% 44% at 88% 4%,  rgba(46, 163, 106, .32), transparent 64%),
        radial-gradient(46% 42% at 78% 72%, rgba(238, 159, 22, .26), transparent 66%),
        radial-gradient(44% 40% at 6% 82%,  rgba(16, 152, 166, .20), transparent 68%),
        radial-gradient(50% 40% at 50% 50%, rgba(221, 79, 44, .10), transparent 70%),
        linear-gradient(170deg, #fffdf7 0%, var(--kn-sand-1) 48%, var(--kn-sand-2) 100%);
    filter: blur(8px);
    animation: kn-drift 40s ease-in-out infinite alternate;
}
@keyframes kn-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-2%, 2%, 0) scale(1.05); }
    100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

/* yaprak dokusu */
.kn-leaves {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%232a7a4f' stroke-opacity='.14' stroke-width='1.6'%3E%3Cpath d='M40 200c0-26 18-44 44-44-2 26-18 42-44 44z'/%3E%3Cpath d='M196 60c0-22-15-38-38-38 2 22 15 36 38 38z'/%3E%3Ccircle cx='120' cy='130' r='5'/%3E%3Ccircle cx='58' cy='66' r='3.5'/%3E%3Ccircle cx='212' cy='196' r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 260px 260px;
}

/* yumuşak ızgara (köy/kamp hissi) */
.kn-grid-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right,  rgba(58,42,27,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(58,42,27,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}

/* polen / güneş tozları */
.kn-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* kenarlık yumuşatma + sıcak vinyet */
.kn-scan {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    background: radial-gradient(125% 95% at 50% 40%, transparent 52%, rgba(120, 80, 35, .18) 100%);
}
.kn-grain {
    position: fixed; inset: 0; z-index: 9001; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: multiply;
}
.kn-vig { display: none; }

/* imleç */
.kn-cursor {
    position: fixed; top: 0; left: 0;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    border: 1.5px solid var(--kn-jungle);
    border-radius: 50%;
    z-index: 9500;
    pointer-events: none;
    transition: width .28s var(--kn-ease), height .28s var(--kn-ease), margin .28s var(--kn-ease),
                background .28s, border-color .28s, opacity .3s;
    opacity: 0;
}
.kn-cursor::after {
    content: '';
    position: absolute; inset: 40%;
    border-radius: 50%;
    background: var(--kn-sun);
    box-shadow: 0 0 8px var(--kn-sun);
}
.kn-cursor.is-on  { opacity: 1; }
.kn-cursor.is-hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(239, 159, 22, .16); border-color: var(--kn-ember); }

/* kaydırma çubuğu */
.kn-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0;
    z-index: 9400;
    background: linear-gradient(90deg, var(--kn-jungle), var(--kn-sun), var(--kn-ember));
    box-shadow: 0 2px 10px rgba(239, 159, 22, .5);
    transition: width .12s linear;
}

/* --------------------------------------------------------------------------
   3. AÇILIŞ EKRANI
   -------------------------------------------------------------------------- */
.kn-boot {
    position: fixed; inset: 0;
    z-index: 9800;
    display: grid; place-items: center;
    background:
        radial-gradient(60% 60% at 50% 38%, #fff6e2 0%, #f7e6c8 55%, #efd9b4 100%);
    font-family: var(--kn-mono);
    transition: opacity .7s ease, transform .9s var(--kn-ease), visibility .7s;
}
.kn-boot.is-done { opacity: 0; visibility: hidden; transform: scale(1.06); filter: blur(12px); pointer-events: none; }
.kn-boot__box { width: min(560px, 88vw); }
.kn-boot__mark { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kn-boot__mark b {
    font-family: var(--kn-display);
    font-size: clamp(1.4rem, 5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--kn-bark);
}
.kn-boot__mark b span { color: var(--kn-jungle); }
.kn-boot__mark i {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--kn-ember);
    box-shadow: 0 0 0 5px rgba(221, 79, 44, .16);
    animation: kn-pulse 1.1s ease-in-out infinite;
}
@keyframes kn-pulse { 50% { opacity: .3; transform: scale(.72); } }

.kn-boot__bar { height: 4px; background: rgba(58,42,27,.10); border-radius: 4px; overflow: hidden; margin: 16px 0 12px; }
.kn-boot__bar span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--kn-jungle), var(--kn-sun));
    border-radius: 4px;
    transition: width .18s linear;
}
.kn-boot__log { height: 118px; overflow: hidden; font-size: .76rem; line-height: 1.9; color: var(--kn-bark-2); }
.kn-boot__log b { color: var(--kn-jungle); font-weight: 500; }
.kn-boot__log u { color: var(--kn-ember); text-decoration: none; }
.kn-boot__log s { color: var(--kn-lagoon); text-decoration: none; }
.kn-boot__pct { font-size: .72rem; color: var(--kn-bark-3); letter-spacing: .22em; }

/* --------------------------------------------------------------------------
   4. SAYFA GEÇİŞ PANELLERİ
   -------------------------------------------------------------------------- */
.kn-trans { position: fixed; inset: 0; z-index: 9700; display: flex; pointer-events: none; }
.kn-trans.is-locked { pointer-events: all; }
.kn-trans i {
    flex: 1;
    background: linear-gradient(180deg, #fffaef, #f6e3c2 55%, #eecf9d);
    border-right: 1px solid rgba(58, 42, 27, .1);
    transform: translate3d(0, 100%, 0) skewY(-6deg);
    transition: transform .6s var(--kn-ease-io);
    transition-delay: var(--d, 0ms);
}
.kn-trans i:last-child { border-right: 0; }
.kn-trans.out i { transform: translate3d(0, 0, 0) skewY(-6deg); }
.kn-trans.in  i { transform: translate3d(0, -100%, 0) skewY(-6deg); }
.kn-trans__label {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--kn-mono); font-size: .8rem;
    letter-spacing: .36em; text-transform: uppercase;
    color: var(--kn-bark); opacity: 0;
    transition: opacity .3s .2s; white-space: nowrap;
}
.kn-trans.out .kn-trans__label { opacity: 1; }

/* --------------------------------------------------------------------------
   5. DÜZEN
   -------------------------------------------------------------------------- */
.kn-wrap { width: 100%; max-width: var(--kn-maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 34px); }
.kn-section { position: relative; padding: clamp(64px, 9vw, 118px) 0; }

.kn-sec-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 38px; flex-wrap: wrap; }
.kn-sec-head__idx {
    font-family: var(--kn-mono); font-size: .7rem;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--kn-jungle);
    padding: 6px 12px;
    border: 1px solid var(--kn-line-hot);
    border-radius: 999px;
    background: rgba(46, 163, 106, .08);
    white-space: nowrap;
}
.kn-sec-head h2 {
    margin: 0;
    font-family: var(--kn-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--kn-bark);
}
.kn-sec-head p { margin: 8px 0 0; color: var(--kn-mute); max-width: 62ch; font-size: .98rem; }
.kn-sec-head::after {
    content: ''; flex: 1 1 110px; height: 2px; margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(58,42,27,.22), transparent);
    border-radius: 2px;
}

/* yumuşak "harf oynama" başlık efekti */
.kn-glitch { position: relative; display: inline-block; }
.kn-glitch::before, .kn-glitch::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
}
.kn-glitch::before { color: var(--kn-jungle); }
.kn-glitch::after  { color: var(--kn-ember); }
.kn-glitch:hover::before, .kn-glitch:hover::after { opacity: .85; animation: kn-gl1 .7s steps(2, end) infinite; }
.kn-glitch:hover::after { animation-name: kn-gl2; }
@keyframes kn-gl1 {
    0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    50% { clip-path: inset(10% 0 55% 0); transform: translate(-3px, -1px); }
    70% { clip-path: inset(55% 0 20% 0); transform: translate(3px, 1px); }
}
@keyframes kn-gl2 {
    0%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
    40% { clip-path: inset(35% 0 40% 0); transform: translate(3px, 1px); }
    75% { clip-path: inset(68% 0 8% 0);  transform: translate(-2px, 0); }
}

/* --------------------------------------------------------------------------
   6. NAVİGASYON
   -------------------------------------------------------------------------- */
.kn-nav {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), var(--kn-maxw));
    height: var(--kn-nav-h);
    z-index: 8000;
    display: flex; align-items: center; gap: 16px;
    padding: 0 clamp(12px, 2.2vw, 20px);
    border: 1px solid var(--kn-line);
    border-radius: 999px;
    background: rgba(255, 252, 245, .78);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    box-shadow: var(--kn-shadow-m), inset 0 1px 0 rgba(255,255,255,.9);
    transition: top .35s var(--kn-ease), background .35s, box-shadow .35s, border-color .35s;
}
.kn-nav.is-stuck { top: 8px; background: rgba(255, 253, 248, .94); box-shadow: var(--kn-shadow-l), inset 0 1px 0 rgba(255,255,255,.9); }

.kn-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kn-bark); flex: 0 0 auto; }
.kn-nav__leaf {
    width: 28px; height: 28px;
    border-radius: 9px 3px 9px 3px;
    background: linear-gradient(140deg, var(--kn-jungle-2), var(--kn-jungle));
    position: relative;
    box-shadow: 0 6px 14px -6px rgba(28, 122, 79, .8);
    transform: rotate(-8deg);
    transition: transform .5s var(--kn-spring);
}
.kn-nav__leaf::after {
    content: '';
    position: absolute; left: 50%; top: 4px; bottom: 4px;
    width: 1.5px; margin-left: -.75px;
    background: rgba(255,255,255,.7);
    border-radius: 2px;
}
.kn-nav__brand:hover .kn-nav__leaf { transform: rotate(12deg) scale(1.1); }
.kn-nav__brand b { font-family: var(--kn-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.kn-nav__brand b i { font-style: normal; color: var(--kn-jungle); }

.kn-nav__menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.kn-nav__menu > a {
    position: relative;
    color: var(--kn-bark-2);
    text-decoration: none;
    font-size: .87rem; font-weight: 500;
    padding: 9px 13px;
    border-radius: 999px;
    transition: color .28s, background .28s;
}
.kn-nav__menu > a::after {
    content: '';
    position: absolute; left: 50%; bottom: 3px;
    width: 0; height: 2px;
    background: var(--kn-sun);
    border-radius: 2px;
    transition: width .32s var(--kn-ease);
    transform: translateX(-50%);
}
.kn-nav__menu > a:hover { color: var(--kn-bark); background: rgba(239, 159, 22, .12); }
.kn-nav__menu > a:hover::after { width: 44%; }
.kn-nav__menu > a.is-on { color: var(--kn-jungle); }

.kn-nav__tools { display: flex; align-items: center; gap: 6px; padding-left: 12px; margin-inline-start: 8px; border-left: 1px solid var(--kn-line); }
.kn-nav__socials { display: flex; align-items: center; gap: 5px; }
.kn-nav__socials a {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.6);
    color: var(--kn-bark-2);
    text-decoration: none; font-size: .9rem;
    transition: all .3s var(--kn-spring);
}
.kn-nav__socials a:hover { transform: translateY(-3px) scale(1.08); box-shadow: var(--kn-shadow-m); }
.kn-nav__socials a[data-net="github"]:hover    { background: var(--kn-bark); color: #fff; border-color: var(--kn-bark); }
.kn-nav__socials a[data-net="x"]:hover         { background: #fff; border-color: var(--kn-bark); }
.kn-nav__socials a[data-net="linkedin"]:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.kn-nav__socials a[data-net="instagram"]:hover { background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); color: #fff; border-color: transparent; }

/* dil seçici */
.kn-lang { position: relative; }
.kn-lang__btn {
    display: flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.6);
    color: var(--kn-bark);
    font-family: var(--kn-mono); font-size: .72rem; font-weight: 500;
    cursor: pointer;
    transition: all .3s var(--kn-ease);
}
.kn-lang__btn:hover { border-color: var(--kn-sun); background: rgba(239,159,22,.12); }
.kn-lang__btn i { font-size: .78rem; }
.kn-lang__menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
    min-width: 152px;
    padding: 6px;
    border-radius: var(--kn-r-sm);
    border: 1px solid var(--kn-line);
    background: rgba(255, 253, 248, .97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--kn-shadow-l);
    display: none;
    z-index: 10;
}
.kn-lang.is-open .kn-lang__menu { display: block; }
.kn-lang__menu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0; border-radius: 9px;
    background: transparent;
    color: var(--kn-bark-2);
    font-family: var(--kn-body); font-size: .86rem; font-weight: 500;
    text-align: start; cursor: pointer;
    transition: background .22s, color .22s;
}
.kn-lang__menu button:hover { background: rgba(46,163,106,.12); color: var(--kn-bark); }
.kn-lang__menu button.is-on { background: var(--kn-jungle); color: #fff; }
.kn-lang__menu button em { font-style: normal; font-family: var(--kn-mono); font-size: .66rem; opacity: .7; margin-inline-start: auto; }

.kn-nav__burger {
    display: none;
    width: 38px; height: 38px;
    border: 1px solid var(--kn-line);
    border-radius: 11px;
    background: rgba(255,255,255,.6);
    color: var(--kn-bark);
    font-size: 1rem; cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. 3D YARDIMCILAR
   -------------------------------------------------------------------------- */
.kn-tilt {
    --rx: 0deg; --ry: 0deg; --pz: 0px;
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--pz));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .5s var(--kn-ease);
}
.kn-scene { perspective: 1200px; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.kn-hero {
    position: relative;
    min-height: 100svh;
    display: grid; place-items: center;
    padding: calc(var(--kn-nav-h) + 48px) 0 64px;
    overflow: hidden;
}
.kn-hero--compact { min-height: auto; padding: calc(var(--kn-nav-h) + 40px) 0 20px; }

.kn-hero__stage, .kn-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(24px, 5vw, 60px);
    align-items: center;
    width: 100%;
    transform-style: preserve-3d;
}
@media (max-width: 1080px) {
    .kn-hero__stage, .kn-hero__grid { grid-template-columns: 1fr; }
    .kn-hero__visual { order: -1; }
}

.kn-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--kn-mono); font-size: .72rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--kn-jungle);
    padding: 7px 15px;
    border: 1px solid var(--kn-line-hot);
    border-radius: 999px;
    background: rgba(46,163,106,.08);
    margin-bottom: 20px;
}
.kn-hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kn-ember); box-shadow: 0 0 0 4px rgba(221,79,44,.16); animation: kn-pulse 1.3s infinite; }

.kn-hero h1 {
    margin: 0 0 16px;
    font-family: var(--kn-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 7vw, 4.9rem);
    line-height: .98;
    letter-spacing: -.03em;
    color: var(--kn-bark);
}
.kn-hero h1 .l1 { display: block; }
.kn-hero h1 .l2 {
    display: block;
    background: linear-gradient(96deg, var(--kn-jungle) 0%, var(--kn-lagoon) 46%, var(--kn-sun) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-hero__lead { color: var(--kn-mute); font-size: clamp(1rem, 2.2vw, 1.12rem); max-width: 54ch; margin: 0 0 26px; }
.kn-hero__lead b { color: var(--kn-bark); font-weight: 600; }
.kn-hero__cta { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 30px; }

.kn-stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 32px); }
.kn-stat b {
    display: block;
    font-family: var(--kn-display);
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    font-weight: 800; line-height: 1;
    color: var(--kn-jungle);
}
.kn-stat span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-faint); }

.kn-scroll-hint {
    position: absolute; left: 50%; bottom: 24px;
    transform: translateX(-50%);
    display: grid; justify-items: center; gap: 8px;
    font-family: var(--kn-mono); font-size: .62rem; letter-spacing: .26em;
    color: var(--kn-faint); text-transform: uppercase;
}
.kn-scroll-hint i { width: 22px; height: 34px; border: 1.5px solid var(--kn-clay); border-radius: 12px; position: relative; }
.kn-scroll-hint i::after {
    content: ''; position: absolute; left: 50%; top: 7px;
    width: 3px; height: 7px; margin-left: -1.5px;
    border-radius: 2px; background: var(--kn-sun);
    animation: kn-wheel 1.8s ease-in-out infinite;
}
@keyframes kn-wheel { 50% { transform: translateY(11px); opacity: .2; } }

/* dönen ada çekirdeği */
.kn-core {
    position: relative;
    width: min(340px, 70vw);
    aspect-ratio: 1;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation: kn-float 9s ease-in-out infinite;
}
@keyframes kn-float { 50% { translate: 0 -16px; } }
.kn-core__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; transform-style: preserve-3d; }
.kn-core__ring::after {
    content: '';
    position: absolute; top: -5px; left: 50%;
    width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%;
    background: var(--kn-sun);
    box-shadow: 0 0 14px 3px rgba(239,159,22,.7);
}
.kn-core__ring--a { border-top-color: var(--kn-jungle); border-bottom-color: rgba(28,122,79,.28); animation: kn-spin 11s linear infinite; }
.kn-core__ring--b { inset: 13%; border-top-color: var(--kn-sun); border-bottom-color: rgba(239,159,22,.28); animation: kn-spinr 8s linear infinite; }
.kn-core__ring--c { inset: 26%; border-top-color: var(--kn-lagoon); border-bottom-color: rgba(16,152,166,.28); animation: kn-spin 15s linear infinite; }
@keyframes kn-spin  { to { transform: rotate3d(1,1,0,360deg); } }
@keyframes kn-spinr { to { transform: rotate3d(1,-1,0,-360deg); } }
.kn-core__shell {
    position: absolute; inset: 34%;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff6d8, var(--kn-sun-2) 30%, var(--kn-sun) 62%, var(--kn-ember) 88%);
    box-shadow: 0 0 60px rgba(239,159,22,.45), inset 0 -8px 24px rgba(28,122,79,.35);
    animation: kn-pulse2 4.2s ease-in-out infinite;
}
@keyframes kn-pulse2 { 50% { transform: scale(1.08); } }
.kn-core__wire {
    position: absolute; inset: 7%;
    border: 1.5px dashed rgba(28,122,79,.34);
    border-radius: 14px;
    transform-style: preserve-3d;
    animation: kn-spin3 18s linear infinite;
}
.kn-core__wire--2 { inset: 17%; border-color: rgba(221,79,44,.3); border-radius: 20px; animation-duration: 24s; animation-direction: reverse; }
@keyframes kn-spin3 { to { transform: rotate3d(1,.6,1,360deg); } }

/* --------------------------------------------------------------------------
   9. BUTONLAR
   -------------------------------------------------------------------------- */
.kn-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px;
    border: 0; border-radius: 999px;
    font-family: var(--kn-display);
    font-size: .9rem; font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    color: #fff;
    cursor: pointer; overflow: hidden;
    background: linear-gradient(96deg, var(--kn-jungle), var(--kn-lagoon) 58%, var(--kn-sun));
    background-size: 200% 100%;
    box-shadow: 0 12px 26px -12px rgba(28,122,79,.75);
    transition: transform .35s var(--kn-spring), box-shadow .35s, background-position .6s;
}
.kn-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--kn-ease);
}
.kn-btn:hover { transform: translateY(-3px) scale(1.03); background-position: 100% 0; box-shadow: 0 18px 34px -12px rgba(221,79,44,.6); }
.kn-btn:hover::before { transform: translateX(120%); }
.kn-btn i, .kn-btn span { position: relative; }

.kn-btn--ghost {
    background: rgba(255,255,255,.7);
    color: var(--kn-bark);
    border: 1.5px solid var(--kn-line-2);
    box-shadow: var(--kn-shadow-s);
}
.kn-btn--ghost:hover { background: #fff; color: var(--kn-bark); box-shadow: var(--kn-shadow-m); border-color: var(--kn-sun); }

.kn-btn--ember { background: linear-gradient(96deg, var(--kn-ember), #f2803f); box-shadow: 0 12px 26px -12px rgba(221,79,44,.7); }
.kn-btn--sm { padding: 9px 16px; font-size: .78rem; }

/* mağaza rozetleri */
.kn-store {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 11px 20px;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.8);
    box-shadow: var(--kn-shadow-m);
    transition: transform .35s var(--kn-spring), box-shadow .35s, border-color .3s;
}
.kn-store:hover { transform: translateY(-4px); box-shadow: var(--kn-shadow-l); border-color: var(--kn-sun); }
.kn-store > i { font-size: 1.7rem; color: var(--kn-bark); }
.kn-store b { display: block; font-family: var(--kn-display); font-size: .98rem; font-weight: 700; color: var(--kn-bark); line-height: 1.1; }
.kn-store span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kn-faint); }
.kn-store--soon { opacity: .62; cursor: default; }
.kn-store--soon:hover { transform: none; box-shadow: var(--kn-shadow-m); border-color: var(--kn-line); }
.kn-store__pill {
    font-family: var(--kn-mono); font-size: .58rem; letter-spacing: .14em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(239,159,22,.18); color: #a86a05;
    border: 1px solid rgba(239,159,22,.4);
    margin-inline-start: 4px;
}

/* --------------------------------------------------------------------------
   10. KARTLAR
   -------------------------------------------------------------------------- */
.kn-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: var(--kn-card);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: var(--kn-shadow-m), inset 0 1px 0 rgba(255,255,255,.85);
    transform-style: preserve-3d;
    isolation: isolate;
    transition: transform .5s var(--kn-ease), box-shadow .45s, border-color .4s;
}
.kn-card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(140deg, var(--kn-jungle), transparent 40%, transparent 62%, var(--kn-sun));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
}
.kn-card:hover::before { opacity: 1; }
.kn-card:hover { box-shadow: var(--kn-shadow-l), inset 0 1px 0 rgba(255,255,255,.9); border-color: transparent; }
.kn-card__spot {
    position: absolute;
    width: 320px; height: 320px;
    left: var(--px, 50%); top: var(--py, 50%);
    margin: -160px 0 0 -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239,159,22,.24), transparent 68%);
    opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 0;
}
.kn-card:hover .kn-card__spot { opacity: 1; }
.kn-card__inner { position: relative; z-index: 1; display: block; }

.kn-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: calc(var(--kn-r) - 1px) calc(var(--kn-r) - 1px) 0 0;
    background: linear-gradient(150deg, var(--kn-sand-1), var(--kn-sand-2));
    display: grid; place-items: center;
}
.kn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--kn-ease); }
.kn-card:hover .kn-card__media img { transform: scale(1.07); }
.kn-card__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(58,42,27,.16) 0%, transparent 46%);
}
.kn-card__glyph { position: absolute; font-size: 2.8rem; color: var(--kn-jungle); z-index: 1; transition: transform .6s var(--kn-spring); }
.kn-card:hover .kn-card__glyph { transform: scale(1.14) rotate(-6deg); }
.kn-card__badge {
    position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
    font-family: var(--kn-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255, 252, 245, .9);
    border: 1px solid var(--kn-line);
    color: var(--kn-jungle);
}
.kn-card__cat {
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
    font-family: var(--kn-mono); font-size: .58rem; letter-spacing: .16em;
    text-transform: uppercase; padding: 5px 9px; border-radius: 8px;
    background: rgba(58,42,27,.78); color: #fff6e2;
}
.kn-card__cat[data-c="game"] { background: var(--kn-jungle); }
.kn-card__cat[data-c="ai"]   { background: var(--kn-plum); }
.kn-card__cat[data-c="web"]  { background: var(--kn-lagoon); }
.kn-card__cat[data-c="tool"] { background: var(--kn-sun); color: #4a3208; }
.kn-card__cat[data-c="game-dev"] { background: var(--kn-jungle); }

.kn-card__body { padding: 18px 20px 20px; }
.kn-card__body h3 {
    margin: 0 0 8px;
    font-family: var(--kn-display);
    font-size: 1.12rem; font-weight: 700;
    color: var(--kn-bark);
    display: flex; align-items: center; gap: 9px;
}
.kn-card__body h3 .arw { margin-inline-start: auto; color: var(--kn-jungle); opacity: 0; transform: translateX(-6px); transition: all .35s var(--kn-ease); }
.kn-card:hover h3 .arw { opacity: 1; transform: translateX(0); }
.kn-card__body p { margin: 0; color: var(--kn-mute); font-size: .9rem; line-height: 1.6; }
.kn-card__foot {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 13px;
    border-top: 1px dashed var(--kn-line-2);
}

.kn-tag {
    font-family: var(--kn-mono); font-size: .64rem; letter-spacing: .06em;
    padding: 4px 9px; border-radius: 8px;
    color: var(--kn-jungle); background: rgba(46,163,106,.1);
    border: 1px solid rgba(28,122,79,.22);
    white-space: nowrap;
}
.kn-tag--ai   { color: var(--kn-plum);  background: rgba(142,61,107,.08); border-color: rgba(142,61,107,.22); }
.kn-tag--game { color: var(--kn-ember); background: rgba(221,79,44,.08);  border-color: rgba(221,79,44,.22); }
.kn-tag--web  { color: var(--kn-lagoon); background: rgba(16,152,166,.08);  border-color: rgba(16,152,166,.22); }
.kn-tag--sun  { color: #a86a05;        background: rgba(239,159,22,.12);  border-color: rgba(239,159,22,.3); }

.kn-drop { display: block; transform-style: preserve-3d; }

/* --------------------------------------------------------------------------
   11. IZGARA + YUKARIDAN DÜŞÜŞ
   -------------------------------------------------------------------------- */
.kn-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-filter {
    font-family: var(--kn-mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 9px 16px; border-radius: 999px;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.7);
    color: var(--kn-mute);
    cursor: pointer;
    transition: all .3s var(--kn-ease);
}
.kn-filter:hover { color: var(--kn-bark); border-color: var(--kn-sun); transform: translateY(-2px); box-shadow: var(--kn-shadow-s); }
.kn-filter.is-on { color: #fff; background: linear-gradient(96deg, var(--kn-jungle), var(--kn-lagoon)); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(28,122,79,.9); }

.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(16px, 2.4vw, 26px); perspective: 1400px; }
.kn-grid--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.kn-grid--proj { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* düşüş başlangıcı — dönüşüm burada UYGULANMAZ (gözlemci doğru ölçsün diye);
   kayma animasyonun 0% karesinde ve fill-mode:backwards ile uygulanır. */
.kn-js .kn-drop:not(.is-in) { opacity: 0; pointer-events: none; }
.kn-drop.is-in { animation: kn-fall 1.1s var(--kn-ease-io) backwards; animation-delay: var(--delay, 0ms); }
@keyframes kn-fall {
    0%   { opacity: 0; transform: translate3d(var(--dx,0px), -130vh, -900px) rotateX(-118deg) rotateZ(var(--rz,0deg)) scale(.86); filter: blur(6px); }
    62%  { opacity: 1; filter: blur(0); }
    74%  { transform: translate3d(0, -18px, 40px) rotateX(9deg) scale(1.03); }
    86%  { transform: translate3d(0, 7px, -10px) rotateX(-3.2deg) scale(.995); }
    94%  { transform: translate3d(0, -3px, 4px) rotateX(1deg) scale(1.004); }
    100% { opacity: 1; transform: translate3d(0,0,0) rotateX(0) scale(1); filter: blur(0); }
}
.kn-drop.is-out { display: none; }

body.kn-land { animation: kn-shake .4s ease-out; }
@keyframes kn-shake {
    0%, 100% { transform: translate3d(0,0,0); }
    25% { transform: translate3d(-3px, 2px, 0); }
    55% { transform: translate3d(3px, -2px, 0); }
    78% { transform: translate3d(-1.5px, 1px, 0); }
}
.kn-puff {
    position: fixed;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    pointer-events: none; z-index: 8500;
    background: radial-gradient(circle, rgba(255,255,255,.95), var(--kn-sun) 42%, transparent 72%);
    animation: kn-puff .7s ease-out forwards;
}
@keyframes kn-puff { to { transform: translate3d(var(--px,0), var(--py,0), 0) scale(.1); opacity: 0; } }

/* --------------------------------------------------------------------------
   12. GITHUB PANELİ
   -------------------------------------------------------------------------- */
.kn-gh { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2.6vw, 26px); align-items: stretch; }
.kn-gh__id {
    position: relative;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: linear-gradient(165deg, rgba(46,163,106,.1), rgba(239,159,22,.07) 45%, rgba(255,255,255,.7));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    box-shadow: var(--kn-shadow-m);
}
.kn-gh__id::after {
    content: '';
    position: absolute; inset-inline-end: -18px; top: -18px;
    width: 170px; height: 170px; border-radius: 50%;
    background: radial-gradient(circle, rgba(221,79,44,.2), transparent 70%);
    filter: blur(12px); pointer-events: none;
}
.kn-gh__top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.kn-gh__avatar {
    position: relative;
    width: 82px; height: 82px; flex: 0 0 auto;
    border-radius: 24px; overflow: hidden;
    border: 2px solid #fff;
    background: var(--kn-sand-2);
    box-shadow: var(--kn-shadow-m);
    transform: translateZ(40px);
}
.kn-gh__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-gh__name { margin: 0; font-family: var(--kn-display); font-size: 1.4rem; font-weight: 800; color: var(--kn-bark); line-height: 1.1; }
.kn-gh__login { font-family: var(--kn-mono); font-size: .76rem; color: var(--kn-jungle); }
.kn-gh__bio { margin: 0 0 18px; color: var(--kn-mute); font-size: .92rem; }
.kn-gh__nums { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.kn-gh__nums div b { display: block; font-family: var(--kn-display); font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--kn-bark); }
.kn-gh__nums div span { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kn-faint); }
.kn-gh__status {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kn-mono); font-size: .66rem; letter-spacing: .12em;
    color: var(--kn-jungle);
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(28,122,79,.28);
    background: rgba(46,163,106,.1);
}
.kn-gh__status.is-off { color: #a86a05; border-color: rgba(239,159,22,.34); background: rgba(239,159,22,.1); }
.kn-gh__status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: kn-pulse 1.4s infinite; }
.kn-gh__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kn-gh__repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-content: start; }
.kn-repo {
    display: block; padding: 16px 17px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r-sm);
    background: rgba(255,255,255,.7);
    text-decoration: none; color: inherit;
    transition: all .38s var(--kn-ease);
    transform-style: preserve-3d;
    position: relative;
}
.kn-repo::before {
    content: '';
    position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--kn-jungle), var(--kn-sun));
    transform: scaleY(0); transform-origin: top;
    transition: transform .4s var(--kn-ease);
}
.kn-repo:hover { border-color: var(--kn-sun); background: #fff; transform: translateZ(24px) translateY(-4px); box-shadow: var(--kn-shadow-l); }
.kn-repo:hover::before { transform: scaleY(1); }
.kn-repo h4 { margin: 0 0 6px; font-family: var(--kn-mono); font-size: .9rem; font-weight: 500; color: var(--kn-jungle); display: flex; align-items: center; gap: 8px; }
.kn-repo p {
    margin: 0 0 12px; font-size: .82rem; color: var(--kn-mute); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kn-repo__meta { display: flex; align-items: center; gap: 14px; font-family: var(--kn-mono); font-size: .68rem; color: var(--kn-faint); }
.kn-repo__meta i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-inline-end: 5px; background: var(--kn-jungle); }
.kn-gh__skel { height: 106px; border-radius: var(--kn-r-sm); border: 1px solid var(--kn-line); background: linear-gradient(100deg, rgba(255,255,255,.5) 30%, rgba(239,159,22,.18) 50%, rgba(255,255,255,.5) 70%); background-size: 220% 100%; animation: kn-shimmer 1.5s linear infinite; }
@keyframes kn-shimmer { to { background-position: -220% 0; } }
.kn-gh__empty { color: var(--kn-mute); font-size: .9rem; grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   13. UZMANLIK KARTLARI
   -------------------------------------------------------------------------- */
.kn-domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2.2vw, 22px); }
.kn-domain {
    position: relative;
    padding: 26px 24px 24px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: var(--kn-card);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    box-shadow: var(--kn-shadow-m);
    transition: transform .5s var(--kn-ease), border-color .4s, box-shadow .4s;
}
.kn-domain:hover { border-color: var(--kn-sun); box-shadow: var(--kn-shadow-l); }
.kn-domain__ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.4rem;
    margin-bottom: 16px;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.7);
    color: var(--kn-jungle);
    transform: translateZ(46px);
    box-shadow: var(--kn-shadow-s);
    transition: transform .5s var(--kn-spring);
}
.kn-domain:hover .kn-domain__ico { transform: translateZ(66px) rotate(-8deg) scale(1.08); }
.kn-domain h3 { margin: 0 0 8px; font-family: var(--kn-display); font-size: 1.15rem; font-weight: 700; color: var(--kn-bark); transform: translateZ(26px); }
.kn-domain p { margin: 0 0 14px; color: var(--kn-mute); font-size: .9rem; transform: translateZ(14px); }
.kn-domain ul { margin: 0; padding: 0; list-style: none; transform: translateZ(20px); }
.kn-domain li { font-family: var(--kn-mono); font-size: .7rem; color: var(--kn-faint); padding: 4px 0; display: flex; gap: 8px; }
.kn-domain li::before { content: '◆'; color: var(--kn-sun); font-size: .6rem; margin-top: .35em; }
.kn-domain__no {
    position: absolute; inset-inline-end: 16px; top: 10px;
    font-family: var(--kn-display); font-size: 3.4rem; font-weight: 800;
    color: rgba(58,42,27,.06); line-height: 1;
}

/* --------------------------------------------------------------------------
   14. TERMİNAL
   -------------------------------------------------------------------------- */
.kn-term {
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: linear-gradient(180deg, #2f2116, #241a11);
    box-shadow: var(--kn-shadow-l);
    overflow: hidden;
    font-family: var(--kn-mono);
    font-size: .82rem;
    transform-style: preserve-3d;
}
.kn-term__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.kn-term__bar i { width: 11px; height: 11px; border-radius: 50%; }
.kn-term__bar i:nth-child(1) { background: #ff5f57; } .kn-term__bar i:nth-child(2) { background: #febc2e; } .kn-term__bar i:nth-child(3) { background: #28c840; }
.kn-term__bar b { margin-inline-start: 10px; font-weight: 400; font-size: .72rem; color: rgba(255,240,214,.6); letter-spacing: .08em; }
.kn-term__body { padding: 16px 18px; min-height: 186px; }
.kn-term__body div { white-space: pre-wrap; word-break: break-word; }
.kn-term .p { color: #ffd28a; }
.kn-term .c { color: #fff4dd; }
.kn-term .r { color: #8fe3ab; }
.kn-term .m { color: rgba(255,240,214,.62); }
.kn-term__body .cur { display: inline-block; width: 9px; height: 15px; background: var(--kn-sun); vertical-align: -2px; animation: kn-blink 1s steps(2) infinite; }
@keyframes kn-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   15. SOSYAL RAY
   -------------------------------------------------------------------------- */
.kn-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kn-social {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 17px 20px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: var(--kn-card);
    text-decoration: none; color: inherit;
    transform-style: preserve-3d;
    box-shadow: var(--kn-shadow-s);
    transition: transform .45s var(--kn-spring), border-color .35s, box-shadow .4s;
}
.kn-social i {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 1.15rem;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.75);
    color: var(--kn-bark-2);
    transform: translateZ(30px);
    transition: all .4s var(--kn-ease);
}
.kn-social b { display: block; font-family: var(--kn-display); font-size: .98rem; font-weight: 700; color: var(--kn-bark); transform: translateZ(18px); }
.kn-social span span, .kn-social > span > span { font-size: .72rem; color: var(--kn-faint); font-family: var(--kn-mono); transform: translateZ(10px); display: block; }
.kn-social__go { margin-inline-start: auto; color: var(--kn-faint); transform: translateZ(16px); transition: transform .4s var(--kn-ease); }
.kn-social:hover { transform: translateY(-5px); border-color: var(--kn-sun); box-shadow: var(--kn-shadow-l); }
.kn-social:hover .kn-social__go { transform: translateZ(16px) translateX(6px); color: var(--kn-jungle); }
.kn-social::after {
    content: '';
    position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--kn-jungle), var(--kn-sun));
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s var(--kn-ease);
}
.kn-social:hover::after { transform: scaleY(1); transform-origin: top; }
.kn-social[data-net="github"]:hover i    { background: var(--kn-bark); color: #fff; border-color: var(--kn-bark); }
.kn-social[data-net="x"]:hover i         { background: #fff; border-color: var(--kn-bark); }
.kn-social[data-net="linkedin"]:hover i  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.kn-social[data-net="instagram"]:hover i { background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); color: #fff; border-color: transparent; }
.kn-social[data-net="mail"]:hover i      { background: var(--kn-sun); color: #fff; border-color: var(--kn-sun); }

/* --------------------------------------------------------------------------
   16. İÇERİK KARTI
   -------------------------------------------------------------------------- */
.kn-post {
    display: block; padding: 22px 24px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: var(--kn-card);
    text-decoration: none; color: inherit;
    transition: all .42s var(--kn-ease);
    position: relative;
    transform-style: preserve-3d;
    box-shadow: var(--kn-shadow-s);
}
.kn-post:hover { border-color: var(--kn-sun); background: var(--kn-card-2); transform: translateY(-6px); box-shadow: var(--kn-shadow-l); }
.kn-post h3 { margin: 0 0 10px; font-family: var(--kn-display); font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--kn-bark); }
.kn-post p { margin: 0 0 14px; color: var(--kn-mute); font-size: .9rem; }
.kn-post time { font-family: var(--kn-mono); font-size: .68rem; letter-spacing: .1em; color: var(--kn-jungle); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.kn-foot {
    position: relative;
    margin-top: 40px;
    padding: clamp(40px, 6vw, 66px) 0 26px;
    border-top: 1px solid var(--kn-line);
    background: linear-gradient(180deg, transparent, rgba(240, 223, 194, .55));
}
.kn-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; }
.kn-foot h4 { margin: 0 0 14px; font-family: var(--kn-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kn-jungle); }
.kn-foot p { margin: 0; color: var(--kn-mute); font-size: .9rem; max-width: 44ch; }
.kn-foot ul { list-style: none; margin: 0; padding: 0; }
.kn-foot li { margin-bottom: 9px; }
.kn-foot a { color: var(--kn-mute); text-decoration: none; font-size: .9rem; transition: color .3s, padding-inline-start .3s; }
.kn-foot a:hover { color: var(--kn-jungle); padding-inline-start: 5px; }
.kn-foot__bottom {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: space-between; align-items: center;
    margin-top: 30px; padding-top: 18px;
    border-top: 1px solid var(--kn-line);
    font-family: var(--kn-mono); font-size: .7rem; color: var(--kn-faint); letter-spacing: .05em;
}
.kn-foot__mark {
    font-family: var(--kn-display);
    font-size: clamp(2.4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    text-align: center;
    margin: 24px 0 4px;
    background: linear-gradient(180deg, rgba(58,42,27,.16), transparent 76%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    user-select: none; pointer-events: none;
}
.kn-foot__ok { color: var(--kn-jungle); }

/* sayfada gezen 3B dino */
.kn-dino {
    position: fixed;
    inset: 0;
    z-index: 8200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}
.kn-dino--3d, .kn-dino--2d { opacity: 1; }
.kn-dino-spark {
    position: fixed;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8300;
    background: hsl(var(--hue, 35deg), 92%, 58%);
    animation: kn-spark .85s ease-out forwards;
}
@keyframes kn-spark {
    to { transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(.2); opacity: 0; }
}
@media (pointer: coarse) { .kn-dino { opacity: .85; } }

/* --------------------------------------------------------------------------
   18. ORTAK
   -------------------------------------------------------------------------- */
.kn-center { text-align: center; }
.kn-center .kn-sec-head { justify-content: center; text-align: center; }
.kn-center .kn-sec-head::after { display: none; }
.kn-hide { display: none !important; }
.kn-marquee {
    position: relative; overflow: hidden;
    border-top: 1px solid var(--kn-line);
    border-bottom: 1px solid var(--kn-line);
    background: rgba(255, 252, 245, .6);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kn-marquee__track { display: flex; width: max-content; animation: kn-slide 38s linear infinite; }
.kn-marquee:hover .kn-marquee__track { animation-play-state: paused; }
.kn-marquee__track span {
    display: inline-flex; align-items: center; gap: 22px;
    padding-inline-end: 22px;
    font-family: var(--kn-mono); font-size: .74rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--kn-faint); white-space: nowrap;
}
.kn-marquee__track span b { color: var(--kn-jungle); font-weight: 500; }
.kn-marquee__track span s { width: 6px; height: 6px; border-radius: 50%; background: var(--kn-sun); text-decoration: none; }
@keyframes kn-slide { to { transform: translateX(-50%); } }

/* fotoğraf kartı (eski holo yerine) */
.kn-shot {
    position: relative;
    width: min(320px, 72vw);
    margin: 0 auto;
    transform-style: preserve-3d;
}
.kn-shot__frame {
    position: relative;
    aspect-ratio: 1 / 1.16;
    border-radius: 28px;
    overflow: hidden;
    border: 3px solid #fff;
    background: var(--kn-sand-2);
    box-shadow: var(--kn-shadow-l);
    animation: kn-float 8s ease-in-out infinite;
    transform: translateZ(0);
}
.kn-shot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-shot__frame::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(58,42,27,.4) 0%, transparent 42%),
                linear-gradient(150deg, rgba(46,163,106,.2), transparent 55%);
}
.kn-shot__frame::before {
    content: '';
    position: absolute; left: 0; right: 0; top: -20%; height: 34%;
    z-index: 2;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.42), transparent);
    animation: kn-sweep 4.8s linear infinite;
}
@keyframes kn-sweep { to { top: 120%; } }
.kn-shot__brackets span {
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--kn-jungle);
    filter: drop-shadow(0 2px 4px rgba(28,122,79,.5));
}
.kn-shot__brackets span:nth-child(1) { top: -10px; inset-inline-start: -10px; border-inline-end: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.kn-shot__brackets span:nth-child(2) { top: -10px; inset-inline-end: -10px; border-inline-start: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.kn-shot__brackets span:nth-child(3) { bottom: -10px; inset-inline-start: -10px; border-inline-end: 0; border-top: 0; border-radius: 0 0 0 9px; }
.kn-shot__brackets span:nth-child(4) { bottom: -10px; inset-inline-end: -10px; border-inline-start: 0; border-top: 0; border-radius: 0 0 9px 0; }
.kn-shot__label {
    position: absolute; inset-inline-start: 16px; bottom: 16px; z-index: 4;
    font-family: var(--kn-mono); font-size: .64rem; letter-spacing: .18em;
    text-transform: uppercase; color: #fff6e2;
    padding: 6px 11px; border-radius: 8px;
    background: rgba(47,33,22,.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kn-shot__chip {
    position: absolute;
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px;
    border-radius: 13px;
    border: 1px solid var(--kn-line);
    background: rgba(255, 253, 248, .9);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--kn-shadow-m);
    font-family: var(--kn-mono); font-size: .64rem; letter-spacing: .1em;
    white-space: nowrap; pointer-events: none;
}
.kn-shot__chip b { color: var(--kn-jungle); font-weight: 500; }
.kn-shot__chip i { font-style: normal; color: var(--kn-faint); }
.kn-shot__chip span { color: var(--kn-ember); }
.kn-shot__chip--a { top: 8%; inset-inline-start: -26%; animation: kn-float 7s ease-in-out infinite .3s; }
.kn-shot__chip--b { top: 44%; inset-inline-end: -24%; animation: kn-float 9s ease-in-out infinite .9s; }
.kn-shot__chip--c { bottom: 12%; inset-inline-start: -16%; animation: kn-float 8s ease-in-out infinite 1.4s; }
@media (max-width: 1180px) {
    .kn-shot__chip--a { inset-inline-start: -10%; }
    .kn-shot__chip--b { inset-inline-end: -8%; top: 28%; }
    .kn-shot__chip--c { inset-inline-start: -4%; }
}

/* 404 */
.kn-nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 20px 60px; }
.kn-nf > .kn-wrap { width: 100%; min-width: 0; }
.kn-nf__code {
    font-family: var(--kn-display);
    font-size: clamp(5rem, 24vw, 14rem);
    font-weight: 800; line-height: .82; letter-spacing: -.05em;
    background: linear-gradient(180deg, var(--kn-jungle), var(--kn-sun) 60%, transparent);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kn-nf h1 { margin: 10px 0 12px; font-family: var(--kn-display); font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 800; color: var(--kn-bark); }
.kn-nf p { color: var(--kn-mute); max-width: 52ch; margin: 0 auto 26px; }

/* müzik */
/* dikey mağaza görselleri için galeri */
.kn-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kn-gallery img {
    width: 100%; height: auto;
    border-radius: 16px;
    border: 2px solid #fff;
    box-shadow: var(--kn-shadow-m);
    margin: 0; display: block;
    transition: transform .45s var(--kn-spring), box-shadow .45s;
}
.kn-gallery img:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--kn-shadow-l); }
.kn-gallery img[src$="keyart.jpg"] { grid-column: 1 / -1; }
.kn-music { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(16px, 2.6vw, 26px); }
.kn-music .kn-card__body h3 { display: flex; align-items: center; gap: 10px; }
.kn-music .kn-card__media { aspect-ratio: auto; padding: 18px; min-height: 92px; }
.kn-music iframe { width: 100%; border: 0; border-radius: 12px; display: block; background: #f3ece0; }
.kn-wave { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.kn-wave i {
    width: 5px; border-radius: 3px;
    background: linear-gradient(180deg, var(--kn-jungle), var(--kn-sun));
    animation: kn-eq 1.1s ease-in-out infinite;
}
@keyframes kn-eq { 0%,100% { height: 18%; } 50% { height: 100%; } }
.kn-wave i:nth-child(2){animation-delay:.12s} .kn-wave i:nth-child(3){animation-delay:.24s}
.kn-wave i:nth-child(4){animation-delay:.36s} .kn-wave i:nth-child(5){animation-delay:.48s}
.kn-wave i:nth-child(6){animation-delay:.6s}  .kn-wave i:nth-child(7){animation-delay:.72s}
.kn-wave i:nth-child(8){animation-delay:.84s} .kn-wave i:nth-child(9){animation-delay:.96s}
.kn-wave i:nth-child(10){animation-delay:1.08s}

/* hizmetler */
.kn-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2.2vw, 22px); }
.kn-svc__card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 26px 24px 24px;
    border: 1px solid var(--kn-line);
    border-radius: var(--kn-r);
    background: var(--kn-card);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--kn-shadow-m);
    transform-style: preserve-3d;
    transition: transform .5s var(--kn-ease), box-shadow .45s, border-color .4s;
    overflow: hidden;
}
.kn-svc__card:hover { border-color: transparent; box-shadow: var(--kn-shadow-l); }
.kn-svc__card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(70% 60% at 100% 0%, var(--tint, rgba(239,159,22,.16)), transparent 62%);
    opacity: 0; transition: opacity .45s; pointer-events: none;
}
.kn-svc__card:hover::before { opacity: 1; }
.kn-svc__ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    font-size: 1.35rem;
    margin-bottom: 16px;
    border: 1px solid var(--kn-line);
    background: rgba(255,255,255,.8);
    color: var(--kn-jungle);
    transform: translateZ(40px);
    box-shadow: var(--kn-shadow-s);
    transition: transform .5s var(--kn-spring);
}
.kn-svc__card:hover .kn-svc__ico { transform: translateZ(58px) rotate(-7deg) scale(1.08); }
.kn-svc__card h3 { margin: 0 0 9px; font-family: var(--kn-display); font-size: 1.14rem; font-weight: 700; color: var(--kn-bark); transform: translateZ(24px); }
.kn-svc__card p { margin: 0 0 16px; color: var(--kn-mute); font-size: .91rem; transform: translateZ(14px); }
.kn-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; transform: translateZ(18px); }
.kn-svc__tags span {
    font-family: var(--kn-mono); font-size: .64rem;
    padding: 4px 9px; border-radius: 8px;
    color: var(--kn-bark-2); background: rgba(255,255,255,.75);
    border: 1px solid var(--kn-line);
}
.kn-svc__cta { margin-top: 30px; display: flex; justify-content: center; }

/* uygulama vitrini */
.kn-app {
    position: relative;
    padding: clamp(22px, 4vw, 44px);
    border-radius: var(--kn-r-lg);
    border: 1px solid var(--kn-line);
    background:
        radial-gradient(70% 90% at 88% 8%, rgba(239,159,22,.28), transparent 62%),
        radial-gradient(60% 80% at 6% 96%, rgba(46,163,106,.24), transparent 60%),
        rgba(255, 253, 248, .82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--kn-shadow-l);
    overflow: hidden;
    transform-style: preserve-3d;
}
.kn-app__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 46px); align-items: center; }
@media (max-width: 980px) { .kn-app__grid { grid-template-columns: 1fr; } }
.kn-app h2, .kn-app h3 { font-family: var(--kn-display); font-weight: 800; letter-spacing: -.02em; color: var(--kn-bark); margin: 0 0 12px; }
.kn-app__title { font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.02; }
.kn-app__title span { background: linear-gradient(96deg, var(--kn-jungle), var(--kn-lagoon) 50%, var(--kn-sun)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kn-app__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.kn-app__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kn-app__shots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.kn-app__shots::-webkit-scrollbar { height: 6px; }
.kn-app__shots::-webkit-scrollbar-thumb { background: rgba(58,42,27,.2); border-radius: 4px; }
.kn-app__shots figure { margin: 0; scroll-snap-align: center; }
.kn-app__shots img {
    width: 100%; border-radius: 16px;
    border: 2px solid #fff;
    box-shadow: var(--kn-shadow-m);
    transition: transform .4s var(--kn-spring);
}
.kn-app__shots img:hover { transform: translateY(-6px) scale(1.02); }

/* içerik / blog yazı gövdesi */
.kn-prose { color: var(--kn-mute); font-size: 1rem; line-height: 1.85; }
.kn-prose h1, .kn-prose h2, .kn-prose h3, .kn-prose h4 { font-family: var(--kn-display); color: var(--kn-bark); line-height: 1.25; margin: 1.7em 0 .55em; }
.kn-prose h1 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
.kn-prose h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.kn-prose a { color: var(--kn-jungle); text-decoration: none; border-bottom: 1px solid rgba(28,122,79,.3); }
.kn-prose a:hover { border-color: var(--kn-ember); }
.kn-prose img { max-width: 100%; border-radius: var(--kn-r-sm); border: 1px solid var(--kn-line); }
.kn-prose blockquote { margin: 1.4em 0; padding: 14px 18px; border-inline-start: 3px solid var(--kn-sun); background: rgba(239,159,22,.1); border-radius: 0 var(--kn-r-sm) var(--kn-r-sm) 0; color: var(--kn-bark); }
.kn-prose code { font-family: var(--kn-mono); font-size: .88em; padding: 2px 7px; border-radius: 6px; background: rgba(28,122,79,.1); border: 1px solid rgba(28,122,79,.18); color: var(--kn-jungle); }
.kn-prose pre { padding: 18px; border-radius: var(--kn-r-sm); background: #2f2116; border: 1px solid rgba(58,42,27,.3); overflow-x: auto; }
.kn-prose pre code { background: none; border: 0; padding: 0; color: #fff4dd; }
.kn-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .92rem; }
.kn-prose th, .kn-prose td { padding: 10px 12px; border: 1px solid var(--kn-line); text-align: left; }
.kn-prose th { color: var(--kn-bark); background: var(--kn-sand-2); font-family: var(--kn-display); }

/* --------------------------------------------------------------------------
   19. BLOG KÖPRÜSÜ
   Blog sayfaları kendi değişkenlerini kullanıyor; yeni palete eşliyoruz.
   -------------------------------------------------------------------------- */
:root {
    --primary-color:    #1c7a4f;
    --secondary-color:  #1098a6;
    --accent-color:     #dd4f2c;
    --background-color: #fdf6e9;
    --card-bg:          rgba(255, 255, 255, .72);
    --card-border:      rgba(58, 42, 27, .13);
    --text-color:       #3a2a1b;
    --text-secondary:   #6d5942;
}

.blog-header {
    background: linear-gradient(135deg, rgba(46,163,106,.16), rgba(239,159,22,.14)) !important;
    border-bottom: 1px solid var(--kn-line) !important;
    padding: 58px 0 44px !important;
    margin-bottom: 34px !important;
    text-align: left !important;
}
.blog-header h1 {
    font-family: var(--kn-display) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    color: var(--kn-bark) !important;
}
.blog-nav {
    background: rgba(255, 253, 248, .78) !important;
    border-color: var(--kn-line) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--kn-shadow-m);
}
.nav-links a { color: var(--kn-bark-2) !important; font-family: var(--kn-display); transition: color .3s; }
.nav-links a:hover { color: var(--kn-jungle) !important; }
.search-box { background: rgba(255,255,255,.8) !important; border-color: var(--kn-line) !important; }
.search-box input { color: var(--kn-bark) !important; }

.blog-post, .sidebar {
    background: var(--kn-card) !important;
    border: 1px solid var(--kn-line) !important;
    border-radius: var(--kn-r) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--kn-shadow-s) !important;
    transition: transform .45s var(--kn-ease), box-shadow .4s, border-color .4s !important;
}
.blog-post:hover, .sidebar:hover { border-color: var(--kn-sun) !important; transform: translateY(-5px); box-shadow: var(--kn-shadow-l) !important; }
.post-title { font-family: var(--kn-display) !important; }
.post-title a { color: var(--kn-bark) !important; transition: color .3s; }
.post-title a:hover { color: var(--kn-jungle) !important; }
.post-category { background: rgba(46,163,106,.14) !important; color: var(--kn-jungle) !important; border: 1px solid rgba(28,122,79,.25); }
.post-excerpt { color: var(--kn-mute) !important; }
.read-more { color: var(--kn-jungle) !important; }
.tag { background: rgba(255,255,255,.75) !important; color: var(--kn-mute) !important; border: 1px solid var(--kn-line); }
.tag:hover { color: var(--kn-jungle) !important; border-color: var(--kn-sun); }
.pagination a, .pagination span {
    background: rgba(255,255,255,.75) !important; color: var(--kn-mute) !important;
    border: 1px solid var(--kn-line) !important; border-radius: 10px !important;
}
.pagination .current { background: linear-gradient(96deg, var(--kn-jungle), var(--kn-lagoon)) !important; color: #fff !important; border-color: transparent !important; }
.blog-footer { background: rgba(240,223,194,.5) !important; border-top: 1px solid var(--kn-line) !important; }
.sidebar h3 { font-family: var(--kn-display); color: var(--kn-bark) !important; }
.blog-meta, .meta-item { color: var(--kn-mute) !important; }

/* yazı gövdesi — açık temaya uyarlanır */
body > .container, .article-content {
    background: rgba(255, 253, 248, .8) !important;
    border: 1px solid var(--kn-line) !important;
    border-radius: var(--kn-r) !important;
    color: var(--kn-mute) !important;
    box-shadow: var(--kn-shadow-m) !important;
}
body > .container h1, body > .container h2, body > .container h3,
body > .container h4, body > .container h5,
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5 { color: var(--kn-bark) !important; font-family: var(--kn-display) !important; }
body > .container p, body > .container li, body > .container td,
.article-content p, .article-content li, .article-content dd { color: var(--kn-mute) !important; }
body > .container strong, body > .container b, .article-content strong, .article-content b { color: var(--kn-bark) !important; }
/* metin akışındaki bağlantılar yeşil; buton gibi duranlar kendi rengini korur */
body > .container p a, body > .container li a, body > .container dd a, body > .container h2 a, body > .container h3 a,
.article-content p a, .article-content li a, .article-content dd a { color: var(--kn-jungle) !important; }
body > .container hr, .article-content hr { border-color: var(--kn-line) !important; }
body > .container code, .article-content code {
    background: rgba(28,122,79,.09) !important; color: var(--kn-jungle) !important;
    border: 1px solid rgba(28,122,79,.18) !important; border-radius: 6px; padding: 2px 6px;
}
body > .container pre, .article-content pre {
    background: #2f2116 !important; border: 1px solid rgba(58,42,27,.35) !important;
    border-radius: var(--kn-r-sm); padding: 18px; overflow-x: auto;
}
body > .container pre code, .article-content pre code { background: none !important; border: 0 !important; color: #fff4dd !important; padding: 0; }
body > .container blockquote, .article-content blockquote {
    background: rgba(239,159,22,.1) !important; border-inline-start: 3px solid var(--kn-sun) !important;
    color: var(--kn-bark) !important; border-radius: 0 var(--kn-r-sm) var(--kn-r-sm) 0;
}
body > .container table, .article-content table, .comparison-table, .plugin-table {
    background: #fffdf8 !important;
    border: 1px solid var(--kn-line) !important;
    border-radius: var(--kn-r-sm); box-shadow: none !important;
}
body > .container th, .article-content th, .comparison-table th, .plugin-table th {
    background: var(--kn-sand-2) !important; color: var(--kn-bark) !important;
    border-color: var(--kn-line) !important;
}
body > .container td, .article-content td, .comparison-table td, .plugin-table td {
    border-color: var(--kn-line) !important; color: var(--kn-mute) !important;
}
body > .container tr:hover, .article-content tr:hover { background: rgba(239,159,22,.09) !important; }

/* kutu içi metin rengini kutuya bağla -> kontrast garantisi
   (yazı şablonları koyu tema için parlak renkler kullanıyor; açık temada okunmuyorlar) */
.metric-card, .architecture-diagram, .architecture-layer, .layer, .nav-button,
.article-tags, .flow-step, .feature-card, .checklist-item, .security-checklist,
.threat-item, .timeline, .alert-warning, .alert-success, .alert-danger, .alert-info,
.comparison-grid, .threat-grid, .framework-title, .framework-card, .framework-item,
.decision-cell, .decision-table, .checklist-title, .threat-level, .protection-title,
.pros-cons, .pros, .cons, .code-title, .code-block, .step-title, .step-item,
.feature-item, .benefit-item, .bonus-item, .info-box, .tip-box, .note-box,
body > .container .content, body > .container .post-body, body > .container .post-content {
    color: var(--kn-bark) !important;
    border-radius: var(--kn-r-sm) !important;
}
.metric-card *, .architecture-diagram *, .architecture-layer *, .layer *, .nav-button *,
.article-tags *, .flow-step *, .feature-card *, .checklist-item *, .security-checklist *,
.threat-item *, .timeline *, .alert-warning *, .alert-success *, .alert-danger *,
.alert-info *, .comparison-table *, .plugin-table *,
.framework-title, .framework-card *, .framework-item *, .decision-cell *,
.decision-table *, .checklist-title, .threat-level, .protection-title,
.pros-cons *, .pros *, .cons *, .code-title, .code-block *, .step-title, .step-item *,
.feature-item, .feature-item *, .benefit-item, .benefit-item *, .bonus-item, .bonus-item *,
.info-box *, .tip-box *, .note-box *,
.diagram-title, .box-title, .box-subtitle, .diagram-box, .diagram-layer,
.performance-chart, .performance-chart div, .performance-chart span, .bar, .bar-label, .bar-value,
.framework-card div, .framework-card span, .frameworks div, .frameworks span,
.score-item div, .score-item span, .rating div, .rating span { color: inherit !important; }

/* kod bloğu başlıkları: koyu kutunun içindeyken açık renk */
.code-block, .code-header { background: #1e1e1e !important; }
pre .code-title, pre .code-language, pre .code-header, pre .code-header *,
.code-block .code-title, .code-block .code-language, .code-block .code-header,
.code-block .code-header *, .code-title, .code-language { color: #fff4dd !important; }

/* footer metni */
.blog-footer, .blog-footer p, .blog-footer div, .blog-footer span { color: var(--kn-bark-2) !important; }
.blog-footer a { color: var(--kn-jungle) !important; }

/* --------------------------------------------------------------------------
   20. VIEW TRANSITIONS
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
@keyframes kn-vt-out { to { opacity: 0; transform: scale(.97) translateY(-10px); filter: blur(6px); } }
@keyframes kn-vt-in  { from { opacity: 0; transform: scale(1.03) translateY(14px); filter: blur(8px); } }
::view-transition-old(root) { animation: kn-vt-out .32s var(--kn-ease-io) both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: kn-vt-in .46s var(--kn-ease) .06s both; mix-blend-mode: normal; }
body.kn-arrived main { animation: kn-arrive .5s var(--kn-ease) both; }
@keyframes kn-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   21. DUYARLI
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .kn-core { width: min(260px, 56vw); }
    .kn-gh { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .kn-nav__burger { display: grid; place-items: center; }
    .kn-nav__menu {
        position: absolute;
        top: calc(100% + 10px); inset-inline: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding: 14px;
        border: 1px solid var(--kn-line);
        border-radius: 24px;
        background: rgba(255, 253, 248, .98);
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
        box-shadow: var(--kn-shadow-l);
        opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
        transition: all .32s var(--kn-ease);
    }
    .kn-nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
    .kn-nav__menu > a { padding: 12px 14px; font-size: .95rem; }
    .kn-nav__menu > a::after { display: none; }
    .kn-nav__tools {
        padding-inline-start: 0; margin-inline-start: 0;
        margin-top: 10px; padding-top: 12px;
        border-inline-start: 0; border-top: 1px solid var(--kn-line);
        justify-content: space-between; flex-wrap: wrap;
    }
    .kn-cursor { display: none; }
    .kn-grid { grid-template-columns: 1fr; }
    .kn-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .kn-foot__grid { grid-template-columns: 1fr; }
    .kn-hero { min-height: auto; padding-top: calc(var(--kn-nav-h) + 26px); }
    .kn-scroll-hint { display: none; }
    .kn-lang__menu { inset-inline-end: auto; inset-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   22. HAREKET AZALTMA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .kn-js .kn-drop:not(.is-in) { opacity: 1; pointer-events: auto; }
    .kn-drop.is-in { animation: none; }
    .kn-grain { display: none; }
}