/* =========================================================
   ANASAYFA – KURUMSAL İÇERİK V4  (dönüşümlü beyaz / koyu)
   Bölümler:  1 BEYAZ (hakkımızda) → 2 KOYU (künye)
              → 3 AÇIK GRİ-BEYAZ (uzmanlık) → 4 KOYU (süreç + iletişim)
   Her bölüm kendi tema değişkenlerini (--t-*) taşır; arka plandaki
   mimari hareket (vinç, siluet, küpler, pusula, ışık hatları) her
   bölümün kendi zeminine uygun renkte çizilir.
   ========================================================= */
.kv {
    --kv-neon: #00d9ff;
    --kv-cyan: #25c3fd;
    --kv-ice: #7ae7ff;
    --kv-blue: #0a7fe0;
    --kv-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    background: #fff;
    font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.kv *, .kv *::before, .kv *::after { box-sizing: border-box; }
.kv h2, .kv h3, .kv p, .kv ul, .kv ol, .kv dl, .kv dd, .kv dt, .kv figure { margin: 0; padding: 0; }

/* ---------- BÖLÜM TEMALARI ---------- */
.kv-sec { position: relative; overflow: hidden; padding-block: clamp(72px, 8vw, 130px); color: var(--t-ink); }

.kv-sec--light {
    --t-ink: #0b2a4a; --t-text: #3b4d5e; --t-mute: #667b8c;
    --t-line: rgba(11, 42, 74, .14); --t-grid: rgba(11, 42, 74, .055);
    --t-tag: #0a7fe0; --t-glow: none; --t-deco: #1a8fe0; --t-brk: #0a8fe8;
    --t-paper: #fff; --t-fig: #e6eef4;
    --g-bg: #fff; --g-bd: rgba(11, 42, 74, .22); --g-fg: #0b2a4a;
    background:
        radial-gradient(45% 35% at 92% 8%, rgba(0, 190, 255, .10), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}
.kv-sec--light2 {
    --t-ink: #0b2a4a; --t-text: #3b4d5e; --t-mute: #667b8c;
    --t-line: rgba(11, 42, 74, .14); --t-grid: rgba(11, 42, 74, .055);
    --t-tag: #0a7fe0; --t-glow: none; --t-deco: #1a8fe0; --t-brk: #0a8fe8;
    --t-paper: #fff; --t-fig: #dde8f0;
    --g-bg: #fff; --g-bd: rgba(11, 42, 74, .22); --g-fg: #0b2a4a;
    background:
        radial-gradient(40% 30% at 6% 92%, rgba(0, 190, 255, .09), transparent 70%),
        linear-gradient(180deg, #edf3f8 0%, #e6eef5 100%);
}
.kv-sec--dark {
    --t-ink: #fff; --t-text: #dbe7ee; --t-mute: #8a9aa8;
    --t-line: rgba(255, 255, 255, .12); --t-grid: rgba(255, 255, 255, .045);
    --t-tag: #7ae7ff; --t-glow: 0 0 8px rgba(0, 217, 255, .6); --t-deco: #7ae7ff; --t-brk: #00d9ff;
    --t-paper: #060b11; --t-fig: #111b25;
    --g-bg: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); --g-bd: rgba(255, 255, 255, .28); --g-fg: #fff;
    background:
        radial-gradient(45% 40% at 88% 6%, rgba(0, 190, 255, .09), transparent 70%),
        linear-gradient(180deg, #060b11 0%, #0b131b 55%, #060b11 100%);
}
/* koyu bölümlerin üstünde neon ince çizgi */
.kv-sec--dark::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, rgba(0, 217, 255, 0), var(--kv-neon) 50%, rgba(0, 217, 255, 0)); filter: drop-shadow(0 0 5px rgba(0, 217, 255, .8)); }

/* akan mimari ızgara (her bölümde kendi renginde) */
.kv-sec::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(var(--t-grid) 1px, transparent 1px), linear-gradient(90deg, var(--t-grid) 1px, transparent 1px);
    background-size: 96px 96px;
    animation: kvGrid 50s linear infinite;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
@keyframes kvGrid { to { background-position: 96px 96px, 96px 96px; } }

.kv-wrap { position: relative; z-index: 1; width: min(1240px, 100% - clamp(40px, 8vw, 120px)); margin-inline: auto; }

/* slider altındaki neon ışık çizgisi */
.kv-edge { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, rgba(0, 217, 255, 0), var(--kv-neon) 50%, rgba(0, 217, 255, 0)); filter: drop-shadow(0 0 6px rgba(0, 217, 255, .85)); }

