/* =================================================================
   CODEVIV V2 — TEMİZ, TEK VERSİYON
   Beyaz tema, Inter font, minimal editorial (redesign.html baz)
   ================================================================= */

:root {
    --ink:       #171b22;
    --muted:     #626a75;
    --line:      #e4e6e9;
    --paper:     #fff;
    --soft:      #f7f7f5;
    --accent:    #2459e0;
    --dark:      #183ca1;
    --max:       1240px;
    /* compat aliases */
    --accent-blue:#2459e0;
    --border:    #e4e6e9;
    --text:      #171b22;
    --text-dim:  #9399a1;
    --text-mid:  #626a75;
    --bg:        #fff;
    --card-bg:   #f7f7f5;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 100px }
body { margin: 0; background: #fff; color: var(--ink);
       font-family: Inter, "Helvetica Neue", Arial, sans-serif;
       line-height: 1.55; -webkit-font-smoothing: antialiased }
a    { color: inherit; text-decoration: none }
button { font: inherit }
img  { max-width: 100%; display: block }
ul   { list-style: none; margin: 0; padding: 0 }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap      { width: min(var(--max), calc(100% - 64px)); margin-inline: auto }
.container { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; padding: 0 }
.row { display: flex; flex-wrap: wrap; margin: 0 -14px }
[class^="col-"] { padding: 0 14px }
.col-lg-3  { width: 25% }   .col-lg-4  { width: 33.333% }
.col-lg-5  { width: 41.666% }.col-lg-6  { width: 50% }
.col-lg-7  { width: 58.333% }.col-lg-8  { width: 66.666% }
.col-lg-9  { width: 75% }   .col-lg-12 { width: 100% }
.col-md-6  { width: 50% }
.align-items-center { align-items: center }
.pt-70 { padding-top: 70px } .pb-70 { padding-bottom: 70px }
.pt-100{ padding-top:100px } .pb-100{ padding-bottom:100px }
.ptb-100 { padding: 100px 0 }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.cv-topbar {
    border-bottom: 1px solid var(--line);
    font-size: 11px; letter-spacing: .04em; color: #737982;
}
.cv-topbar .wrap {
    display: flex; justify-content: space-between;
    padding: 9px 0; gap: 20px;
}
.cv-topbar a:hover { color: var(--accent) }

/* ── HEADER ─────────────────────────────────────────────────── */
.cv-header {
    position: sticky; top: 0; z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.cv-header-inner {
    height: 78px;
    display: flex; align-items: center; gap: 24px;
}
/* Logo sola itilir, nav + buton sağa */
.cv-logo-brand {
    margin-right: auto;
    display: flex; align-items: center;
    text-decoration: none; flex-shrink: 0;
}
/* Logo resmi — header */
.cv-logo-img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}
/* Fallback: metin logolu eski yapı için brand-mark hâlâ tanımlı */
.brand-mark {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--accent); color: #fff;
    font-size: 17px; font-weight: 800;
    transform: rotate(-4deg); flex-shrink: 0;
}
.brand-mark span { transform: rotate(4deg); display: block }