/* =========================================================
   MİMARİ ARKA PLAN HAREKETİ
   ========================================================= */
.kv-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kv-bg > * { position: absolute; }

.kv-level { left: 0; right: 0; top: 0; height: 1px; opacity: 0; background: repeating-linear-gradient(90deg, rgba(0, 217, 255, .65) 0 10px, transparent 10px 22px); filter: drop-shadow(0 0 5px rgba(0, 217, 255, .8)); animation: kvLevel 14s linear infinite; }
@keyframes kvLevel { 0% { top: 4%; opacity: 0; } 8% { opacity: .75; } 92% { opacity: .75; } 100% { top: 96%; opacity: 0; } }

.kv-beam { left: -30%; width: 160%; top: var(--t); height: 1px; background: var(--t-line); transform: rotate(-14deg); opacity: .7; }
.kv-beam::after { content: ""; position: absolute; top: 0; height: 100%; width: 22%; background: linear-gradient(90deg, transparent, var(--kv-neon), transparent); filter: drop-shadow(0 0 6px var(--kv-neon)); animation: kvBeam 9s linear infinite; animation-delay: var(--dl); }
@keyframes kvBeam { from { left: -25%; } to { left: 110%; } }

.kv-compass { left: var(--x); top: var(--y); width: clamp(300px, 34vw, 520px); color: var(--t-ink); opacity: .12; animation: kvSpin 120s linear infinite; }
.kv-sec--dark .kv-compass { opacity: .2; }
@keyframes kvSpin { to { transform: rotate(360deg); } }

.kv-cube { width: var(--s); left: var(--x); top: var(--y); color: var(--t-deco); opacity: .35; animation: kvCube 11s ease-in-out infinite alternate; animation-delay: var(--dl); }
.kv-sec--dark .kv-cube { filter: drop-shadow(0 0 6px rgba(0, 217, 255, .6)); opacity: .3; }
@keyframes kvCube { from { transform: translateY(0) rotate(0); } to { transform: translateY(-30px) rotate(14deg); } }

.kv-crane { right: 1%; top: 3%; width: clamp(170px, 20vw, 320px); color: var(--t-deco); opacity: .32; }
.kv-crane svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; }
.kv-crane-jib { transform-origin: 150px 62px; animation: kvSwing 12s ease-in-out infinite alternate; }
@keyframes kvSwing { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.kv-crane-cable { transform-origin: 60px 70px; animation: kvCable 7s ease-in-out infinite alternate; }
.kv-crane-blk { animation: kvBlk 7s ease-in-out infinite alternate; }
@keyframes kvCable { from { transform: scaleY(.55); } to { transform: scaleY(1.05); } }
@keyframes kvBlk { from { transform: translateY(-45px); } to { transform: translateY(5px); } }

.kv-sky { left: 0; right: 0; bottom: 0; width: 100%; height: clamp(170px, 22vw, 320px); color: rgba(122, 231, 255, .4); }
.kv-bld { transform-box: fill-box; transform-origin: 50% 100%; animation: kvRise 18s ease-in-out infinite; animation-delay: calc(var(--i) * -1.9s); }
.kv-bld > rect:first-child { fill: rgba(122, 231, 255, .035); }
@keyframes kvRise { 0% { transform: scaleY(.1); } 35%, 68% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.kv-win { opacity: .12; animation: kvWin 5s ease-in-out infinite; animation-delay: var(--t); }
@keyframes kvWin { 0%, 100% { opacity: .08; } 50% { opacity: .75; } }

/* ---------- YAZI ---------- */
.kv-tag { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--t-tag); text-shadow: var(--t-glow); }
.kv-tag::before { content: ""; width: 34px; height: 2px; background: var(--kv-cyan); box-shadow: 0 0 8px var(--kv-cyan); }

.kv-h { text-wrap: balance; font-size: clamp(30px, 3.6vw, 52px); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; color: var(--t-ink); }
.kv-h--md { font-size: clamp(28px, 3.4vw, 46px); }
.kv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kv-wi { display: inline-block; }

.kv-lead { text-wrap: pretty; margin-top: 24px; max-width: 52ch; font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--t-text); }

/* ---------- BUTONLAR ---------- */
.kv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.kv-btn { display: inline-flex; align-items: center; padding: 14px 28px 14px 22px; border-radius: 4px; border-left: 6px solid var(--kv-cyan); font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.kv-btn span::after { content: "→"; margin-left: 12px; display: inline-block; transition: transform .35s var(--kv-ease); }
.kv-btn:hover span::after { transform: translateX(5px); }
.kv-btn--solid { background: linear-gradient(90deg, #00cfff 0%, #0077c8 100%); box-shadow: 0 4px 16px rgba(0, 207, 255, .4); }
.kv-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 207, 255, .6); }
.kv-btn--ghost { color: var(--g-fg); border: 1.5px solid var(--g-bd); border-left: 6px solid var(--kv-cyan); background: var(--g-bg); }
.kv-btn--ghost:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(90deg, #1aa7ff, #0a5fb8); border-color: #36c6ff; border-left-color: #78e8ff; }
.kv-btn:focus-visible { outline: 2px solid var(--kv-blue); outline-offset: 3px; }

/* ---------- GÖRSEL ---------- */
.kv-fig { position: relative; overflow: hidden; background: linear-gradient(var(--t-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--t-grid) 1px, transparent 1px) 0 0 / 32px 32px, var(--t-fig); }
.kv-fig-in { position: absolute; inset: 0; transition: transform 2s var(--kv-ease); }
.kv-fig-in img, .kv-card-img img, .kv-duo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-fig-in img[data-kv-par] { position: absolute; left: 0; top: -7%; height: 114%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ---------- 1) 30 YILLIK TECRÜBE ---------- */
.kv-s1 { padding-top: clamp(80px, 9vw, 140px); }
.kv-about { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 100px); align-items: center; }

.kv-big { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); margin-bottom: 32px; }
.kv-big-num { display: flex; align-items: flex-start; line-height: .8; }
.kv-big-num b {
    font-size: clamp(120px, 14vw, 220px); font-weight: 200; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
    color: transparent; -webkit-text-stroke: 1.5px var(--kv-cyan);
    background: linear-gradient(180deg, #0b2a4a 0%, #0a7fe0 62%, #25c3fd 100%);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 8px 20px rgba(0, 150, 255, .28));
}
.kv-big-num span { margin: .12em 0 0 4px; font-size: clamp(40px, 5vw, 76px); font-weight: 200; line-height: 1; color: var(--kv-cyan); }
.kv-big-txt { padding-left: clamp(16px, 2vw, 26px); border-left: 2px solid var(--kv-cyan); }
.kv-big-txt b { display: block; font-size: clamp(22px, 2.4vw, 36px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2; color: var(--t-ink); }
.kv-big-txt small { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--kv-blue); }

/* kolaj */
.kv-collage { position: relative; aspect-ratio: 600 / 660; width: 100%; max-width: 640px; margin-left: auto; color: var(--t-brk); }
.kv-fig--a { position: absolute; right: 8%; top: 5%; width: 66%; height: 82%; border: 1.5px solid var(--t-line); border-left: 6px solid var(--kv-cyan); border-radius: 3px; box-shadow: 0 30px 60px -24px rgba(11, 42, 74, .45), 0 0 40px rgba(0, 190, 255, .12); }
.kv-fig--b { position: absolute; left: 13%; bottom: 3%; width: 36%; height: 33%; border: 8px solid var(--t-paper); border-radius: 3px; outline: 1.5px solid var(--t-line); box-shadow: 0 20px 40px -12px rgba(11, 42, 74, .5); animation: kvFloat 7s ease-in-out infinite; }
@keyframes kvFloat { 50% { transform: translateY(-10px); } }

.kv-bp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--t-deco); pointer-events: none; z-index: 3; opacity: .9; }
.kv-bp-t { fill: var(--t-deco); stroke: none; font-size: 11px; font-weight: 700; letter-spacing: .32em; }
.kv-spin { transform-box: fill-box; transform-origin: center; animation: kvSpin 40s linear infinite; }