/* ── NAV ────────────────────────────────────────────────────── */
.cv-nav { display: flex; align-items: center }
.cv-nav ul { display: flex; align-items: center; gap: 24px; font-size: 12px; font-weight: 650; color: #424852 }
.cv-nav ul li { position: relative }
.cv-nav ul li a {
    display: block;
    padding: 28px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.cv-nav ul li a:hover,
.cv-nav ul li.active > a { color: var(--accent); border-color: var(--accent) }

.cv-dropdown {
    display: none;
    position: absolute; top: 100%; left: 0;
    min-width: 200px;
    background: #fff; border: 1px solid var(--line);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 100;
}
.cv-dropdown li a { display: block; padding: 9px 16px; font-size: 12px; color: #424852; border: none }
.cv-dropdown li a:hover,
.cv-dropdown li.active a { color: var(--accent); background: var(--soft) }
.has-sub:hover .cv-dropdown { display: block }

.cv-contact-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 15px;
    border: 1px solid var(--ink);
    font-size: 12px; font-weight: 750;
    color: var(--ink); white-space: nowrap;
    transition: .2s;
}
.cv-contact-btn:hover { background: var(--ink); color: #fff }

.cv-hamburger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ink);
    line-height: 0;
}
.cv-hamburger-icon {
    width: 24px; height: 24px;
    display: block;
}
.cv-hamburger:hover { color: var(--accent) }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary, .button-primary {
    display: inline-flex; align-items: center; gap: 20px;
    background: var(--accent); color: #fff;
    padding: 14px 18px; font-size: 12px; font-weight: 750;
    border: none; cursor: pointer; font-family: inherit;
    transition: background .2s;
}
.btn-primary:hover, .button-primary:hover { background: var(--dark); color: #fff }

.btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 1px solid var(--ink);
    color: var(--ink); padding: 14px 18px;
    font-size: 12px; font-weight: 750; cursor: pointer;
    transition: .2s;
}
.btn-outline:hover { background: var(--ink); color: #fff }

.text-link {
    font-size: 12px; font-weight: 750;
    border-bottom: 1px solid #aeb4bd; padding: 8px 0;
    background: none; color: inherit; display: inline-block;
}
.text-link:hover { color: var(--accent); border-color: var(--accent) }

/* ── PAGE TITLE ─────────────────────────────────────────────── */
.page-title-area { padding: 80px 0 40px; border-bottom: 1px solid var(--line) }
.page-title-content h1 {
    font-size: clamp(22px, 3.2vw, 36px); font-weight: 760;
    letter-spacing: -.05em; line-height: 1.1; margin: 0 0 14px;
}
.page-title-content ul { display: flex; flex-wrap: wrap }
.page-title-content ul li { color: var(--muted); font-size: 12px; display: flex; align-items: center }
.page-title-content ul li + li::before { content: "/"; margin: 0 8px; color: var(--muted) }
.page-title-content ul li a { color: var(--accent) }

/* ── SECTION HELPERS ────────────────────────────────────────── */
.section       { padding: 100px 0 }
.section.soft  { background: var(--soft) }
.section-index {
    font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--accent); font-weight: 800;
}
.section-head {
    display: grid; grid-template-columns: 1fr .72fr;
    gap: 60px; align-items: end; margin-bottom: 42px;
}
.section h2, .section-head h2 {
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.1; letter-spacing: -.05em;
    margin: 10px 0 0; font-weight: 750; max-width: 760px;
}
.section-head p { font-size: 14px; color: var(--muted); margin: 0; max-width: 450px; line-height: 1.8 }
.section-title { text-align: center; max-width: 760px; margin: 0 auto 42px }
.section-title h2 { font-size: clamp(22px, 2.8vw, 34px); font-weight: 750; letter-spacing: -.05em; margin: 0 0 14px }
.section-title p { font-size: 14px; color: var(--muted); line-height: 1.8 }
.section-label, .sub-title {
    font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--accent); font-weight: 800;
    display: block; margin-bottom: 8px;
}

/* ── HERO ───────────────────────────────────────────────────── */
.cv-hero { padding: 78px 0 60px }
.hero-topline {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: .15em;
    text-transform: uppercase; font-weight: 800; color: var(--accent);
}
.hero-topline::before { content: ""; width: 34px; height: 2px; background: var(--accent); flex-shrink: 0 }
.cv-hero-grid {
    display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr);
    gap: 65px; align-items: center; margin-top: 22px;
}
.cv-hero-grid h1 {
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.02; letter-spacing: -.065em;
    font-weight: 760; margin: 0;
}
.cv-hero-grid h1 em { font-style: normal; color: var(--accent) }
.hero-copy { font-size: 16px; color: var(--muted); margin: 27px 0 0; line-height: 1.85; max-width: 560px }
.hero-actions, .cv-hero-btns {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px;
}