.kv-brk {
    position: absolute; right: calc(8% - 14px); top: calc(5% - 14px); width: calc(66% + 28px); height: calc(82% + 28px); z-index: 4; pointer-events: none;
    --c: var(--t-brk);
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / 30px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 0 / 2px 30px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / 30px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / 2px 30px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / 30px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / 2px 30px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / 30px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / 2px 30px no-repeat;
}

.kv-scan { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: linear-gradient(180deg, rgba(0, 217, 255, 0), rgba(0, 217, 255, .2) 85%, rgba(122, 231, 255, .9) 100%); transform: translateY(-100%); animation: kvScan 6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes kvScan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(620px); opacity: 0; } }

.kv-seal { position: absolute; right: -2%; bottom: 7%; z-index: 5; width: clamp(110px, 24%, 160px); aspect-ratio: 1; display: grid; place-items: center; color: var(--kv-ice); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(95, 227, 255, .3), #0a121a 72%); box-shadow: 0 0 10px rgba(0, 217, 255, .6), 0 18px 36px -10px rgba(11, 42, 74, .55), inset 0 0 18px rgba(120, 232, 255, .35); }
.kv-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: kvSpin 22s linear infinite reverse; }
.kv-seal-num { position: relative; font-size: clamp(34px, 4vw, 52px); font-weight: 300; line-height: 1; color: #fff; text-shadow: 0 0 14px var(--kv-neon); }

.kv-bp  { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px); transition: translate .6s var(--kv-ease); }
.kv-fig--b { translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 14px); }
.kv-seal { translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -12px); transition: translate .6s var(--kv-ease); }

/* ---------- 2) KÜNYE (koyu bant) ---------- */
/* Bant: sert tam genişlik blok yerine, açık zemin üzerinde yüzen marka mavisi panel.
   Bölüm zemini beyazdan (üst) açık griye (alt) yumuşakça geçer, kenar çizgisi yok. */
.kv-sec--band {
    --t-ink: #0b2a4a; --t-text: #3b4d5e; --t-mute: #667b8c;
    --t-line: rgba(11, 42, 74, .14); --t-grid: transparent;
    --t-tag: #0a7fe0; --t-glow: none; --t-deco: #1a8fe0; --t-brk: #0a8fe8;
    background: linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
}
.kv-s2 { padding-block: 0; }
.kv-sec--band::before { display: none; }

.kv-panel {
    --t-line: rgba(255, 255, 255, .22); --t-deco: #cfeeff; --t-mute: #bcd6ea;
    position: relative; overflow: hidden; color: #fff;
    padding: clamp(26px, 3.4vw, 48px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .3);
    background:
        radial-gradient(60% 130% at 0% 0%, rgba(0, 217, 255, .38), transparent 62%),
        radial-gradient(50% 110% at 100% 100%, rgba(122, 231, 255, .24), transparent 62%),
        linear-gradient(120deg, #0c3b6e 0%, #0a5fb8 52%, #0a86d8 100%);
    box-shadow: 0 34px 70px -30px rgba(10, 95, 184, .7), 0 0 0 6px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* panelin içinde akan ince mimari ızgara */
.kv-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: kvGrid64 36s linear infinite;
    -webkit-mask-image: radial-gradient(90% 120% at 50% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(90% 120% at 50% 50%, #000 30%, transparent 100%);
}
@keyframes kvGrid64 { to { background-position: 64px 64px, 64px 64px; } }
/* panelin üst kenarında yumuşak ışık hattı */
.kv-panel::after { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.kv-panel .kv-block { position: relative; z-index: 1; }
.kv-panel .kv-compass { color: #fff; opacity: .16; }
.kv-panel .kv-cube { color: #cfeeff; opacity: .4; filter: none; }
.kv-panel .kv-level { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 10px, transparent 10px 22px); }
.kv-panel .kv-cell { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .26); border-left: 5px solid #7ae7ff; background: rgba(255, 255, 255, .1); }
.kv-panel .kv-cell:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 16px 34px -14px rgba(0, 20, 60, .6); }
.kv-panel .kv-cell dt { color: #cfe6f7; }
/* vurgulu hücre (30 yıl): beyaz kart */
.kv-panel .kv-cell--hl { background: #fff; border-color: #fff; border-left-color: #25c3fd; box-shadow: 0 16px 36px -14px rgba(0, 20, 60, .65); }
.kv-panel .kv-cell--hl dd { color: #0b2a4a; }
.kv-panel .kv-cell--hl dd span { color: #0a8fe8; text-shadow: none; }
.kv-panel .kv-cell--hl dt { color: #0a7fe0; }
.kv-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kv-cell { position: relative; display: flex; flex-direction: column-reverse; padding: 26px 24px 24px 26px; border: 1px solid rgba(255, 255, 255, .14); border-left: 5px solid var(--kv-cyan); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .4s var(--kv-ease), box-shadow .4s ease, border-color .4s ease, opacity .9s var(--kv-ease); }
.kv-cell:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .35); box-shadow: 0 14px 34px -14px rgba(0, 217, 255, .45); }
.kv-cell dd { display: flex; align-items: baseline; font-size: clamp(38px, 4vw, 58px); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em; color: #fff; }
.kv-cell dd span { margin-left: 3px; font-size: .5em; color: var(--kv-neon); text-shadow: 0 0 10px rgba(0, 217, 255, .8); }
.kv-cell dt { margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mute); }
.kv-cell--hl { background: linear-gradient(135deg, rgba(0, 217, 255, .16) 0%, rgba(255, 255, 255, .03) 100%); border-color: rgba(122, 231, 255, .5); box-shadow: 0 0 26px rgba(0, 190, 255, .22); }
.kv-cell--hl dt { color: #fff; }

/* ---------- 3) UZMANLIK KARTLARI (açık gri-beyaz) ---------- */
.kv-svcs-head { margin-bottom: clamp(44px, 5vw, 64px); }
.kv-cards { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kv-card { position: relative; aspect-ratio: 3 / 4.1; overflow: hidden; color: #fff; border: 1px solid var(--t-line); border-left: 5px solid var(--kv-cyan); border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 32px 32px, #16222d; outline: none; cursor: default; box-shadow: 0 18px 40px -22px rgba(11, 42, 74, .5); transition: box-shadow .5s ease, transform .5s var(--kv-ease), opacity 1s ease var(--d, 0ms); }
.kv-card-img { position: absolute; inset: 0; }
.kv-card-img img { transition: transform 1.4s var(--kv-ease), filter .6s ease; filter: saturate(.9) brightness(.88); }
.kv-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3, 8, 14, .05) 0%, rgba(3, 8, 14, .35) 45%, rgba(3, 8, 14, .94) 100%); }
.kv-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: var(--kv-neon); box-shadow: 0 0 12px var(--kv-neon); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--kv-ease); }
.kv-card:hover, .kv-card:focus-visible, .kv-card:focus-within { transform: translateY(-6px); box-shadow: 0 28px 50px -20px rgba(0, 150, 255, .55); }
.kv-card:hover .kv-card-img img, .kv-card:focus-visible .kv-card-img img { transform: scale(1.08); filter: saturate(1) brightness(1); }
.kv-card:hover::after, .kv-card:focus-visible::after { transform: scaleX(1); }
.kv-card:focus-visible { outline: 2px solid var(--kv-blue); outline-offset: 3px; }
.kv-card-idx { position: absolute; z-index: 2; top: 18px; right: 20px; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--kv-ice); text-shadow: 0 0 10px rgba(0, 217, 255, .8); }
.kv-card-in { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 24px 24px 26px; }
.kv-card-in h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; }
.kv-card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--kv-ease); }
.kv-card-body p { overflow: hidden; min-height: 0; font-size: 15px; font-weight: 300; line-height: 1.65; color: #dbe7ee; opacity: 0; transition: opacity .5s ease, padding .5s ease; }
.kv-card:hover .kv-card-body, .kv-card:focus-visible .kv-card-body, .kv-card:focus-within .kv-card-body { grid-template-rows: 1fr; }
.kv-card:hover .kv-card-body p, .kv-card:focus-visible .kv-card-body p, .kv-card:focus-within .kv-card-body p { opacity: 1; padding-top: 12px; }

/* ---------- 4) SÜREÇ + PROJELER / İLETİŞİM (koyu) ---------- */
.kv-s4 { padding-bottom: clamp(170px, 19vw, 290px); }   /* alt boşlukta siluet görünür */
.kv-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px; margin-bottom: clamp(70px, 8vw, 110px); }
.kv-steps li { position: relative; padding-top: 34px; }
.kv-steps li::before { content: ""; position: absolute; left: 0; right: -30px; top: 0; height: 1px; background: var(--t-line); }
.kv-steps li:last-child::before { right: 0; }
.kv-steps li::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 217, 255, .35), 0 0 14px 2px var(--kv-neon); }
.kv-num { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: .2em; color: var(--kv-neon); }
.kv-steps h3 { font-size: 20px; font-weight: 400; color: #fff; }
.kv-steps p { margin-top: 8px; max-width: 28ch; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--t-mute); }