/* Hero Art */
.hero-art {
    min-height: 420px; background: var(--soft);
    position: relative; overflow: hidden;
    padding: 25px; border: 1px solid var(--line);
}
.art-label {
    display: flex; justify-content: space-between;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .12em; font-weight: 800; color: #777e87;
}
.art-label b { color: var(--accent) }
.art-main {
    position: absolute; inset: 72px 25px 25px;
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr .85fr; gap: 10px;
}
.art-tile {
    padding: 18px; background: #fff; border: 1px solid #e0e2e4;
    display: flex; flex-direction: column; justify-content: space-between;
}
.art-tile.dark  { background: #202630; color: #fff; border-color: #202630 }
.art-tile.blue  { background: var(--accent); color: #fff; border-color: var(--accent) }
.tile-kicker    { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; opacity: .7 }
.tile-title     { font-size: clamp(16px, 2vw, 24px); font-weight: 760; line-height: 1.1; letter-spacing: -.05em }
.tile-foot      { font-size: 10px; display: flex; justify-content: space-between; gap: 8px; opacity: .78 }
.code-lines     { display: grid; gap: 8px; margin-top: 12px }
.code-lines i   { display: block; height: 4px; background: #e6e8eb; width: 80%; font-style: normal }
.code-lines i:nth-child(2) { width: 54%; background: #8ea8ff }
.code-lines i:nth-child(3) { width: 68% }
.code-lines i:nth-child(4) { width: 41% }
.tile-number    { font-size: 38px; font-weight: 800; letter-spacing: -.08em; line-height: 1 }
.tile-number small { font-size: 12px; letter-spacing: 0; font-weight: 600 }

/* ── INTRO STRIP ────────────────────────────────────────────── */
.intro-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.intro-grid  { display: grid; grid-template-columns: 1fr 2.2fr; gap: 50px; padding: 27px 0 }
.intro-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #777e87 }
.intro-grid p { font-size: 14px; margin: 0; color: #4d535c }

/* ── SERVICE LIST ───────────────────────────────────────────── */
.service-list { border-top: 1px solid #d9dce0 }
.service-row,
.cv-service-row {
    display: grid;
    grid-template-columns: 70px minmax(200px,.85fr) minmax(250px,1.25fr) 40px;
    align-items: center; gap: 25px;
    padding: 23px 0; border-bottom: 1px solid #d9dce0;
    transition: padding .2s; color: inherit;
    text-decoration: none;
}
.service-row:hover, .cv-service-row:hover { padding-inline: 8px }
.service-no, .cv-service-num { font-size: 11px; color: #9399a1 }
.service-name, .cv-service-body h3 { font-size: 22px; font-weight: 720; letter-spacing: -.04em; margin: 0 }
.cv-service-body h3 a { color: var(--ink) }
.cv-service-body h3 a:hover { color: var(--accent) }
.service-desc, .cv-service-body p { font-size: 13px; color: var(--muted); margin: 4px 0 0 }
.service-arrow, .cv-service-arrow { font-size: 22px; color: #9298a0; text-align: right }
.service-row:hover .service-arrow,
.cv-service-row:hover .cv-service-arrow { color: var(--accent) }

/* ── TECH BAND (açık panel) ─────────────────────────────────── */
.tech-band {
    background: var(--soft);
    color: var(--ink);
    padding: 78px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.tech-band .section-index { color: var(--accent) }
.tech-band .section-head h2 { color: var(--ink) }
.tech-band .section-head p  { color: var(--muted) }

.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top:  1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-top: 32px;
    background: #fff;
}
.tech-cell {
    padding: 24px 22px;
    min-height: 140px;
    border-right:  1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    display: block;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
a.tech-cell:hover { background: #f5f7ff; border-color: #8da6f4; cursor: pointer }
a.tech-cell:hover strong { color: var(--accent) }
.tech-cell small {
    display: block; color: var(--accent);
    font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: 12px; font-weight: 700;
}
.tech-cell strong {
    display: block; font-size: 15px; font-weight: 700;
    letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px;
}
.tech-cell p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.65 }

/* ── PRODUCTS ───────────────────────────────────────────────── */
.product-grid, .cv-products-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.product-card, .cv-prod-card {
    border: 1px solid var(--line);
    padding: 25px; min-height: 280px;
    display: flex; flex-direction: column;
    background: #fff;
    transition: border-color .2s, transform .2s;
    text-decoration: none; color: inherit;
}
.product-card:hover, .cv-prod-card:hover { border-color: #8da6f4; transform: translateY(-3px) }
.product-meta {
    display: flex; justify-content: space-between;
    font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: #777e87;
}
.product-card h3, .cv-prod-card h3, .product-card h2, .cv-prod-card h2 {
    font-size: 24px; line-height: 1.05; letter-spacing: -.05em; margin: 0 0 12px; font-weight: 750;
}
.product-card p, .cv-prod-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.8; flex-grow: 1 }
.product-bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 24px; font-size: 11px; font-weight: 750;
}
.product-bottom span:last-child { font-size: 18px; color: var(--accent) }

/* ── SERVER PANEL ───────────────────────────────────────────── */
.server-panel {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid #d8dce1; background: var(--soft);
}
.server-copy {
    padding: clamp(30px, 5vw, 60px);
}
.server-copy h2 {
    font-size: clamp(24px, 3vw, 38px); letter-spacing: -.05em;
    line-height: 1.1; margin: 15px 0 20px; font-weight: 750;
}
.server-copy p { font-size: 14px; color: var(--muted); line-height: 1.85; max-width: 490px }
.server-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 25px }
.server-tags span {
    padding: 8px 10px; border: 1px solid #d9dce0;
    font-size: 10px; font-weight: 750; background: #fff; color: var(--ink);
}
.server-side {
    background: #202630; color: #fff;
    padding: clamp(26px, 4vw, 46px);
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 360px;
}
.server-side-top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #b9c0ca;
}
.server-status { width: 7px; height: 7px; background: #8be1b4; border-radius: 50%; display: inline-block; margin-right: 7px }
.server-specs  { margin-top: 40px }
.server-spec {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 15px 0; border-bottom: 1px solid #454b55; font-size: 13px;
}
.server-spec span { color: #b9c0ca }
.server-spec strong { text-align: right; font-weight: 650; color: #fff }
.server-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 18px; font-size: 12px; font-weight: 750 }

/* ── PROCESS / APPROACH ─────────────────────────────────────── */
.process-grid, .cv-approach-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line); margin-top: 40px;
}
.process, .cv-approach-step { padding: 24px 22px 0 0 }
.process .num, .cv-approach-step-num, .cv-approach-step-sub {
    font-size: 11px; color: var(--accent); font-weight: 800; display: block;
}
.process h3, .cv-approach-step h3 { font-size: 18px; letter-spacing: -.03em; margin: 20px 0 9px; font-weight: 720 }
.process p, .cv-approach-step p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0; max-width: 240px }

/* ── BLOG / INSIGHTS ────────────────────────────────────────── */
.insight-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px }
.insight-feature {
    background: #eeefec; min-height: 280px; padding: 32px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-decoration: none; color: inherit;
}
.insight-feature h3 {
    font-size: clamp(18px, 2.2vw, 26px); line-height: 1.15;
    letter-spacing: -.04em; max-width: 500px; margin: 18px 0;
}
.insight-feature p { font-size: 13px; color: var(--muted) }
.insight-list { border-top: 1px solid var(--line) }
.insight-item {
    display: block; padding: 18px 0; border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit;
}
.insight-item small { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; display: block; margin-bottom: 4px }
.insight-item h3 { font-size: 17px; line-height: 1.3; margin: 0; letter-spacing: -.03em }
.insight-item:hover h3 { color: var(--accent) }

/* ── CONTACT BAND (CTA) ─────────────────────────────────────── */
.contact-band { background: var(--accent); color: #fff; padding: 64px 0 }
.contact-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px }
.contact-band .section-index { color: #d5dfff }
.contact-band h2 {
    font-size: clamp(24px, 3.2vw, 42px); letter-spacing: -.06em;
    line-height: 1.05; margin: 14px 0 0; max-width: 700px; font-weight: 750;
}
.contact-band p { font-size: 13px; color: #e0e7ff; max-width: 500px; margin: 14px 0 0 }
.contact-button {
    flex-shrink: 0; background: #fff; color: var(--ink);
    padding: 16px 19px; display: inline-flex; align-items: center;
    gap: 24px; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.contact-button:hover { background: #e9edff }

/* ── ABOUT / KURUMSAL ───────────────────────────────────────── */
.cv-about-section { padding: 80px 0 }
.cv-about-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center }
.cv-about-visual-card { background: var(--soft); border: 1px solid var(--line); padding: 36px }
.cv-about-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px }
.cv-stat-box {
    border: 1px solid var(--line); padding: 20px 12px;
    text-align: center; background: #fff;
}
.cv-stat-box i { font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 8px }
.cv-stat-box strong { font-size: 1.5rem; font-weight: 800; color: var(--ink); display: block }
.cv-stat-box small { font-size: 11px; color: var(--muted) }
.cv-about-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid #d9dfe9; padding: 10px 16px;
    font-size: 11px; font-weight: 700; color: var(--accent); background: #fff;
}
.cv-about-text h2 { font-size: clamp(20px, 2.5vw, 30px); font-weight: 760; letter-spacing: -.04em; line-height: 1.15; margin: 0 0 16px }
.cv-about-text p  { font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 22px }
.cv-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px }
.cv-feat-item { display: flex; align-items: center; gap: 9px; font-size: 13px }
.cv-feat-item i { color: var(--accent); font-size: 14px; flex-shrink: 0 }

/* ── DETAIL PAGE ────────────────────────────────────────────── */
.cv-detail-section { padding: 80px 0 }
.cv-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 50px; align-items: start }
.cv-content-body { font-size: 15px; color: #4d535c; line-height: 1.85 }
.cv-content-body h1,.cv-content-body h2,.cv-content-body h3,.cv-content-body h4 { color: var(--ink); font-weight: 720; letter-spacing: -.04em; margin: 28px 0 12px }
.cv-content-body h2 { font-size: clamp(20px, 3vw, 30px) }
.cv-content-body h3 { font-size: clamp(17px, 2.5vw, 22px) }
.cv-content-body p { margin-bottom: 16px }
.cv-content-body ul,.cv-content-body ol { padding-left: 20px; margin-bottom: 16px }
.cv-content-body li { margin-bottom: 8px }
.cv-content-body img { border: 1px solid var(--line); margin: 20px 0; max-width: 100% }
.cv-content-body a  { color: var(--accent) }
.cv-content-body strong { color: var(--ink) }
.cv-keywords-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line) }
.cv-keywords-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--ink); margin-bottom: 14px }
.cv-tag-wrap { display: flex; flex-wrap: wrap; gap: 8px }
.cv-tag, .tag-card {
    border: 1px solid #d9dce0; padding: 7px 14px;
    font-size: 11px; font-weight: 650; color: var(--ink);
    background: #fff; cursor: default; display: inline-block;
    transition: border-color .2s, color .2s;
}
.cv-tag:hover, .tag-card:hover { border-color: var(--accent); color: var(--accent) }
.tech-tags-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }

/* Sidebar */
.cv-sidebar { display: flex; flex-direction: column; gap: 20px }
.cv-sidebar-box { border: 1px solid var(--line); padding: 24px; background: #fff }
.cv-sidebar-box h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--ink); margin-bottom: 18px }
.cv-sidebar-box ul li { margin-bottom: 0 }
.cv-sidebar-box ul li a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; font-size: 13px; color: var(--muted);
    border-bottom: 1px solid var(--line); transition: color .2s;
}
.cv-sidebar-box ul li a:hover,
.cv-sidebar-box ul li.active a { color: var(--accent) }
.cv-sidebar-cta { background: var(--soft); border: 1px solid var(--line); padding: 24px; text-align: center }
.cv-sidebar-cta h4  { font-size: 16px; font-weight: 720; letter-spacing: -.03em; margin-bottom: 8px }
.cv-sidebar-cta p   { font-size: 12px; color: var(--muted); margin-bottom: 16px }
.cv-sidebar-cta .btn-primary { justify-content: center; width: 100% }

/* ── CONTACT FORM ───────────────────────────────────────────── */
.cv-contact-section { padding: 80px 0 }
.cv-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start }
.cv-contact-form-wrap { border: 1px solid var(--line); padding: 36px; background: #fff }
.cv-contact-form-header { margin-bottom: 24px }
.cv-contact-form-header h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 750; letter-spacing: -.05em; margin-bottom: 8px }
.cv-contact-form-header p  { font-size: 13px; color: var(--muted) }
.cv-form { display: flex; flex-direction: column }
.cv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.cv-form-group { margin-bottom: 14px }
.cv-form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin-bottom: 6px }
.form-control {
    width: 100%; background: #fff; border: 1px solid var(--line);
    color: var(--ink); padding: 11px 14px; font-size: 13px;
    font-family: inherit; outline: none; transition: border-color .2s;
    border-radius: 0;
}
.form-control:focus { border-color: var(--accent) }
.form-control::placeholder { color: #aeb4bd }
textarea.form-control { resize: vertical; min-height: 120px }
.cv-form-msg { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px }
.cv-form-msg.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d }
.cv-form-msg.error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626 }