.kv-duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 18px; }
.kv-duo-tag { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--kv-ice); text-shadow: 0 0 8px rgba(0, 217, 255, .6); }
.kv-duo-tag::before { content: ""; width: 26px; height: 2px; background: var(--kv-neon); box-shadow: 0 0 8px var(--kv-neon); }

.kv-duo-a { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(320px, 31vw, 420px); padding: clamp(26px, 3vw, 44px); border: 1px solid rgba(255, 255, 255, .16); border-left: 6px solid var(--kv-cyan); border-radius: 4px; color: #fff; text-decoration: none; background: #111b25; box-shadow: 0 0 34px rgba(0, 190, 255, .12); transition: box-shadow .5s ease, transform .5s var(--kv-ease), opacity 1s ease; }
.kv-duo-img { position: absolute; inset: 0; }
.kv-duo-img img { transition: transform 1.6s var(--kv-ease), filter .6s ease; filter: saturate(.85) brightness(.8); }
.kv-duo-a::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(3, 8, 14, .95) 0%, rgba(3, 8, 14, .55) 55%, rgba(3, 8, 14, .25) 100%); }
.kv-duo-a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--kv-neon), rgba(0, 217, 255, 0) 70%); box-shadow: 0 0 10px var(--kv-neon); }
.kv-duo-a h3 { position: relative; z-index: 2; max-width: 20ch; font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; }
.kv-duo-go { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; font-size: 15px; font-weight: 600; }
.kv-duo-go i { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid var(--kv-neon); border-radius: 50%; color: var(--kv-neon); box-shadow: 0 0 14px rgba(0, 217, 255, .45); transition: background .3s ease, color .3s ease, transform .4s var(--kv-ease); }
.kv-duo-go svg { width: 22px; height: 22px; }
.kv-duo-a:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(0, 217, 255, .5); }
.kv-duo-a:hover .kv-duo-img img { transform: scale(1.07); filter: saturate(1) brightness(.95); }
.kv-duo-a:hover .kv-duo-go i { background: var(--kv-neon); color: #00263a; transform: rotate(45deg); }
.kv-duo-a:focus-visible { outline: 2px solid var(--kv-ice); outline-offset: 3px; }

.kv-duo-b { position: relative; padding: clamp(26px, 3vw, 44px); border: 1px solid rgba(255, 255, 255, .16); border-left: 6px solid var(--kv-cyan); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.kv-duo-b h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.kv-duo-b p { margin-top: 12px; max-width: 40ch; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--t-mute); }
.kv-rows { list-style: none; display: grid; gap: 10px; margin-top: 26px; }
.kv-row { display: flex; align-items: center; gap: 14px; padding: 9px 22px 9px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background .3s ease, border-color .3s ease, transform .4s var(--kv-ease); }
.kv-row-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #1aa7ff, #0a7fe0); color: #fff; box-shadow: 0 0 14px rgba(0, 190, 255, .4); }
.kv-row-ico svg { width: 20px; height: 20px; }
.kv-row-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kv-row-txt small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mute); }
.kv-row-txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-row:hover { transform: translateX(6px); border-color: var(--kv-cyan); background: linear-gradient(90deg, rgba(0, 150, 255, .4), rgba(10, 42, 92, .5)); }
.kv-row--go { border-color: rgba(0, 217, 255, .45); }
.kv-row:focus-visible { outline: 2px solid var(--kv-ice); outline-offset: 2px; }

/* =========================================================
   AÇILIŞ ANİMASYONLARI (yalnızca .kv-js)
   ========================================================= */
.kv-js [data-kv="up"] { opacity: 0; transform: translateY(20px); transition: opacity 1s ease var(--d, 0ms), transform 1s var(--kv-ease) var(--d, 0ms); }
.kv-js [data-kv="up"].kv-in { opacity: 1; transform: none; }
.kv-js .kv-card[data-kv="up"].kv-in { transition: opacity 1s ease var(--d, 0ms), transform .5s var(--kv-ease), box-shadow .5s ease; }
.kv-js .kv-duo-a[data-kv="up"].kv-in { transition: opacity 1s ease, transform .5s var(--kv-ease), box-shadow .5s ease; }

.kv-js .kv-wi { transform: translateY(112%); transition: transform 1.1s var(--kv-ease) calc(var(--i, 0) * 70ms); }
.kv-js .kv-in .kv-wi { transform: none; }

.kv-js .kv-fig[data-kv="clip"] .kv-fig-in { clip-path: inset(100% 0 0 0); transform: scale(1.2); transition: clip-path 1.5s var(--kv-ease), transform 2s var(--kv-ease); }
.kv-js .kv-fig[data-kv="clip"].kv-in .kv-fig-in { clip-path: inset(0); transform: none; }
.kv-js .kv-fig--b[data-kv="clip"] .kv-fig-in { transition-delay: .3s; }
.kv-fig:hover .kv-fig-in { transform: scale(1.03); }
.kv-js .kv-fig[data-kv="clip"].kv-in:hover .kv-fig-in { transform: scale(1.03); }