/* İletişim bilgi kartları — tümü eşit boyut ikon */
.cv-info-cards { display: flex; flex-direction: column; gap: 12px }
.cv-info-card {
    border: 1px solid var(--line); padding: 18px 20px;
    display: flex; align-items: flex-start; gap: 16px;
    background: #fff; transition: border-color .2s;
}
.cv-info-card:hover { border-color: #8da6f4 }
.cv-info-icon {
    width: 42px; height: 42px; min-width: 42px;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff;
    flex-shrink: 0;
}
/* Tüm info ikonları aynı SVG boyutunda — eşit boyut ve kalınlık */
.cv-info-icon i { font-size: 18px; color: #fff; line-height: 1 }
.cv-info-card h4 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); margin: 0 0 4px }
.cv-info-card p,
.cv-info-card a { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 }
.cv-info-card a:hover { color: var(--accent) }

/* ── AI SUNUCU SPEC KARTLARI ────────────────────────────────── */
.ai-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px }
.ai-spec-card {
    border: 1px solid var(--line); padding: 28px;
    background: #fff;                     /* beyaz, gri değil */
    display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.ai-spec-card:hover { border-color: #8da6f4; transform: translateY(-2px) }
.ai-spec-featured {
    border-color: #8da6f4;
    background: #f5f7ff;                  /* featured: hafif mavi-beyaz */
}
.ai-spec-badge {
    display: inline-block; padding: 4px 12px;
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
    background: #eef1ff; border: 1px solid #d9dfe9; margin-bottom: 14px;
}
.ai-spec-badge.highlight { background: var(--accent); color: #fff; border-color: var(--accent) }
.ai-spec-card h3    { font-size: 18px; font-weight: 720; letter-spacing: -.03em; margin: 0 0 8px; color: var(--ink) }
.ai-spec-sub        { font-size: 12px; color: var(--muted) }
.ai-spec-list       { list-style: none; padding: 0; margin: 16px 0 24px; flex-grow: 1 }
.ai-spec-list li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 0; border-bottom: 1px solid var(--line);
    font-size: 13px; color: var(--ink);
}
.ai-spec-list li:last-child { border-bottom: none }
.ai-spec-list li span:first-child { color: var(--accent); font-weight: 800; flex-shrink: 0 }
.ai-specs-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px }

/* AI why grid */
.ai-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 8px;
}
.ai-why-card {
    background: #fff;
    border: 1px solid var(--line);
    padding: 28px 24px;
    transition: border-color .2s, transform .2s;
}
.ai-why-card:hover { border-color: #8da6f4; transform: translateY(-2px) }
.ai-why-card h3 { font-size: 15px; font-weight: 720; letter-spacing: -.03em; margin: 0 0 8px; color: var(--ink) }
.ai-why-card p  { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 }

/* AI faq */
.ai-faq-item { border: 1px solid var(--line); margin-bottom: 6px; background: #fff }
.ai-faq-item:hover, .ai-faq-item.open { border-color: #8da6f4 }
.ai-faq-q {
    width: 100%; background: none; border: none;
    padding: 16px 20px; text-align: left;
    font-family: inherit; font-size: 14px; font-weight: 650;
    color: var(--ink); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ai-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease }
.ai-faq-item.open .ai-faq-a { max-height: 600px }
.ai-faq-a p { padding: 0 20px 16px; font-size: 13px; color: var(--muted); line-height: 1.8 }

/* ── FAQ PAGE ───────────────────────────────────────────────── */
.faq-section { padding: 80px 0 }
.faq-intro   { text-align: center; max-width: 700px; margin: 0 auto 48px }
.faq-intro h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 750; letter-spacing: -.05em; margin-bottom: 12px }
.faq-intro p  { font-size: 14px; color: var(--muted); line-height: 1.75 }
.faq-intro a  { color: var(--accent); font-weight: 600 }
.faq-intro a:hover { text-decoration: underline }
.faq-group    { margin-bottom: 44px }
.faq-group-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .12em; color: var(--accent); margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.faq-item { border: 1px solid var(--line); margin-bottom: 6px; background: #fff; transition: border-color .2s }
.faq-item:hover, .faq-item.open { border-color: #8da6f4 }
.faq-q {
    width: 100%; background: none; border: none;
    padding: 16px 20px; text-align: left;
    font-family: inherit; font-size: 14px; font-weight: 650;
    color: var(--ink); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q i { color: var(--accent); transition: transform .3s; flex-shrink: 0 }
.faq-item.open .faq-q i { transform: rotate(45deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease }
.faq-item.open .faq-a { max-height: 800px }
.faq-a-inner { padding: 0 20px 16px; font-size: 13px; color: var(--muted); line-height: 1.8 }
.faq-a-inner a { color: var(--accent) }
.faq-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px }
.faq-tags span { background: var(--soft); color: var(--accent); padding: 3px 10px; font-size: 11px; border: 1px solid #d9dce0 }
.faq-cta { background: var(--soft); border: 1px solid var(--line); padding: 40px; text-align: center; margin-top: 48px }
.faq-cta h2 { font-size: clamp(18px, 3vw, 26px); font-weight: 720; letter-spacing: -.04em; margin-bottom: 10px }
.faq-cta p { font-size: 13px; color: var(--muted); margin-bottom: 20px }
.faq-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }

/* ── FOOTER ─────────────────────────────────────────────────── */
.main-footer { padding: 48px 0 0; background: #fff; border-top: 1px solid var(--line) }
.footer-glow-line { display: none }
.footer-container {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 36px; padding: 0 32px 48px;
    max-width: var(--max); margin: 0 auto;
}
.footer-logo {
    display: flex; align-items: center;
    margin-bottom: 14px; text-decoration: none;
}
/* Logo resmi — footer */
.footer-logo-img {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}
.footer-motto { font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 280px }
.footer-column h4 {
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    margin: 0 0 16px; font-weight: 800; color: var(--ink);
}
.footer-column h4::after { display: none }
.footer-column ul li a { display: block; font-size: 12px; color: #606771; margin: 10px 0; transition: color .2s }
.footer-column ul li a:hover { color: var(--accent) }
.contact-item { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start }
.contact-item .icon { font-size: 14px; flex-shrink: 0; color: var(--accent) }
.contact-item p, .contact-item a { font-size: 12px; color: #606771; line-height: 1.5; margin: 0 }
.contact-item a:hover { color: var(--accent) }
.footer-bottom {
    border-top: 1px solid var(--line); padding: 20px 32px;
    max-width: var(--max); margin: 0 auto;
}
.bottom-content {
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 12px;
}
.bottom-content p { color: #7d838b; font-size: 10px; margin: 0 }
.legal-links { display: flex; gap: 20px }
.legal-links a { color: #7d838b; font-size: 10px; transition: color .2s }
.legal-links a:hover { color: var(--ink) }

/* ── GO TOP ─────────────────────────────────────────────────── */
.go-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 40px; height: 40px;
    background: var(--accent); color: #fff;
    border: none; font-size: 1rem; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: transform .2s; z-index: 999;
}
.go-top.visible { display: flex }
.go-top:hover { transform: translateY(-2px) }

/* ── COMPAT ALIASES ─────────────────────────────────────────── */
.cv-services-grid { border-top: 1px solid #d9dce0 }
.cv-blog-section  { padding: 80px 0 }
.cv-services-section { padding: 80px 0 }

/* ── YARDIMCI SINIFLAR (inline style yerine) ────────────────── */
.arrow-lg      { font-size: 20px }
.mt-30         { margin-top: 30px }
.mt-60         { margin-top: 60px }
.btn-block     { display: flex; width: 100%; justify-content: center; text-align: center }

/* Server panel alt CTA */
.server-cta-wrap { margin-top: 30px }
.server-cta-link { color: #fff; font-size: 12px; font-weight: 750 }

/* İletişim formu */
.cv-recaptcha   { margin-bottom: 20px }
.cv-form-submit { width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 13px; padding: 15px }

/* AI kullanım alanları — sadece numara + metin satırı */
.service-row.is-info   { grid-template-columns: 50px 1fr; cursor: default }
.service-list.is-narrow { max-width: 900px }

/* AI spec kartı CTA + not */
.ai-faq-plus   { font-size: 20px; color: var(--accent); flex-shrink: 0 }
.ai-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center }

/* Contact-band içinde ikinci (şeffaf) buton */
.contact-button-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3) }
.contact-button-ghost:hover { background: rgba(255,255,255,.18) }

/* Hero art — ikinci tile başlığına küçük üst boşluk */
.tile-mt { margin-top: 12px }

/* ── SUNUM/LINK SAYFASI ──────────────────────────────────────── */
.single-news { border: 1px solid var(--line); background: #fff; overflow: hidden; transition: border-color .2s, transform .2s }
.single-news:hover { border-color: #8da6f4; transform: translateY(-3px) }
.blog-img { display: block; overflow: hidden }
.blog-img img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover }
.news-content-wrap { padding: 20px }
.news-content-wrap h3 { font-size: 18px; font-weight: 720; letter-spacing: -.03em; margin: 0; color: var(--ink) }
.news-content-wrap a:hover h3 { color: var(--accent) }
.cv-cta-section { padding: 60px 0 }
.cv-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; border: 1px solid var(--line); background: var(--soft); padding: 40px }
.cv-cta-text h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 750; letter-spacing: -.05em; margin: 0 0 6px }
.cv-cta-text p  { font-size: 14px; color: var(--muted); margin: 0 }

/* ── 404 SAYFASI ─────────────────────────────────────────────── */
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 100px 5% 60px }
.error-inner { max-width: 600px }
.error-code { font-size: 8rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), rgba(36,89,224,.3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px }
.error-title { font-size: 1.8rem; font-weight: 700; color: var(--ink); margin-bottom: 16px }
.error-desc { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: 40px }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.error-links { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--line) }
.error-links p { color: var(--muted); font-size: .88rem; margin-bottom: 16px }
.error-links-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.error-link-item { background: var(--soft); border: 1px solid var(--line); padding: 8px 16px; color: var(--muted); font-size: .85rem; transition: all .3s; display: flex; align-items: center; gap: 6px }
.error-link-item:hover { border-color: var(--accent); color: var(--accent) }
.error-link-item i { font-size: .9rem }

/* ── SİTE HARİTASI ──────────────────────────────────────────── */
.sitemap-section { padding: 60px 0 40px }
.sitemap-group { margin-bottom: 50px }
.sitemap-group-title { font-size: 1.1rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px }
.sitemap-group-title i { font-size: 1.3rem }
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.sitemap-item { background: #fff; border: 1px solid var(--line); padding: 16px 20px; display: flex; align-items: center; gap: 12px; transition: all .3s ease; color: var(--muted); font-size: .9rem }
.sitemap-item:hover { border-color: var(--accent); color: var(--accent); background: #f5f7ff; transform: translateX(4px) }
.sitemap-item i { color: var(--accent); flex-shrink: 0; font-size: 1rem }
.sitemap-item span { flex: 1 }
.sitemap-item .arrow { color: var(--text-dim); font-size: .8rem }
.sitemap-item:hover .arrow { color: var(--accent) }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .cv-nav ul { gap: 16px }
    .cv-nav ul li a { font-size: 11px }
    .section-head { grid-template-columns: 1fr; gap: 18px }
    .cv-hero-grid { gap: 40px }
    .hero-art { min-height: 380px }
    .tech-grid { grid-template-columns: repeat(2, 1fr) }
    .product-grid, .cv-products-grid { grid-template-columns: repeat(2, 1fr) }
    .ai-specs-grid { grid-template-columns: repeat(2, 1fr) }
    .ai-why-grid   { grid-template-columns: repeat(2, 1fr) }
    .server-panel { grid-template-columns: 1fr }
    .process-grid, .cv-approach-grid { grid-template-columns: repeat(2, 1fr) }
    .insight-grid { grid-template-columns: 1fr }
    .footer-container { grid-template-columns: 1fr 1fr; gap: 28px }
    .cv-about-grid { grid-template-columns: 1fr }
    .cv-detail-grid { grid-template-columns: 1fr }
    .cv-contact-grid { grid-template-columns: 1fr }
    .col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9 { width: 100% }
}

/* ── MOBİL MENÜ ─────────────────────────────────────────────── */
/* body lock — drawer açıkken arka plan kaymasın */
body.nav-open { overflow: hidden }

@media (max-width: 760px) {
    .wrap, .container { width: min(var(--max), calc(100% - 36px)) }

    /* Header'ı overlay'in üzerine taşı.
       .cv-header (position:sticky + z-index) bir stacking context oluşturur;
       drawer onun içinde kaldığı için overlay (root'ta) header'ı örter ve
       menü linkleri tıklanmaz hale gelir. Header z-index'i overlay'i geçince
       drawer linkleri tekrar tıklanabilir olur. */
    .cv-header { z-index: 2000 }

    .cv-contact-btn { display: none }
    .cv-hamburger   { display: block }

    /* Overlay */
    .cv-nav-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.45); z-index: 1998;
    }
    .cv-nav-overlay.active { display: block }

    /* Drawer — her zaman render edilir, kapalıyken ekrandan kaydırılır */
    .cv-nav {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 0; left: 0;
        width: 280px; height: 100vh;
        background: #fff;
        border-right: 1px solid #e4e6e9;
        padding: 80px 20px 40px;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0,0,0,.15);
        z-index: 1999;
        transform: translateX(-105%);
        transition: transform .28s ease;
    }
    .cv-nav.open { transform: translateX(0) }
    .cv-nav ul {
        display: flex !important; flex-direction: column;
        gap: 0; width: 100%; padding: 0; margin: 0;
    }
    .cv-nav ul li { width: 100%; position: static }
    .cv-nav ul li a {
        display: block !important;
        padding: 14px 10px;
        border-bottom: 1px solid #e4e6e9;
        font-size: 15px; font-weight: 600;
        color: #171b22; white-space: normal;
    }
    .cv-nav ul li a:hover,
    .cv-nav ul li.active > a { color: #2459e0 }
    .cv-nav ul li.active > a::after { display: none }
    /* Alt menü */
    .cv-nav .cv-dropdown {
        display: none; position: static;
        box-shadow: none; border: none;
        background: #f7f7f5; padding: 4px 0 4px 14px;
    }
    .cv-nav .has-sub.sub-open .cv-dropdown { display: block }
    /* masaüstü dropdown hover'ı mobilde iptal */
    .cv-nav .has-sub:hover .cv-dropdown { display: none }

    /* diğer mobil kurallar */
    .cv-header-inner { height: 68px }
    .cv-hero { padding: 56px 0 40px }
    .cv-hero-grid { grid-template-columns: 1fr; gap: 38px; margin-top: 20px }
    .cv-hero-grid h1 { font-size: clamp(30px, 10vw, 50px) }
    .hero-copy { font-size: 14px }
    .hero-art  { min-height: 360px }
    .art-main  { inset: 65px 14px 14px; gap: 8px }
    .art-tile  { padding: 13px }
    .tile-number { font-size: 30px }
    .intro-grid  { grid-template-columns: 1fr; gap: 12px; padding: 22px 0 }
    .section { padding: 70px 0 }
    .section h2, .section-head h2 { font-size: clamp(20px, 7vw, 34px) }
    .service-row, .cv-service-row { grid-template-columns: 30px 1fr 24px; gap: 12px; padding: 20px 0 }
    .service-name, .cv-service-body h3 { font-size: 18px }
    .service-desc, .cv-service-body p { grid-column: 2; font-size: 12px }
    .service-arrow, .cv-service-arrow { grid-column: 3; grid-row: 1 }
    .tech-band { padding: 60px 0 }
    .tech-grid { grid-template-columns: 1fr 1fr }
    .tech-cell { padding: 16px; min-height: auto }
    .product-grid, .cv-products-grid { grid-template-columns: 1fr }
    .product-card, .cv-prod-card { min-height: auto; padding: 22px }
    .server-panel { grid-template-columns: 1fr }
    .server-copy { padding: 28px 22px }
    .server-side { min-height: auto; padding: 26px 22px }
    .process-grid, .cv-approach-grid { grid-template-columns: 1fr; row-gap: 26px }
    .process, .cv-approach-step { padding-right: 0 }
    .insight-grid { grid-template-columns: 1fr }
    .contact-grid { flex-direction: column; align-items: flex-start }
    .contact-band { padding: 50px 0 }
    .footer-container { grid-template-columns: 1fr 1fr; padding-left: 18px; padding-right: 18px }
    .footer-bottom { padding-left: 18px; padding-right: 18px }
    .bottom-content { flex-direction: column; align-items: flex-start; gap: 8px }
    .cv-contact-grid { grid-template-columns: 1fr }
    .cv-form-row { grid-template-columns: 1fr }
    .cv-about-stats-row { grid-template-columns: repeat(3, 1fr) }
    .cv-about-features { grid-template-columns: 1fr }
    .ai-specs-grid { grid-template-columns: 1fr }
    .ai-why-grid   { grid-template-columns: 1fr }
    .col-md-6 { width: 100% }
}

@media (max-width: 390px) {
    .wrap, .container { width: calc(100% - 28px) }
    .hero-art  { min-height: 320px; padding: 14px }
    .art-main  { inset: 56px 10px 10px }
    .tile-title { font-size: 15px }
    .tile-number { font-size: 26px }
    .tech-grid { grid-template-columns: 1fr 1fr }
    .tech-cell { padding: 12px }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *, *::before, *::after { transition: none !important; animation: none !important }
}