.kv-js .kv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--kv-ease) .3s; }
.kv-js .kv-collage.kv-in .kv-draw { stroke-dashoffset: 0; }
.kv-js .kv-spin.kv-draw { stroke-dasharray: 4 7; stroke-dashoffset: 0; opacity: 0; transition: opacity 1.6s ease .6s; }
.kv-js .kv-collage.kv-in .kv-spin.kv-draw { opacity: 1; }
.kv-js .kv-bp-t { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.kv-js .kv-collage.kv-in .kv-bp-t { opacity: 1; }
.kv-js .kv-brk, .kv-js .kv-seal { opacity: 0; transition: opacity 1.2s ease .9s, translate .6s var(--kv-ease); }
.kv-js .kv-collage.kv-in .kv-brk, .kv-js .kv-collage.kv-in .kv-seal { opacity: 1; }

.kv-js [data-kv="block"] .kv-cell { opacity: 0; transform: translateY(22px); }
.kv-js [data-kv="block"].kv-in .kv-cell { opacity: 1; transform: none; }
.kv-js [data-kv="block"].kv-in .kv-cell:nth-child(2) { transition-delay: .12s; }
.kv-js [data-kv="block"].kv-in .kv-cell:nth-child(3) { transition-delay: .24s; }
.kv-js [data-kv="block"].kv-in .kv-cell:nth-child(4) { transition-delay: .36s; }
.kv-js [data-kv="block"].kv-in .kv-cell:hover { transition-delay: 0s; transform: translateY(-4px); }

.kv-js [data-kv="steps"] li { opacity: 0; transform: translateY(14px); transition: opacity .8s ease calc(var(--s) * .5s), transform .9s var(--kv-ease) calc(var(--s) * .5s); }
.kv-js [data-kv="steps"] li::before { transform: scaleX(0); transform-origin: left; background: var(--kv-cyan); opacity: .7; transition: transform .8s var(--kv-ease) calc(var(--s) * .5s + .2s); }
.kv-js [data-kv="steps"].kv-in li { opacity: 1; transform: none; }
.kv-js [data-kv="steps"].kv-in li::before { transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) { .kv-crane { opacity: .2; } }

@media (max-width: 1000px) {
    .kv-about { grid-template-columns: 1fr; gap: 64px; }
    .kv-collage { max-width: 520px; margin-inline: auto; }

    /* metin bloğu ortalanır: sağda boşluk kalmaz */
    .kv-about-text { text-align: center; }
    .kv-about-text .kv-tag { justify-content: center; }
    .kv-about-text .kv-tag::after { content: ""; width: 34px; height: 2px; background: var(--kv-cyan); box-shadow: 0 0 8px var(--kv-cyan); }
    .kv-about-text .kv-big { justify-content: center; text-align: left; }
    .kv-about-text .kv-lead { margin-inline: auto; }
    .kv-about-text .kv-actions { justify-content: center; }

    .kv-block { grid-template-columns: 1fr 1fr; }
    .kv-cards { grid-template-columns: 1fr 1fr; }
    .kv-steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
    .kv-steps li:nth-child(2)::before { right: 0; }
    .kv-duo { grid-template-columns: 1fr; }
    .kv-bp, .kv-fig--b, .kv-seal { translate: none; }
    .kv-crane, .kv-compass { display: none; }
}

@media (hover: none) {
    .kv-card-body { grid-template-rows: 1fr; }
    .kv-card-body p { opacity: 1; padding-top: 10px; }
}

@media (max-width: 600px) {
    .kv-wrap { width: calc(100% - 32px); }
    .kv-sec { padding-block: 84px; }
    .kv-s1 { padding-top: 76px; }
    .kv-s2 { padding-block: 0; }
    .kv-panel { border-radius: 18px; padding: 20px 14px; box-shadow: 0 24px 50px -26px rgba(10, 95, 184, .7), 0 0 0 4px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .4); }
    .kv-s4 { padding-bottom: 200px; }

    .kv-lead { font-size: 17px; }
    .kv-actions .kv-btn { flex: 1 1 100%; justify-content: center; }

    /* 30 yıl: ortada, yan yana, ekranı dolduracak şekilde */
    .kv-big { flex-direction: row; justify-content: center; align-items: center; gap: 16px; margin-bottom: 30px; }
    .kv-big-num b { font-size: clamp(96px, 30vw, 132px); }
    .kv-big-num span { font-size: clamp(34px, 10vw, 46px); }
    .kv-big-txt { padding-left: 14px; }
    .kv-big-txt b { font-size: clamp(18px, 5.4vw, 24px); letter-spacing: .16em; }
    .kv-big-txt small { font-size: 12.5px; margin-top: 8px; }

    .kv-svcs-head { margin-bottom: 40px; }
    .kv-cards { grid-template-columns: 1fr; gap: 16px; }
    .kv-card { aspect-ratio: 4 / 3.2; }
    .kv-block { gap: 10px; }
    .kv-cell { padding: 20px 14px 18px 18px; }
    .kv-cube { display: none; }
    .kv-steps { grid-template-columns: 1fr; row-gap: 0; margin-bottom: 72px; }
    .kv-steps li { padding: 0 0 36px 34px; }
    .kv-steps li::before { left: 5px; right: auto; top: 6px; bottom: -6px; width: 1px; height: auto; }
    .kv-steps li:nth-child(2)::before { right: auto; }
    .kv-steps li:last-child::before { display: none; }
    .kv-steps li::after { left: 0; top: 2px; }
    .kv-js [data-kv="steps"] li::before { transform: scaleY(0); transform-origin: top; }
    .kv-js [data-kv="steps"].kv-in li::before { transform: none; }
    .kv-seal { right: 0; }
    .kv-row-txt b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .kv *, .kv *::before, .kv *::after { transition-duration: .01ms !important; animation: none !important; }
}