:root {
    --blue: #006A99;
    --blue-dark: #004E73;
    --navy: #002F46;

    --text: #173746;
    --muted: #738891;

    --border: #E5EDF0;

    --bg: #F7FAFB;
    --soft-blue: #EEF7FA;

    --body: "Poppins", sans-serif;
    --heading: "Manrope", sans-serif;

    --container: 1180px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background: #fff;
    color: var(--text);

    font-family: var(--body);
    font-size: 15px;

    -webkit-font-smoothing:
        antialiased;
}


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


button,
input,
textarea {
    font: inherit;
}


img {
    display: block;
    max-width: 100%;
}


h1,
h2,
h3,
.logo,
.nav,
.nav-cta,
.btn,
.section-tag,
.feature-link {
    font-family: var(--heading);
}


.container {
    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;
}


/* HEADER */

.header {
    position: sticky;

    top: 0;

    z-index: 100;

    border-bottom:
        1px solid
        rgba(0,47,70,.06);

    background:
        rgba(255,255,255,.92);

    backdrop-filter:
        blur(18px);
}


.header-wrap {
    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 38px;
}


.logo {
    display: flex;
    align-items: center;

    gap: 11px;

    font-weight: 800;

    color: var(--navy);
}


.logo-mark {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: var(--blue);
    color: #fff;

    font-weight: 800;
}


.nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    margin-left: auto;

    color: #657A84;

    font-size: 13px;
    font-weight: 700;
}


.nav a:hover {
    color: var(--blue);
}


.nav-cta {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    padding: 0 17px;

    border-radius: 999px;

    background: var(--navy);

    color: #fff;

    font-size: 12px;
    font-weight: 700;
}


/* HERO */

.hero {
    overflow: hidden;

    padding:
        92px
        0
        0;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(0,106,153,.10),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #FBFDFE 55%,
            #F3F9FB 100%
        );
}


.hero-inner {
    text-align: center;
}


.hero-copy {
    max-width: 840px;

    margin-inline: auto;
}


.hero-eyebrow {
    width: fit-content;

    margin:
        0 auto
        20px;

    padding:
        7px 11px;

    border:
        1px solid
        #DDECEF;

    border-radius: 999px;

    background:
        rgba(255,255,255,.82);

    color: var(--blue);

    font-family: var(--heading);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .03em;
}


.hero h1 {
    margin:
        0
        auto
        22px;

    max-width: 850px;

    color: #092F41;

    font-size:
        clamp(
            54px,
            5.6vw,
            82px
        );

    line-height: .99;

    letter-spacing: -.058em;

    font-weight: 800;
}


.hero-copy > p {
    max-width: 690px;

    margin:
        0 auto
        29px;

    color: #607883;

    font-size: 16px;

    line-height: 1.75;
}


.hero-buttons {
    display: flex;
    justify-content: center;

    gap: 11px;
}


.btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding:
        0
        18px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}


.btn-dark {
    background: var(--navy);
    color: #fff;
}


.btn-dark span {
    opacity: .75;
}


.btn-light {
    border: 1px solid #DDE7EB;

    background: #fff;

    color: #173746;
}


.hero-mini-proof {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 27px;

    color: #84949B;

    font-size: 11px;
}


.hero-mini-proof span::before {
    content: "✓";

    margin-right: 6px;

    color: var(--blue);
}


/* PRODUCT */

.product-stage {
    position: relative;

    max-width: 1010px;

    margin:
        66px auto
        -55px;
}


.browser {
    overflow: hidden;

    border:
        1px solid
        rgba(0,47,70,.10);

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 35px 90px
        rgba(0,47,70,.13);
}


.browser-header {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding:
        0
        16px;

    border-bottom:
        1px solid #EDF2F4;

    background: #FAFCFD;
}


.browser-dots {
    display: flex;
    gap: 5px;
}


.browser-dots i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #C7D4D9;
}


.browser-address {
    width: 300px;

    margin-inline: auto;

    padding:
        5px
        12px;

    border:
        1px solid #E7EEF1;

    border-radius: 7px;

    background: #fff;

    color: #9AABB2;

    font-size: 9px;
}


.dashboard {
    display: grid;

    grid-template-columns:
        66px 1fr;

    text-align: left;

    min-height: 560px;
}


.dash-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    padding-top: 23px;

    border-right:
        1px solid #EDF2F4;

    background: #FCFDFE;
}


.dash-brand {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border-radius: 9px;

    background: var(--blue);

    color: #fff;

    font-family: var(--heading);
    font-weight: 800;
}


.dash-menu {
    width: 26px;
    height: 26px;

    border-radius: 8px;

    background: #EFF4F6;
}


.dash-menu.active {
    background: #E2F2F7;
}


.dash-main {
    padding: 28px;
}


.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.dash-top small {
    color: #93A3AA;

    font-size: 9px;

    font-weight: 600;
}


.dash-top h3 {
    margin: 4px 0 0;

    color: var(--navy);

    font-size: 19px;
}


.period {
    padding:
        6px
        9px;

    border:
        1px solid #E4ECEF;

    border-radius: 7px;

    color: #7C9099;

    font-size: 9px;
}


.kpi-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;

    margin-top: 25px;
}


.kpi {
    padding: 17px;

    border:
        1px solid #E8EFF2;

    border-radius: 13px;

    background: #fff;
}


.kpi span {
    display: block;

    color: #80939B;

    font-size: 9px;
}


.kpi strong {
    display: block;

    margin:
        8px 0 4px;

    color: var(--navy);

    font-family: var(--heading);

    font-size: 24px;
}


.kpi small {
    color: #93A1A7;

    font-size: 8px;
}


.kpi .up {
    color: #16956A;
}


.dashboard-grid {
    display: grid;

    grid-template-columns:
        1.65fr 1fr;

    gap: 13px;

    margin-top: 13px;
}


.chart-card,
.lead-card {
    padding: 18px;

    border:
        1px solid #E8EFF2;

    border-radius: 14px;

    background: #fff;
}


.card-heading {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}


.card-heading strong {
    display: block;

    color: var(--navy);

    font-family: var(--heading);

    font-size: 11px;
}


.card-heading small,
.card-heading > span {
    color: #98A7AD;

    font-size: 8px;
}


.real-chart {
    position: relative;

    height: 220px;

    margin-top: 16px;
}


.real-chart svg {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;
}


.real-chart .line {
    fill: none;

    stroke: var(--blue);

    stroke-width: 4;

    stroke-linecap: round;
}


.real-chart .area {
    fill: url(#areaGradient);
}


.chart-grid-lines {
    position: absolute;

    inset: 0;

    display: grid;

    grid-template-rows:
        repeat(4,1fr);
}


.chart-grid-lines i {
    border-bottom:
        1px solid #EEF3F5;
}


.chart-legend {
    display: flex;

    gap: 17px;

    color: #84959C;

    font-size: 8px;
}


.chart-legend span {
    display: flex;
    align-items: center;

    gap: 5px;
}


.dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;
}


.google {
    background: var(--blue);
}


.seo {
    background: #70B7D0;
}


.social {
    background: #B4D6E2;
}


.lead-list {
    display: grid;

    gap: 9px;

    margin-top: 18px;
}


.lead {
    display: grid;

    grid-template-columns:
        32px 1fr auto;

    align-items: center;

    gap: 9px;

    padding:
        10px 0;

    border-bottom:
        1px solid #EFF3F5;
}


.avatar {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #EAF5F8;

    color: var(--blue);

    font-size: 8px;
    font-weight: 700;
}


.lead strong {
    display: block;

    color: var(--navy);

    font-size: 9px;
}


.lead small {
    color: #99A7AD;

    font-size: 7px;
}


.lead b {
    padding:
        4px
        6px;

    border-radius: 999px;

    background: #F1F7F9;

    color: #6F858E;

    font-size: 7px;

    font-weight: 600;
}


.channel-row {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 10px;

    margin-top: 13px;
}


.channel-row div {
    padding:
        12px 13px;

    border-radius: 10px;

    background: #F8FAFB;
}


.channel-row span {
    display: block;

    color: #8A9AA1;

    font-size: 8px;
}


.channel-row strong {
    display: block;

    margin-top: 3px;

    color: var(--navy);

    font-family: var(--heading);

    font-size: 12px;
}


.float-card {
    position: absolute;

    z-index: 5;

    width: 145px;

    padding: 14px;

    border:
        1px solid #E3ECEF;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 18px 40px
        rgba(0,47,70,.11);

    text-align: left;
}


.float-card span,
.float-card small {
    display: block;

    color: #87989F;

    font-size: 8px;
}


.float-card strong {
    display: block;

    margin:
        5px 0 2px;

    color: var(--navy);

    font-family: var(--heading);

    font-size: 21px;
}


.float-card-left {
    left: -46px;
    top: 72px;
}


.float-card-right {
    right: -42px;
    top: 144px;
}


/* SECTIONS */

.section {
    padding:
        120px 0;
}


.section-head {
    max-width: 680px;

    margin-bottom: 52px;
}


.section-head.centered {
    margin-inline: auto;

    text-align: center;
}


.section-tag {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--blue);

    font-size: 11px;
    font-weight: 800;
}


.section-head h2,
.system-copy h2,
.about h2,
.contact h2 {
    margin:
        0 0 17px;

    color: var(--navy);

    font-size:
        clamp(
            36px,
            4vw,
            54px
        );

    line-height: 1.06;

    letter-spacing: -.045em;

    font-weight: 800;
}


.section-head p,
.system-copy p,
.about p {
    margin: 0;

    color: #6E838C;

    line-height: 1.75;
}


/* FEATURES */

.services {
    padding-top: 175px;
}


.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}


.feature {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border:
        1px solid var(--border);

    border-radius: 22px;

    background: #fff;
}


.feature-copy > span {
    color: #A4B2B8;

    font-family: var(--heading);

    font-size: 10px;

    font-weight: 700;
}


.feature h3 {
    margin:
        16px 0 10px;

    color: var(--navy);

    font-size: 19px;
}


.feature p {
    min-height: 68px;

    margin: 0;

    color: #6B818A;

    font-size: 13px;

    line-height: 1.7;
}


.feature-ui {
    position: relative;

    min-height: 225px;

    margin:
        27px -4px
        20px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #F4F9FB,
            #EAF4F7
        );
}


.feature-link {
    width: fit-content;

    margin-top: auto;

    color: var(--blue);

    font-size: 11px;
    font-weight: 800;
}


/* WEB UI */

.mini-browser {
    position: absolute;

    width: 84%;

    left: 8%;
    top: 30px;

    overflow: hidden;

    border:
        1px solid #D8E7EC;

    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 18px 35px
        rgba(0,47,70,.09);
}


.mini-top {
    height: 27px;

    display: flex;
    align-items: center;

    gap: 4px;

    padding:
        0 9px;

    border-bottom:
        1px solid #EEF3F5;
}


.mini-top i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #CDD9DE;
}


.mini-site {
    padding: 20px;
}


.mini-site > span {
    display: block;

    width: 50px;
    height: 5px;

    background: #A7D2E1;
}


.mini-site > strong {
    display: block;

    width: 72%;
    height: 14px;

    margin-top: 13px;

    border-radius: 4px;

    background: var(--navy);
}


.mini-site > p {
    width: 86%;
    height: 7px;

    margin:
        10px 0;

    border-radius: 999px;

    background: #DDE8EC;
}


.mini-site > button {
    width: 58px;
    height: 22px;

    margin-top: 5px;

    border: 0;

    border-radius: 999px;

    background: var(--blue);
}


.mini-cards {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 21px;
}


.mini-cards i {
    height: 45px;

    border-radius: 7px;

    background: #F0F5F7;
}


/* ECOM */

.product-row {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 10px;

    padding:
        24px
        24px
        0;
}


.product {
    padding: 10px;

    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 10px 25px
        rgba(0,47,70,.06);
}


.product i {
    display: block;

    height: 72px;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #E9F3F7,
            #D5E9F0
        );
}


.product span,
.product b {
    display: block;

    margin-top: 8px;

    border-radius: 999px;
}


.product span {
    width: 70%;
    height: 6px;

    background: #D3E0E5;
}


.product b {
    width: 40%;
    height: 8px;

    background: var(--navy);
}


.cart-ui {
    position: absolute;

    right: 17px;
    bottom: 17px;

    width: 118px;

    padding: 12px;

    border:
        1px solid #DFE9ED;

    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 14px 32px
        rgba(0,47,70,.10);
}


.cart-ui span {
    display: block;

    color: #8C9BA2;

    font-size: 7px;
}


.cart-ui strong {
    display: block;

    margin:
        4px 0 8px;

    color: var(--navy);

    font-size: 10px;
}


.cart-ui button {
    width: 100%;
    height: 24px;

    border: 0;

    border-radius: 6px;

    background: var(--blue);

    color: #fff;

    font-size: 7px;
}


/* ADS */

.ads-ui {
    padding: 25px;
}


.search-box {
    padding:
        10px 13px;

    border:
        1px solid #DEE8EC;

    border-radius: 999px;

    background: #fff;

    color: #8899A0;

    font-size: 8px;
}


.ad-result {
    margin-top: 14px;

    padding: 14px;

    border-radius: 11px;

    background: #fff;

    box-shadow:
        0 12px 28px
        rgba(0,47,70,.06);
}


.ad-result small {
    display: block;

    color: #899AA1;

    font-size: 7px;
}


.ad-result strong {
    display: block;

    margin-top: 7px;

    color: var(--blue);

    font-family: var(--heading);

    font-size: 12px;
}


.ad-result span {
    display: block;

    margin-top: 5px;

    color: #82949C;

    font-size: 7px;
}


.ads-metrics {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    margin-top: 15px;
}


.ads-metrics i {
    height: 52px;

    border-radius: 9px;

    background: #fff;
}


/* SEO */

.seo-ui {
    padding: 22px;
}


.ranking {
    display: grid;

    grid-template-columns:
        24px 1fr;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    padding: 9px;

    border-radius: 9px;

    background: #fff;
}


.ranking > span {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #EAF5F8;

    color: var(--blue);

    font-size: 8px;
}


.ranking strong,
.ranking i {
    display: block;

    border-radius: 999px;
}


.ranking strong {
    width: 58%;
    height: 6px;

    background: #668490;
}


.ranking i {
    width: 82%;
    height: 4px;

    margin-top: 6px;

    background: #D9E6EA;
}


.seo-chart {
    height: 90px;

    margin-top: 10px;
}


.seo-chart svg {
    width: 100%;
    height: 100%;
}


.seo-chart path {
    fill: none;

    stroke: var(--blue);

    stroke-width: 4;

    stroke-linecap: round;
}


/* META */

.meta-ui {
    padding: 24px;
}


.social-post {
    width: 65%;

    overflow: hidden;

    border-radius: 12px;

    background: #fff;

    box-shadow:
        0 14px 35px
        rgba(0,47,70,.08);
}


.social-head {
    display: flex;

    gap: 8px;

    padding: 10px;
}


.social-head i {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #D6E7ED;
}


.social-head span {
    width: 45px;
    height: 5px;

    margin-top: 6px;

    border-radius: 999px;

    background: #C8D8DE;
}


.social-image {
    height: 100px;

    background:
        linear-gradient(
            135deg,
            #DDEDF2,
            #BCDDE8
        );
}


.social-actions {
    display: flex;

    gap: 6px;

    padding: 9px;
}


.social-actions i {
    width: 14px;
    height: 14px;

    border-radius: 4px;

    background: #E0EAEE;
}


.lead-pill {
    position: absolute;

    right: 18px;
    bottom: 32px;

    padding:
        9px
        12px;

    border:
        1px solid #DDE9ED;

    border-radius: 999px;

    background: #fff;

    color: #237E9E;

    box-shadow:
        0 13px 30px
        rgba(0,47,70,.09);

    font-size: 8px;
}


/* SOCIAL */

.social-ui {
    padding: 24px;
}


.calendar {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 7px;

    padding: 12px;

    border-radius: 11px;

    background: #fff;
}


.calendar i {
    height: 28px;

    border-radius: 6px;

    background: #EFF4F6;
}


.calendar i.active {
    background: #B7DDE9;
}


.content-preview {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 12px;
}


.content-preview i {
    height: 60px;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #DCECF1,
            #C9E1E9
        );
}


/* SYSTEM */

.system-section {
    background: var(--bg);
}


.system-layout {
    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    align-items: center;

    gap: 80px;
}


.system-steps {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;
}


.step {
    padding: 22px;

    border:
        1px solid #E1EAED;

    border-radius: 16px;

    background: #fff;
}


.step span {
    color: #9AAAB0;

    font-family: var(--heading);

    font-size: 9px;
}


.step strong {
    display: block;

    margin-top: 25px;

    color: var(--navy);

    font-family: var(--heading);

    font-size: 15px;
}


.step p {
    margin:
        7px 0 0;

    color: #7D9098;

    font-size: 11px;
}


/* DEMO */

.demo-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}


.demo-card {
    overflow: hidden;

    border:
        1px solid #E1EAED;

    border-radius: 18px;

    background: #fff;
}


.demo-screen {
    min-height: 245px;

    padding: 18px;

    background: #F4F8FA;
}


.demo-screen img {
    width: 100%;
    height: 245px;

    object-fit: cover;

    border-radius: 9px;
}


.demo-placeholder {
    height: 220px;

    padding: 22px;

    border-radius: 10px;

    background: #fff;
}


.demo-nav {
    width: 65%;
    height: 7px;

    background: #D8E5EA;
}


.demo-heading {
    width: 72%;
    height: 14px;

    margin-top: 38px;

    background: var(--navy);
}


.demo-line {
    width: 88%;
    height: 5px;

    margin-top: 13px;

    background: #DBE7EB;
}


.demo-line.small {
    width: 60%;
}


.demo-panels {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;

    margin-top: 27px;
}


.demo-panels i {
    height: 47px;

    background: #EEF4F6;
}


.demo-info {
    padding: 20px;
}


.demo-info > span {
    color: var(--blue);

    font-size: 8px;

    font-weight: 600;
}


.demo-info h3 {
    margin:
        7px 0 16px;

    color: var(--navy);

    font-size: 16px;
}


.demo-info a {
    color: #6B838D;

    font-size: 10px;
}


.demo-empty {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #E2EBEE;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #F6FAFB,
            #EEF6F8
        );
}


.empty-window {
    position: absolute;

    width: 200px;
    height: 145px;

    padding: 16px;

    border:
        1px solid #DBE8EC;

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 18px 40px
        rgba(0,47,70,.08);
}


.empty-window i {
    display: block;

    height: 7px;

    margin-bottom: 10px;

    border-radius: 999px;

    background: #D9E7EB;
}


.empty-window.big {
    left: 15%;
    transform: rotate(-5deg);
}


.empty-window.middle {
    left: 32%;
    top: 65px;

    transform: scale(1.12);

    z-index: 3;
}


.empty-window.small {
    right: 13%;

    transform: rotate(6deg);
}


.demo-empty-copy {
    position: relative;

    z-index: 5;

    width: 260px;

    margin-left: 52%;

    padding: 18px;

    border-radius: 13px;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(10px);
}


.demo-empty-copy strong {
    display: block;

    color: var(--navy);

    font-family: var(--heading);
}


.demo-empty-copy span {
    display: block;

    margin-top: 6px;

    color: #80929A;

    font-size: 10px;
}


/* REFERENCES */

.references {
    background: #FBFDFE;
}


.logo-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 12px;
}


.reference {
    min-height: 105px;

    display: grid;
    place-items: center;

    padding: 20px;

    border:
        1px solid #E5EDF0;

    border-radius: 13px;

    background: #fff;
}


.reference img {
    max-width: 130px;
    max-height: 50px;

    object-fit: contain;
}


.reference strong {
    color: #83949B;

    font-size: 12px;
}


.logo-empty {
    padding: 35px;

    border:
        1px dashed #D5E2E7;

    border-radius: 16px;

    color: #899AA1;

    text-align: center;
}


/* ABOUT */

.about-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;
}


.about-text {
    display: grid;

    gap: 18px;
}


/* CONTACT */

.contact {
    padding:
        105px 0;

    background: var(--navy);

    color: #fff;
}


.contact-layout {
    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    align-items: center;

    gap: 80px;
}


.contact-label {
    color: #92C9DC;

    font-family: var(--heading);

    font-size: 10px;
    font-weight: 800;
}


.contact h2 {
    color: #fff;

    margin-top: 15px;
}


.contact-copy p {
    max-width: 440px;

    color: rgba(255,255,255,.62);

    line-height: 1.7;
}


.contact-form {
    padding: 31px;

    border-radius: 20px;

    background: #fff;

    color: var(--text);
}


.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 15px;
}


.contact-form label span {
    display: block;

    margin-bottom: 6px;

    color: #6F838C;

    font-size: 9px;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    padding:
        11px
        12px;

    border:
        1px solid #DCE7EB;

    border-radius: 8px;

    outline: none;

    background: #FAFCFD;
}


.message-field {
    display: block;

    margin-top: 15px;
}


.form-button {
    width: 100%;
    min-height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 17px;

    border: 0;

    border-radius: 999px;

    background: var(--blue);

    color: #fff;

    font-family: var(--heading);

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


.hidden-field {
    position: absolute;

    left: -9999px;
}


/* FOOTER */

footer {
    padding:
        28px 0;

    border-top:
        1px solid #E6EDF0;

    background: #fff;
}


.footer-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #85969D;

    font-size: 10px;
}


.footer-logo {
    color: var(--navy);

    font-family: var(--heading);

    font-size: 13px;
    font-weight: 800;
}


/* MOBILE */

@media (max-width: 980px) {

    .nav {
        display: none;
    }

    .nav-cta {
        margin-left: auto;
    }

    .product-stage {
        max-width: 760px;
    }

    .float-card {
        display: none;
    }

    .feature-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .system-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 720px) {

    .container {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }

    .hero {
        padding-top: 70px;
    }

    .hero h1 {
        font-size:
            clamp(
                45px,
                13vw,
                62px
            );
    }

    .hero-buttons {
        display: grid;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .dash-sidebar {
        display: none;
    }

    .dash-main {
        padding: 18px;
    }

    .kpi-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .system-steps {
        grid-template-columns: 1fr;
    }

    .logo-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .about-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

}

/*
|--------------------------------------------------------------------------
| ATILIM AJANS — VISUAL V4
| First Fold / Product Composition
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| GLOBAL SCALE
|--------------------------------------------------------------------------
*/

:root {
    --container: 1220px;
}


body {
    background:
        #ffffff;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.header {
    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    box-shadow:
        0 6px 24px
        rgba(
            0,
            47,
            70,
            .025
        );
}


.header-wrap {
    min-height:
        72px;
}


.logo {
    font-size:
        14px;
}


.logo-mark {
    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            #0076A9,
            #00547B
        );

    box-shadow:
        0 8px 18px
        rgba(
            0,
            84,
            123,
            .16
        );
}


.nav {
    gap:
        27px;

    font-size:
        12px;
}


.nav-cta {
    min-height:
        40px;

    padding:
        0
        16px;

    background:
        #06384E;

    font-size:
        11px;
}


/*
|--------------------------------------------------------------------------
| HERO OUTER CANVAS
|--------------------------------------------------------------------------
*/

.hero {
    padding:
        30px
        0
        0;

    overflow:
        visible;

    background:
        #EEF6F9;
}


.hero-inner {
    position:
        relative;

    padding:
        72px
        68px
        0;

    overflow:
        visible;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .09
        );

    border-radius:
        34px;

    background:
        radial-gradient(
            circle
            at
            85%
            20%,
            rgba(
                0,
                125,
                178,
                .16
            ),
            transparent
            28%
        ),
        radial-gradient(
            circle
            at
            14%
            55%,
            rgba(
                129,
                196,
                219,
                .10
            ),
            transparent
            32%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FCFD 60%,
            #EEF7FA 100%
        );

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .9
        ),
        0 24px 70px
        rgba(
            0,
            56,
            82,
            .055
        );
}


.hero-inner::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    pointer-events:
        none;

    opacity:
        .28;

    background-image:
        radial-gradient(
            rgba(
                0,
                84,
                123,
                .15
            )
            .65px,
            transparent
            .65px
        );

    background-size:
        22px 22px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 12%,
            black 50%,
            transparent 92%
        );
}


/*
|--------------------------------------------------------------------------
| HERO COPY
|--------------------------------------------------------------------------
*/

.hero-copy {
    position:
        relative;

    z-index:
        3;

    max-width:
        790px;
}


.hero-eyebrow {
    margin-bottom:
        17px;

    padding:
        6px
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .84
        );

    border-color:
        rgba(
            0,
            84,
            123,
            .11
        );

    box-shadow:
        0 7px 20px
        rgba(
            0,
            56,
            82,
            .035
        );

    font-size:
        10px;
}


.hero h1 {
    max-width:
        790px;

    margin-bottom:
        19px;

    font-size:
        clamp(
            50px,
            4.75vw,
            68px
        );

    line-height:
        1.01;

    letter-spacing:
        -.052em;
}


.hero-copy > p {
    max-width:
        650px;

    margin-bottom:
        25px;

    font-size:
        14px;

    line-height:
        1.74;
}


.hero-buttons {
    gap:
        9px;
}


.btn {
    min-height:
        44px;

    padding:
        0
        17px;

    font-size:
        11px;
}


.btn-dark {
    background:
        #06394F;

    box-shadow:
        0 10px 22px
        rgba(
            0,
            56,
            82,
            .14
        );
}


.btn-light {
    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    border-color:
        rgba(
            0,
            84,
            123,
            .10
        );
}


.hero-mini-proof {
    gap:
        21px;

    margin-top:
        23px;

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| PRODUCT SHOWCASE
|--------------------------------------------------------------------------
*/

.product-stage {
    position:
        relative;

    z-index:
        4;

    max-width:
        950px;

    margin:
        48px auto
        -100px;
}


.browser {
    border-radius:
        21px;

    border-color:
        rgba(
            0,
            84,
            123,
            .10
        );

    box-shadow:
        0 35px 90px
        rgba(
            0,
            47,
            70,
            .13
        ),
        0 5px 20px
        rgba(
            0,
            47,
            70,
            .04
        );

    transform:
        translateZ(0);
}


.browser-header {
    min-height:
        39px;
}


.browser-address {
    width:
        270px;

    font-size:
        8px;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD SCALE
|--------------------------------------------------------------------------
*/

.dashboard {
    grid-template-columns:
        60px
        1fr;

    min-height:
        475px;
}


.dash-sidebar {
    padding-top:
        20px;
}


.dash-brand {
    width:
        29px;

    height:
        29px;
}


.dash-menu {
    width:
        23px;

    height:
        23px;
}


.dash-main {
    padding:
        24px;
}


.dash-top h3 {
    font-size:
        17px;
}


.kpi-grid {
    gap:
        10px;

    margin-top:
        20px;
}


.kpi {
    padding:
        14px;
}


.kpi strong {
    margin:
        6px
        0
        3px;

    font-size:
        21px;
}


.dashboard-grid {
    grid-template-columns:
        1.72fr
        .88fr;

    gap:
        10px;

    margin-top:
        10px;
}


.chart-card,
.lead-card {
    padding:
        15px;

    border-radius:
        12px;
}


.real-chart {
    height:
        178px;
}


.channel-row {
    gap:
        8px;

    margin-top:
        10px;
}


.channel-row div {
    padding:
        10px
        11px;
}


/*
|--------------------------------------------------------------------------
| FLOATING METRICS
|--------------------------------------------------------------------------
*/

.float-card {
    width:
        123px;

    padding:
        12px;

    border-radius:
        12px;

    box-shadow:
        0 16px 38px
        rgba(
            0,
            47,
            70,
            .11
        );
}


.float-card strong {
    font-size:
        18px;
}


.float-card-left {
    left:
        -28px;

    top:
        65px;
}


.float-card-right {
    right:
        -28px;

    top:
        120px;
}


/*
|--------------------------------------------------------------------------
| SERVICES TRANSITION
|--------------------------------------------------------------------------
*/

.services {
    padding-top:
        205px;

    background:
        #FFFFFF;
}


.section {
    padding:
        105px
        0;
}


.section-head {
    margin-bottom:
        45px;
}


.section-head h2,
.system-copy h2,
.about h2,
.contact h2 {
    font-size:
        clamp(
            34px,
            3.45vw,
            48px
        );
}


/*
|--------------------------------------------------------------------------
| PREMIUM FEATURE CARDS
|--------------------------------------------------------------------------
*/

.feature-grid {
    gap:
        16px;
}


.feature {
    min-height:
        475px;

    padding:
        25px;

    border-radius:
        20px;

    border-color:
        rgba(
            0,
            84,
            123,
            .105
        );

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FCFDFE
        );

    box-shadow:
        0 7px 24px
        rgba(
            0,
            56,
            82,
            .025
        );

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.feature:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(
            0,
            106,
            153,
            .19
        );

    box-shadow:
        0 25px 55px
        rgba(
            0,
            56,
            82,
            .085
        );
}


.feature:nth-child(1)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F1F8FA,
            #E8F3F7
        );
}


.feature:nth-child(2)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F7F6FC,
            #EEF1FA
        );
}


.feature:nth-child(3)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F3F8FC,
            #E7F1F7
        );
}


.feature:nth-child(4)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F7FAFB,
            #EAF4F7
        );
}


.feature:nth-child(5)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F6F6FC,
            #EDF1F8
        );
}


.feature:nth-child(6)
.feature-ui {
    background:
        linear-gradient(
            145deg,
            #F3F9FB,
            #E6F3F7
        );
}


.feature h3 {
    margin-top:
        13px;

    font-size:
        18px;
}


.feature p {
    min-height:
        62px;

    font-size:
        12px;
}


.feature-ui {
    min-height:
        205px;

    margin-top:
        23px;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .045
        );

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .65
        );
}


.feature-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        11px;

    border-radius:
        999px;

    background:
        #F4F9FB;

    color:
        #006A99;

    font-size:
        10px;

    transition:
        background .18s ease,
        color .18s ease;
}


.feature-link:hover {
    background:
        var(--navy);

    color:
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| UI MICRO POLISH
|--------------------------------------------------------------------------
*/

.mini-browser,
.social-post,
.cart-ui,
.ad-result {
    box-shadow:
        0 13px 32px
        rgba(
            0,
            47,
            70,
            .075
        );
}


.search-box,
.ranking,
.calendar {
    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .055
        );
}


.system-section {
    background:
        #F5F9FA;
}


.step {
    border-radius:
        18px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.step:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 17px 40px
        rgba(
            0,
            56,
            82,
            .06
        );
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 980px
) {

    .hero-inner {
        padding:
            64px
            42px
            0;
    }

    .product-stage {
        margin-bottom:
            -75px;
    }

    .services {
        padding-top:
            175px;
    }

}


@media (
    max-width: 720px
) {

    .hero {
        padding-top:
            18px;
    }

    .hero-inner {
        padding:
            52px
            22px
            0;

        border-radius:
            25px;
    }

    .hero h1 {
        font-size:
            clamp(
                42px,
                12.6vw,
                57px
            );
    }

    .hero-copy > p {
        font-size:
            13px;
    }

    .product-stage {
        margin:
            40px auto
            -55px;
    }

    .services {
        padding-top:
            135px;
    }

}


/*
|--------------------------------------------------------------------------
| V4.1 — HERO CLEANUP
|--------------------------------------------------------------------------
| Büyük hero paneli kaldırıldı.
| Dashboard bağımsız SaaS ürün objesi olarak konumlandı.
|--------------------------------------------------------------------------
*/


.hero {
    padding:
        76px
        0
        0;

    overflow:
        hidden;

    background:
        #FFFFFF;
}


.hero-inner {
    position:
        relative;

    padding:
        0;

    overflow:
        visible;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;
}


.hero-inner::before {
    display:
        none;
}


/*
|--------------------------------------------------------------------------
| HERO COPY
|--------------------------------------------------------------------------
*/

.hero-copy {
    position:
        relative;

    z-index:
        5;

    max-width:
        810px;

    margin-inline:
        auto;
}


.hero-eyebrow {
    margin-bottom:
        18px;

    background:
        #F7FAFB;

    border:
        1px solid
        #E3ECEF;

    box-shadow:
        none;
}


.hero h1 {
    max-width:
        800px;

    margin-bottom:
        19px;
}


.hero-copy > p {
    max-width:
        665px;
}


.hero-mini-proof {
    margin-bottom:
        0;
}


/*
|--------------------------------------------------------------------------
| PRODUCT STAGE
|--------------------------------------------------------------------------
*/

.product-stage {
    position:
        relative;

    max-width:
        960px;

    margin:
        58px auto
        -96px;

    padding:
        0 14px;

    isolation:
        isolate;
}


.product-stage::before {
    content: "";

    position:
        absolute;

    z-index:
        -2;

    width:
        880px;

    height:
        420px;

    left:
        50%;

    top:
        58%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                0,
                117,
                168,
                .115
            )
            0%,
            rgba(
                0,
                117,
                168,
                .055
            )
            37%,
            rgba(
                0,
                117,
                168,
                0
            )
            72%
        );

    filter:
        blur(30px);

    pointer-events:
        none;
}


.product-stage::after {
    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        760px;

    height:
        130px;

    left:
        50%;

    bottom:
        -35px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(
            0,
            56,
            82,
            .09
        );

    filter:
        blur(52px);

    opacity:
        .48;

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| BROWSER
|--------------------------------------------------------------------------
*/

.browser {
    position:
        relative;

    background:
        rgba(
            255,
            255,
            255,
            .985
        );

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .115
        );

    border-radius:
        20px;

    box-shadow:
        0 32px 72px
        rgba(
            0,
            47,
            70,
            .105
        ),
        0 8px 24px
        rgba(
            0,
            47,
            70,
            .045
        );
}


/*
|--------------------------------------------------------------------------
| FLOATING CARDS
|--------------------------------------------------------------------------
*/

.float-card {
    border-color:
        rgba(
            0,
            84,
            123,
            .10
        );

    box-shadow:
        0 16px 38px
        rgba(
            0,
            47,
            70,
            .10
        );
}


.float-card-left {
    left:
        -14px;
}


.float-card-right {
    right:
        -14px;
}


/*
|--------------------------------------------------------------------------
| HERO → SERVICES TRANSITION
|--------------------------------------------------------------------------
*/

.services {
    position:
        relative;

    padding-top:
        202px;

    background:
        #FFFFFF;
}


.services::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        min(
            1000px,
            88vw
        );

    height:
        1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                0,
                84,
                123,
                .07
            ),
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| SECTION RHYTHM
|--------------------------------------------------------------------------
*/

.section-head.centered {
    max-width:
        650px;
}


.services .section-head {
    margin-bottom:
        48px;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 980px
) {

    .hero {
        padding-top:
            64px;
    }

    .hero-inner {
        padding:
            0;
    }

    .product-stage {
        padding:
            0;

        margin-bottom:
            -72px;
    }

    .services {
        padding-top:
            165px;
    }

}


@media (
    max-width: 720px
) {

    .hero {
        padding:
            55px
            0
            0;
    }

    .hero-inner {
        border-radius:
            0;
    }

    .product-stage {
        margin:
            42px auto
            -48px;
    }

    .product-stage::before {
        width:
            115%;

        height:
            320px;
    }

    .services {
        padding-top:
            125px;
    }

}


/*
|--------------------------------------------------------------------------
| V4.2 — HERO ATMOSPHERE
|--------------------------------------------------------------------------
| Kutusuz hero korunur.
| Boşluk hissi; üst atmosfer, cloud-like formlar ve ürün glow'u ile çözülür.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO BACKGROUND ATMOSPHERE
|--------------------------------------------------------------------------
*/

.hero {
    position: relative;

    padding:
        74px
        0
        0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #F3F8FB 0%,
            #F8FBFD 20%,
            #FFFFFF 52%,
            #FFFFFF 100%
        );
}


.hero::before {
    content: "";

    position: absolute;

    inset:
        0
        0
        auto
        0;

    height:
        560px;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(0, 106, 153, .08),
            transparent 31%
        ),
        radial-gradient(
            circle at 16% 24%,
            rgba(206, 223, 233, .62),
            transparent 18%
        ),
        radial-gradient(
            circle at 84% 26%,
            rgba(213, 228, 238, .68),
            transparent 19%
        ),
        linear-gradient(
            180deg,
            rgba(242, 247, 250, .96) 0%,
            rgba(247, 251, 253, .78) 48%,
            rgba(255, 255, 255, 0) 100%
        );
}


.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .14;

    background-image:
        radial-gradient(
            rgba(0, 84, 123, .13) .65px,
            transparent .65px
        );

    background-size:
        22px 22px;

    mask-image:
        linear-gradient(
            180deg,
            black 0%,
            black 48%,
            transparent 82%
        );
}


/*
|--------------------------------------------------------------------------
| HERO COPY CLOUD SHAPES
|--------------------------------------------------------------------------
*/

.hero-copy {
    position: relative;
    z-index: 5;
}


.hero-copy::before,
.hero-copy::after {
    content: "";

    position: absolute;

    z-index: -1;

    width:
        210px;

    height:
        108px;

    border:
        1px solid
        rgba(219, 232, 238, .82);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(243, 248, 251, .96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 18px 42px rgba(0,47,70,.045),
        42px -10px 0 6px rgba(250,253,255,.96),
        -26px -6px 0 1px rgba(245,250,252,.96);

    filter: blur(.2px);

    opacity: .96;

    pointer-events: none;
}


.hero-copy::before {
    left:
        -255px;

    top:
        202px;

    transform:
        rotate(-6deg)
        scale(.96);
}


.hero-copy::after {
    right:
        -255px;

    top:
        226px;

    transform:
        rotate(5deg)
        scale(1);
}


/*
|--------------------------------------------------------------------------
| COPY SCALE
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    background:
        rgba(255,255,255,.88);

    border:
        1px solid
        rgba(0,84,123,.10);
}


.hero h1 {
    max-width:
        790px;

    margin-bottom:
        18px;

    font-size:
        clamp(
            50px,
            4.85vw,
            68px
        );

    line-height:
        1.02;
}


.hero-copy > p {
    max-width:
        680px;

    color:
        #6E838C;
}


.hero-mini-proof {
    margin-top:
        21px;
}


/*
|--------------------------------------------------------------------------
| PRODUCT STAGE GLOW
|--------------------------------------------------------------------------
*/

.product-stage {
    position: relative;

    max-width:
        970px;

    margin:
        54px auto
        -96px;

    padding:
        0 14px;

    isolation: isolate;
}


.product-stage::before {
    content: "";

    position: absolute;

    z-index: -2;

    width:
        1040px;

    height:
        390px;

    left:
        50%;

    top:
        57%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 117, 168, .13) 0%,
            rgba(0, 117, 168, .065) 38%,
            rgba(0, 117, 168, 0) 74%
        );

    filter:
        blur(34px);

    pointer-events: none;
}


.product-stage::after {
    content: "";

    position: absolute;

    z-index: -1;

    width:
        780px;

    height:
        128px;

    left:
        50%;

    bottom:
        -34px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(0, 56, 82, .09);

    filter:
        blur(54px);

    opacity: .46;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| BROWSER OBJECT
|--------------------------------------------------------------------------
*/

.browser {
    position: relative;

    border:
        1px solid
        rgba(0,84,123,.11);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.988);

    box-shadow:
        0 34px 76px rgba(0,47,70,.10),
        0 8px 24px rgba(0,47,70,.04);
}


.float-card {
    border-color:
        rgba(0,84,123,.09);

    box-shadow:
        0 16px 36px rgba(0,47,70,.09);
}


.float-card-left {
    left:
        -10px;
}


.float-card-right {
    right:
        -10px;
}


/*
|--------------------------------------------------------------------------
| HERO > SERVICES TRANSITION
|--------------------------------------------------------------------------
*/

.services {
    position: relative;

    padding-top:
        198px;

    background:
        #FFFFFF;
}


.services::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(1020px, 88vw);

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,84,123,.07),
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .hero-copy::before,
    .hero-copy::after {
        width: 170px;
        height: 88px;
    }

    .hero-copy::before {
        left: -150px;
    }

    .hero-copy::after {
        right: -150px;
    }

}


@media (max-width: 980px) {

    .hero {
        padding-top:
            66px;
    }

    .product-stage {
        margin-bottom:
            -72px;
    }

    .services {
        padding-top:
            164px;
    }

    .hero-copy::before,
    .hero-copy::after {
        display: none;
    }

}


@media (max-width: 720px) {

    .hero {
        padding:
            56px
            0
            0;
    }

    .hero::before {
        height:
            440px;
    }

    .hero h1 {
        font-size:
            clamp(
                42px,
                12.2vw,
                56px
            );
    }

    .product-stage {
        margin:
            40px auto
            -50px;

        padding:
            0;
    }

    .product-stage::before {
        width:
            120%;
        height:
            300px;
    }

    .services {
        padding-top:
            125px;
    }

}


/*
|--------------------------------------------------------------------------
| V4.3 — HERO MANAGEMENT
|--------------------------------------------------------------------------
| Header hero üzerine alındı.
| Anlamsız yan dekorlar kaldırıldı.
| Panelden yüklenen Hero görsel desteği eklendi.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| OVERLAY HEADER
|--------------------------------------------------------------------------
*/

.header {
    position:
        absolute;

    z-index:
        100;

    top:
        0;

    left:
        0;

    right:
        0;

    width:
        100%;

    background:
        rgba(
            255,
            255,
            255,
            .66
        );

    border-bottom:
        1px solid
        rgba(
            0,
            84,
            123,
            .045
        );

    box-shadow:
        none;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.header-wrap {
    min-height:
        76px;
}


/*
|--------------------------------------------------------------------------
| HERO NOW STARTS BEHIND HEADER
|--------------------------------------------------------------------------
*/

.hero {
    position:
        relative;

    padding:
        142px
        0
        0;

    background:
        linear-gradient(
            180deg,
            #EEF6FA 0%,
            #F5FAFC 20%,
            #FFFFFF 53%,
            #FFFFFF 100%
        );
}


.hero::before {
    top:
        0;

    height:
        600px;

    background:
        radial-gradient(
            ellipse
            at
            50%
            13%,
            rgba(
                0,
                106,
                153,
                .09
            ),
            transparent
            34%
        ),
        radial-gradient(
            ellipse
            at
            18%
            31%,
            rgba(
                198,
                220,
                231,
                .25
            ),
            transparent
            25%
        ),
        radial-gradient(
            ellipse
            at
            82%
            30%,
            rgba(
                198,
                220,
                231,
                .28
            ),
            transparent
            25%
        ),
        linear-gradient(
            180deg,
            rgba(
                237,
                246,
                250,
                .88
            )
            0%,
            rgba(
                249,
                252,
                253,
                .45
            )
            55%,
            rgba(
                255,
                255,
                255,
                0
            )
            100%
        );
}


/*
|--------------------------------------------------------------------------
| REMOVE THE TWO SIDE RECTANGLES
|--------------------------------------------------------------------------
*/

.hero-copy::before,
.hero-copy::after {
    display:
        none
        !important;

    content:
        none
        !important;
}


/*
|--------------------------------------------------------------------------
| CLEAN PRODUCT GLOW
|--------------------------------------------------------------------------
*/

.product-stage::before {
    width:
        1020px;

    height:
        390px;

    opacity:
        .78;
}


/*
|--------------------------------------------------------------------------
| UPLOADED HERO IMAGE
|--------------------------------------------------------------------------
*/

.hero-media-stage {
    position:
        relative;

    z-index:
        4;

    width:
        min(
            100%,
            980px
        );

    margin:
        54px auto
        -96px;

    padding:
        0
        14px;

    isolation:
        isolate;
}


.hero-media-stage::before {
    content: "";

    position:
        absolute;

    z-index:
        -2;

    width:
        1080px;

    height:
        400px;

    left:
        50%;

    top:
        56%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse
            at
            center,
            rgba(
                0,
                117,
                168,
                .13
            )
            0%,
            rgba(
                0,
                117,
                168,
                .055
            )
            42%,
            rgba(
                0,
                117,
                168,
                0
            )
            75%
        );

    filter:
        blur(35px);
}


.hero-media-stage::after {
    content: "";

    position:
        absolute;

    z-index:
        -1;

    width:
        760px;

    height:
        120px;

    left:
        50%;

    bottom:
        -33px;

    transform:
        translateX(
            -50%
        );

    border-radius:
        50%;

    background:
        rgba(
            0,
            56,
            82,
            .09
        );

    filter:
        blur(52px);

    opacity:
        .44;
}


.hero-media-browser {
    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .11
        );

    border-radius:
        22px;

    background:
        #FFFFFF;

    box-shadow:
        0
        34px
        78px
        rgba(
            0,
            47,
            70,
            .105
        ),
        0
        8px
        24px
        rgba(
            0,
            47,
            70,
            .045
        );
}


.hero-media-top {
    position:
        relative;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    padding:
        0
        15px;

    border-bottom:
        1px solid
        #EDF2F4;

    background:
        #FAFCFD;
}


.hero-media-dots {
    display:
        flex;

    gap:
        5px;
}


.hero-media-dots i {
    width:
        7px;

    height:
        7px;

    display:
        block;

    border-radius:
        50%;

    background:
        #C8D5DA;
}


.hero-media-address {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        270px;

    padding:
        5px
        12px;

    border:
        1px solid
        #E6EEF1;

    border-radius:
        7px;

    background:
        #FFFFFF;

    color:
        #9BAAB1;

    font-size:
        8px;

    text-align:
        center;
}


.hero-media-content {
    position:
        relative;

    overflow:
        hidden;

    background:
        #FFFFFF;
}


.hero-media-content img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        720px;

    object-fit:
        contain;

    object-position:
        center top;
}


/*
|--------------------------------------------------------------------------
| SERVICES TRANSITION
|--------------------------------------------------------------------------
*/

.services {
    padding-top:
        198px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 980px
) {

    .hero {
        padding-top:
            126px;
    }

    .hero-media-stage {
        margin-bottom:
            -70px;
    }

    .hero-media-address {
        width:
            220px;
    }

    .services {
        padding-top:
            160px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .header {
        background:
            rgba(
                255,
                255,
                255,
                .84
            );
    }

    .hero {
        padding:
            118px
            0
            0;
    }

    .hero-media-stage {
        margin:
            40px auto
            -47px;

        padding:
            0;
    }

    .hero-media-browser {
        border-radius:
            16px;
    }

    .hero-media-top {
        min-height:
            34px;
    }

    .hero-media-address {
        display:
            none;
    }

    .services {
        padding-top:
            122px;
    }

}


/*
|--------------------------------------------------------------------------
| V4.4 — TRUE HERO HEADER OVERLAY
|--------------------------------------------------------------------------
| Header artık Hero'dan ayrı bir beyaz şerit gibi görünmez.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HEADER — INITIAL STATE
|--------------------------------------------------------------------------
*/

.header {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    background:
        transparent !important;

    border:
        0 !important;

    border-bottom:
        0 !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    transition:
        background .22s ease,
        box-shadow .22s ease,
        backdrop-filter .22s ease,
        border-color .22s ease;
}


.header-wrap {
    min-height:
        76px;
}


/*
|--------------------------------------------------------------------------
| HEADER — AFTER SCROLL
|--------------------------------------------------------------------------
*/

.header.is-scrolled {
    background:
        rgba(
            255,
            255,
            255,
            .88
        ) !important;

    border-bottom:
        1px solid
        rgba(
            0,
            84,
            123,
            .065
        ) !important;

    box-shadow:
        0
        8px
        28px
        rgba(
            0,
            47,
            70,
            .045
        ) !important;

    backdrop-filter:
        blur(18px) !important;

    -webkit-backdrop-filter:
        blur(18px) !important;
}


/*
|--------------------------------------------------------------------------
| HERO STARTS AT VERY TOP OF PAGE
|--------------------------------------------------------------------------
*/

main#top {
    margin:
        0 !important;

    padding:
        0 !important;
}


.hero {
    position: relative;

    margin:
        0 !important;

    padding:
        144px
        0
        0;

    overflow:
        hidden;

    /*
     * Atmosfer sayfanın sıfır noktasından başlar.
     * Header bunun üzerinde transparan durur.
     */
    background:
        radial-gradient(
            ellipse
            at
            50%
            5%,
            rgba(
                0,
                113,
                162,
                .115
            ),
            transparent
            31%
        ),
        radial-gradient(
            ellipse
            at
            13%
            28%,
            rgba(
                188,
                216,
                229,
                .18
            ),
            transparent
            24%
        ),
        radial-gradient(
            ellipse
            at
            87%
            26%,
            rgba(
                188,
                216,
                229,
                .20
            ),
            transparent
            24%
        ),
        linear-gradient(
            180deg,
            #EDF6FA 0%,
            #F5FAFC 22%,
            #FFFFFF 54%,
            #FFFFFF 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD HERO ATMOSPHERE LAYER THAT STARTED BELOW HEADER
|--------------------------------------------------------------------------
*/

.hero::before {
    content: "";

    position: absolute;

    z-index: 0;

    inset:
        0
        0
        auto
        0;

    height:
        590px;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse
            at
            50%
            10%,
            rgba(
                255,
                255,
                255,
                .18
            ),
            transparent
            42%
        );

    opacity:
        1;
}


/*
|--------------------------------------------------------------------------
| HERO CONTENT ABOVE ATMOSPHERE
|--------------------------------------------------------------------------
*/

.hero-inner,
.hero-copy,
.product-stage,
.hero-media-stage {
    position: relative;

    z-index: 2;
}


/*
|--------------------------------------------------------------------------
| HEADER TEXT CONTRAST
|--------------------------------------------------------------------------
*/

.header .logo,
.header .nav a {
    color:
        #284B5A;
}


.header .logo {
    color:
        var(--navy);
}


.header .nav-cta {
    background:
        #073B52;

    color:
        #FFFFFF;
}


.header:not(.is-scrolled)
.nav a {
    color:
        #4E6975;
}


.header:not(.is-scrolled)
.nav a:hover {
    color:
        var(--blue);
}


/*
|--------------------------------------------------------------------------
| HERO POSITIONING POLISH
|--------------------------------------------------------------------------
*/

.hero-copy {
    padding-top:
        1px;
}


.product-stage,
.hero-media-stage {
    margin-top:
        54px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .hero {
        padding-top:
            128px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .header {
        background:
            transparent !important;
    }

    .header.is-scrolled {
        background:
            rgba(
                255,
                255,
                255,
                .91
            ) !important;
    }

    .hero {
        padding-top:
            116px;
    }

}


/*
|--------------------------------------------------------------------------
| V5 — PREMIUM SERVICES
|--------------------------------------------------------------------------
*/


.services-v5 {
    padding:
        210px
        0
        120px;

    background:
        #FFFFFF;
}


.services-v5::before {
    display:
        none;
}


/*
|--------------------------------------------------------------------------
| SECTION INTRO
|--------------------------------------------------------------------------
*/

.svc-section-head {
    display:
        grid;

    grid-template-columns:
        1.15fr
        .75fr;

    align-items:
        end;

    gap:
        90px;

    margin-bottom:
        58px;
}


.svc-heading-copy h2 {
    max-width:
        650px;

    margin:
        0;

    color:
        var(--navy);

    font-family:
        var(--heading);

    font-size:
        clamp(
            39px,
            4vw,
            55px
        );

    font-weight:
        800;

    line-height:
        1.04;

    letter-spacing:
        -.05em;
}


.svc-section-head > p {
    margin:
        0 0 5px;

    color:
        #6F838C;

    font-size:
        13px;

    line-height:
        1.8;
}


/*
|--------------------------------------------------------------------------
| BENTO GRID
|--------------------------------------------------------------------------
*/

.svc-bento {
    display:
        grid;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );

    gap:
        18px;
}


.svc-card {
    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        29px;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .105
        );

    border-radius:
        22px;

    background:
        #FFFFFF;

    box-shadow:
        0
        7px
        25px
        rgba(
            0,
            56,
            82,
            .027
        );

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.svc-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(
            0,
            106,
            153,
            .18
        );

    box-shadow:
        0
        26px
        64px
        rgba(
            0,
            56,
            82,
            .085
        );
}


.svc-card-web {
    grid-column:
        span 8;

    min-height:
        510px;
}


.svc-card-commerce {
    grid-column:
        span 4;

    min-height:
        510px;
}


.svc-card-ads,
.svc-card-seo,
.svc-card-meta {
    grid-column:
        span 4;

    min-height:
        430px;
}


.svc-card-social {
    grid-column:
        span 12;

    min-height:
        390px;

    display:
        grid;

    grid-template-columns:
        .36fr
        .64fr;

    align-items:
        stretch;

    column-gap:
        35px;
}


/*
|--------------------------------------------------------------------------
| COPY
|--------------------------------------------------------------------------
*/

.svc-card-copy {
    position:
        relative;

    z-index:
        3;
}


.svc-card-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        21px;
}


.svc-card-meta > span {
    color:
        #97A9B1;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}


.svc-card-meta small {
    padding:
        5px
        8px;

    border-radius:
        999px;

    background:
        #F2F7F9;

    color:
        #78909A;

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        700;
}


.svc-card h3 {
    margin:
        0
        0
        11px;

    color:
        var(--navy);

    font-family:
        var(--heading);

    font-size:
        21px;

    font-weight:
        750;

    letter-spacing:
        -.025em;
}


.svc-card-copy > p {
    max-width:
        500px;

    margin:
        0;

    color:
        #6B818A;

    font-size:
        12px;

    line-height:
        1.72;
}


.svc-card-web
.svc-card-copy > p {
    max-width:
        520px;
}


.svc-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        20px;

    color:
        #006A99;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        800;
}


.svc-link span {
    transition:
        transform .18s ease;
}


.svc-link:hover span {
    transform:
        translate(
            2px,
            -2px
        );
}


/*
|--------------------------------------------------------------------------
| VISUAL BASE
|--------------------------------------------------------------------------
*/

.svc-visual {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        auto;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .055
        );

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            #F3F8FA,
            #EAF4F7
        );
}


/*
|--------------------------------------------------------------------------
| WEB VISUAL
|--------------------------------------------------------------------------
*/

.svc-web-visual {
    height:
        290px;

    margin-top:
        28px;

    padding:
        27px
        28px
        0;

    background:
        radial-gradient(
            circle
            at
            82%
            20%,
            rgba(
                0,
                125,
                178,
                .10
            ),
            transparent
            31%
        ),
        linear-gradient(
            145deg,
            #F5FAFC,
            #E8F3F7
        );
}


.svc-browser {
    overflow:
        hidden;

    width:
        88%;

    height:
        280px;

    margin-inline:
        auto;

    border:
        1px solid
        #D9E6EA;

    border-radius:
        13px
        13px
        0
        0;

    background:
        #FFFFFF;

    box-shadow:
        0
        20px
        52px
        rgba(
            0,
            47,
            70,
            .10
        );
}


.svc-browser-top {
    position:
        relative;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    padding:
        0
        11px;

    border-bottom:
        1px solid
        #EDF2F4;

    background:
        #FAFCFD;
}


.svc-browser-top > div {
    display:
        flex;

    gap:
        4px;
}


.svc-browser-top i {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #C8D6DB;
}


.svc-browser-top > span {
    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        #ABB8BD;

    font-size:
        7px;
}


.svc-web-page {
    padding:
        17px
        21px;
}


.svc-web-nav {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.svc-web-nav > b {
    width:
        34px;

    height:
        7px;

    border-radius:
        999px;

    background:
        var(--blue);
}


.svc-web-nav > div {
    display:
        flex;

    gap:
        7px;
}


.svc-web-nav i {
    width:
        22px;

    height:
        4px;

    border-radius:
        999px;

    background:
        #D5E2E7;
}


.svc-web-hero {
    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    align-items:
        center;

    gap:
        25px;

    padding:
        34px
        3px
        25px;
}


.svc-web-hero small {
    display:
        block;

    width:
        48px;

    height:
        5px;

    margin-bottom:
        11px;

    border-radius:
        999px;

    background:
        #A8D1DF;
}


.svc-web-hero strong {
    display:
        block;

    width:
        88%;

    height:
        13px;

    margin-bottom:
        7px;

    border-radius:
        4px;

    background:
        #103C4E;
}


.svc-web-hero strong.short {
    width:
        62%;
}


.svc-web-hero p {
    width:
        95%;

    height:
        5px;

    margin:
        13px
        0 0;

    border-radius:
        999px;

    background:
        #D6E3E8;
}


.svc-web-hero p.short {
    width:
        68%;

    margin-top:
        5px;
}


.svc-web-hero button {
    width:
        58px;

    height:
        22px;

    margin-top:
        15px;

    border:
        0;

    border-radius:
        999px;

    background:
        var(--blue);
}


.svc-web-art {
    position:
        relative;

    height:
        135px;
}


.web-art-card {
    position:
        absolute;

    border:
        1px solid
        #DFEAEE;

    border-radius:
        11px;

    background:
        #FFFFFF;

    box-shadow:
        0
        13px
        30px
        rgba(
            0,
            47,
            70,
            .08
        );
}


.web-art-card.back {
    width:
        110px;

    height:
        86px;

    right:
        3px;

    top:
        8px;

    transform:
        rotate(6deg);

    background:
        #E5F2F7;
}


.web-art-card.middle {
    width:
        128px;

    height:
        98px;

    left:
        20px;

    top:
        27px;

    padding:
        13px;
}


.web-art-card.front {
    width:
        102px;

    height:
        92px;

    right:
        19px;

    bottom:
        2px;

    padding:
        12px;
}


.web-art-card i {
    display:
        block;

    width:
        24px;

    height:
        24px;

    margin-bottom:
        11px;

    border-radius:
        7px;

    background:
        #E4F3F8;
}


.web-art-card strong,
.web-art-card span {
    display:
        block;

    border-radius:
        999px;
}


.web-art-card strong {
    width:
        65%;

    height:
        7px;

    background:
        #37606F;
}


.web-art-card span {
    width:
        88%;

    height:
        4px;

    margin-top:
        7px;

    background:
        #D7E5E9;
}


.web-art-card span:last-child {
    width:
        58%;
}


.svc-web-features {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        8px;
}


.svc-web-features i {
    height:
        38px;

    border-radius:
        8px;

    background:
        #F1F6F8;
}


.svc-performance-pill {
    position:
        absolute;

    right:
        17px;

    bottom:
        21px;

    display:
        grid;

    padding:
        10px
        13px;

    border:
        1px solid
        #DCE8EC;

    border-radius:
        11px;

    background:
        #FFFFFF;

    box-shadow:
        0
        13px
        30px
        rgba(
            0,
            47,
            70,
            .09
        );
}


.svc-performance-pill span {
    color:
        #8A9AA1;

    font-size:
        7px;
}


.svc-performance-pill strong {
    margin-top:
        2px;

    color:
        #0A637F;

    font-family:
        var(--heading);

    font-size:
        14px;
}


/*
|--------------------------------------------------------------------------
| COMMERCE
|--------------------------------------------------------------------------
*/

.svc-commerce-visual {
    height:
        290px;

    margin-top:
        26px;

    padding:
        19px;

    background:
        linear-gradient(
            145deg,
            #F5F6FC,
            #EDF0F8
        );
}


.commerce-toolbar {
    display:
        grid;

    grid-template-columns:
        22px
        1fr
        24px;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px;

    border-radius:
        9px;

    background:
        #FFFFFF;
}


.commerce-logo {
    width:
        20px;

    height:
        20px;

    border-radius:
        6px;

    background:
        #506B87;
}


.commerce-search {
    padding:
        6px
        8px;

    border-radius:
        999px;

    background:
        #F4F7F9;

    color:
        #A2B0B6;

    font-size:
        6px;
}


.commerce-cart {
    width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #E8F3F7;

    color:
        #006A99;

    font-size:
        7px;
}


.commerce-products {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        9px;

    margin-top:
        11px;
}


.commerce-product {
    padding:
        8px;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .055
        );

    border-radius:
        10px;

    background:
        #FFFFFF;
}


.product-photo {
    height:
        81px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        linear-gradient(
            145deg,
            #E4ECF3,
            #D5E2EC
        );
}


.product-photo i {
    width:
        46px;

    height:
        55px;

    display:
        block;

    border-radius:
        17px
        17px
        7px
        7px;

    background:
        rgba(
            255,
            255,
            255,
            .75
        );

    box-shadow:
        0
        7px
        13px
        rgba(
            40,
            60,
            80,
            .08
        );
}


.commerce-product span,
.commerce-product strong {
    display:
        block;

    border-radius:
        999px;
}


.commerce-product > span {
    width:
        70%;

    height:
        5px;

    margin-top:
        8px;

    background:
        #CFDDE3;
}


.commerce-product > strong {
    width:
        38%;

    height:
        7px;

    margin-top:
        6px;

    background:
        #2B5262;
}


.commerce-checkout {
    position:
        absolute;

    right:
        12px;

    bottom:
        13px;

    width:
        145px;

    padding:
        12px;

    border:
        1px solid
        #DDE7EC;

    border-radius:
        11px;

    background:
        #FFFFFF;

    box-shadow:
        0
        16px
        34px
        rgba(
            0,
            47,
            70,
            .11
        );
}


.commerce-checkout small {
    display:
        block;

    color:
        #92A0A6;

    font-size:
        7px;
}


.commerce-checkout strong {
    display:
        inline-block;

    margin-top:
        4px;

    color:
        #254A59;

    font-size:
        9px;
}


.commerce-checkout > span {
    float:
        right;

    margin-top:
        4px;

    color:
        #496A77;

    font-size:
        9px;
}


.commerce-checkout button {
    width:
        100%;

    height:
        26px;

    margin-top:
        9px;

    border:
        0;

    border-radius:
        999px;

    background:
        #335E85;

    color:
        #FFFFFF;

    font-size:
        7px;
}


/*
|--------------------------------------------------------------------------
| ADS
|--------------------------------------------------------------------------
*/

.svc-ads-visual {
    height:
        215px;

    margin-top:
        23px;

    padding:
        17px;

    background:
        linear-gradient(
            145deg,
            #F3F8FC,
            #E8F2F7
        );
}


.ads-search {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px
        12px;

    border:
        1px solid
        #E2EBEF;

    border-radius:
        999px;

    background:
        #FFFFFF;

    color:
        #81939A;

    font-size:
        7px;
}


.ads-search-icon {
    color:
        #0072A4;

    font-size:
        11px;
}


.ads-result {
    margin-top:
        9px;

    padding:
        11px;

    border:
        1px solid
        #E4ECF0;

    border-radius:
        9px;

    background:
        #FFFFFF;
}


.ads-result small {
    display:
        block;

    color:
        #84969E;

    font-size:
        6px;
}


.ads-result strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #006A99;

    font-family:
        var(--heading);

    font-size:
        9px;
}


.ads-result > span {
    display:
        block;

    margin-top:
        3px;

    color:
        #526E7A;

    font-size:
        6px;
}


.ads-result p {
    width:
        90%;

    height:
        4px;

    margin:
        8px
        0
        0;

    border-radius:
        999px;

    background:
        #DFE8EC;
}


.ads-result p.short {
    width:
        61%;

    margin-top:
        4px;
}


.ads-stat-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        6px;

    margin-top:
        8px;
}


.ads-stat-grid div {
    padding:
        7px;

    border-radius:
        7px;

    background:
        rgba(
            255,
            255,
            255,
            .8
        );
}


.ads-stat-grid span {
    display:
        block;

    color:
        #8B9BA2;

    font-size:
        6px;
}


.ads-stat-grid strong {
    display:
        block;

    margin-top:
        2px;

    color:
        #173F50;

    font-family:
        var(--heading);

    font-size:
        10px;
}


/*
|--------------------------------------------------------------------------
| SEO
|--------------------------------------------------------------------------
*/

.svc-seo-visual {
    height:
        215px;

    margin-top:
        23px;

    padding:
        15px;

    background:
        linear-gradient(
            145deg,
            #F5F9FA,
            #EAF4F7
        );
}


.seo-keyword-row {
    display:
        grid;

    grid-template-columns:
        27px
        1fr;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px;

    margin-bottom:
        7px;

    border-radius:
        8px;

    background:
        #FFFFFF;
}


.seo-keyword-row > span {
    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        #E8F4F8;

    color:
        #0071A2;

    font-size:
        7px;
}


.seo-keyword-row strong {
    display:
        block;

    color:
        #4D6873;

    font-size:
        7px;

    font-weight:
        500;
}


.seo-keyword-row small {
    color:
        #16956A;

    font-size:
        6px;
}


.seo-graph {
    position:
        relative;

    height:
        92px;
}


.seo-graph svg {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        100%;
}


.seo-area {
    fill:
        url(#seoFillV5);
}


.seo-line {
    fill:
        none;

    stroke:
        #006A99;

    stroke-width:
        4;

    stroke-linecap:
        round;
}


.seo-grid {
    position:
        absolute;

    inset:
        6px
        0;

    display:
        grid;

    grid-template-rows:
        repeat(
            3,
            1fr
        );
}


.seo-grid i {
    border-bottom:
        1px solid
        rgba(
            0,
            84,
            123,
            .06
        );
}


/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.svc-meta-visual {
    height:
        215px;

    margin-top:
        23px;

    padding:
        16px;

    background:
        linear-gradient(
            145deg,
            #F5F5FB,
            #EAEFF6
        );
}


.meta-post {
    width:
        72%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .055
        );

    border-radius:
        10px;

    background:
        #FFFFFF;

    box-shadow:
        0
        13px
        30px
        rgba(
            0,
            47,
            70,
            .08
        );
}


.meta-post-top {
    display:
        flex;

    gap:
        8px;

    padding:
        9px;
}


.meta-post-top > i {
    width:
        20px;

    height:
        20px;

    border-radius:
        50%;

    background:
        #D7E7ED;
}


.meta-post-top b,
.meta-post-top span {
    display:
        block;

    border-radius:
        999px;
}


.meta-post-top b {
    width:
        45px;

    height:
        5px;

    margin-top:
        2px;

    background:
        #BDCFD6;
}


.meta-post-top span {
    width:
        32px;

    height:
        4px;

    margin-top:
        5px;

    background:
        #E0E8EB;
}


.meta-creative {
    position:
        relative;

    height:
        102px;

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        1.15fr
        .85fr;

    align-items:
        center;

    padding:
        15px;

    background:
        linear-gradient(
            135deg,
            #D4E7EE,
            #BFD9E4
        );
}


.creative-copy strong,
.creative-copy span {
    display:
        block;

    border-radius:
        999px;
}


.creative-copy strong {
    width:
        78%;

    height:
        7px;

    margin-bottom:
        6px;

    background:
        #335C6D;
}


.creative-copy strong.short {
    width:
        57%;
}


.creative-copy span {
    width:
        90%;

    height:
        4px;

    margin-top:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );
}


.creative-copy span.short {
    width:
        62%;

    margin-top:
        5px;
}


.creative-object {
    width:
        59px;

    height:
        78px;

    justify-self:
        end;

    border-radius:
        28px
        28px
        12px
        12px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #E9F1F4
        );

    box-shadow:
        0
        10px
        20px
        rgba(
            0,
            47,
            70,
            .10
        );
}


.meta-actions {
    display:
        flex;

    gap:
        5px;

    padding:
        7px;
}


.meta-actions i {
    width:
        12px;

    height:
        12px;

    border-radius:
        4px;

    background:
        #E1E9EC;
}


.meta-result {
    position:
        absolute;

    right:
        13px;

    bottom:
        27px;

    width:
        99px;

    padding:
        10px;

    border:
        1px solid
        #DCE8EC;

    border-radius:
        10px;

    background:
        #FFFFFF;

    box-shadow:
        0
        15px
        32px
        rgba(
            0,
            47,
            70,
            .10
        );
}


.meta-result small,
.meta-result span {
    display:
        block;

    color:
        #8C9BA1;

    font-size:
        6px;
}


.meta-result strong {
    display:
        block;

    margin:
        3px
        0;

    color:
        #1A6D88;

    font-family:
        var(--heading);

    font-size:
        15px;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA — FULL WIDTH
|--------------------------------------------------------------------------
*/

.svc-card-social
.svc-card-copy {
    align-self:
        center;
}


.svc-card-social
.svc-card-copy > p {
    max-width:
        380px;
}


.svc-social-visual {
    height:
        330px;

    margin:
        0;

    display:
        grid;

    grid-template-columns:
        48px
        1fr;

    padding:
        18px;

    background:
        radial-gradient(
            circle
            at
            80%
            15%,
            rgba(
                0,
                122,
                174,
                .10
            ),
            transparent
            30%
        ),
        linear-gradient(
            145deg,
            #F2F8FA,
            #E6F2F6
        );
}


.social-sidebar {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        12px;

    padding-top:
        14px;

    border-radius:
        10px
        0
        0
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .75
        );
}


.social-sidebar span {
    width:
        22px;

    height:
        22px;

    border-radius:
        7px;

    background:
        #E2ECEF;
}


.social-sidebar span.active {
    background:
        #C6E3ED;
}


.social-board {
    padding:
        19px;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .065
        );

    border-radius:
        0
        12px
        12px
        0;

    background:
        #FFFFFF;

    box-shadow:
        0
        16px
        38px
        rgba(
            0,
            47,
            70,
            .07
        );
}


.social-board-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.social-board-head small {
    display:
        block;

    color:
        #8A9BA2;

    font-size:
        7px;
}


.social-board-head strong {
    display:
        block;

    margin-top:
        3px;

    color:
        #214A5A;

    font-family:
        var(--heading);

    font-size:
        13px;
}


.social-board-head button {
    height:
        27px;

    padding:
        0
        10px;

    border:
        0;

    border-radius:
        999px;

    background:
        #006A99;

    color:
        #FFFFFF;

    font-size:
        7px;
}


.social-calendar {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    gap:
        7px;

    margin-top:
        17px;
}


.social-calendar i {
    height:
        35px;

    border-radius:
        7px;

    background:
        #F0F5F7;
}


.social-calendar i.scheduled {
    position:
        relative;

    background:
        #CFE8F0;
}


.social-calendar i.scheduled::after {
    content: "";

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    right:
        5px;

    bottom:
        5px;

    border-radius:
        50%;

    background:
        #0072A4;
}


.social-content-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        8px;

    margin-top:
        13px;
}


.social-content-row > div {
    display:
        grid;

    grid-template-columns:
        38px
        1fr;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px;

    border-radius:
        8px;

    background:
        #F7FAFB;
}


.social-content-row span {
    width:
        38px;

    height:
        38px;

    border-radius:
        7px;

    background:
        linear-gradient(
            145deg,
            #D6E8EE,
            #BFDCE6
        );
}


.social-content-row strong {
    width:
        65%;

    height:
        6px;

    border-radius:
        999px;

    background:
        #BFD0D7;
}


.social-status {
    position:
        absolute;

    right:
        15px;

    bottom:
        17px;

    padding:
        10px
        12px;

    border:
        1px solid
        #DDE8EC;

    border-radius:
        10px;

    background:
        #FFFFFF;

    box-shadow:
        0
        15px
        34px
        rgba(
            0,
            47,
            70,
            .10
        );
}


.social-status span {
    display:
        block;

    color:
        #8A9AA1;

    font-size:
        6px;
}


.social-status strong {
    display:
        block;

    margin-top:
        3px;

    color:
        #2D5363;

    font-family:
        var(--heading);

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 980px
) {

    .services-v5 {
        padding-top:
            170px;
    }


    .svc-section-head {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .svc-section-head > p {
        max-width:
            600px;
    }


    .svc-card-web,
    .svc-card-commerce {
        grid-column:
            span 6;
    }


    .svc-card-ads,
    .svc-card-seo,
    .svc-card-meta {
        grid-column:
            span 6;
    }


    .svc-card-meta {
        grid-column:
            span 12;
    }


    .svc-card-social {
        grid-template-columns:
            1fr;

        row-gap:
            30px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .services-v5 {
        padding:
            125px
            0
            85px;
    }


    .svc-heading-copy h2 {
        font-size:
            clamp(
                35px,
                10vw,
                46px
            );
    }


    .svc-bento {
        display:
            block;
    }


    .svc-card {
        min-height:
            0;

        margin-bottom:
            14px;

        padding:
            23px;

        border-radius:
            18px;
    }


    .svc-card-social {
        display:
            block;
    }


    .svc-card h3 {
        font-size:
            19px;
    }


    .svc-web-visual,
    .svc-commerce-visual {
        height:
            245px;
    }


    .svc-browser {
        width:
            100%;

        height:
            240px;
    }


    .svc-web-hero {
        gap:
            10px;
    }


    .web-art-card.back {
        display:
            none;
    }


    .svc-social-visual {
        height:
            300px;

        margin-top:
            24px;

        grid-template-columns:
            38px
            1fr;

        padding:
            12px;
    }


    .social-content-row {
        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| SERVICES V5.1
|--------------------------------------------------------------------------
| Kartlardaki gereksiz dikey boşluklar kaldırılır.
| Hero ve Header'a dokunulmaz.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SECTION RHYTHM
|--------------------------------------------------------------------------
*/

.services-v5 {
    padding-bottom:
        112px;
}


.svc-section-head {
    margin-bottom:
        48px;
}


.svc-section-head > p {
    max-width:
        390px;

    justify-self:
        end;
}


/*
|--------------------------------------------------------------------------
| CARD STRUCTURE RESET
|--------------------------------------------------------------------------
*/

.svc-card {
    /*
     * Flex davranışını tamamen bırakıyoruz.
     * Böylece auto spacing kart içeriğini dağıtamaz.
     */
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr);

    grid-template-rows:
        auto auto;

    align-content:
        start !important;

    align-items:
        start !important;

    justify-content:
        stretch !important;

    gap:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        28px !important;
}


/*
|--------------------------------------------------------------------------
| COPY — HER ZAMAN KARTIN ÜSTÜNDE
|--------------------------------------------------------------------------
*/

.svc-card-copy {
    display:
        block !important;

    position:
        relative;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    align-self:
        start !important;

    justify-self:
        stretch !important;

    transform:
        none !important;
}


.svc-card-meta {
    margin:
        0
        0
        13px !important;
}


.svc-card h3 {
    margin:
        0
        0
        9px !important;

    font-size:
        20px;
}


.svc-card-copy > p {
    min-height:
        0 !important;

    margin:
        0 !important;

    line-height:
        1.68;
}


.svc-link {
    margin-top:
        16px !important;
}


/*
|--------------------------------------------------------------------------
| VISUAL — COPY'DEN HEMEN SONRA
|--------------------------------------------------------------------------
*/

.svc-visual {
    position:
        relative;

    width:
        100%;

    margin:
        24px
        0
        0 !important;

    align-self:
        stretch !important;

    justify-self:
        stretch !important;
}


/*
|--------------------------------------------------------------------------
| LARGE TOP ROW
|--------------------------------------------------------------------------
*/

.svc-card-web,
.svc-card-commerce {
    min-height:
        0 !important;
}


.svc-card-web {
    grid-column:
        span 8;
}


.svc-card-commerce {
    grid-column:
        span 4;
}


.svc-web-visual,
.svc-commerce-visual {
    height:
        292px !important;

    min-height:
        292px !important;
}


/*
|--------------------------------------------------------------------------
| WEB CARD
|--------------------------------------------------------------------------
*/

.svc-card-web
.svc-card-copy {
    max-width:
        610px;
}


.svc-card-web
.svc-card-copy > p {
    max-width:
        570px;
}


.svc-web-visual {
    margin-top:
        26px !important;
}


/*
|--------------------------------------------------------------------------
| E-COMMERCE CARD
|--------------------------------------------------------------------------
*/

.svc-card-commerce
.svc-card-copy > p {
    max-width:
        320px;
}


.svc-commerce-visual {
    margin-top:
        25px !important;
}


/*
|--------------------------------------------------------------------------
| THREE COMPACT CARDS
|--------------------------------------------------------------------------
*/

.svc-card-ads,
.svc-card-seo,
.svc-card-meta {
    grid-column:
        span 4;

    min-height:
        0 !important;

    height:
        auto !important;
}


.svc-card-ads .svc-visual,
.svc-card-seo .svc-visual,
.svc-card-meta .svc-visual {
    height:
        220px !important;

    min-height:
        220px !important;

    margin-top:
        23px !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE ANY OLD AUTO DISTRIBUTION
|--------------------------------------------------------------------------
*/

.svc-card > * {
    flex:
        none !important;
}


.svc-card .svc-visual {
    margin-bottom:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA FULL-WIDTH CARD
|--------------------------------------------------------------------------
*/

.svc-card-social {
    grid-column:
        span 12;

    display:
        grid !important;

    grid-template-columns:
        minmax(270px, .36fr)
        minmax(0, .64fr) !important;

    grid-template-rows:
        auto !important;

    column-gap:
        42px !important;

    align-items:
        center !important;

    min-height:
        0 !important;

    height:
        auto !important;

    padding:
        31px !important;
}


.svc-card-social
.svc-card-copy {
    align-self:
        center !important;
}


.svc-card-social
.svc-card-meta {
    margin-bottom:
        15px !important;
}


.svc-card-social
.svc-card-copy > p {
    max-width:
        360px;
}


.svc-card-social
.svc-visual {
    grid-column:
        2;

    grid-row:
        1;

    height:
        315px !important;

    min-height:
        315px !important;

    margin:
        0 !important;

    align-self:
        center !important;
}


/*
|--------------------------------------------------------------------------
| CARD VISUAL OCCUPANCY
|--------------------------------------------------------------------------
*/

.svc-browser {
    width:
        91%;

    height:
        278px;
}


.svc-web-page {
    padding-bottom:
        12px;
}


.svc-web-hero {
    padding-top:
        29px;
}


.commerce-products {
    margin-top:
        13px;
}


.svc-ads-visual,
.svc-seo-visual,
.svc-meta-visual {
    padding:
        16px;
}


/*
|--------------------------------------------------------------------------
| SLIGHTLY STRONGER CARD BACKGROUNDS
|--------------------------------------------------------------------------
*/

.svc-card {
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFFFF 72%,
            #FCFDFE 100%
        );
}


.svc-card-web {
    background:
        radial-gradient(
            circle
            at
            90%
            90%,
            rgba(
                0,
                118,
                169,
                .025
            ),
            transparent
            28%
        ),
        #FFFFFF;
}


.svc-card-commerce {
    background:
        radial-gradient(
            circle
            at
            90%
            88%,
            rgba(
                73,
                91,
                150,
                .025
            ),
            transparent
            28%
        ),
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| DESKTOP SIZE CONTROL
|--------------------------------------------------------------------------
*/

@media (
    min-width: 981px
) {

    .svc-card-web,
    .svc-card-commerce {
        /*
         * Grid satırındaki iki kart eşit yükseklikte kalır,
         * ancak önceki devasa yüksekliğe zorlanmaz.
         */
        height:
            500px !important;

        min-height:
            500px !important;
    }


    .svc-card-ads,
    .svc-card-seo,
    .svc-card-meta {
        height:
            420px !important;

        min-height:
            420px !important;
    }


    .svc-card-social {
        height:
            375px !important;

        min-height:
            375px !important;
    }


    /*
     * Büyük kartlarda görselin alt bölümü doldurmasını sağla.
     */
    .svc-card-web,
    .svc-card-commerce,
    .svc-card-ads,
    .svc-card-seo,
    .svc-card-meta {
        grid-template-rows:
            auto 1fr;
    }


    .svc-card-web .svc-visual,
    .svc-card-commerce .svc-visual,
    .svc-card-ads .svc-visual,
    .svc-card-seo .svc-visual,
    .svc-card-meta .svc-visual {
        align-self:
            end !important;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 980px
) {

    .svc-section-head > p {
        justify-self:
            start;
    }


    .svc-card {
        height:
            auto !important;

        min-height:
            0 !important;
    }


    .svc-card-web,
    .svc-card-commerce,
    .svc-card-ads,
    .svc-card-seo {
        grid-column:
            span 6;
    }


    .svc-card-meta {
        grid-column:
            span 12;
    }


    .svc-card-social {
        grid-template-columns:
            1fr !important;

        row-gap:
            26px !important;
    }


    .svc-card-social
    .svc-card-copy {
        grid-column:
            1;

        grid-row:
            1;
    }


    .svc-card-social
    .svc-visual {
        grid-column:
            1;

        grid-row:
            2;

        width:
            100%;

        margin:
            0 !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .services-v5 {
        padding-bottom:
            80px;
    }


    .svc-card {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            auto auto !important;

        height:
            auto !important;

        min-height:
            0 !important;

        padding:
            22px !important;
    }


    .svc-card-copy {
        height:
            auto !important;

        min-height:
            0 !important;
    }


    .svc-card .svc-visual {
        height:
            235px !important;

        min-height:
            235px !important;

        margin-top:
            22px !important;
    }


    .svc-card-social
    .svc-visual {
        height:
            285px !important;

        min-height:
            285px !important;
    }

}


/*
|--------------------------------------------------------------------------
| SERVICES V6
|--------------------------------------------------------------------------
| Referans görsel mantığında tamamen yeni kompozisyon
|--------------------------------------------------------------------------
*/

.services-v6 {
    padding: 130px 0 120px;
    background: #FFFFFF;
}

.sv6-head {
    max-width: 860px;
    margin: 0 auto 56px;
    text-align: center;
}

.sv6-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: #EAF4C8;
    color: #516024;
    font-family: var(--heading);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
}

.sv6-head h2 {
    margin: 0;
    color: #15171D;
    font-family: var(--heading);
    font-size: clamp(44px, 5vw, 66px);
    line-height: 1.08;
    letter-spacing: -.055em;
    font-weight: 800;
}

.sv6-head h2 em {
    font-style: normal;
    color: #7B5CFF;
}

.sv6-head p {
    max-width: 760px;
    margin: 18px auto 0;
    color: #7D838D;
    font-size: 16px;
    line-height: 1.8;
}

.sv6-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.sv6-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(18, 34, 44, .08);
    background: #FFFFFF;
    box-shadow: 0 16px 44px rgba(17, 28, 37, .04);
}

.sv6-card-soft {
    background: #FFFFFF;
}

.sv6-card-dark {
    background:
        radial-gradient(circle at 80% 20%, rgba(123, 92, 255, .16), transparent 28%),
        linear-gradient(180deg, #17181F 0%, #121318 100%);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 24px 56px rgba(10, 12, 18, .18);
}

.sv6-card-wide {
    grid-column: span 6;
    min-height: 360px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
    gap: 28px;
    align-items: center;
}

.sv6-card-small {
    grid-column: span 4;
    min-height: 420px;
    padding: 30px;
    display: grid;
    grid-template-rows: auto 1fr;
}

.sv6-card-social-wide {
    grid-column: span 12;
    min-height: 360px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr);
    gap: 28px;
    align-items: center;
}

.sv6-copy {
    position: relative;
    z-index: 2;
}

.sv6-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sv6-meta > span {
    color: #8D99A3;
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.sv6-meta small {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #F2F5F7;
    color: #79858D;
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 700;
}

.sv6-card-dark .sv6-meta > span,
.sv6-card-dark .sv6-meta small {
    color: #D8DDE4;
}

.sv6-card-dark .sv6-meta small {
    background: rgba(255, 255, 255, .08);
}

.sv6-copy h3 {
    margin: 0 0 12px;
    color: #1B1F27;
    font-family: var(--heading);
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 700;
}

.sv6-card-small .sv6-copy h3 {
    font-size: 28px;
}

.sv6-card-dark .sv6-copy h3 {
    color: #FFFFFF;
}

.sv6-copy p {
    margin: 0;
    color: #7B848C;
    font-size: 15px;
    line-height: 1.8;
    max-width: 470px;
}

.sv6-card-dark .sv6-copy p {
    color: #BFC6CF;
}

.sv6-link,
.sv6-bottom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    margin-top: 22px;
    border-radius: 999px;
    border: 1px solid #D5DEE3;
    background: #FFFFFF;
    color: #394850;
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sv6-link:hover,
.sv6-bottom-button:hover {
    transform: translateY(-2px);
    border-color: #BCCCD4;
    box-shadow: 0 10px 24px rgba(17, 28, 37, .08);
}

.sv6-link-light {
    background: #FFFFFF;
    color: #1A1D24;
    border-color: transparent;
}

.sv6-visual {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.sv6-visual-web {
    min-height: 250px;
    padding: 18px;
    background:
        radial-gradient(circle at 85% 20%, rgba(116, 191, 222, .25), transparent 30%),
        linear-gradient(180deg, #EDF7FA 0%, #E6F1F5 100%);
}

.sv6-browser {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 214px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #DDE7EC;
    box-shadow: 0 18px 40px rgba(21, 39, 53, .10);
}

.sv6-browser-top {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    border-bottom: 1px solid #EEF3F6;
    background: #FAFCFD;
}

.sv6-browser-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C5D3DB;
}

.sv6-browser-top span {
    margin-left: auto;
    margin-right: auto;
    color: #B2BDC4;
    font-size: 9px;
}

.sv6-browser-body {
    display: grid;
    grid-template-columns: .95fr .85fr;
    gap: 18px;
    padding: 24px 18px 18px;
    align-items: center;
}

.sv6-web-copy b,
.sv6-web-copy strong,
.sv6-web-copy p {
    display: block;
    border-radius: 999px;
}

.sv6-web-copy b {
    width: 54px;
    height: 6px;
    margin-bottom: 12px;
    background: #8BC2D6;
}

.sv6-web-copy strong {
    width: 88%;
    height: 14px;
    margin-bottom: 8px;
    background: #123E51;
}

.sv6-web-copy strong.short {
    width: 62%;
}

.sv6-web-copy p {
    width: 94%;
    height: 6px;
    margin-top: 10px;
    background: #D5E3E9;
}

.sv6-web-copy p.short {
    width: 72%;
}

.sv6-web-copy button {
    width: 68px;
    height: 30px;
    margin-top: 16px;
    border: 0;
    border-radius: 999px;
    background: #006A99;
}

.sv6-web-stack {
    position: relative;
    min-height: 150px;
}

.sv6-float-card {
    position: absolute;
    border-radius: 14px;
    border: 1px solid #DEEAEE;
    background: #FFFFFF;
    box-shadow: 0 14px 32px rgba(22, 41, 57, .09);
}

.sv6-float-card.large {
    width: 132px;
    height: 110px;
    right: 28px;
    top: 8px;
    padding: 14px;
}

.sv6-float-card.small {
    width: 118px;
    height: 94px;
    left: 10px;
    bottom: 6px;
    padding: 14px;
}

.sv6-float-card i {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #DCEEF4;
    margin-bottom: 12px;
}

.sv6-float-card strong,
.sv6-float-card span {
    display: block;
    border-radius: 999px;
}

.sv6-float-card strong {
    width: 72%;
    height: 8px;
    background: #486270;
}

.sv6-float-card span {
    width: 92%;
    height: 5px;
    background: #D8E4E8;
    margin-top: 8px;
}

.sv6-float-card span.short {
    width: 62%;
}

.sv6-badge {
    position: absolute;
    right: 10px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #DBE8ED;
    box-shadow: 0 14px 30px rgba(18, 34, 44, .10);
}

.sv6-badge small {
    display: block;
    color: #8A99A2;
    font-size: 10px;
}

.sv6-badge strong {
    display: block;
    margin-top: 2px;
    color: #1F4150;
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 700;
}

.sv6-visual-commerce {
    min-height: 250px;
    padding: 18px;
    background:
        linear-gradient(180deg, #F7F5FF 0%, #F0EEF9 100%);
}

.sv6-shop-top {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 12px;
    background: #FFFFFF;
}

.sv6-shop-top i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #546D8A;
}

.sv6-shop-top span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #F4F6F9;
    color: #B0B9C0;
    font-size: 9px;
}

.sv6-shop-top b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: #E8F0FA;
    color: #5A6E8B;
    font-size: 10px;
}

.sv6-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.sv6-product {
    padding: 10px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E6EBF2;
}

.sv6-product .thumb {
    height: 92px;
    border-radius: 10px;
    background: linear-gradient(180deg, #E4EAF4 0%, #DCE4EF 100%);
}

.sv6-product span,
.sv6-product strong {
    display: block;
    border-radius: 999px;
}

.sv6-product span {
    width: 70%;
    height: 6px;
    margin-top: 10px;
    background: #D7E0E8;
}

.sv6-product strong {
    width: 44%;
    height: 8px;
    margin-top: 8px;
    background: #3E5868;
}

.sv6-checkout {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 170px;
    padding: 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E0E6EF;
    box-shadow: 0 16px 34px rgba(23, 30, 46, .10);
}

.sv6-checkout small,
.sv6-checkout span {
    display: block;
    color: #8D98A2;
    font-size: 10px;
}

.sv6-checkout strong {
    display: block;
    margin-top: 4px;
    color: #24343D;
    font-family: var(--heading);
    font-size: 16px;
    font-weight: 700;
}

.sv6-checkout span {
    margin-top: 4px;
}

.sv6-checkout button {
    width: 100%;
    height: 34px;
    margin-top: 12px;
    border: 0;
    border-radius: 999px;
    background: #2E4D81;
    color: #FFFFFF;
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 600;
}

.sv6-visual-seo,
.sv6-visual-meta {
    margin-top: 24px;
    min-height: 200px;
}

.sv6-visual-seo {
    padding: 16px;
    background: linear-gradient(180deg, #F4F7F8 0%, #ECF2F5 100%);
}

.sv6-seo-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: #FFFFFF;
    margin-bottom: 10px;
}

.sv6-seo-row > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #ECF5F9;
    color: #7A90A2;
    font-size: 10px;
    font-weight: 700;
}

.sv6-seo-row strong {
    display: block;
    color: #3B4854;
    font-size: 11px;
    font-weight: 600;
}

.sv6-seo-row small {
    display: block;
    margin-top: 4px;
    color: #6F4BFF;
    font-size: 10px;
}

.sv6-seo-graph {
    height: 100px;
    margin-top: 8px;
}

.sv6-seo-graph svg {
    width: 100%;
    height: 100%;
}

.sv6-visual-ads-dark {
    margin-top: 22px;
    min-height: 200px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}

.sv6-dark-chart-head span,
.sv6-dark-chart-head strong {
    display: block;
}

.sv6-dark-chart-head span {
    color: #B5BDCA;
    font-size: 11px;
}

.sv6-dark-chart-head strong {
    color: #FFFFFF;
    margin-top: 5px;
    font-family: var(--heading);
    font-size: 14px;
    font-weight: 600;
}

.sv6-dark-chart {
    height: 118px;
    margin-top: 14px;
}

.sv6-dark-chart svg {
    width: 100%;
    height: 100%;
}

.sv6-visual-meta {
    padding: 16px;
    background: linear-gradient(180deg, #F5F4FB 0%, #ECEAF5 100%);
}

.sv6-meta-post {
    overflow: hidden;
    width: 76%;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E3E8EE;
    box-shadow: 0 16px 34px rgba(22, 33, 44, .08);
}

.sv6-meta-top {
    display: flex;
    gap: 10px;
    padding: 12px;
}

.sv6-meta-top > i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #DBE8EE;
}

.sv6-meta-top b,
.sv6-meta-top span {
    display: block;
    border-radius: 999px;
}

.sv6-meta-top b {
    width: 50px;
    height: 6px;
    background: #C9D6DE;
}

.sv6-meta-top span {
    width: 36px;
    height: 5px;
    margin-top: 6px;
    background: #E1E8EC;
}

.sv6-meta-body {
    display: grid;
    grid-template-columns: 1fr 82px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    min-height: 120px;
    background: linear-gradient(180deg, #D6E8EF 0%, #CBE0E8 100%);
}

.sv6-meta-copy strong,
.sv6-meta-copy span {
    display: block;
    border-radius: 999px;
}

.sv6-meta-copy strong {
    width: 76%;
    height: 8px;
    background: #445C67;
    margin-bottom: 7px;
}

.sv6-meta-copy strong.short {
    width: 58%;
}

.sv6-meta-copy span {
    width: 88%;
    height: 5px;
    background: rgba(255,255,255,.75);
    margin-top: 10px;
}

.sv6-meta-copy span.short {
    width: 64%;
    margin-top: 6px;
}

.sv6-meta-object {
    width: 74px;
    height: 88px;
    border-radius: 26px 26px 14px 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EFF5F7 100%);
}

.sv6-meta-result {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 116px;
    padding: 12px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #DEE8ED;
    box-shadow: 0 16px 34px rgba(18, 34, 44, .10);
}

.sv6-meta-result small,
.sv6-meta-result span {
    display: block;
    color: #8C99A3;
    font-size: 10px;
}

.sv6-meta-result strong {
    display: block;
    margin: 4px 0;
    color: #1B2C34;
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 700;
}

.sv6-visual-social {
    min-height: 260px;
    padding: 18px;
    background:
        radial-gradient(circle at 85% 20%, rgba(117, 189, 218, .18), transparent 30%),
        linear-gradient(180deg, #EEF7FA 0%, #E6F1F6 100%);
}

.sv6-social-shell {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    min-height: 224px;
}

.sv6-social-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
}

.sv6-social-side i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #DCE7EC;
}

.sv6-social-main {
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #DEEAEE;
    box-shadow: 0 16px 34px rgba(18, 34, 44, .08);
    padding: 18px;
}

.sv6-social-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sv6-social-head small {
    display: block;
    color: #8C98A1;
    font-size: 10px;
}

.sv6-social-head strong {
    display: block;
    margin-top: 4px;
    color: #253640;
    font-family: var(--heading);
    font-size: 22px;
    font-weight: 700;
}

.sv6-social-head button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #006A99;
    color: #FFFFFF;
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 600;
}

.sv6-social-calendar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.sv6-social-calendar i {
    height: 28px;
    border-radius: 8px;
    background: #EEF3F5;
}

.sv6-social-calendar i.active {
    position: relative;
    background: #CAE5EE;
}

.sv6-social-calendar i.active::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0072A4;
}

.sv6-social-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.sv6-social-bottom div {
    height: 42px;
    border-radius: 10px;
    background: #F4F8FA;
}

.sv6-social-note {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #DCE7EC;
    box-shadow: 0 16px 34px rgba(18, 34, 44, .10);
}

.sv6-social-note small,
.sv6-social-note strong {
    display: block;
}

.sv6-social-note small {
    color: #8C98A1;
    font-size: 10px;
}

.sv6-social-note strong {
    margin-top: 4px;
    color: #273843;
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 700;
}

.sv6-bottom-cta {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.sv6-bottom-button {
    min-width: 232px;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    .sv6-card-wide {
        grid-template-columns: 1fr;
    }

    .sv6-card-social-wide {
        grid-template-columns: 1fr;
    }

    .sv6-copy p {
        max-width: none;
    }
}

@media (max-width: 980px) {
    .services-v6 {
        padding: 110px 0 95px;
    }

    .sv6-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sv6-card-wide {
        grid-column: span 6;
    }

    .sv6-card-small {
        grid-column: span 3;
    }

    .sv6-card-social-wide {
        grid-column: span 6;
    }
}

@media (max-width: 720px) {
    .services-v6 {
        padding: 90px 0 70px;
    }

    .sv6-head {
        margin-bottom: 36px;
    }

    .sv6-head h2 {
        font-size: clamp(34px, 10vw, 48px);
    }

    .sv6-head p {
        font-size: 14px;
    }

    .sv6-grid {
        display: block;
    }

    .sv6-card {
        margin-bottom: 16px;
        min-height: 0;
    }

    .sv6-card-wide,
    .sv6-card-small,
    .sv6-card-social-wide {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px;
    }

    .sv6-copy h3 {
        font-size: 26px;
    }

    .sv6-visual-web,
    .sv6-visual-commerce,
    .sv6-visual-social {
        min-height: 220px;
    }

    .sv6-browser-body {
        grid-template-columns: 1fr;
    }

    .sv6-float-card.large,
    .sv6-float-card.small {
        transform: scale(.92);
    }

    .sv6-meta-post {
        width: 82%;
    }

    .sv6-checkout,
    .sv6-meta-result,
    .sv6-social-note,
    .sv6-badge {
        transform: scale(.9);
        transform-origin: right bottom;
    }
}


/*
|--------------------------------------------------------------------------
| SERVICES V6.1
|--------------------------------------------------------------------------
| 1. Ana içerik genişliği +%20
| 2. Services başlığı küçültüldü
| 3. 01 / kategori etiketleri yerine ikon
| 4. CTA butonları yeniden tasarlandı
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| WIDER SITE CONTENT
|--------------------------------------------------------------------------
|
| Eski container yaklaşık 1220px.
| Yeni ana içerik 1480px.
| Artış yaklaşık %21.
|
| Hero ve Header şu aşamada onaylanan genişlikte bırakılıyor.
|--------------------------------------------------------------------------
*/

:root {
    --container:
        1480px;
}


.container {
    width:
        min(
            calc(100% - 56px),
            var(--container)
        );
}


/*
 * Hero ve Header'ı şimdilik mevcut ölçüsünde koru.
 */
.header .container,
.hero .container {
    width:
        min(
            calc(100% - 48px),
            1220px
        );
}


/*
|--------------------------------------------------------------------------
| SERVICES SECTION WIDTH / SPACING
|--------------------------------------------------------------------------
*/

.services-v6 {
    padding:
        118px
        0
        118px;
}


.services-v6 .container {
    width:
        min(
            calc(100% - 56px),
            1480px
        );
}


/*
|--------------------------------------------------------------------------
| SERVICES TITLE
|--------------------------------------------------------------------------
*/

.sv6-head {
    max-width:
        900px;

    margin:
        0 auto
        58px;

    text-align:
        center;
}


.sv6-kicker {
    margin-bottom:
        17px;

    padding:
        7px
        15px;

    font-size:
        11px;
}


.sv6-head h2 {
    max-width:
        870px;

    margin:
        0 auto;

    font-size:
        clamp(
            36px,
            3.15vw,
            48px
        ) !important;

    line-height:
        1.08;

    letter-spacing:
        -.048em;
}


.sv6-head p {
    max-width:
        760px;

    margin-top:
        17px;

    font-size:
        14px;

    line-height:
        1.75;
}


/*
|--------------------------------------------------------------------------
| GRID / CARD PROPORTIONS
|--------------------------------------------------------------------------
*/

.sv6-grid {
    gap:
        26px;
}


.sv6-card {
    border-radius:
        25px;
}


.sv6-card-wide {
    min-height:
        350px;

    padding:
        32px;

    grid-template-columns:
        minmax(300px, .88fr)
        minmax(360px, 1.12fr);

    gap:
        35px;
}


.sv6-card-small {
    min-height:
        410px;

    padding:
        31px;
}


.sv6-card-social-wide {
    padding:
        32px;

    min-height:
        350px;
}


/*
|--------------------------------------------------------------------------
| REMOVE NUMBER / CATEGORY PILLS
|--------------------------------------------------------------------------
*/

.sv6-meta {
    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    margin:
        0
        0
        20px;

    padding:
        0;
}


.sv6-meta > span,
.sv6-meta > small {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| SERVICE ICON BASE
|--------------------------------------------------------------------------
*/

.sv6-meta::before {
    content: "";

    width:
        38px;

    height:
        38px;

    display:
        block;

    flex:
        0 0
        38px;

    background:
        currentColor;

    color:
        #304651;

    -webkit-mask:
        var(--sv6-icon)
        center
        /
        27px
        27px
        no-repeat;

    mask:
        var(--sv6-icon)
        center
        /
        27px
        27px
        no-repeat;
}


/*
|--------------------------------------------------------------------------
| ICON — WEB
|--------------------------------------------------------------------------
*/

.sv6-card-web {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M3 8h18M7 6h.01M10 6h.01M7 12h4M7 15h7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| ICON — E-COMMERCE
|--------------------------------------------------------------------------
*/

.sv6-card-commerce {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| ICON — SEO
|--------------------------------------------------------------------------
*/

.sv6-card-seo {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='m15 15 5 5M8 11h5M10.5 8.5v5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| ICON — GOOGLE ADS
|--------------------------------------------------------------------------
*/

.sv6-card-ads {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 18 10 13l3 3 6-8M15 8h4v4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 6v12h14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| ICON — META
|--------------------------------------------------------------------------
*/

.sv6-card-meta {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 15c1.8-5.6 3.2-8 5-8 2.8 0 4.2 9 6.5 9 1.4 0 2.6-1.6 3.5-4 .9-2.5.4-5-1.3-5-2.2 0-4.7 4.3-6.2 6.4C10.5 15.5 9 17 7.4 17c-2 0-3.6-1.5-2.9-4.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| ICON — SOCIAL
|--------------------------------------------------------------------------
*/

.sv6-card-social {
    --sv6-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M8 14h2M14 14h2M8 17h2M14 17h2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| DARK CARD ICON
|--------------------------------------------------------------------------
*/

.sv6-card-dark
.sv6-meta::before {
    color:
        rgba(
            255,
            255,
            255,
            .94
        );
}


/*
|--------------------------------------------------------------------------
| TITLES / BODY INSIDE CARDS
|--------------------------------------------------------------------------
*/

.sv6-copy h3 {
    margin-bottom:
        11px;

    font-size:
        29px;

    line-height:
        1.12;

    letter-spacing:
        -.035em;
}


.sv6-card-small
.sv6-copy h3 {
    font-size:
        24px;
}


.sv6-copy p {
    font-size:
        13px;

    line-height:
        1.72;
}


/*
|--------------------------------------------------------------------------
| NEW CTA BUTTONS
|--------------------------------------------------------------------------
|
| Referanstaki gibi:
| küçük, sakin, tek satır, ince outline.
|--------------------------------------------------------------------------
*/

.sv6-link {
    width:
        fit-content;

    min-width:
        0;

    min-height:
        39px;

    margin-top:
        19px;

    padding:
        0
        15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #D4DEE3;

    border-radius:
        999px;

    background:
        transparent;

    color:
        #384A53;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -.01em;

    white-space:
        nowrap;

    box-shadow:
        none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.sv6-link::after {
    content:
        "↗";

    display:
        inline-block;

    margin-left:
        9px;

    font-size:
        11px;

    line-height:
        1;

    opacity:
        .62;

    transition:
        transform .18s ease;
}


.sv6-link:hover {
    transform:
        translateY(-1px);

    border-color:
        #AFC0C8;

    background:
        #F7FAFB;

    color:
        #173A49;

    box-shadow:
        none;
}


.sv6-link:hover::after {
    transform:
        translate(
            2px,
            -2px
        );
}


/*
|--------------------------------------------------------------------------
| DARK CTA
|--------------------------------------------------------------------------
*/

.sv6-card-dark
.sv6-link {
    border-color:
        rgba(
            255,
            255,
            255,
            .28
        );

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    color:
        #FFFFFF;
}


.sv6-card-dark
.sv6-link:hover {
    border-color:
        #FFFFFF;

    background:
        #FFFFFF;

    color:
        #17191E;
}


/*
|--------------------------------------------------------------------------
| BOTTOM CTA
|--------------------------------------------------------------------------
*/

.sv6-bottom-button {
    min-width:
        0;

    min-height:
        42px;

    margin-top:
        0;

    padding:
        0
        18px;

    border:
        1px solid
        #D2DDE2;

    background:
        #FFFFFF;

    font-size:
        11px;

    font-weight:
        600;

    box-shadow:
        none;
}


.sv6-bottom-cta {
    margin-top:
        31px;
}


/*
|--------------------------------------------------------------------------
| VISUAL BALANCE AFTER WIDER CONTAINER
|--------------------------------------------------------------------------
*/

.sv6-visual-web,
.sv6-visual-commerce {
    min-height:
        255px;
}


.sv6-browser-body {
    padding:
        25px
        21px
        20px;
}


.sv6-card-small
.sv6-visual {
    margin-top:
        22px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1180px
) {

    :root {
        --container:
            1180px;
    }


    .services-v6 .container {
        width:
            min(
                calc(100% - 48px),
                1180px
            );
    }


    .sv6-card-wide {
        grid-template-columns:
            1fr;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .container,
    .services-v6 .container,
    .header .container,
    .hero .container {
        width:
            min(
                calc(100% - 32px),
                100%
            );
    }


    .sv6-head h2 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            ) !important;
    }


    .sv6-head p {
        font-size:
            13px;
    }


    .sv6-meta {
        min-height:
            36px;

        margin-bottom:
            15px;
    }


    .sv6-meta::before {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

        -webkit-mask-size:
            24px
            24px;

        mask-size:
            24px
            24px;
    }


    .sv6-link {
        font-size:
            10px;
    }

}


/*
|--------------------------------------------------------------------------
| SERVICES V6.2 — UNIFIED SERVICE TITLES
|--------------------------------------------------------------------------
*/

.services-v6 .sv6-copy h3,
.services-v6 .sv6-card-small .sv6-copy h3,
.services-v6 .sv6-card-wide .sv6-copy h3,
.services-v6 .sv6-card-social-wide .sv6-copy h3 {
    font-size: 24px !important;
    line-height: 1.16;
    letter-spacing: -.03em;
}


/*
|--------------------------------------------------------------------------
| V50 — NO TURQUOISE / LIGHT CYAN
|--------------------------------------------------------------------------
| Açık mavi-turkuaz yüzey paleti kaldırıldı.
| Yeni sistem: white + neutral gray + corporate dark blue.
|--------------------------------------------------------------------------
*/

:root {
    --surface-01: #F7F7F8;
    --surface-02: #EFF1F3;
    --surface-03: #E3E6E9;
    --surface-04: #D8DDE1;

    --brand-main: #00547B;
    --brand-dark: #003852;

    --neutral-dark: #171A1F;
}


/*
|--------------------------------------------------------------------------
| WEB SITE VISUAL
|--------------------------------------------------------------------------
*/

.sv6-visual-web {
    background:
        linear-gradient(
            145deg,
            #F7F7F8,
            #ECEEEF
        ) !important;
}


.sv6-web-copy b {
    background:
        #8E9AA1 !important;
}


.sv6-float-card i {
    background:
        #E4E7E9 !important;
}


.sv6-badge strong {
    color:
        var(--brand-dark) !important;
}


/*
|--------------------------------------------------------------------------
| E-COMMERCE
|--------------------------------------------------------------------------
*/

.sv6-visual-commerce {
    background:
        linear-gradient(
            145deg,
            #F7F7F8,
            #EEEFF2
        ) !important;
}


.sv6-shop-top b {
    background:
        #E6E9EC !important;

    color:
        var(--brand-main) !important;
}


/*
|--------------------------------------------------------------------------
| SEO
|--------------------------------------------------------------------------
*/

.sv6-visual-seo {
    background:
        linear-gradient(
            180deg,
            #F7F7F8,
            #ECEFF1
        ) !important;
}


.sv6-seo-row > span {
    background:
        #E7EAEC !important;

    color:
        #59666D !important;
}


/*
|--------------------------------------------------------------------------
| META ADS
|--------------------------------------------------------------------------
*/

.sv6-visual-meta {
    background:
        linear-gradient(
            145deg,
            #F6F6F7,
            #ECEDEF
        ) !important;
}


.sv6-meta-top > i {
    background:
        #E1E4E6 !important;
}


.sv6-meta-body {
    background:
        linear-gradient(
            145deg,
            #E7E9EB,
            #DADDE0
        ) !important;
}


.sv6-meta-object {
    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #ECEEEF
        ) !important;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA
|--------------------------------------------------------------------------
*/

.sv6-visual-social {
    background:
        linear-gradient(
            145deg,
            #F7F7F8,
            #ECEFF1
        ) !important;
}


.sv6-social-side i {
    background:
        #E0E4E6 !important;
}


.sv6-social-calendar i.active {
    background:
        #D7DCE0 !important;
}


.sv6-social-calendar i.active::after {
    background:
        var(--brand-main) !important;
}


/*
|--------------------------------------------------------------------------
| GENERIC UI ACCENTS
|--------------------------------------------------------------------------
*/

.sv6-browser {
    border-color:
        #DCE1E4 !important;
}


.sv6-product .thumb {
    background:
        linear-gradient(
            145deg,
            #E7E9EB,
            #DADDE0
        ) !important;
}


.sv6-meta-result,
.sv6-checkout,
.sv6-badge,
.sv6-social-note {
    border-color:
        #D8DDE1 !important;
}


/*
|--------------------------------------------------------------------------
| FUTURE RULE
|--------------------------------------------------------------------------
|
| Yeni SaaS illüstrasyonlarında açık turkuaz / cyan yüzey kullanılmayacak.
|
| Kullanılacak sistem:
| #FFFFFF
| #F7F7F8
| #EFF1F3
| #E3E6E9
| #D8DDE1
| #00547B
| #003852
| #171A1F
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| V51 — NEUTRAL HERO
|--------------------------------------------------------------------------
| Hero içindeki açık mavi / turkuaz yüzeyler kaldırıldı.
| Kompozisyon korunur.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO BACKGROUND
|--------------------------------------------------------------------------
*/

.hero {
    background:
        radial-gradient(
            ellipse
            at 50% 4%,
            rgba(23, 26, 31, .045),
            transparent 31%
        ),
        radial-gradient(
            ellipse
            at 13% 28%,
            rgba(110, 116, 122, .045),
            transparent 24%
        ),
        radial-gradient(
            ellipse
            at 87% 26%,
            rgba(110, 116, 122, .045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #F5F6F7 0%,
            #FAFAFB 23%,
            #FFFFFF 55%,
            #FFFFFF 100%
        ) !important;
}


.hero::before {
    background:
        radial-gradient(
            ellipse
            at 50% 10%,
            rgba(255, 255, 255, .35),
            transparent 42%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| HERO EYEBROW
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    background:
        #F7F7F8 !important;

    border-color:
        #E1E4E6 !important;

    color:
        #00547B !important;
}


/*
|--------------------------------------------------------------------------
| PRODUCT GLOW
|--------------------------------------------------------------------------
*/

.product-stage::before,
.hero-media-stage::before {
    background:
        radial-gradient(
            ellipse
            at center,
            rgba(23, 26, 31, .075) 0%,
            rgba(23, 26, 31, .035) 40%,
            rgba(23, 26, 31, 0) 74%
        ) !important;

    filter:
        blur(38px) !important;
}


.product-stage::after,
.hero-media-stage::after {
    background:
        rgba(23, 26, 31, .075) !important;

    opacity:
        .38 !important;
}


/*
|--------------------------------------------------------------------------
| BROWSER / DASHBOARD
|--------------------------------------------------------------------------
*/

.browser,
.hero-media-browser {
    border-color:
        #DDE1E4 !important;

    background:
        #FFFFFF !important;
}


.browser-header,
.hero-media-top {
    background:
        #F7F7F8 !important;

    border-bottom-color:
        #E5E8EA !important;
}


.browser-dots i,
.hero-media-dots i {
    background:
        #C9CDD0 !important;
}


.browser-address,
.hero-media-address {
    border-color:
        #E1E4E6 !important;

    background:
        #FFFFFF !important;

    color:
        #999FA4 !important;
}


/*
|--------------------------------------------------------------------------
| DASH SIDEBAR
|--------------------------------------------------------------------------
*/

.dash-sidebar {
    background:
        #FAFAFA !important;

    border-right-color:
        #E7E9EB !important;
}


.dash-menu {
    background:
        #ECEEEF !important;
}


.dash-menu.active {
    background:
        #D9DDE0 !important;
}


/*
|--------------------------------------------------------------------------
| KPI / CARDS
|--------------------------------------------------------------------------
*/

.kpi,
.chart-card,
.lead-card {
    border-color:
        #E3E6E8 !important;

    background:
        #FFFFFF !important;
}


.channel-row div {
    background:
        #F5F6F7 !important;
}


/*
|--------------------------------------------------------------------------
| CHART
|--------------------------------------------------------------------------
*/

.real-chart .line {
    stroke:
        #00547B !important;
}


.real-chart .area {
    fill:
        rgba(23, 26, 31, .055) !important;
}


.chart-grid-lines i {
    border-bottom-color:
        #ECEEEF !important;
}


.chart-legend .google {
    background:
        #00547B !important;
}


.chart-legend .seo {
    background:
        #8B9297 !important;
}


.chart-legend .social {
    background:
        #C3C7CA !important;
}


/*
|--------------------------------------------------------------------------
| LEADS / AVATARS
|--------------------------------------------------------------------------
*/

.avatar {
    background:
        #ECEEEF !important;

    color:
        #00547B !important;
}


.lead b {
    background:
        #F2F3F4 !important;

    color:
        #697178 !important;
}


/*
|--------------------------------------------------------------------------
| FLOATING KPI CARDS
|--------------------------------------------------------------------------
*/

.float-card {
    border-color:
        #DDE1E4 !important;

    background:
        #FFFFFF !important;

    box-shadow:
        0 16px 38px
        rgba(23, 26, 31, .085) !important;
}


/*
|--------------------------------------------------------------------------
| HERO PROOF
|--------------------------------------------------------------------------
*/

.hero-mini-proof span::before {
    color:
        #00547B !important;
}


/*
|--------------------------------------------------------------------------
| FUTURE HERO COLOR RULE
|--------------------------------------------------------------------------
|
| Hero içerisinde kullanılacak açık yüzeyler:
|
| #FFFFFF
| #F7F7F8
| #EFF1F3
| #E3E6E9
| #D8DDE1
|
| Marka aksanları:
|
| #00547B
| #003852
| #171A1F
|
| Açık turkuaz / cyan kullanılmayacak.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| V52 — SLATE HERO ATMOSPHERE
|--------------------------------------------------------------------------
| Turkuaz yok.
| Beyaz boşluk yok.
| Kurumsal mavilerle uyumlu gri-mavi / slate Hero.
|--------------------------------------------------------------------------
*/


.hero {
    position: relative;

    background:
        radial-gradient(
            ellipse
            at 50% 2%,
            rgba(0, 84, 123, .085) 0%,
            rgba(0, 84, 123, .035) 30%,
            rgba(0, 84, 123, 0) 58%
        ),
        radial-gradient(
            ellipse
            at 8% 34%,
            rgba(76, 97, 110, .065) 0%,
            rgba(76, 97, 110, 0) 34%
        ),
        radial-gradient(
            ellipse
            at 92% 30%,
            rgba(76, 97, 110, .055) 0%,
            rgba(76, 97, 110, 0) 34%
        ),
        linear-gradient(
            180deg,
            #E9EEF2 0%,
            #EDF1F4 20%,
            #F2F4F6 52%,
            #F7F8F9 82%,
            #FFFFFF 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| SOFT DEPTH LAYER
|--------------------------------------------------------------------------
*/

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse
            at 50% 38%,
            rgba(255, 255, 255, .72) 0%,
            rgba(255, 255, 255, .30) 32%,
            rgba(255, 255, 255, 0) 66%
        ) !important;

    opacity: 1 !important;
}


/*
|--------------------------------------------------------------------------
| KEEP CONTENT ABOVE BACKGROUND
|--------------------------------------------------------------------------
*/

.hero-inner,
.hero-copy,
.product-stage,
.hero-media-stage {
    position: relative;
    z-index: 2;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    background:
        rgba(255, 255, 255, .78) !important;

    border-color:
        rgba(0, 56, 82, .10) !important;

    color:
        #00547B !important;

    box-shadow:
        0 6px 18px
        rgba(0, 56, 82, .025) !important;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD AMBIENT LIGHT
|--------------------------------------------------------------------------
*/

.product-stage::before,
.hero-media-stage::before {
    background:
        radial-gradient(
            ellipse
            at center,
            rgba(0, 56, 82, .095) 0%,
            rgba(0, 56, 82, .045) 39%,
            rgba(0, 56, 82, 0) 73%
        ) !important;

    filter:
        blur(40px) !important;
}


.product-stage::after,
.hero-media-stage::after {
    background:
        rgba(0, 47, 70, .08) !important;

    opacity:
        .40 !important;
}


/*
|--------------------------------------------------------------------------
| HERO PROOF / SMALL DETAILS
|--------------------------------------------------------------------------
*/

.hero-mini-proof {
    color:
        #697981 !important;
}


.hero-mini-proof span::before {
    color:
        #00547B !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .hero {
        background:
            radial-gradient(
                ellipse
                at 50% 3%,
                rgba(0, 84, 123, .075),
                transparent 45%
            ),
            linear-gradient(
                180deg,
                #E9EEF2 0%,
                #EFF2F4 45%,
                #F7F8F9 82%,
                #FFFFFF 100%
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V53 — UNIFIED WIDTH + WARM HERO
|--------------------------------------------------------------------------
|
| 1. Açık mavi / gri-mavi Hero tamamen kaldırıldı.
| 2. Hero sıcak stone / kırık beyaz palete geçti.
| 3. Header, Hero ve tüm bölümler aynı genişliğe getirildi.
| 4. Önceki yaklaşık %21 genişleme, yaklaşık %11'e indirildi.
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| UNIFIED SITE WIDTH
|--------------------------------------------------------------------------
*/

:root {
    --container:
        1350px;
}


.container,
.header .container,
.hero .container,
.services-v6 .container {
    width:
        min(
            calc(100% - 56px),
            1350px
        ) !important;

    max-width:
        1350px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD SECTION-SPECIFIC WIDTH EXCEPTIONS
|--------------------------------------------------------------------------
*/

.header-wrap,
.hero-inner,
.sv6-head,
.system-layout,
.about-layout,
.contact-layout,
.footer-layout {
    max-width:
        none;
}


/*
|--------------------------------------------------------------------------
| WARM / STONE HERO
|--------------------------------------------------------------------------
|
| Açık mavi yok.
| Turkuaz yok.
| Slate mavi yok.
|--------------------------------------------------------------------------
*/

.hero {
    position:
        relative;

    background:
        radial-gradient(
            ellipse
            at 50% 3%,
            rgba(116, 91, 70, .055) 0%,
            rgba(116, 91, 70, .018) 31%,
            rgba(116, 91, 70, 0) 58%
        ),
        radial-gradient(
            ellipse
            at 8% 32%,
            rgba(121, 108, 96, .035) 0%,
            rgba(121, 108, 96, 0) 31%
        ),
        radial-gradient(
            ellipse
            at 92% 30%,
            rgba(121, 108, 96, .035) 0%,
            rgba(121, 108, 96, 0) 31%
        ),
        linear-gradient(
            180deg,
            #F1EDE8 0%,
            #F4F1ED 22%,
            #F8F6F3 52%,
            #FCFBFA 82%,
            #FFFFFF 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| HERO LIGHT DEPTH
|--------------------------------------------------------------------------
*/

.hero::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse
            at 50% 43%,
            rgba(255, 255, 255, .67) 0%,
            rgba(255, 255, 255, .23) 34%,
            rgba(255, 255, 255, 0) 68%
        ) !important;

    opacity:
        1 !important;
}


/*
|--------------------------------------------------------------------------
| HERO EYEBROW
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    background:
        rgba(255, 255, 255, .70) !important;

    border-color:
        rgba(71, 62, 54, .10) !important;

    color:
        #00547B !important;

    box-shadow:
        none !important;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD AMBIENCE — NEUTRAL ONLY
|--------------------------------------------------------------------------
*/

.product-stage::before,
.hero-media-stage::before {
    background:
        radial-gradient(
            ellipse
            at center,
            rgba(67, 59, 52, .080) 0%,
            rgba(67, 59, 52, .035) 41%,
            rgba(67, 59, 52, 0) 74%
        ) !important;

    filter:
        blur(40px) !important;
}


.product-stage::after,
.hero-media-stage::after {
    background:
        rgba(49, 44, 40, .075) !important;

    opacity:
        .38 !important;
}


/*
|--------------------------------------------------------------------------
| NO LIGHT BLUE / CYAN SURFACES
|--------------------------------------------------------------------------
|
| Ana marka mavileri kalır.
| Açık yüzeylerde yalnızca beyaz, gri ve stone tonları.
|--------------------------------------------------------------------------
*/

.sv6-visual-web,
.svc-web-visual {
    background:
        linear-gradient(
            145deg,
            #F7F6F4,
            #ECE9E5
        ) !important;
}


.sv6-visual-commerce,
.svc-commerce-visual {
    background:
        linear-gradient(
            145deg,
            #F7F6F5,
            #EEEBE8
        ) !important;
}


.sv6-visual-seo,
.svc-seo-visual {
    background:
        linear-gradient(
            180deg,
            #F7F7F6,
            #ECEDEB
        ) !important;
}


.sv6-visual-meta,
.svc-meta-visual {
    background:
        linear-gradient(
            145deg,
            #F6F5F4,
            #ECEAE8
        ) !important;
}


.sv6-visual-social,
.svc-social-visual {
    background:
        linear-gradient(
            145deg,
            #F7F6F4,
            #ECEAE7
        ) !important;
}


/*
|--------------------------------------------------------------------------
| GENERIC LIGHT UI SURFACES
|--------------------------------------------------------------------------
*/

.sv6-float-card i,
.web-art-card i,
.sv6-social-side i,
.sv6-meta-top > i {
    background:
        #E3E1DE !important;
}


.sv6-seo-row > span {
    background:
        #E8E6E3 !important;

    color:
        #58636A !important;
}


.sv6-social-calendar i.active {
    background:
        #DAD8D5 !important;
}


.sv6-meta-body {
    background:
        linear-gradient(
            145deg,
            #E7E5E2,
            #DCD9D5
        ) !important;
}


/*
|--------------------------------------------------------------------------
| CORPORATE BLUE REMAINS ONLY AS ACCENT
|--------------------------------------------------------------------------
*/

.sv6-web-copy button,
.sv6-social-head button,
.form-button {
    background:
        #00547B !important;
}


.sv6-web-copy b {
    background:
        #7F8C92 !important;
}


.sv6-social-calendar i.active::after {
    background:
        #00547B !important;
}


/*
|--------------------------------------------------------------------------
| LARGE SCREEN
|--------------------------------------------------------------------------
*/

@media (min-width: 1400px) {

    .container,
    .header .container,
    .hero .container,
    .services-v6 .container {
        width:
            min(
                calc(100% - 64px),
                1350px
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1180px) {

    .container,
    .header .container,
    .hero .container,
    .services-v6 .container {
        width:
            min(
                calc(100% - 48px),
                100%
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .container,
    .header .container,
    .hero .container,
    .services-v6 .container {
        width:
            min(
                calc(100% - 32px),
                100%
            ) !important;
    }


    .hero {
        background:
            linear-gradient(
                180deg,
                #F1EDE8 0%,
                #F5F2EE 45%,
                #FAF8F6 78%,
                #FFFFFF 100%
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V54 — GROWTH SYSTEM
|--------------------------------------------------------------------------
*/


.growth-system-v54 {
    padding:
        122px
        0;

    background:
        #F5F3F0;
}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.gs54-intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .65fr);

    gap:
        105px;

    align-items:
        end;

    margin-bottom:
        60px;
}


.gs54-kicker {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0
        13px;

    margin-bottom:
        17px;

    border:
        1px solid
        #DED9D3;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .62
        );

    color:
        #59636A;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.gs54-intro h2 {
    max-width:
        720px;

    margin:
        0;

    color:
        #181B1F;

    font-family:
        var(--heading);

    font-size:
        clamp(
            39px,
            4.1vw,
            56px
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -.05em;
}


.gs54-intro-side {
    padding-bottom:
        4px;
}


.gs54-intro-side > p {
    max-width:
        510px;

    margin:
        0;

    color:
        #73787C;

    font-size:
        13px;

    line-height:
        1.82;
}


.gs54-flow-label {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        25px;

    color:
        #81878B;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.gs54-flow-label i {
    width:
        20px;

    height:
        1px;

    background:
        #C9C5C0;
}


/*
|--------------------------------------------------------------------------
| PROCESS GRID
|--------------------------------------------------------------------------
*/

.gs54-process {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        16px;
}


/*
|--------------------------------------------------------------------------
| STEP
|--------------------------------------------------------------------------
*/

.gs54-step {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        370px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        27px;

    border:
        1px solid
        #E1DDD8;

    border-radius:
        22px;

    background:
        #FFFFFF;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.gs54-step:hover {
    transform:
        translateY(-4px);

    border-color:
        #CDC7C0;

    box-shadow:
        0
        20px
        48px
        rgba(
            31,
            27,
            24,
            .07
        );
}


/*
|--------------------------------------------------------------------------
| ICON
|--------------------------------------------------------------------------
*/

.gs54-icon {
    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        64px;

    border:
        1px solid
        #E0DCD7;

    border-radius:
        14px;

    background:
        #F7F5F2;

    color:
        #003852;
}


.gs54-icon span {
    width:
        24px;

    height:
        24px;

    display:
        block;

    background:
        currentColor;

    -webkit-mask:
        var(--gs54-icon)
        center
        /
        contain
        no-repeat;

    mask:
        var(--gs54-icon)
        center
        /
        contain
        no-repeat;
}


/*
|--------------------------------------------------------------------------
| FOUNDATION ICON
|--------------------------------------------------------------------------
*/

.gs54-icon-foundation {
    --gs54-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 9h16M8 13h3M8 16h7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| TRAFFIC ICON
|--------------------------------------------------------------------------
*/

.gs54-icon-traffic {
    --gs54-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='black'/%3E%3Cpath d='M17 7l3-3' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| LEAD ICON
|--------------------------------------------------------------------------
*/

.gs54-icon-lead {
    --gs54-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-6l-4 3v-3H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8 9h8M8 13h5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| GROWTH ICON
|--------------------------------------------------------------------------
*/

.gs54-icon-growth {
    --gs54-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18 9 13l3 3 7-9' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 7h4v4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| STEP COPY
|--------------------------------------------------------------------------
*/

.gs54-step-copy small {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #94908A;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.gs54-step-copy h3 {
    margin:
        0;

    color:
        #1E2226;

    font-family:
        var(--heading);

    font-size:
        22px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;
}


.gs54-step-copy p {
    margin:
        12px
        0
        0;

    color:
        #777C80;

    font-size:
        12px;

    line-height:
        1.75;
}


/*
|--------------------------------------------------------------------------
| OUTPUT
|--------------------------------------------------------------------------
*/

.gs54-output {
    margin-top:
        auto;

    padding-top:
        22px;

    border-top:
        1px solid
        #ECE9E5;
}


.gs54-output span {
    display:
        block;

    color:
        #A19C96;

    font-size:
        8px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.gs54-output strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #4C555A;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| SUMMARY
|--------------------------------------------------------------------------
*/

.gs54-summary {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        18px;

    padding:
        20px
        22px;

    border:
        1px solid
        #DDD9D4;

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            .60
        );
}


.gs54-summary-mark {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #003852;
}


.gs54-summary-mark span {
    position:
        relative;

    width:
        17px;

    height:
        17px;

    border:
        1.5px solid
        #FFFFFF;

    border-radius:
        50%;
}


.gs54-summary-mark span::after {
    content:
        "";

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    right:
        -2px;

    top:
        -2px;

    border-radius:
        50%;

    background:
        #FFFFFF;
}


.gs54-summary-copy small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #94908B;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.gs54-summary-copy strong {
    display:
        block;

    color:
        #333A3F;

    font-family:
        var(--heading);

    font-size:
        13px;

    line-height:
        1.5;

    font-weight:
        650;
}


.gs54-summary-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        40px;

    padding:
        0
        15px;

    border:
        1px solid
        #D3CEC8;

    border-radius:
        999px;

    background:
        #FFFFFF;

    color:
        #39464C;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.gs54-summary-link:hover {
    transform:
        translateY(-1px);

    border-color:
        #AAA39C;
}


.gs54-summary-link span {
    opacity:
        .65;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
) {

    .gs54-intro {
        grid-template-columns:
            1fr;

        gap:
            24px;
    }


    .gs54-intro-side > p {
        max-width:
            660px;
    }


    .gs54-process {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 720px
) {

    .growth-system-v54 {
        padding:
            82px
            0;
    }


    .gs54-intro {
        margin-bottom:
            38px;
    }


    .gs54-intro h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );
    }


    .gs54-flow-label {
        flex-wrap:
            wrap;
    }


    .gs54-process {
        grid-template-columns:
            1fr;
    }


    .gs54-step {
        min-height:
            330px;
    }


    .gs54-icon {
        margin-bottom:
            42px;
    }


    .gs54-summary {
        grid-template-columns:
            44px
            1fr;
    }


    .gs54-summary-link {
        grid-column:
            1 / -1;

        width:
            fit-content;
    }

}


/*
|--------------------------------------------------------------------------
| V55 — DYNAMIC BRAND LOGO
|--------------------------------------------------------------------------
*/

.site-logo-dynamic-v56 {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-start;

    min-width:
        0;

    text-decoration:
        none;
}


.site-logo-image {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        220px;

    max-height:
        42px;

    object-fit:
        contain;

    object-position:
        left center;
}


.site-logo-fallback-mark {
    width:
        25px;

    height:
        25px;

    display:
        inline-block;

    margin-right:
        9px;

    border-radius:
        6px;

    background:
        #003852;
}


.site-logo-fallback-text {
    color:
        #003852;

    font-family:
        var(--heading);

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        -.02em;
}


@media (max-width: 720px) {

    .site-logo-image {
        max-width:
            180px;

        max-height:
            36px;
    }

}


/*
|--------------------------------------------------------------------------
| V58 — GROWTH MODEL
|--------------------------------------------------------------------------
| Reference-inspired dark feature panel.
| No cyan / turquoise surfaces.
|--------------------------------------------------------------------------
*/


.growth-model-v58 {
    padding:
        105px
        0
        112px;

    background:
        #FFFFFF;
}


.gm58-panel {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        590px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        82px
        96px
        78px;

    border-radius:
        34px;

    background:
        radial-gradient(
            ellipse
            at 17% 10%,
            rgba(
                255,
                255,
                255,
                .055
            ),
            transparent
            31%
        ),
        radial-gradient(
            ellipse
            at 92% 7%,
            rgba(
                209,
                182,
                144,
                .17
            ),
            transparent
            26%
        ),
        linear-gradient(
            145deg,
            #1B1D1F 0%,
            #17191B 55%,
            #151719 100%
        );

    box-shadow:
        0
        30px
        80px
        rgba(
            20,
            20,
            19,
            .08
        );
}


/*
|--------------------------------------------------------------------------
| AMBIENT LIGHT
|--------------------------------------------------------------------------
*/

.gm58-glow {
    position:
        absolute;

    z-index:
        0;

    width:
        360px;

    height:
        240px;

    right:
        -70px;

    top:
        -95px;

    border-radius:
        50%;

    background:
        rgba(
            226,
            201,
            164,
            .12
        );

    filter:
        blur(70px);

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.gm58-head {
    position:
        relative;

    z-index:
        2;

    max-width:
        780px;

    margin:
        0 auto;

    text-align:
        center;
}


.gm58-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0
        15px;

    margin-bottom:
        22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.gm58-head h2 {
    margin:
        0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -.047em;
}


.gm58-head h2 span,
.gm58-head h2 strong {
    display:
        block;
}


.gm58-head h2 span {
    color:
        #F6F5F3;

    font-weight:
        600;
}


.gm58-head h2 strong {
    margin-top:
        3px;

    color:
        #00B1FF;

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| THREE CORE POINTS
|--------------------------------------------------------------------------
*/

.gm58-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        74px;

    margin-top:
        78px;
}


.gm58-item {
    min-width:
        0;
}


.gm58-icon {
    width:
        51px;

    height:
        51px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    margin-bottom:
        20px;
}


.gm58-icon svg {
    width:
        46px;

    height:
        46px;

    overflow:
        visible;

    fill:
        none;

    stroke:
        rgba(
            255,
            255,
            255,
            .88
        );

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.gm58-item h3 {
    margin:
        0;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        21px;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -.025em;
}


.gm58-item p {
    max-width:
        330px;

    margin:
        11px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .53
        );

    font-family:
        var(--body);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.72;
}


/*
|--------------------------------------------------------------------------
| SUBTLE COLUMN RHYTHM
|--------------------------------------------------------------------------
*/

.gm58-item + .gm58-item {
    position:
        relative;
}


.gm58-item + .gm58-item::before {
    content:
        "";

    position:
        absolute;

    left:
        -37px;

    top:
        4px;

    width:
        1px;

    height:
        132px;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0
            ),
            rgba(
                255,
                255,
                255,
                .075
            ),
            rgba(
                255,
                255,
                255,
                0
            )
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
) {

    .gm58-panel {
        padding:
            72px
            58px;
    }


    .gm58-grid {
        gap:
            44px;
    }


    .gm58-item + .gm58-item::before {
        left:
            -22px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 760px
) {

    .growth-model-v58 {
        padding:
            78px
            0
            84px;
    }


    .gm58-panel {
        min-height:
            0;

        padding:
            58px
            27px
            48px;

        border-radius:
            25px;
    }


    .gm58-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );
    }


    .gm58-grid {
        grid-template-columns:
            1fr;

        gap:
            38px;

        margin-top:
            55px;
    }


    .gm58-item {
        max-width:
            430px;
    }


    .gm58-item + .gm58-item::before {
        display:
            none;
    }


    .gm58-icon {
        margin-bottom:
            15px;
    }


    .gm58-item h3 {
        font-size:
            19px;
    }


    .gm58-item p {
        max-width:
            none;

        font-size:
            12px;
    }

}


/*
|--------------------------------------------------------------------------
| V60 — SERVICES
|--------------------------------------------------------------------------
*/

.services-v60 {
    padding: 92px 0 110px;
    background: #FFFFFF;
}

.sv60-head {
    max-width: 860px;
    margin: 0 auto 42px;
    text-align: center;
}

.sv60-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(0, 177, 255, .10);
    color: #00547B;
    font-family: var(--heading);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 18px;
}

.sv60-head h2 {
    margin: 0;
    color: #171C20;
    font-family: var(--heading);
    font-size: clamp(38px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -.048em;
    font-weight: 800;
}

.sv60-head p {
    max-width: 760px;
    margin: 18px auto 0;
    color: #6D757B;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.85;
}

.sv60-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.sv60-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px;
    padding: 28px 28px 24px;
    border: 1px solid #E8EDF1;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 14px 40px rgba(17, 27, 35, .04);
}

.sv60-card--wide {
    grid-column: span 3;
    min-height: 340px;
}

.sv60-card--seo,
.sv60-card--ads,
.sv60-card--meta {
    grid-column: span 2;
}

.sv60-card--social {
    min-height: 330px;
}

.sv60-card__content {
    position: relative;
    z-index: 2;
    max-width: 280px;
}

.sv60-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: rgba(0, 177, 255, .07);
}

.sv60-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #1B2730;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv60-card h3 {
    margin: 0;
    color: #171C20;
    font-family: var(--heading);
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 700;
}

.sv60-card p {
    margin: 14px 0 0;
    color: #68727A;
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.8;
}

.sv60-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 20px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #D9E2E8;
    background: #FFFFFF;
    color: #14232B;
    font-family: var(--heading);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sv60-link:hover {
    transform: translateY(-1px);
    border-color: #BFCFD9;
    background: #FAFCFD;
}

.sv60-link--inverse {
    border-color: rgba(255,255,255,.18);
    background: #FFFFFF;
    color: #14232B;
}

.sv60-visual {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    border-radius: 20px;
    overflow: hidden;
}

.sv60-visual--website {
    background: linear-gradient(135deg, #EEF8FF 0%, #F8FBFD 100%);
}

.sv60-visual--shop {
    background: linear-gradient(135deg, #F4EEFF 0%, #FBF9FF 100%);
}

.sv60-visual--seo {
    background: linear-gradient(135deg, #F5FAFF 0%, #EEF6FB 100%);
}

.sv60-visual--meta {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFFDF8 100%);
}

.sv60-visual--social {
    background: linear-gradient(135deg, #F3F8FF 0%, #FAFCFF 100%);
}

.sv60-card--featured {
    background:
        radial-gradient(circle at 75% 18%, rgba(0, 177, 255, .20), transparent 22%),
        radial-gradient(circle at 25% 10%, rgba(255, 255, 255, .07), transparent 26%),
        linear-gradient(145deg, #171A1F 0%, #11151A 100%);
    border-color: rgba(17, 21, 26, .4);
    box-shadow: 0 24px 60px rgba(9, 14, 19, .16);
}

.sv60-card--featured .sv60-icon {
    background: rgba(255,255,255,.08);
}

.sv60-card--featured .sv60-icon svg {
    stroke: #FFFFFF;
}

.sv60-card--featured h3,
.sv60-card--featured p {
    color: #FFFFFF;
}

.sv60-card--featured p {
    color: rgba(255,255,255,.74);
}

.sv60-visual--ads {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

/* Website Mock */
.mock-browser {
    position: relative;
    min-height: 176px;
    margin: 20px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 12px 34px rgba(15, 34, 48, .08);
}

.mock-browser__top {
    height: 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.mock-browser__line {
    height: 8px;
    border-radius: 999px;
    background: #C1D5E1;
    margin-bottom: 10px;
}

.mock-browser__line.short { width: 22%; background: #81B8D1; }
.mock-browser__line.long { width: 56%; background: #173B50; height: 11px; }
.mock-browser__line.mid { width: 44%; }

.mock-browser__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.mock-browser__cards span {
    display: block;
    height: 64px;
    border-radius: 14px;
    background: #F2F7FA;
    box-shadow: inset 0 0 0 1px #E7EEF3;
}

.mock-browser__cta {
    width: 68px;
    height: 26px;
    margin-top: 14px;
    border-radius: 999px;
    background: #007AB8;
}

.mock-badge {
    position: absolute;
    right: 16px;
    bottom: 16px;
    min-width: 72px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 12px 24px rgba(15, 34, 48, .10);
}

.mock-badge small {
    display: block;
    color: #7D8790;
    font-size: 9px;
    line-height: 1.2;
}

.mock-badge strong {
    display: block;
    margin-top: 4px;
    color: #173B50;
    font-family: var(--heading);
    font-size: 18px;
    line-height: 1;
}

/* Shop Mock */
.mock-shop {
    position: relative;
    min-height: 182px;
    margin: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.7);
}

.mock-shop__bar {
    height: 18px;
    border-radius: 999px;
    background: rgba(14, 28, 44, .06);
    margin-bottom: 14px;
}

.mock-shop__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mock-shop__products span {
    display: block;
    height: 74px;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 0 0 1px #E7E6F5;
}

.mock-shop__cart {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 118px;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 16px 32px rgba(26, 24, 44, .10);
}

.mock-shop__cart small,
.mock-shop__cart em {
    display: block;
    font-style: normal;
}

.mock-shop__cart small {
    color: #81869A;
    font-size: 9px;
}

.mock-shop__cart strong {
    display: block;
    margin-top: 5px;
    color: #202533;
    font-family: var(--heading);
    font-size: 22px;
    line-height: 1;
}

.mock-shop__cart em {
    margin-top: 6px;
    color: #7D8091;
    font-size: 10px;
}

.mock-shop__cart i {
    display: block;
    width: 82px;
    height: 24px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0A6DA2, #173F70);
}

/* SEO Mock */
.mock-seo {
    margin-top: 28px;
}

.mock-seo__result {
    height: 38px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #E4EDF3;
}

.mock-seo__chart {
    height: 96px;
    margin-top: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.8);
    position: relative;
    overflow: hidden;
}

.mock-seo__chart span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    height: 40px;
    border-bottom: 3px solid #00B1FF;
    border-radius: 0 0 40px 40px;
    transform: skewX(-24deg);
}

/* Ads Mock */
.mock-ads-chart {
    position: relative;
    min-height: 178px;
    margin-top: 28px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
}

.mock-ads-chart__lines {
    position: absolute;
    inset: 20px 18px 22px;
    border-radius: 14px;
    background:
        linear-gradient(transparent 24%, rgba(255,255,255,.06) 25%, transparent 26%, transparent 49%, rgba(255,255,255,.06) 50%, transparent 51%, transparent 74%, rgba(255,255,255,.06) 75%, transparent 76%),
        linear-gradient(180deg, rgba(0,177,255,.18), rgba(0,177,255,0));
}

.mock-ads-chart__lines::before,
.mock-ads-chart__lines::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    height: 56px;
    border-radius: 50%;
    border-bottom: 3px solid #00B1FF;
}

.mock-ads-chart__lines::before {
    bottom: 20px;
    transform: translateY(8px);
}

.mock-ads-chart__lines::after {
    bottom: 38px;
    border-bottom-color: rgba(255,255,255,.82);
    opacity: .75;
}

.mock-ads-chart__badge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    min-width: 112px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 16px 28px rgba(0,0,0,.18);
}

.mock-ads-chart__badge small {
    display: block;
    color: #88919A;
    font-size: 9px;
}

.mock-ads-chart__badge strong {
    display: block;
    margin-top: 6px;
    color: #13212A;
    font-family: var(--heading);
    font-size: 18px;
}

/* Meta Mock */
.mock-meta {
    position: relative;
    min-height: 182px;
    margin-top: 30px;
}

.mock-meta__panel {
    position: absolute;
    left: 0;
    right: 46px;
    top: 0;
    bottom: 0;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: inset 0 0 0 1px #F0E8DD;
}

.mock-meta__phone {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 86px;
    height: 132px;
    border-radius: 22px;
    background: linear-gradient(180deg, #E8F3FF 0%, #FFFFFF 100%);
    box-shadow: 0 10px 24px rgba(58, 49, 35, .10);
}

.mock-meta__bubble {
    position: absolute;
    right: 0;
    bottom: 16px;
    min-width: 82px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 12px 26px rgba(67, 52, 34, .09);
}

.mock-meta__bubble small {
    display: block;
    color: #8A8F95;
    font-size: 9px;
}

.mock-meta__bubble strong {
    display: block;
    margin-top: 6px;
    color: #173B50;
    font-family: var(--heading);
    font-size: 18px;
}

/* Social Mock */
.mock-social {
    min-height: 184px;
    margin: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.78);
}

.mock-social__header {
    width: 144px;
    height: 16px;
    border-radius: 999px;
    background: rgba(23, 59, 80, .12);
    margin-bottom: 16px;
}

.mock-social__calendar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.mock-social__calendar span {
    display: block;
    height: 28px;
    border-radius: 8px;
    background: #EDF2F6;
}

.mock-social__calendar span.active {
    background: rgba(0, 177, 255, .20);
    box-shadow: inset 0 0 0 1px rgba(0, 177, 255, .18);
}

.mock-social__footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.mock-social__footer i {
    display: block;
    height: 36px;
    border-radius: 10px;
    background: #F2F6F9;
}

/* Responsive */
@media (max-width: 1100px) {
    .sv60-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv60-card--wide,
    .sv60-card--seo,
    .sv60-card--ads,
    .sv60-card--meta {
        grid-column: span 1;
    }

    .sv60-card,
    .sv60-card--wide,
    .sv60-card--social {
        min-height: 380px;
    }
}

@media (max-width: 760px) {
    .services-v60 {
        padding: 76px 0 86px;
    }

    .sv60-head {
        margin-bottom: 28px;
    }

    .sv60-head h2 {
        font-size: clamp(34px, 10vw, 44px);
    }

    .sv60-head p {
        font-size: 13px;
        line-height: 1.8;
    }

    .sv60-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sv60-card {
        min-height: auto;
        padding: 24px 22px 22px;
        border-radius: 24px;
    }

    .sv60-card__content {
        max-width: none;
    }

    .sv60-card h3 {
        font-size: 24px;
    }

    .sv60-visual {
        margin-top: 22px;
    }
}


/*
|--------------------------------------------------------------------------
| V61 SERVICES
|--------------------------------------------------------------------------
*/

.services-v61 {
    padding: 96px 0 110px;
    background: #FFFFFF;
}


.sv61-head {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}


.sv61-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 0 14px;
    margin-bottom: 17px;

    border-radius: 999px;

    background: rgba(0,177,255,.09);

    color: #00547B;

    font-family: var(--heading);
    font-size: 10px;
    font-weight: 700;
}


.sv61-head h2 {
    margin: 0;

    color: #171C20;

    font-family: var(--heading);
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 800;

    line-height: 1.06;
    letter-spacing: -.048em;
}


.sv61-head p {
    max-width: 700px;

    margin: 17px auto 0;

    color: #707980;

    font-family: var(--body);
    font-size: 13px;

    line-height: 1.8;
}


.sv61-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0,1fr));

    gap: 20px;
}


/*
|--------------------------------------------------------------------------
| CARD BASE
|--------------------------------------------------------------------------
*/

.sv61-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid #E5EAED;

    border-radius:
        26px;

    background:
        #FFFFFF;

    box-shadow:
        0 12px 36px
        rgba(18, 30, 38, .04);
}


.sv61-wide {
    grid-column:
        span 6;

    min-height:
        355px;

    display:
        grid;

    grid-template-columns:
        minmax(220px, .82fr)
        minmax(330px, 1.18fr);

    align-items:
        center;

    gap:
        28px;

    padding:
        28px;
}


.sv61-small {
    grid-column:
        span 4;

    min-height:
        445px;

    padding:
        27px;

    display:
        flex;

    flex-direction:
        column;
}


/*
|--------------------------------------------------------------------------
| COPY
|--------------------------------------------------------------------------
*/

.sv61-copy {
    position: relative;
    z-index: 3;
}


.sv61-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border-radius: 13px;

    background:
        rgba(0,177,255,.08);
}


.sv61-icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: #263B46;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sv61-card h3 {
    margin: 0;

    color: #171C20;

    font-family: var(--heading);
    font-size: 24px;
    font-weight: 700;

    line-height: 1.16;
    letter-spacing: -.03em;
}


.sv61-card p {
    max-width: 330px;

    margin: 12px 0 0;

    color: #68727A;

    font-family: var(--body);
    font-size: 12px;

    line-height: 1.75;
}


.sv61-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    min-height: 38px;

    margin-top: 18px;

    padding:
        0 14px;

    border:
        1px solid #D5DFE4;

    border-radius:
        999px;

    color:
        #253840;

    background:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;
}


.sv61-link span {
    color:
        #00B1FF;
}


/*
|--------------------------------------------------------------------------
| VISUAL BASE
|--------------------------------------------------------------------------
*/

.sv61-visual {
    position: relative;

    overflow: hidden;

    border-radius: 19px;
}


/*
|--------------------------------------------------------------------------
| WEB
|--------------------------------------------------------------------------
*/

.web-preview {
    min-height: 280px;

    padding: 22px;

    background:
        linear-gradient(
            135deg,
            #EEF7FC,
            #F8FBFD
        );
}


.web-window {
    overflow: hidden;

    min-height: 228px;

    border:
        1px solid #DDE7EC;

    border-radius: 15px;

    background: #FFFFFF;

    box-shadow:
        0 18px 38px
        rgba(0, 56, 82, .09);
}


.web-window-top {
    position: relative;

    height: 31px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 0 12px;

    border-bottom:
        1px solid #EDF1F3;

    background:
        #FAFCFD;
}


.web-window-top i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #CCD6DB;
}


.web-window-top span {
    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color:
        #ADB9BF;

    font-size:
        7px;
}


.web-window-body {
    display: grid;

    grid-template-columns:
        1fr .9fr;

    gap: 18px;

    padding:
        27px 20px;
}


.web-window-copy small {
    display: block;

    width: 50px;
    height: 5px;

    margin-bottom: 12px;

    border-radius: 99px;

    background:
        #00B1FF;
}


.web-window-copy strong {
    display: block;

    width: 86%;
    height: 11px;

    margin-bottom: 7px;

    border-radius: 4px;

    background:
        #123A4D;
}


.web-window-copy strong.short {
    width:
        61%;
}


.web-window-copy p {
    width: 91%;
    height: 5px;

    margin: 12px 0 0;

    border-radius: 99px;

    background:
        #D5E2E7;
}


.web-window-copy p.short {
    width:
        66%;
}


.web-window-copy button {
    width: 62px;
    height: 25px;

    margin-top: 16px;

    border: 0;

    border-radius: 99px;

    background:
        #00547B;
}


.web-window-cards {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;
}


.web-window-cards div {
    padding: 12px;

    border:
        1px solid #E0E9ED;

    border-radius:
        10px;

    background:
        #FFFFFF;

    box-shadow:
        0 10px 20px
        rgba(0,56,82,.05);
}


.web-window-cards i {
    display: block;

    width: 22px;
    height: 22px;

    margin-bottom: 12px;

    border-radius: 7px;

    background:
        #E8F2F6;
}


.web-window-cards strong,
.web-window-cards span {
    display: block;

    border-radius: 99px;
}


.web-window-cards strong {
    width: 65%;
    height: 6px;

    background:
        #355764;
}


.web-window-cards span {
    width: 88%;
    height: 4px;

    margin-top: 8px;

    background:
        #D6E2E6;
}


.floating-result {
    position: absolute;

    right: 13px;
    bottom: 14px;

    padding:
        10px 12px;

    border-radius:
        12px;

    background:
        #FFFFFF;

    box-shadow:
        0 14px 30px
        rgba(0,56,82,.10);
}


.floating-result small {
    display: block;

    color:
        #86949B;

    font-size: 7px;
}


.floating-result strong {
    color:
        #00547B;

    font-family:
        var(--heading);

    font-size:
        17px;
}


/*
|--------------------------------------------------------------------------
| ECOMMERCE
|--------------------------------------------------------------------------
*/

.commerce-preview {
    min-height: 280px;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #F2EEFC,
            #FBF9FF
        );
}


.shop-header {
    display: grid;

    grid-template-columns:
        25px 1fr 25px;

    gap: 9px;

    align-items: center;

    padding: 8px;

    border-radius: 9px;

    background:
        #FFFFFF;
}


.shop-header b {
    width: 22px;
    height: 22px;

    border-radius: 6px;

    background:
        #455D77;
}


.shop-header span {
    padding:
        7px 10px;

    border-radius: 99px;

    background:
        #F3F5F8;

    color:
        #ADB5BD;

    font-size: 7px;
}


.shop-header i {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #EEF1F7;

    color:
        #455D77;

    font-size:
        7px;

    font-style: normal;
}


.shop-products {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 12px;
}


.shop-product {
    padding: 9px;

    border-radius: 11px;

    background: #FFFFFF;
}


.shop-photo {
    height: 92px;

    border-radius: 8px;

    background:
        linear-gradient(
            150deg,
            #E5E9F0,
            #D7DEE8
        );
}


.shop-product strong,
.shop-product span {
    display: block;

    border-radius: 99px;
}


.shop-product strong {
    width: 65%;
    height: 6px;

    margin-top: 9px;

    background:
        #CED8DE;
}


.shop-product span {
    width: 39%;
    height: 7px;

    margin-top: 7px;

    background:
        #3A5664;
}


.shop-cart {
    position: absolute;

    right: 14px;
    bottom: 14px;

    width: 142px;

    padding: 12px;

    border-radius: 12px;

    background: #FFFFFF;

    box-shadow:
        0 15px 33px
        rgba(48,40,70,.11);
}


.shop-cart small,
.shop-cart span {
    display: block;

    color:
        #8C949A;

    font-size:
        7px;
}


.shop-cart strong {
    display: block;

    margin-top: 4px;

    color:
        #20282F;

    font-family:
        var(--heading);

    font-size:
        13px;
}


.shop-cart button {
    width: 100%;
    height: 26px;

    margin-top: 10px;

    border: 0;

    border-radius: 99px;

    background:
        #00547B;

    color:
        #FFFFFF;

    font-size:
        7px;
}


/*
|--------------------------------------------------------------------------
| SEO
|--------------------------------------------------------------------------
*/

.seo-preview {
    min-height: 205px;

    margin-top: auto;

    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #F3F8FA,
            #F8FBFC
        );
}


.seo-row {
    display: grid;

    grid-template-columns:
        30px 1fr;

    gap: 9px;

    align-items: center;

    padding: 8px;

    margin-bottom: 7px;

    border-radius: 8px;

    background:
        #FFFFFF;
}


.seo-row > span {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background:
        rgba(0,177,255,.09);

    color:
        #00547B;

    font-size:
        7px;
}


.seo-row strong {
    display: block;

    color:
        #4A5B64;

    font-size:
        7px;
}


.seo-row small {
    color:
        #00B1FF;

    font-size:
        6px;
}


.seo-chart {
    width: 100%;
    height: 78px;
}


.seo-chart path {
    fill: none;

    stroke:
        #00B1FF;

    stroke-width:
        4;

    stroke-linecap:
        round;
}


/*
|--------------------------------------------------------------------------
| ADS FEATURED
|--------------------------------------------------------------------------
*/

.sv61-ads {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(0,177,255,.18),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #181B20,
            #101418
        );

    border-color:
        rgba(255,255,255,.06);
}


.sv61-ads .sv61-icon {
    background:
        rgba(255,255,255,.08);
}


.sv61-ads .sv61-icon svg {
    stroke:
        #FFFFFF;
}


.sv61-ads h3 {
    color:
        #FFFFFF;
}


.sv61-ads p {
    color:
        rgba(255,255,255,.72);
}


.sv61-link.inverse {
    border-color:
        rgba(255,255,255,.20);

    background:
        #FFFFFF;
}


.ads-preview {
    min-height: 205px;

    margin-top: auto;

    padding: 14px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.06);
}


.ads-search {
    display: flex;

    gap: 7px;

    align-items: center;

    padding:
        8px 10px;

    border-radius: 99px;

    background:
        #FFFFFF;
}


.ads-search span {
    color:
        #00B1FF;
}


.ads-search strong {
    color:
        #737D83;

    font-size:
        7px;
}


.ads-result {
    margin-top: 8px;

    padding: 10px;

    border-radius: 9px;

    background:
        #FFFFFF;
}


.ads-result small {
    display: block;

    color:
        #8D969B;

    font-size:
        6px;
}


.ads-result strong {
    display: block;

    margin-top: 4px;

    color:
        #00699B;

    font-size:
        8px;
}


.ads-result span {
    display: block;

    margin-top: 3px;

    color:
        #6F7C83;

    font-size:
        6px;
}


.ads-kpis {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 6px;

    margin-top: 8px;
}


.ads-kpis div {
    padding: 8px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.09);
}


.ads-kpis small {
    display: block;

    color:
        rgba(255,255,255,.55);

    font-size:
        6px;
}


.ads-kpis strong {
    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        11px;
}


/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.meta-preview {
    min-height: 205px;

    margin-top: auto;

    padding: 15px;

    background:
        linear-gradient(
            145deg,
            #FFF6EC,
            #FFFBF7
        );
}


.social-ad {
    width: 73%;

    overflow: hidden;

    border-radius: 11px;

    background: #FFFFFF;

    box-shadow:
        0 12px 26px
        rgba(55,42,27,.07);
}


.social-ad-head {
    display: flex;

    gap: 8px;

    padding: 9px;
}


.social-ad-head > i {
    width: 21px;
    height: 21px;

    border-radius: 50%;

    background:
        #E1E7EA;
}


.social-ad-head strong,
.social-ad-head span {
    display: block;

    border-radius: 99px;
}


.social-ad-head strong {
    width: 45px;
    height: 5px;

    background:
        #CBD7DC;
}


.social-ad-head span {
    width: 30px;
    height: 4px;

    margin-top: 5px;

    background:
        #E3E9EC;
}


.social-ad-image {
    display: grid;

    grid-template-columns:
        1fr 60px;

    align-items: center;

    min-height: 105px;

    padding: 13px;

    background:
        linear-gradient(
            145deg,
            #E6E8EA,
            #DADDE0
        );
}


.social-ad-image strong,
.social-ad-image span {
    display: block;

    border-radius: 99px;
}


.social-ad-image strong {
    width: 72%;
    height: 6px;

    margin-bottom: 6px;

    background:
        #4F616A;
}


.social-ad-image strong.short {
    width: 51%;
}


.social-ad-image span {
    width: 85%;
    height: 4px;

    margin-top: 10px;

    background:
        rgba(255,255,255,.8);
}


.social-ad-image span.short {
    width: 60%;

    margin-top: 5px;
}


.social-ad-image > i {
    width: 56px;
    height: 72px;

    border-radius:
        24px 24px 11px 11px;

    background:
        #FFFFFF;
}


.lead-bubble {
    position: absolute;

    right: 12px;
    bottom: 15px;

    min-width: 91px;

    padding: 10px;

    border-radius: 11px;

    background: #FFFFFF;

    box-shadow:
        0 14px 29px
        rgba(53,43,32,.10);
}


.lead-bubble small,
.lead-bubble span {
    display: block;

    color:
        #8D969A;

    font-size:
        6px;
}


.lead-bubble strong {
    display: block;

    margin: 3px 0;

    color:
        #00547B;

    font-family:
        var(--heading);

    font-size:
        16px;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA
|--------------------------------------------------------------------------
*/

.social-preview {
    min-height: 280px;

    display: grid;

    grid-template-columns:
        42px 1fr;

    padding: 17px;

    background:
        linear-gradient(
            145deg,
            #F1F5F7,
            #F9FBFC
        );
}


.social-sidebar {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding-top: 13px;

    border-radius:
        10px 0 0 10px;

    background:
        rgba(255,255,255,.75);
}


.social-sidebar i {
    width: 20px;
    height: 20px;

    border-radius: 6px;

    background:
        #E1E7EA;
}


.social-board {
    padding: 17px;

    border-radius:
        0 12px 12px 0;

    background:
        #FFFFFF;

    box-shadow:
        0 15px 34px
        rgba(20,42,52,.06);
}


.social-board-head {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.social-board-head small {
    display: block;

    color:
        #8C979C;

    font-size:
        7px;
}


.social-board-head strong {
    color:
        #253A44;

    font-family:
        var(--heading);

    font-size:
        13px;
}


.social-board-head button {
    height: 27px;

    padding: 0 10px;

    border: 0;

    border-radius: 99px;

    background:
        #00547B;

    color:
        #FFFFFF;

    font-size:
        7px;
}


.social-calendar {
    display: grid;

    grid-template-columns:
        repeat(5,1fr);

    gap: 6px;

    margin-top: 15px;
}


.social-calendar i {
    height: 30px;

    border-radius: 7px;

    background:
        #EFF3F5;
}


.social-calendar i.active {
    position: relative;

    background:
        rgba(0,177,255,.16);
}


.social-calendar i.active::after {
    content: "";

    position: absolute;

    right: 5px;
    bottom: 5px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #00B1FF;
}


.social-posts {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 8px;

    margin-top: 12px;
}


.social-posts div {
    display: grid;

    grid-template-columns:
        31px 1fr;

    gap: 7px;

    align-items: center;

    padding: 6px;

    border-radius: 8px;

    background:
        #F7F9FA;
}


.social-posts i {
    width: 31px;
    height: 31px;

    border-radius: 6px;

    background:
        #DDE5E8;
}


.social-posts span {
    width: 65%;
    height: 5px;

    border-radius: 99px;

    background:
        #C7D3D8;
}


.social-note {
    position: absolute;

    right: 13px;
    bottom: 14px;

    padding: 9px 11px;

    border-radius: 11px;

    background:
        #FFFFFF;

    box-shadow:
        0 14px 28px
        rgba(20,42,52,.09);
}


.social-note small {
    display: block;

    color:
        #8D969A;

    font-size:
        6px;
}


.social-note strong {
    color:
        #314852;

    font-family:
        var(--heading);

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .sv61-wide {
        grid-column:
            span 12;
    }


    .sv61-small {
        grid-column:
            span 6;
    }

}


@media (max-width: 720px) {

    .services-v61 {
        padding:
            78px 0 88px;
    }


    .sv61-grid {
        display:
            block;
    }


    .sv61-card {
        margin-bottom:
            15px;
    }


    .sv61-wide,
    .sv61-small {
        display:
            grid;

        grid-template-columns:
            1fr;

        min-height:
            0;

        padding:
            22px;

        gap:
            21px;
    }


    .sv61-visual {
        margin-top:
            0;
    }


    .web-preview,
    .commerce-preview,
    .social-preview {
        min-height:
            245px;
    }


    .sv61-small .sv61-visual {
        min-height:
            190px;

        margin-top:
            23px;
    }

}


/*
|--------------------------------------------------------------------------
| V62 — SERVICES COLOR REFRESH
|--------------------------------------------------------------------------
|
| Açık mavi / turkuaz geniş yüzeyler YOK.
| #00B1FF yalnızca accent olarak kullanılır.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SERVICES LABEL
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-kicker {
    background: #171A1F !important;
    color: #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| DEFAULT ICON
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-icon {
    background: #F1EFEC !important;
}


/*
|--------------------------------------------------------------------------
| CORPORATE WEBSITE — VIOLET
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-web .sv61-icon {
    background: #E9DEFF !important;
}

.services-v61 .web-preview {
    background:
        linear-gradient(
            145deg,
            #E9DEFF 0%,
            #F7F2FF 100%
        ) !important;
}

.services-v61 .web-window-copy small {
    background: #8758FF !important;
}

.services-v61 .web-window-cards i {
    background: #E8DEFA !important;
}

.services-v61 .floating-result strong {
    color: #7A45F5 !important;
}


/*
|--------------------------------------------------------------------------
| E-COMMERCE — YELLOW
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-commerce .sv61-icon {
    background: #FFE89A !important;
}

.services-v61 .commerce-preview {
    background:
        linear-gradient(
            145deg,
            #FFEAA3 0%,
            #FFF7D4 100%
        ) !important;
}

.services-v61 .shop-header i {
    background: #FFE89A !important;
    color: #604D16 !important;
}

.services-v61 .shop-photo {
    background:
        linear-gradient(
            145deg,
            #EFE5CF,
            #E1D3B8
        ) !important;
}


/*
|--------------------------------------------------------------------------
| SEO — LIME
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-seo .sv61-icon {
    background: #DFF08A !important;
}

.services-v61 .seo-preview {
    background:
        linear-gradient(
            145deg,
            #E8F5A8 0%,
            #F5F9D9 100%
        ) !important;
}

.services-v61 .seo-row > span {
    background: #D7E982 !important;
    color: #475C14 !important;
}

.services-v61 .seo-row small {
    color: #5E7B11 !important;
}


/*
|--------------------------------------------------------------------------
| SEO CHART — ACCENT
|--------------------------------------------------------------------------
*/

.services-v61 .seo-chart path {
    stroke: #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| GOOGLE ADS — DARK
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-ads {
    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(0,177,255,.20),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #191B20 0%,
            #0F1216 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| META — CORAL
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-meta .sv61-icon {
    background: #FFD4C5 !important;
}

.services-v61 .meta-preview {
    background:
        linear-gradient(
            145deg,
            #FFD9CC 0%,
            #FFF0E9 100%
        ) !important;
}

.services-v61 .social-ad-image {
    background:
        linear-gradient(
            145deg,
            #F2BBA7,
            #F5D8CC
        ) !important;
}

.services-v61 .lead-bubble strong {
    color: #E55D3C !important;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA — MAGENTA / PURPLE
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-social .sv61-icon {
    background: #EBCBFF !important;
}

.services-v61 .social-preview {
    background:
        linear-gradient(
            145deg,
            #EED6FF 0%,
            #F9F0FF 100%
        ) !important;
}

.services-v61 .social-sidebar i {
    background: #DECDE8 !important;
}

.services-v61 .social-calendar i {
    background: #EEE7F2 !important;
}

.services-v61 .social-calendar i.active {
    background: #DCAEF5 !important;
}

.services-v61 .social-calendar i.active::after {
    background: #A239E7 !important;
}

.services-v61 .social-posts i {
    background: #DAC6E5 !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE REMAINING BLUE-TINTED NEUTRALS
|--------------------------------------------------------------------------
*/

.services-v61 .web-window-copy p {
    background: #D9D7DB !important;
}

.services-v61 .web-window-cards span {
    background: #D9D7DB !important;
}

.services-v61 .social-posts span {
    background: #D1CDD3 !important;
}

.services-v61 .shop-product strong {
    background: #D8D0C1 !important;
}


/*
|--------------------------------------------------------------------------
| CORPORATE ACTION COLORS
|--------------------------------------------------------------------------
*/

.services-v61 .web-window-copy button,
.services-v61 .shop-cart button,
.services-v61 .social-board-head button {
    background: #00547B !important;
}


/*
|--------------------------------------------------------------------------
| GLOBAL ACCENT INSIDE SERVICES
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-link span {
    color: #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| V63 — SEO / GOOGLE ADS / META REFINEMENT
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SEO — DAHA KOMPAKT VE ANLASILIR
|--------------------------------------------------------------------------
*/

.services-v61 .seo-preview {
    min-height:
        184px !important;

    padding:
        12px !important;

    border:
        1px solid
        #DCE99A;

    background:
        linear-gradient(
            145deg,
            #E7F5A4 0%,
            #F4F9D6 100%
        ) !important;
}


/*
 * Görselin ne olduğunu ilk bakışta anlat.
 */

.services-v61 .seo-preview::before {
    content:
        "Google sıralaması";

    display:
        block;

    margin:
        0 0 8px 2px;

    color:
        #56651E;

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        -.01em;
}


.services-v61 .seo-row {
    min-height:
        35px;

    grid-template-columns:
        25px 1fr;

    gap:
        8px;

    padding:
        6px 8px !important;

    margin-bottom:
        6px !important;

    border:
        1px solid
        rgba(
            79,
            101,
            28,
            .08
        );

    border-radius:
        8px;

    background:
        rgba(
            255,
            255,
            255,
            .90
        ) !important;
}


.services-v61 .seo-row > span {
    width:
        23px;

    height:
        23px;

    background:
        #D7E982 !important;
}


.services-v61 .seo-row strong {
    color:
        #35431A !important;

    font-size:
        7px;
}


.services-v61 .seo-row small {
    color:
        #617C10 !important;
}


.services-v61 .seo-chart {
    display:
        block;

    width:
        100%;

    height:
        54px !important;

    margin-top:
        4px;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .58
        );
}


.services-v61 .seo-chart path {
    stroke:
        #00B1FF !important;

    stroke-width:
        4 !important;
}


/*
|--------------------------------------------------------------------------
| GOOGLE ADS ICON
|--------------------------------------------------------------------------
|
| Generic chart icon kaldırıldı.
| Search-ad / sponsored result fikri kullanılıyor.
|--------------------------------------------------------------------------
*/

.services-v61
.sv61-ads
.sv61-icon {
    position:
        relative;

    border:
        1px solid
        rgba(
            0,
            177,
            255,
            .26
        );

    background:
        rgba(
            0,
            177,
            255,
            .12
        ) !important;
}


.services-v61
.sv61-ads
.sv61-icon svg {
    display:
        none !important;
}


.services-v61
.sv61-ads
.sv61-icon::before {
    content:
        "";

    width:
        25px;

    height:
        25px;

    display:
        block;

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4.5' y='6' width='23' height='20' rx='5' fill='none' stroke='%2300B1FF' stroke-width='1.8'/%3E%3Ccircle cx='11' cy='13' r='3.1' fill='none' stroke='%2300B1FF' stroke-width='1.8'/%3E%3Cpath d='m13.4 15.4 2.8 2.8M19 12h5M19 16h5M8 22h16' fill='none' stroke='%2300B1FF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| META ADS ICON
|--------------------------------------------------------------------------
|
| Infinity sembolü yerine:
| reklam kartı + hedef kitle / target yaklaşımı.
|--------------------------------------------------------------------------
*/

.services-v61
.sv61-meta
.sv61-icon {
    position:
        relative;

    border:
        1px solid
        rgba(
            229,
            93,
            60,
            .17
        );

    background:
        #FFD1C1 !important;
}


.services-v61
.sv61-meta
.sv61-icon svg {
    display:
        none !important;
}


.services-v61
.sv61-meta
.sv61-icon::before {
    content:
        "";

    width:
        25px;

    height:
        25px;

    display:
        block;

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4.5' y='6' width='23' height='20' rx='5' fill='none' stroke='%23D95535' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='14' r='3' fill='none' stroke='%23D95535' stroke-width='1.8'/%3E%3Cpath d='M7.5 22c.8-3 2.4-4.5 4.5-4.5s3.8 1.5 4.5 4.5M21 11v7M17.5 14.5h7' fill='none' stroke='%23D95535' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}


/*
|--------------------------------------------------------------------------
| THREE MIDDLE CARDS — VISUAL ALIGNMENT
|--------------------------------------------------------------------------
|
| SEO, Ads ve Meta görsellerinin başladığı çizgiyi
| daha tutarlı hale getir.
|--------------------------------------------------------------------------
*/

@media (min-width: 1051px) {

    .services-v61
    .sv61-seo,
    .services-v61
    .sv61-ads,
    .services-v61
    .sv61-meta {
        min-height:
            430px !important;
    }


    .services-v61
    .sv61-seo
    .sv61-visual,
    .services-v61
    .sv61-ads
    .sv61-visual,
    .services-v61
    .sv61-meta
    .sv61-visual {
        margin-top:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| V64 — SERVICE CTA / VISUAL SPACING
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| MIDDLE THREE CARDS
|--------------------------------------------------------------------------
*/

@media (min-width: 1051px) {

    .services-v61 .sv61-seo,
    .services-v61 .sv61-ads,
    .services-v61 .sv61-meta {
        min-height:
            455px !important;
    }


    /*
     * CTA ile görsel arasında gerçek bir nefes alanı.
     */
    .services-v61
    .sv61-small
    .sv61-copy {
        margin-bottom:
            28px !important;
    }


    /*
     * Görseller yine kartların altında aynı hatta otursun.
     */
    .services-v61
    .sv61-small
    .sv61-visual {
        margin-top:
            auto !important;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    min-width: 721px
)
and (
    max-width: 1050px
) {

    .services-v61
    .sv61-small
    .sv61-copy {
        margin-bottom:
            24px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .services-v61
    .sv61-small
    .sv61-copy {
        margin-bottom:
            22px !important;
    }


    .services-v61
    .sv61-small
    .sv61-visual {
        margin-top:
            0 !important;
    }

}


/*
|--------------------------------------------------------------------------
| V65 — SOCIAL MEDIA FULL WIDTH
|--------------------------------------------------------------------------
*/

@media (min-width: 1051px) {

    /*
     * Sosyal Medya Yönetimi artık tüm grid genişliğini kullanır.
     */
    .services-v61 .sv61-social {
        grid-column:
            span 12 !important;

        width:
            100%;

        min-height:
            350px !important;

        grid-template-columns:
            minmax(270px, .42fr)
            minmax(0, 1.58fr) !important;

        gap:
            52px !important;

        padding:
            30px 32px !important;

        align-items:
            center;
    }


    /*
     * Sol metin alanını gereksiz büyütme.
     */
    .services-v61
    .sv61-social
    .sv61-copy {
        max-width:
            340px;
    }


    /*
     * Sağdaki içerik yönetim ekranı geniş alanı kullansın.
     */
    .services-v61
    .sv61-social
    .social-preview {
        width:
            100%;

        min-height:
            285px;

        margin:
            0 !important;
    }


    /*
     * Takvim geniş kartta daha dengeli görünsün.
     */
    .services-v61
    .sv61-social
    .social-board {
        padding:
            20px 22px;
    }


    .services-v61
    .sv61-social
    .social-calendar {
        gap:
            8px;
    }


    .services-v61
    .sv61-social
    .social-calendar i {
        height:
            33px;
    }


    .services-v61
    .sv61-social
    .social-posts {
        gap:
            10px;

        margin-top:
            15px;
    }


    .services-v61
    .sv61-social
    .social-posts div {
        min-height:
            45px;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    min-width: 721px
)
and (
    max-width: 1050px
) {

    .services-v61 .sv61-social {
        grid-column:
            span 12 !important;

        grid-template-columns:
            minmax(230px, .42fr)
            minmax(0, 1.58fr) !important;

        gap:
            30px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .services-v61 .sv61-social {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr !important;

        gap:
            22px;
    }


    .services-v61
    .sv61-social
    .social-preview {
        width:
            100%;

        margin:
            0 !important;
    }

}


/*
|--------------------------------------------------------------------------
| V66 — HERO COLOR SYSTEM
|--------------------------------------------------------------------------
|
| Services bölümündeki yeni modern renk dili Hero'ya taşınır.
|
| Büyük açık mavi / turkuaz yüzey YOK.
|
| Atmosfer:
| - Warm neutral
| - Violet
| - Yellow
| - Coral
|
| #00B1FF yalnızca accent.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO MAIN BACKGROUND
|--------------------------------------------------------------------------
*/

.hero {
    position:
        relative;

    isolation:
        isolate;

    background:
        radial-gradient(
            ellipse
            at 12% 18%,
            rgba(
                135,
                88,
                255,
                .14
            ) 0%,
            rgba(
                135,
                88,
                255,
                .055
            ) 27%,
            transparent 55%
        ),
        radial-gradient(
            ellipse
            at 88% 14%,
            rgba(
                255,
                205,
                79,
                .18
            ) 0%,
            rgba(
                255,
                205,
                79,
                .06
            ) 30%,
            transparent 57%
        ),
        radial-gradient(
            ellipse
            at 87% 66%,
            rgba(
                242,
                135,
                105,
                .10
            ) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse
            at 21% 72%,
            rgba(
                185,
                223,
                80,
                .055
            ) 0%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #F6F2ED 0%,
            #F9F6F2 35%,
            #FCFAF8 68%,
            #FFFFFF 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| HERO SOFT CENTER LIGHT
|--------------------------------------------------------------------------
|
| Metnin arkasını temiz tutar.
|--------------------------------------------------------------------------
*/

.hero::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse
            at 50% 28%,
            rgba(
                255,
                255,
                255,
                .78
            ) 0%,
            rgba(
                255,
                255,
                255,
                .38
            ) 28%,
            rgba(
                255,
                255,
                255,
                0
            ) 61%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| ADDITIONAL AMBIENT COLOR
|--------------------------------------------------------------------------
*/

.hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    left:
        50%;

    bottom:
        4%;

    width:
        min(
            900px,
            70vw
        );

    height:
        360px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse
            at 25% 50%,
            rgba(
                135,
                88,
                255,
                .08
            ),
            transparent 48%
        ),
        radial-gradient(
            ellipse
            at 75% 48%,
            rgba(
                255,
                205,
                79,
                .08
            ),
            transparent 48%
        );

    filter:
        blur(48px);

    opacity:
        .8;
}


/*
|--------------------------------------------------------------------------
| CONTENT ABOVE ATMOSPHERE
|--------------------------------------------------------------------------
*/

.hero-inner,
.hero-copy,
.product-stage,
.hero-media-stage {
    position:
        relative;

    z-index:
        2;
}


/*
|--------------------------------------------------------------------------
| HERO EYEBROW
|--------------------------------------------------------------------------
|
| Artık soluk pill yerine services kicker mantığı.
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    min-height:
        30px;

    padding:
        0 13px !important;

    border:
        1px solid
        rgba(
            0,
            177,
            255,
            .14
        ) !important;

    border-radius:
        999px;

    background:
        #171A1F !important;

    color:
        #00B1FF !important;

    box-shadow:
        0
        10px
        24px
        rgba(
            20,
            23,
            26,
            .08
        ) !important;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| HERO HEADLINE
|--------------------------------------------------------------------------
*/

.hero h1 {
    color:
        #07384D !important;
}


/*
|--------------------------------------------------------------------------
| HERO BODY
|--------------------------------------------------------------------------
*/

.hero-copy > p {
    color:
        #6C757A !important;
}


/*
|--------------------------------------------------------------------------
| PRIMARY CTA
|--------------------------------------------------------------------------
*/

.hero .btn-primary,
.hero-primary {
    background:
        #003852 !important;

    border-color:
        #003852 !important;

    color:
        #FFFFFF !important;

    box-shadow:
        0
        12px
        26px
        rgba(
            0,
            56,
            82,
            .13
        );
}


/*
|--------------------------------------------------------------------------
| SECONDARY CTA
|--------------------------------------------------------------------------
*/

.hero .btn-secondary,
.hero-secondary {
    background:
        rgba(
            255,
            255,
            255,
            .74
        ) !important;

    border-color:
        rgba(
            34,
            43,
            48,
            .12
        ) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/*
|--------------------------------------------------------------------------
| MICRO PROOF ACCENTS
|--------------------------------------------------------------------------
*/

.hero-mini-proof span::before {
    color:
        #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| PRODUCT / DASHBOARD AMBIENT GLOW
|--------------------------------------------------------------------------
|
| Dashboard'un arkasında tek mavi glow yerine
| birkaç farklı modern renk.
|--------------------------------------------------------------------------
*/

.product-stage::before,
.hero-media-stage::before {
    background:
        radial-gradient(
            ellipse
            at 22% 48%,
            rgba(
                135,
                88,
                255,
                .16
            ) 0%,
            transparent 44%
        ),
        radial-gradient(
            ellipse
            at 76% 42%,
            rgba(
                255,
                205,
                79,
                .14
            ) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse
            at 52% 78%,
            rgba(
                0,
                177,
                255,
                .085
            ) 0%,
            transparent 42%
        ) !important;

    filter:
        blur(44px) !important;

    opacity:
        .9 !important;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD SHADOW
|--------------------------------------------------------------------------
*/

.product-stage::after,
.hero-media-stage::after {
    background:
        rgba(
            33,
            29,
            26,
            .08
        ) !important;

    opacity:
        .42 !important;
}


/*
|--------------------------------------------------------------------------
| FLOAT CARDS
|--------------------------------------------------------------------------
*/

.hero .float-card {
    border-color:
        rgba(
            35,
            37,
            39,
            .10
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            .92
        ) !important;

    box-shadow:
        0
        18px
        40px
        rgba(
            25,
            27,
            29,
            .09
        ) !important;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD ACCENT
|--------------------------------------------------------------------------
|
| Açık cyan yüzey yaratmadan yalnızca vurgu.
|--------------------------------------------------------------------------
*/

.hero .real-chart .line {
    stroke:
        #00B1FF !important;
}


.hero .chart-legend .google {
    background:
        #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .hero {
        background:
            radial-gradient(
                ellipse
                at 10% 15%,
                rgba(
                    135,
                    88,
                    255,
                    .11
                ),
                transparent 42%
            ),
            radial-gradient(
                ellipse
                at 92% 15%,
                rgba(
                    255,
                    205,
                    79,
                    .14
                ),
                transparent 44%
            ),
            linear-gradient(
                180deg,
                #F6F2ED 0%,
                #FAF7F3 58%,
                #FFFFFF 100%
            ) !important;
    }


    .hero::after {
        width:
            100%;

        opacity:
            .55;
    }

}


/*
|--------------------------------------------------------------------------
| V67 — HERO VISUAL + BUTTON POLISH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO CTA BUTTONS
|--------------------------------------------------------------------------
|
| Buton hizasi, yükseklik, padding ve icon alanı düzeltilir.
|--------------------------------------------------------------------------
*/

.hero .hero-actions,
.hero .hero-cta,
.hero .cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.hero .hero-actions .btn,
.hero .hero-cta .btn,
.hero .cta-group .btn,
.hero .btn-primary,
.hero .btn-secondary,
.hero-primary,
.hero-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-family: var(--body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.hero .hero-actions .btn:hover,
.hero .hero-cta .btn:hover,
.hero .cta-group .btn:hover,
.hero .btn-primary:hover,
.hero .btn-secondary:hover,
.hero-primary:hover,
.hero-secondary:hover {
    transform: translateY(-1px);
}

.hero .btn-primary,
.hero-primary {
    background: #003852 !important;
    border: 1px solid #003852 !important;
    color: #FFFFFF !important;
    box-shadow:
        0 14px 28px rgba(0, 56, 82, .14),
        0 2px 6px rgba(0, 56, 82, .08) !important;
}

.hero .btn-secondary,
.hero-secondary {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(7, 56, 77, .12) !important;
    color: #07384D !important;
    box-shadow:
        0 10px 24px rgba(20, 28, 32, .05) !important;
}

.hero .hero-actions .btn svg,
.hero .hero-cta .btn svg,
.hero .cta-group .btn svg,
.hero .hero-actions .btn i,
.hero .hero-cta .btn i,
.hero .cta-group .btn i,
.hero .btn-primary svg,
.hero .btn-secondary svg,
.hero .btn-primary i,
.hero .btn-secondary i {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.hero .btn-primary .btn-icon,
.hero-primary .btn-icon,
.hero .btn-primary .icon-wrap,
.hero-primary .icon-wrap {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}


/*
|--------------------------------------------------------------------------
| HERO COPY SPACING
|--------------------------------------------------------------------------
*/

.hero-copy > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — MAIN DASHBOARD
|--------------------------------------------------------------------------
|
| Dashboard daha net, daha contrastlı ve premium görünür.
|--------------------------------------------------------------------------
*/

.hero .product-stage,
.hero .hero-media-stage {
    position: relative;
}

.hero .product-stage .dashboard-shell,
.hero .product-stage .hero-dashboard,
.hero .product-stage .dashboard-browser,
.hero .hero-media-stage .dashboard-shell,
.hero .hero-media-stage .hero-dashboard,
.hero .hero-media-stage .dashboard-browser {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(12, 26, 32, .08) !important;
    box-shadow:
        0 28px 70px rgba(19, 24, 27, .12),
        0 8px 20px rgba(19, 24, 27, .06) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1 !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — FLOATING STATS
|--------------------------------------------------------------------------
*/

.hero .float-card {
    min-width: 98px;
    border-radius: 16px !important;
    border: 1px solid rgba(19, 24, 27, .08) !important;
    box-shadow:
        0 18px 40px rgba(20, 24, 27, .09) !important;
}

.hero .product-stage .float-card:first-of-type,
.hero .hero-media-stage .float-card:first-of-type {
    background:
        linear-gradient(145deg, #FFFFFF 0%, #F8F1FF 100%) !important;
}

.hero .product-stage .float-card:last-of-type,
.hero .hero-media-stage .float-card:last-of-type {
    background:
        linear-gradient(145deg, #FFFFFF 0%, #FFF3EA 100%) !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — TOP METRIC CARDS
|--------------------------------------------------------------------------
|
| Üst özet kartları çok hafif renklendirilir.
|--------------------------------------------------------------------------
*/

.hero .product-stage .dashboard-stats > *,
.hero .product-stage .stats-grid > *,
.hero .product-stage .metrics-grid > *,
.hero .hero-media-stage .dashboard-stats > *,
.hero .hero-media-stage .stats-grid > *,
.hero .hero-media-stage .metrics-grid > * {
    border: 1px solid rgba(13, 25, 31, .08) !important;
    box-shadow: 0 8px 18px rgba(17, 23, 26, .04);
}

.hero .product-stage .dashboard-stats > *:nth-child(1),
.hero .product-stage .stats-grid > *:nth-child(1),
.hero .product-stage .metrics-grid > *:nth-child(1),
.hero .hero-media-stage .dashboard-stats > *:nth-child(1),
.hero .hero-media-stage .stats-grid > *:nth-child(1),
.hero .hero-media-stage .metrics-grid > *:nth-child(1) {
    background: linear-gradient(145deg, #F8F1FF 0%, #FFFFFF 100%) !important;
}

.hero .product-stage .dashboard-stats > *:nth-child(2),
.hero .product-stage .stats-grid > *:nth-child(2),
.hero .product-stage .metrics-grid > *:nth-child(2),
.hero .hero-media-stage .dashboard-stats > *:nth-child(2),
.hero .hero-media-stage .stats-grid > *:nth-child(2),
.hero .hero-media-stage .metrics-grid > *:nth-child(2) {
    background: linear-gradient(145deg, #FFF7E1 0%, #FFFFFF 100%) !important;
}

.hero .product-stage .dashboard-stats > *:nth-child(3),
.hero .product-stage .stats-grid > *:nth-child(3),
.hero .product-stage .metrics-grid > *:nth-child(3),
.hero .hero-media-stage .dashboard-stats > *:nth-child(3),
.hero .hero-media-stage .stats-grid > *:nth-child(3),
.hero .hero-media-stage .metrics-grid > *:nth-child(3) {
    background: linear-gradient(145deg, #FFF1EC 0%, #FFFFFF 100%) !important;
}

.hero .product-stage .dashboard-stats > *:nth-child(4),
.hero .product-stage .stats-grid > *:nth-child(4),
.hero .product-stage .metrics-grid > *:nth-child(4),
.hero .hero-media-stage .dashboard-stats > *:nth-child(4),
.hero .hero-media-stage .stats-grid > *:nth-child(4),
.hero .hero-media-stage .metrics-grid > *:nth-child(4) {
    background: linear-gradient(145deg, #F3FAFF 0%, #FFFFFF 100%) !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — MAIN PANELS
|--------------------------------------------------------------------------
*/

.hero .product-stage .dashboard-main,
.hero .product-stage .chart-panel,
.hero .product-stage .performance-panel,
.hero .product-stage .performance-card,
.hero .hero-media-stage .dashboard-main,
.hero .hero-media-stage .chart-panel,
.hero .hero-media-stage .performance-panel,
.hero .hero-media-stage .performance-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,251,253,.96) 100%) !important;
    border: 1px solid rgba(17, 24, 28, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.hero .product-stage .dashboard-sidebar,
.hero .product-stage .recent-leads,
.hero .product-stage .leads-panel,
.hero .hero-media-stage .dashboard-sidebar,
.hero .hero-media-stage .recent-leads,
.hero .hero-media-stage .leads-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(252,248,244,.95) 100%) !important;
    border: 1px solid rgba(17, 24, 28, .08) !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — CHART EMPHASIS
|--------------------------------------------------------------------------
*/

.hero .real-chart .line,
.hero .chart-line,
.hero .performance-line {
    stroke: #00B1FF !important;
    stroke-width: 3.5 !important;
}

.hero .chart-fill,
.hero .performance-fill,
.hero .real-chart .area {
    fill: rgba(0, 177, 255, .10) !important;
}

.hero .chart-legend .google,
.hero .legend-google {
    background: #00B1FF !important;
}

.hero .chart-legend .seo,
.hero .legend-seo {
    background: #C8DB63 !important;
}

.hero .chart-legend .meta,
.hero .legend-meta {
    background: #F1B39F !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — LIST BADGES
|--------------------------------------------------------------------------
*/

.hero .recent-leads .badge,
.hero .leads-panel .badge,
.hero .dashboard-sidebar .badge {
    border-radius: 999px;
    background: #F4F7F9 !important;
    color: #58707C !important;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL — BROWSER BAR
|--------------------------------------------------------------------------
*/

.hero .browser-bar,
.hero .dashboard-bar,
.hero .dashboard-shell .topbar {
    background: rgba(248, 247, 245, .92) !important;
    border-bottom: 1px solid rgba(16, 24, 29, .06) !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {
    .hero .hero-actions,
    .hero .hero-cta,
    .hero .cta-group {
        gap: 10px;
    }

    .hero .hero-actions .btn,
    .hero .hero-cta .btn,
    .hero .cta-group .btn,
    .hero .btn-primary,
    .hero .btn-secondary,
    .hero-primary,
    .hero-secondary {
        min-height: 48px;
        padding: 0 18px !important;
        font-size: 13px !important;
    }
}


/*
|--------------------------------------------------------------------------
| V68 — HERO BADGE / FLOAT CARD / CHART / LEADS POLISH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 1) HERO EYEBROW FIX
|--------------------------------------------------------------------------
|
| "Dijital Büyüme Ajansı" etiketi artık sıkışmaz, taşmaz, daha temiz görünür.
|--------------------------------------------------------------------------
*/

.hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: var(--body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    overflow: visible !important;
    box-shadow:
        0 12px 30px rgba(18, 23, 27, .10),
        0 2px 8px rgba(18, 23, 27, .06) !important;
}

.hero-eyebrow * {
    line-height: 1 !important;
    white-space: nowrap !important;
}

.hero-copy > .hero-eyebrow,
.hero-copy > .eyebrow,
.hero-copy > .kicker {
    margin-bottom: 18px !important;
}


/*
|--------------------------------------------------------------------------
| 2) FLOAT CARD POSITION FIX
|--------------------------------------------------------------------------
|
| "Gelen Talep +24%" kartı artık içerikle çakışmaz.
|--------------------------------------------------------------------------
*/

.hero .product-stage,
.hero .hero-media-stage,
.hero .product-stage .dashboard-shell,
.hero .product-stage .hero-dashboard,
.hero .hero-media-stage .dashboard-shell,
.hero .hero-media-stage .hero-dashboard {
    overflow: visible !important;
}

.hero .product-stage .float-card,
.hero .hero-media-stage .float-card {
    z-index: 5 !important;
}

.hero .product-stage .float-card:first-of-type,
.hero .hero-media-stage .float-card:first-of-type {
    top: 52px !important;
    left: -44px !important;
    right: auto !important;
    transform: none !important;
}

.hero .product-stage .float-card:last-of-type,
.hero .hero-media-stage .float-card:last-of-type {
    top: 96px !important;
    right: -24px !important;
    left: auto !important;
    transform: none !important;
}

.hero .product-stage .dashboard-main,
.hero .product-stage .chart-panel,
.hero .product-stage .performance-panel,
.hero .hero-media-stage .dashboard-main,
.hero .hero-media-stage .chart-panel,
.hero .hero-media-stage .performance-panel {
    position: relative !important;
    z-index: 1 !important;
}


/*
|--------------------------------------------------------------------------
| 3) MULTI-CHANNEL CHART FEEL
|--------------------------------------------------------------------------
|
| Grafik artık sadece Google Ads'ten geliyormuş gibi durmaz.
|--------------------------------------------------------------------------
*/

.hero .real-chart,
.hero .chart-panel,
.hero .performance-chart,
.hero .performance-card {
    position: relative !important;
    overflow: hidden !important;
}

.hero .real-chart::before,
.hero .chart-panel::before,
.hero .performance-chart::before,
.hero .performance-card::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 28%;
    bottom: 14%;
    top: 22%;
    pointer-events: none;
    z-index: 2;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 142 C60 138 100 126 145 124 C190 122 220 110 260 106 C300 102 335 94 382 92 C438 90 470 82 530 73 C560 69 585 66 600 62' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 152 C58 150 102 144 146 136 C188 129 230 128 272 121 C312 114 356 112 402 106 C455 99 506 95 600 82' fill='none' stroke='%23F1B39F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    opacity: .92;
}

.hero .real-chart .line,
.hero .chart-line,
.hero .performance-line {
    stroke: #00B1FF !important;
    stroke-width: 3.5 !important;
}

.hero .chart-fill,
.hero .performance-fill,
.hero .real-chart .area {
    fill: rgba(0, 177, 255, .08) !important;
}

.hero .chart-legend,
.hero .legend-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.hero .chart-legend .google,
.hero .legend-google {
    background: #00B1FF !important;
}

.hero .chart-legend .seo,
.hero .legend-seo {
    background: #C8DB63 !important;
}

.hero .chart-legend .meta,
.hero .legend-meta {
    background: #F1B39F !important;
}


/*
|--------------------------------------------------------------------------
| 4) RECENT LEADS PANEL — WARMER FEEL
|--------------------------------------------------------------------------
|
| Firma isimleri ve kanal badge'leri daha sıcak ve daha canlı olur.
|--------------------------------------------------------------------------
*/

.hero .recent-leads,
.hero .leads-panel,
.hero .dashboard-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(252,248,244,.95) 100%
        ) !important;
}

.hero .recent-leads li,
.hero .leads-panel li,
.hero .recent-leads .lead-row,
.hero .leads-panel .lead-row,
.hero .dashboard-sidebar .lead-row {
    border-radius: 14px !important;
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FBF7F3 100%
        ) !important;
    border: 1px solid rgba(19, 24, 27, .07) !important;
    box-shadow:
        0 8px 18px rgba(19, 24, 27, .04) !important;
    padding: 10px 12px !important;
}

.hero .recent-leads .avatar,
.hero .leads-panel .avatar,
.hero .dashboard-sidebar .avatar,
.hero .recent-leads .lead-avatar,
.hero .leads-panel .lead-avatar {
    background:
        linear-gradient(
            135deg,
            #FFF7E1 0%,
            #F8F1FF 100%
        ) !important;
    color: #07384D !important;
    border: 1px solid rgba(19, 24, 27, .08) !important;
    box-shadow: none !important;
}

.hero .recent-leads .name,
.hero .leads-panel .name,
.hero .dashboard-sidebar .name,
.hero .recent-leads .lead-name,
.hero .leads-panel .lead-name,
.hero .dashboard-sidebar strong {
    color: #07384D !important;
    font-weight: 700 !important;
}

.hero .recent-leads .source,
.hero .leads-panel .source,
.hero .dashboard-sidebar .source,
.hero .recent-leads .lead-source,
.hero .leads-panel .lead-source,
.hero .dashboard-sidebar small {
    color: #8A7B67 !important;
    font-weight: 500 !important;
}

.hero .recent-leads .badge,
.hero .leads-panel .badge,
.hero .dashboard-sidebar .badge {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| CHANNEL BADGE COLORS
|--------------------------------------------------------------------------
*/

.hero .badge.whatsapp,
.hero .badge-whatsapp,
.hero .channel-whatsapp,
.hero [class*="whatsapp-badge"] {
    background: #ECFFF4 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .12) !important;
}

.hero .badge.phone,
.hero .badge-phone,
.hero .channel-phone,
.hero [class*="phone-badge"] {
    background: #F3F7FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .12) !important;
}

.hero .badge.form,
.hero .badge-form,
.hero .channel-form,
.hero [class*="form-badge"] {
    background: #FFF3EC !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .12) !important;
}


/*
|--------------------------------------------------------------------------
| BETTER SPACING IN RIGHT PANEL
|--------------------------------------------------------------------------
*/

.hero .recent-leads li + li,
.hero .leads-panel li + li,
.hero .recent-leads .lead-row + .lead-row,
.hero .leads-panel .lead-row + .lead-row {
    margin-top: 10px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .hero .product-stage .float-card:first-of-type,
    .hero .hero-media-stage .float-card:first-of-type {
        top: 32px !important;
        left: -10px !important;
    }

    .hero .product-stage .float-card:last-of-type,
    .hero .hero-media-stage .float-card:last-of-type {
        top: 74px !important;
        right: -8px !important;
    }

    .hero .real-chart::before,
    .hero .chart-panel::before,
    .hero .performance-chart::before,
    .hero .performance-card::before {
        right: 12%;
    }

}


/*
|--------------------------------------------------------------------------
| V69 — HERO CHART + RECENT LEADS WARMTH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 1) CHART — SEO + META FULL WIDTH
|--------------------------------------------------------------------------
|
| SEO ve Meta çizgileri de sağ tarafa kadar devam etsin.
|--------------------------------------------------------------------------
*/

.hero .real-chart::before,
.hero .chart-panel::before,
.hero .performance-chart::before,
.hero .performance-card::before {
    content: "";
    position: absolute;
    left: 6% !important;
    right: 6% !important;
    top: 21% !important;
    bottom: 13% !important;
    pointer-events: none;
    z-index: 2;
    opacity: 1 !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C55 146 95 141 140 135 C185 129 228 124 275 118 C320 113 365 105 415 98 C468 91 528 81 600 70' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 157 C52 154 98 149 142 143 C188 136 235 131 284 126 C336 120 390 113 446 104 C500 95 548 87 600 79' fill='none' stroke='%23F1B39F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat !important;
}

.hero .chart-legend .seo,
.hero .legend-seo {
    background: #C8DB63 !important;
}

.hero .chart-legend .meta,
.hero .legend-meta {
    background: #F1B39F !important;
}


/*
|--------------------------------------------------------------------------
| 2) RECENT LEADS PANEL — WARMER / LIVELIER
|--------------------------------------------------------------------------
*/

.hero .recent-leads,
.hero .leads-panel,
.hero .dashboard-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(253,248,243,.98) 100%
        ) !important;
}

.hero .recent-leads li,
.hero .leads-panel li,
.hero .recent-leads .lead-row,
.hero .leads-panel .lead-row,
.hero .dashboard-sidebar .lead-row {
    position: relative !important;
    border-radius: 16px !important;
    border: 1px solid rgba(17, 24, 28, .07) !important;
    box-shadow:
        0 10px 24px rgba(20, 24, 27, .05) !important;
    padding: 12px 14px !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.hero .recent-leads li:hover,
.hero .leads-panel li:hover,
.hero .recent-leads .lead-row:hover,
.hero .leads-panel .lead-row:hover,
.hero .dashboard-sidebar .lead-row:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px rgba(20, 24, 27, .07) !important;
}

.hero .recent-leads li:nth-child(1),
.hero .leads-panel li:nth-child(1),
.hero .recent-leads .lead-row:nth-child(1),
.hero .leads-panel .lead-row:nth-child(1) {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F2FBF6 100%) !important;
    border-color: rgba(34, 197, 94, .14) !important;
}

.hero .recent-leads li:nth-child(2),
.hero .leads-panel li:nth-child(2),
.hero .recent-leads .lead-row:nth-child(2),
.hero .leads-panel .lead-row:nth-child(2) {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%) !important;
    border-color: rgba(0, 84, 123, .12) !important;
}

.hero .recent-leads li:nth-child(3),
.hero .leads-panel li:nth-child(3),
.hero .recent-leads .lead-row:nth-child(3),
.hero .leads-panel .lead-row:nth-child(3) {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FFF4ED 100%) !important;
    border-color: rgba(234, 120, 67, .14) !important;
}


/*
|--------------------------------------------------------------------------
| LEAD AVATARS
|--------------------------------------------------------------------------
*/

.hero .recent-leads .avatar,
.hero .leads-panel .avatar,
.hero .dashboard-sidebar .avatar,
.hero .recent-leads .lead-avatar,
.hero .leads-panel .lead-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 28, .06) !important;
    box-shadow: 0 6px 14px rgba(20, 24, 27, .05) !important;
    color: #07384D !important;
    font-weight: 700 !important;
}

.hero .recent-leads li:nth-child(1) .avatar,
.hero .leads-panel li:nth-child(1) .avatar,
.hero .recent-leads .lead-row:nth-child(1) .avatar,
.hero .leads-panel .lead-row:nth-child(1) .avatar,
.hero .recent-leads li:nth-child(1) .lead-avatar,
.hero .leads-panel li:nth-child(1) .lead-avatar {
    background: linear-gradient(135deg, #E8FFF1 0%, #CFF6DF 100%) !important;
}

.hero .recent-leads li:nth-child(2) .avatar,
.hero .leads-panel li:nth-child(2) .avatar,
.hero .recent-leads .lead-row:nth-child(2) .avatar,
.hero .leads-panel .lead-row:nth-child(2) .avatar,
.hero .recent-leads li:nth-child(2) .lead-avatar,
.hero .leads-panel li:nth-child(2) .lead-avatar {
    background: linear-gradient(135deg, #EEF5FF 0%, #DCEBFF 100%) !important;
}

.hero .recent-leads li:nth-child(3) .avatar,
.hero .leads-panel li:nth-child(3) .avatar,
.hero .recent-leads .lead-row:nth-child(3) .avatar,
.hero .leads-panel .lead-row:nth-child(3) .avatar,
.hero .recent-leads li:nth-child(3) .lead-avatar,
.hero .leads-panel li:nth-child(3) .lead-avatar {
    background: linear-gradient(135deg, #FFF2EA 0%, #FFE1D2 100%) !important;
}


/*
|--------------------------------------------------------------------------
| LEAD NAMES + SOURCES
|--------------------------------------------------------------------------
*/

.hero .recent-leads .name,
.hero .leads-panel .name,
.hero .dashboard-sidebar .name,
.hero .recent-leads .lead-name,
.hero .leads-panel .lead-name,
.hero .dashboard-sidebar strong {
    color: #07384D !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.hero .recent-leads li:nth-child(1) .name,
.hero .leads-panel li:nth-child(1) .name,
.hero .recent-leads .lead-row:nth-child(1) .name,
.hero .leads-panel .lead-row:nth-child(1) .name {
    color: #127145 !important;
}

.hero .recent-leads li:nth-child(2) .name,
.hero .leads-panel li:nth-child(2) .name,
.hero .recent-leads .lead-row:nth-child(2) .name,
.hero .leads-panel .lead-row:nth-child(2) .name {
    color: #00547B !important;
}

.hero .recent-leads li:nth-child(3) .name,
.hero .leads-panel li:nth-child(3) .name,
.hero .recent-leads .lead-row:nth-child(3) .name,
.hero .leads-panel .lead-row:nth-child(3) .name {
    color: #C76B3A !important;
}

.hero .recent-leads .source,
.hero .leads-panel .source,
.hero .dashboard-sidebar .source,
.hero .recent-leads .lead-source,
.hero .leads-panel .lead-source,
.hero .dashboard-sidebar small {
    font-weight: 600 !important;
}

.hero .recent-leads li:nth-child(1) .source,
.hero .leads-panel li:nth-child(1) .source,
.hero .recent-leads .lead-row:nth-child(1) .source,
.hero .leads-panel .lead-row:nth-child(1) .source {
    color: #22A35D !important;
}

.hero .recent-leads li:nth-child(2) .source,
.hero .leads-panel li:nth-child(2) .source,
.hero .recent-leads .lead-row:nth-child(2) .source,
.hero .leads-panel .lead-row:nth-child(2) .source {
    color: #2D7CF3 !important;
}

.hero .recent-leads li:nth-child(3) .source,
.hero .leads-panel li:nth-child(3) .source,
.hero .recent-leads .lead-row:nth-child(3) .source,
.hero .leads-panel .lead-row:nth-child(3) .source {
    color: #E17843 !important;
}


/*
|--------------------------------------------------------------------------
| CHANNEL BADGES — STRONGER
|--------------------------------------------------------------------------
*/

.hero .recent-leads .badge,
.hero .leads-panel .badge,
.hero .dashboard-sidebar .badge,
.hero .badge.whatsapp,
.hero .badge-whatsapp,
.hero .channel-whatsapp,
.hero .badge.phone,
.hero .badge-phone,
.hero .channel-phone,
.hero .badge.form,
.hero .badge-form,
.hero .channel-form {
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
}

.hero .badge.whatsapp,
.hero .badge-whatsapp,
.hero .channel-whatsapp,
.hero [class*="whatsapp-badge"] {
    background: #EAFBF1 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .15) !important;
}

.hero .badge.phone,
.hero .badge-phone,
.hero .channel-phone,
.hero [class*="phone-badge"] {
    background: #EEF5FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .14) !important;
}

.hero .badge.form,
.hero .badge-form,
.hero .channel-form,
.hero [class*="form-badge"] {
    background: #FFF1E8 !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .15) !important;
}


/*
|--------------------------------------------------------------------------
| GENERIC RIGHT-SIDE PANEL FALLBACKS
|--------------------------------------------------------------------------
|
| HTML farklıysa yine de badge renklensin.
|--------------------------------------------------------------------------
*/

.hero .recent-leads li:nth-child(1) [class*="badge"],
.hero .leads-panel li:nth-child(1) [class*="badge"] {
    background: #EAFBF1 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .15) !important;
}

.hero .recent-leads li:nth-child(2) [class*="badge"],
.hero .leads-panel li:nth-child(2) [class*="badge"] {
    background: #EEF5FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .14) !important;
}

.hero .recent-leads li:nth-child(3) [class*="badge"],
.hero .leads-panel li:nth-child(3) [class*="badge"] {
    background: #FFF1E8 !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .15) !important;
}


/*
|--------------------------------------------------------------------------
| V70 — HERO CHART LINE FIX
|--------------------------------------------------------------------------
| SEO ve Meta çizgilerini sağ uca kadar uzat.
| Çizgileri birbirinden daha bağımsız akıta.
| Meta rengini mor/violet tona çek.
|--------------------------------------------------------------------------
*/

.hero .real-chart::before,
.hero .chart-panel::before,
.hero .performance-chart::before,
.hero .performance-card::before {
    content: "";
    position: absolute;
    left: 6% !important;
    right: 6% !important;
    top: 21% !important;
    bottom: 13% !important;
    pointer-events: none;
    z-index: 2;
    opacity: 1 !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 142 C32 136 62 128 92 124 C126 119 154 126 188 117 C222 108 256 97 291 95 C325 93 360 84 396 80 C431 76 466 73 504 67 C540 61 571 55 600 50' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 151 C30 149 60 145 88 138 C118 130 149 120 180 122 C212 124 241 111 275 106 C309 101 344 100 380 91 C417 82 452 90 491 81 C531 72 566 74 600 64' fill='none' stroke='%238B5CF6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat !important;
}

/* Legend renkleri */
.hero .chart-legend .seo,
.hero .legend-seo {
    background: #C8DB63 !important;
}

.hero .chart-legend .meta,
.hero .legend-meta {
    background: #8B5CF6 !important;
}

/* Eğer legend dot'lar farklı class yapısındaysa fallback */
.hero [class*="legend"] [class*="seo"]::before,
.hero [class*="legend"] [class*="meta"]::before {
    opacity: 1 !important;
}


/*
|--------------------------------------------------------------------------
| V71 — HERO CHART FINAL ALIGNMENT
|--------------------------------------------------------------------------
|
| SEO ve Meta:
| - grafik alanının TAM sonuna kadar gider
| - birbirine paralel değildir
| - Meta = turuncu
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SEO + META OVERLAY
|--------------------------------------------------------------------------
*/

.hero .real-chart::before,
.hero .chart-panel::before,
.hero .performance-chart::before,
.hero .performance-card::before {
    content: "";

    position: absolute;

    left: 0 !important;
    right: 0 !important;
    top: 17% !important;
    bottom: 10% !important;

    width: 100% !important;

    pointer-events: none;

    z-index: 2;

    opacity: 1 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 145 C35 139 63 128 96 124 C130 120 156 128 192 115 C225 103 252 98 286 102 C322 106 350 87 387 84 C424 81 450 91 486 76 C522 61 555 68 600 52' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 157 C36 154 64 146 93 136 C125 125 153 131 187 128 C219 125 248 108 281 111 C316 114 343 119 376 103 C408 88 439 95 471 90 C507 84 539 69 568 73 C581 75 591 68 600 62' fill='none' stroke='%23F47A4A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        100% 100% !important;
}


/*
|--------------------------------------------------------------------------
| LEGEND COLORS
|--------------------------------------------------------------------------
*/

.hero .chart-legend .google,
.hero .legend-google {
    background:
        #00B1FF !important;
}


.hero .chart-legend .seo,
.hero .legend-seo {
    background:
        #C8DB63 !important;
}


/*
 * Mevcut HTML'de Meta "social" class'ı ile tanımlanmış olabilir.
 * İki olasılığı da kapsıyoruz.
 */
.hero .chart-legend .meta,
.hero .chart-legend .social,
.hero .legend-meta,
.hero .legend-social {
    background:
        #F47A4A !important;
}


/*
|--------------------------------------------------------------------------
| LEGEND DOT FALLBACK
|--------------------------------------------------------------------------
*/

.hero .chart-legend span:nth-child(3)::before,
.hero .chart-legend span:nth-child(3) i,
.hero .legend-row span:nth-child(3)::before,
.hero .legend-row span:nth-child(3) i {
    background:
        #F47A4A !important;
}


/*
|--------------------------------------------------------------------------
| META TEXT FALLBACK
|--------------------------------------------------------------------------
*/

.hero .chart-legend span:nth-child(3),
.hero .legend-row span:nth-child(3) {
    color:
        #7B6258;
}


/*
|--------------------------------------------------------------------------
| V72 — SERVICES / GROWTH MODEL SPACING
|--------------------------------------------------------------------------
|
| Sosyal Medya Yönetimi kartı ile Çalışma Modelimiz
| arasındaki gereksiz büyük boşluk azaltılır.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SERVICES BOTTOM
|--------------------------------------------------------------------------
*/

.services-v61 {
    padding-bottom:
        42px !important;
}


/*
|--------------------------------------------------------------------------
| GROWTH MODEL TOP
|--------------------------------------------------------------------------
*/

.growth-model-v58 {
    padding-top:
        52px !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .services-v61 {
        padding-bottom:
            38px !important;
    }

    .growth-model-v58 {
        padding-top:
            46px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .services-v61 {
        padding-bottom:
            32px !important;
    }

    .growth-model-v58 {
        padding-top:
            38px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V73 — REFERENCES
|--------------------------------------------------------------------------
|
| Two-row infinite logo marquee.
| Rows move in opposite directions.
|--------------------------------------------------------------------------
*/


.references-v73 {
    position:
        relative;

    overflow:
        hidden;

    padding:
        92px
        0
        112px;

    background:
        radial-gradient(
            ellipse
            at 8% 12%,
            rgba(
                135,
                88,
                255,
                .055
            ),
            transparent
            31%
        ),
        radial-gradient(
            ellipse
            at 92% 16%,
            rgba(
                255,
                205,
                79,
                .075
            ),
            transparent
            31%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FAF8F5 100%
        );
}


/*
|--------------------------------------------------------------------------
| HEAD
|--------------------------------------------------------------------------
*/

.ref73-head {
    max-width:
        760px;

    margin:
        0 auto
        46px;

    text-align:
        center;
}


.ref73-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0 14px;

    margin-bottom:
        17px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.ref73-head h2 {
    max-width:
        700px;

    margin:
        0 auto;

    color:
        #171C20;

    font-family:
        var(--heading);

    font-size:
        clamp(
            38px,
            4vw,
            52px
        );

    font-weight:
        800;

    line-height:
        1.06;

    letter-spacing:
        -.048em;

    text-wrap:
        balance;
}


.ref73-head p {
    max-width:
        650px;

    margin:
        17px auto 0;

    color:
        #70787D;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.82;

    text-wrap:
        balance;
}


/*
|--------------------------------------------------------------------------
| STAGE
|--------------------------------------------------------------------------
*/

.ref73-stage {
    position:
        relative;

    overflow:
        hidden;

    padding:
        38px
        0;

    border:
        1px solid
        rgba(
            24,
            29,
            32,
            .07
        );

    border-radius:
        32px;

    background:
        radial-gradient(
            ellipse
            at 4% 5%,
            rgba(
                135,
                88,
                255,
                .08
            ),
            transparent
            27%
        ),
        radial-gradient(
            ellipse
            at 96% 92%,
            rgba(
                244,
                122,
                74,
                .06
            ),
            transparent
            27%
        ),
        linear-gradient(
            145deg,
            rgba(
                247,
                244,
                240,
                .94
            ),
            rgba(
                255,
                255,
                255,
                .96
            )
        );

    box-shadow:
        0
        22px
        60px
        rgba(
            22,
            24,
            26,
            .045
        );
}


/*
|--------------------------------------------------------------------------
| AMBIENT ORBS
|--------------------------------------------------------------------------
*/

.ref73-orb {
    position:
        absolute;

    width:
        230px;

    height:
        230px;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(60px);

    opacity:
        .48;
}


.ref73-orb-left {
    left:
        -100px;

    top:
        -100px;

    background:
        #B998FF;
}


.ref73-orb-right {
    right:
        -110px;

    bottom:
        -120px;

    background:
        #FFD38A;
}


/*
|--------------------------------------------------------------------------
| ROWS
|--------------------------------------------------------------------------
*/

.ref73-row {
    position:
        relative;

    z-index:
        2;

    overflow:
        hidden;

    width:
        100%;

    padding:
        4px 0;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
}


.ref73-row + .ref73-row {
    margin-top:
        19px;
}


.ref73-track {
    display:
        flex;

    align-items:
        stretch;

    gap:
        18px;

    width:
        max-content;

    will-change:
        transform;
}


.ref73-group {
    display:
        flex;

    align-items:
        stretch;

    gap:
        18px;

    flex:
        0 0 auto;
}


.ref73-row-forward
.ref73-track {
    animation:
        ref73-marquee
        38s
        linear
        infinite;
}


.ref73-row-reverse
.ref73-track {
    animation:
        ref73-marquee
        43s
        linear
        infinite
        reverse;
}


.ref73-row:hover
.ref73-track {
    animation-play-state:
        paused;
}


@keyframes ref73-marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(
                    -50%
                    - 9px
                )
            );
    }

}


/*
|--------------------------------------------------------------------------
| LOGO CARD
|--------------------------------------------------------------------------
*/

.ref73-card {
    position:
        relative;

    width:
        238px;

    min-width:
        238px;

    height:
        112px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        15px
        18px;

    border:
        1px solid
        rgba(
            23,
            28,
            31,
            .075
        );

    border-radius:
        20px;

    color:
        #24353D;

    text-decoration:
        none;

    box-shadow:
        0
        10px
        26px
        rgba(
            20,
            24,
            27,
            .045
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.ref73-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(
            23,
            28,
            31,
            .13
        );

    box-shadow:
        0
        16px
        34px
        rgba(
            20,
            24,
            27,
            .075
        );
}


/*
|--------------------------------------------------------------------------
| CARD COLORS
|--------------------------------------------------------------------------
*/

.ref73-card.tone-0 {
    background:
        linear-gradient(
            145deg,
            #EEE5FF,
            #FAF7FF
        );
}


.ref73-card.tone-1 {
    background:
        linear-gradient(
            145deg,
            #FFF0B7,
            #FFF9E2
        );
}


.ref73-card.tone-2 {
    background:
        linear-gradient(
            145deg,
            #FFDCCF,
            #FFF4EF
        );
}


.ref73-card.tone-3 {
    background:
        linear-gradient(
            145deg,
            #E8F3B6,
            #F7FBE8
        );
}


.ref73-card.tone-4 {
    background:
        linear-gradient(
            145deg,
            #EFEDEA,
            #FBFAF9
        );
}


/*
|--------------------------------------------------------------------------
| LOGO SHELL
|--------------------------------------------------------------------------
*/

.ref73-logo-shell {
    width:
        184px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px
        14px;

    border:
        1px solid
        rgba(
            24,
            29,
            32,
            .05
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            .80
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .85
        );
}


.ref73-logo {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        100%;

    max-height:
        40px;

    object-fit:
        contain;
}


.ref73-monogram {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        10px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        800;
}


/*
|--------------------------------------------------------------------------
| NAME
|--------------------------------------------------------------------------
*/

.ref73-name {
    display:
        block;

    max-width:
        200px;

    overflow:
        hidden;

    color:
        #46535A;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.ref73-empty {
    padding:
        50px;

    border:
        1px solid
        #E5E5E4;

    border-radius:
        24px;

    background:
        #F8F7F5;

    color:
        #767D81;

    text-align:
        center;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| REMOVE DEAD HOMEPAGE DEMO NAV ANCHOR
|--------------------------------------------------------------------------
|
| Sadece eski #demo-siteler anchor'ını gizler.
| Ayrı gerçek bir /demo-siteler linki varsa ona dokunmaz.
|--------------------------------------------------------------------------
*/

.nav a[href="#demo-siteler"] {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .references-v73 {
        padding:
            82px
            0
            94px;
    }


    .ref73-stage {
        border-radius:
            27px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .references-v73 {
        padding:
            72px
            0
            80px;
    }


    .ref73-head {
        margin-bottom:
            31px;
    }


    .ref73-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );
    }


    .ref73-head p {
        font-size:
            12px;
    }


    .ref73-stage {
        padding:
            26px
            0;

        border-radius:
            23px;
    }


    .ref73-row {
        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent,
                #000 4%,
                #000 96%,
                transparent
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent,
                #000 4%,
                #000 96%,
                transparent
            );
    }


    .ref73-card {
        width:
            190px;

        min-width:
            190px;

        height:
            96px;

        border-radius:
            17px;

        padding:
            12px;
    }


    .ref73-logo-shell {
        width:
            150px;

        height:
            47px;
    }


    .ref73-logo {
        max-height:
            33px;
    }


    .ref73-row-forward
    .ref73-track {
        animation-duration:
            29s;
    }


    .ref73-row-reverse
    .ref73-track {
        animation-duration:
            33s;
    }

}


/*
|--------------------------------------------------------------------------
| ACCESSIBILITY
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {

    .ref73-track {
        animation:
            none !important;

        transform:
            none !important;
    }


    .ref73-row {
        overflow-x:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| V74 — SIMPLE REFERENCES
|--------------------------------------------------------------------------
|
| No duplicate cards.
| No colorful card backgrounds.
| One row when possible.
|--------------------------------------------------------------------------
*/


.references-v74 {
    padding:
        88px
        0
        105px;

    background:
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| HEAD
|--------------------------------------------------------------------------
*/

.ref74-head {
    max-width:
        720px;

    margin:
        0 auto
        42px;

    text-align:
        center;
}


.ref74-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0
        14px;

    margin-bottom:
        17px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.ref74-head h2 {
    margin:
        0;

    color:
        #171C20;

    font-family:
        var(--heading);

    font-size:
        clamp(
            38px,
            4vw,
            50px
        );

    font-weight:
        800;

    line-height:
        1.07;

    letter-spacing:
        -.047em;
}


.ref74-head p {
    max-width:
        590px;

    margin:
        16px auto 0;

    color:
        #747B7F;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.8;
}


/*
|--------------------------------------------------------------------------
| STAGE
|--------------------------------------------------------------------------
*/

.ref74-stage {
    overflow:
        hidden;

    padding:
        30px;

    border:
        1px solid
        #E5E7E8;

    border-radius:
        28px;

    background:
        #F7F7F6;

    box-shadow:
        0
        20px
        55px
        rgba(
            20,
            24,
            27,
            .04
        );
}


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.ref74-row {
    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    padding:
        4px
        0;
}


.ref74-row
+ .ref74-row {
    margin-top:
        16px;
}


.ref74-track {
    width:
        max-content;

    max-width:
        none;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        16px;

    margin:
        0 auto;

    will-change:
        transform;
}


.ref74-row.is-moving {
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.ref74-card {
    width:
        220px;

    min-width:
        220px;

    height:
        104px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        15px
        17px;

    border:
        1px solid
        #E1E4E6;

    border-radius:
        18px;

    background:
        #FFFFFF;

    color:
        #26363E;

    text-decoration:
        none;

    box-shadow:
        0
        7px
        18px
        rgba(
            21,
            25,
            28,
            .035
        );

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.ref74-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #CBD1D4;

    box-shadow:
        0
        13px
        28px
        rgba(
            21,
            25,
            28,
            .065
        );
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.ref74-logo-area {
    width:
        170px;

    height:
        53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.ref74-logo {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        158px;

    max-height:
        44px;

    object-fit:
        contain;

    object-position:
        center;
}


.ref74-monogram {
    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        800;
}


/*
|--------------------------------------------------------------------------
| COMPANY NAME
|--------------------------------------------------------------------------
*/

.ref74-name {
    display:
        block;

    width:
        100%;

    overflow:
        hidden;

    color:
        #737A7E;

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        650;

    line-height:
        1.2;

    text-align:
        center;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.ref74-empty {
    padding:
        42px;

    border:
        1px solid
        #E4E6E7;

    border-radius:
        22px;

    background:
        #F8F8F7;

    color:
        #777D80;

    text-align:
        center;

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .references-v74 {
        padding:
            78px
            0
            90px;
    }


    .ref74-stage {
        padding:
            24px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .references-v74 {
        padding:
            70px
            0
            78px;
    }


    .ref74-head {
        margin-bottom:
            30px;
    }


    .ref74-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                43px
            );
    }


    .ref74-stage {
        padding:
            20px 0;

        border-radius:
            22px;
    }


    .ref74-row {
        padding-left:
            18px;

        padding-right:
            18px;
    }


    .ref74-card {
        width:
            184px;

        min-width:
            184px;

        height:
            92px;

        border-radius:
            16px;
    }


    .ref74-logo-area {
        width:
            145px;

        height:
            44px;
    }


    .ref74-logo {
        max-width:
            138px;

        max-height:
            36px;
    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {

    .ref74-track {
        transform:
            none !important;

        will-change:
            auto;
    }


    .ref74-row {
        overflow-x:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| V75 — REFERENCES / INTEGRATION STYLE
|--------------------------------------------------------------------------
*/


.references-v75 {
    position:
        relative;

    overflow:
        hidden;

    padding:
        102px
        0
        116px;

    background:
        #F6F6F5;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.ref75-head {
    max-width:
        760px;

    margin:
        0 auto
        52px;

    text-align:
        center;
}


.ref75-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        0
        14px;

    margin-bottom:
        20px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.ref75-head h2 {
    max-width:
        730px;

    margin:
        0 auto;

    color:
        #17191C;

    font-family:
        var(--heading);

    font-size:
        clamp(
            40px,
            4.2vw,
            54px
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -.045em;

    text-wrap:
        balance;
}


.ref75-head p {
    max-width:
        610px;

    margin:
        17px auto 0;

    color:
        #86898C;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.75;

    text-wrap:
        balance;
}


/*
|--------------------------------------------------------------------------
| LOGO AREA
|--------------------------------------------------------------------------
*/

.ref75-logos {
    width:
        min(
            100%,
            940px
        );

    margin:
        0 auto;
}


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.ref75-row {
    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    padding:
        5px 0;
}


.ref75-row
+ .ref75-row {
    margin-top:
        15px;
}


.ref75-track {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

    width:
        max-content;

    min-width:
        100%;

    margin:
        0 auto;

    will-change:
        transform;
}


.ref75-row.is-moving
.ref75-track {
    justify-content:
        flex-start;
}


.ref75-row.is-moving {
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 8%,
            #000 92%,
            transparent 100%
        );
}


/*
|--------------------------------------------------------------------------
| CIRCULAR LOGOS
|--------------------------------------------------------------------------
*/

.ref75-logo-item {
    width:
        92px;

    height:
        92px;

    min-width:
        92px;

    display:
        grid;

    place-items:
        center;

    padding:
        17px;

    border:
        1px solid
        rgba(
            25,
            29,
            32,
            .055
        );

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    box-shadow:
        0
        16px
        38px
        rgba(
            24,
            28,
            31,
            .055
        );

    text-decoration:
        none;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.ref75-logo-item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            0,
            177,
            255,
            .14
        );

    box-shadow:
        0
        21px
        45px
        rgba(
            24,
            28,
            31,
            .085
        );
}


.ref75-logo-item img {
    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        61px;

    max-height:
        52px;

    object-fit:
        contain;

    object-position:
        center;
}


/*
|--------------------------------------------------------------------------
| MONOGRAM FALLBACK
|--------------------------------------------------------------------------
*/

.ref75-monogram {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        800;
}


/*
|--------------------------------------------------------------------------
| EMPTY
|--------------------------------------------------------------------------
*/

.ref75-empty {
    max-width:
        700px;

    margin:
        0 auto;

    padding:
        45px;

    border:
        1px solid
        #E4E5E5;

    border-radius:
        22px;

    background:
        #FFFFFF;

    color:
        #818589;

    text-align:
        center;

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .references-v75 {
        padding:
            88px
            0
            96px;
    }


    .ref75-logo-item {
        width:
            84px;

        height:
            84px;

        min-width:
            84px;
    }


    .ref75-logo-item img {
        max-width:
            56px;

        max-height:
            47px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .references-v75 {
        padding:
            76px
            0
            84px;
    }


    .ref75-head {
        margin-bottom:
            36px;
    }


    .ref75-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );
    }


    .ref75-head p {
        font-size:
            12px;
    }


    .ref75-logos {
        width:
            calc(
                100%
                + 32px
            );

        margin-left:
            -16px;
    }


    .ref75-track {
        gap:
            15px;

        padding:
            0 16px;
    }


    .ref75-logo-item {
        width:
            74px;

        height:
            74px;

        min-width:
            74px;

        padding:
            13px;
    }


    .ref75-logo-item img {
        max-width:
            49px;

        max-height:
            40px;
    }

}


/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {

    .ref75-track {
        transform:
            none !important;

        will-change:
            auto;
    }


    .ref75-row {
        overflow-x:
            auto;
    }

}



/*
|--------------------------------------------------------------------------
| V76 — REFERENCES / COLOR ATMOSPHERE + SHAPE DIVIDERS
|--------------------------------------------------------------------------
|
| Hero ile aynı tasarım ailesi:
|
| - violet atmosfer
| - sıcak sarı atmosfer
| - hafif coral
| - #00B1FF yalnızca accent
| - büyük logolar
| - duplicate yok
| - üst ve alt modern wave divider
|--------------------------------------------------------------------------
*/


.references-v75 {
    position:
        relative !important;

    isolation:
        isolate;

    overflow:
        hidden !important;

    padding:
        148px
        0
        155px !important;

    background:
        radial-gradient(
            ellipse
            at 6% 35%,
            rgba(
                135,
                88,
                255,
                .16
            ) 0%,
            rgba(
                135,
                88,
                255,
                .055
            ) 35%,
            transparent 58%
        ),
        radial-gradient(
            ellipse
            at 91% 28%,
            rgba(
                255,
                205,
                79,
                .19
            ) 0%,
            rgba(
                255,
                205,
                79,
                .055
            ) 34%,
            transparent 58%
        ),
        radial-gradient(
            ellipse
            at 78% 78%,
            rgba(
                244,
                122,
                74,
                .09
            ) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse
            at 37% 78%,
            rgba(
                0,
                177,
                255,
                .045
            ) 0%,
            transparent 39%
        ),
        linear-gradient(
            180deg,
            #F8F5F1 0%,
            #FAF7F4 44%,
            #F8F5F2 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| ORGANIC TOP DIVIDER
|--------------------------------------------------------------------------
*/

.references-v75::before {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    top:
        -1px;

    left:
        -1%;

    width:
        102%;

    height:
        105px;

    pointer-events:
        none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V35C1240 96 1080 22 875 54C650 91 440 101 230 55C142 36 70 31 0 44Z' fill='%23ffffff'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        center top;

    background-size:
        100% 100%;
}


/*
|--------------------------------------------------------------------------
| ORGANIC BOTTOM DIVIDER
|--------------------------------------------------------------------------
*/

.references-v75::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    bottom:
        -1px;

    left:
        -1%;

    width:
        102%;

    height:
        112px;

    pointer-events:
        none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C195 18 395 91 610 61C842 29 1050 25 1246 64C1322 79 1381 78 1440 58V120H0Z' fill='%23ffffff'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        center bottom;

    background-size:
        100% 100%;
}


.references-v75 > .container {
    position:
        relative;

    z-index:
        3;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.references-v75 .ref75-head {
    max-width:
        790px;

    margin-bottom:
        58px !important;
}


.references-v75 .ref75-kicker {
    position:
        relative;

    min-height:
        34px !important;

    padding:
        0
        16px !important;

    background:
        #171A1F !important;

    color:
        #00B1FF !important;

    box-shadow:
        0
        12px
        28px
        rgba(
            20,
            23,
            26,
            .09
        );
}


.references-v75 .ref75-kicker::before {
    content:
        "";

    width:
        7px;

    height:
        7px;

    margin-right:
        8px;

    border-radius:
        50%;

    background:
        #00B1FF;

    box-shadow:
        0
        0
        12px
        rgba(
            0,
            177,
            255,
            .75
        );
}


.references-v75 .ref75-head h2 {
    max-width:
        800px;

    font-size:
        clamp(
            40px,
            4.3vw,
            56px
        ) !important;

    font-weight:
        700 !important;

    color:
        #171A1D !important;
}


.references-v75 .ref75-head p {
    max-width:
        670px;

    font-size:
        14px !important;

    color:
        #707980 !important;
}


/*
|--------------------------------------------------------------------------
| LOGO CAROUSEL AREA
|--------------------------------------------------------------------------
*/

.references-v75 .ref75-logos {
    position:
        relative;

    width:
        min(
            100%,
            1120px
        ) !important;

    margin:
        0 auto;
}


/*
 * Decorative motion hints.
 */

.references-v75
.ref75-logos::before,
.references-v75
.ref75-logos::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    width:
        125px;

    height:
        3px;

    transform:
        translateY(-50%);

    border-radius:
        99px;

    opacity:
        .42;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                0,
                177,
                255,
                .22
            ),
            transparent
        );

    pointer-events:
        none;
}


.references-v75
.ref75-logos::before {
    left:
        -100px;
}


.references-v75
.ref75-logos::after {
    right:
        -100px;
}


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.references-v75 .ref75-row {
    overflow:
        hidden !important;

    padding:
        16px
        25px !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
}


.references-v75
.ref75-track {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        max-content;

    min-width:
        100%;

    gap:
        34px !important;

    margin:
        0 auto;

    will-change:
        transform;
}


/*
|--------------------------------------------------------------------------
| LARGE LOGO CIRCLES
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-logo-item {
    position:
        relative;

    width:
        142px !important;

    height:
        142px !important;

    min-width:
        142px !important;

    display:
        grid;

    place-items:
        center;

    padding:
        20px !important;

    border:
        1px solid
        rgba(
            23,
            28,
            31,
            .07
        ) !important;

    border-radius:
        50% !important;

    background:
        rgba(
            255,
            255,
            255,
            .93
        ) !important;

    box-shadow:
        0
        22px
        48px
        rgba(
            31,
            30,
            31,
            .075
        ) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform
        .22s
        ease,
        box-shadow
        .22s
        ease,
        border-color
        .22s
        ease;
}


.references-v75
.ref75-logo-item::after {
    content:
        "";

    position:
        absolute;

    inset:
        -9px;

    z-index:
        -1;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                .68
            ),
            rgba(
                255,
                255,
                255,
                0
            ) 68%
        );

    opacity:
        .7;
}


.references-v75
.ref75-logo-item:hover {
    transform:
        translateY(-6px)
        scale(1.025);

    border-color:
        rgba(
            0,
            177,
            255,
            .20
        ) !important;

    box-shadow:
        0
        28px
        60px
        rgba(
            30,
            30,
            31,
            .11
        ) !important;
}


/*
|--------------------------------------------------------------------------
| LOGOS — MUCH LARGER
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-logo-item img {
    display:
        block;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        102px !important;

    max-height:
        86px !important;

    object-fit:
        contain;

    object-position:
        center;
}


/*
|--------------------------------------------------------------------------
| FALLBACK
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-monogram {
    width:
        66px !important;

    height:
        66px !important;

    border-radius:
        18px !important;

    font-size:
        17px !important;
}


/*
|--------------------------------------------------------------------------
| SECTION RHYTHM
|--------------------------------------------------------------------------
|
| Çalışma Modelimiz → Referanslar geçişini de sıkılaştır.
|--------------------------------------------------------------------------
*/

.growth-model-v58 {
    padding-bottom:
        55px !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .references-v75 {
        padding:
            130px
            0
            138px !important;
    }


    .references-v75
    .ref75-logo-item {
        width:
            124px !important;

        height:
            124px !important;

        min-width:
            124px !important;
    }


    .references-v75
    .ref75-logo-item img {
        max-width:
            88px !important;

        max-height:
            74px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .references-v75 {
        padding:
            118px
            0
            125px !important;
    }


    .references-v75::before {
        height:
            70px;
    }


    .references-v75::after {
        height:
            76px;
    }


    .references-v75
    .ref75-head {
        margin-bottom:
            38px !important;
    }


    .references-v75
    .ref75-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            ) !important;
    }


    .references-v75
    .ref75-head p {
        font-size:
            12px !important;
    }


    .references-v75
    .ref75-row {
        padding:
            14px
            12px !important;
    }


    .references-v75
    .ref75-track {
        gap:
            18px !important;
    }


    .references-v75
    .ref75-logo-item {
        width:
            102px !important;

        height:
            102px !important;

        min-width:
            102px !important;

        padding:
            15px !important;
    }


    .references-v75
    .ref75-logo-item img {
        max-width:
            72px !important;

        max-height:
            61px !important;
    }


    .references-v75
    .ref75-logos::before,
    .references-v75
    .ref75-logos::after {
        display:
            none;
    }

}

/* === BUTTON TEXT WHITE + REFERENCES DOT REMOVE / V78 === */
.btn-primary,
.button-primary,
.site-btn-primary,
.site-btn--primary,
.site-button-primary,
.site-button--primary,
.hero__button--primary,
.hero__pill,
.section__pill,
.section-pill,
.badge--dark,
.pill--dark,
a[class*="btn-primary"],
a[class*="button-primary"],
button[class*="btn-primary"],
button[class*="button-primary"] {
    color: #FFFFFF !important;
}

.btn-primary *,
.button-primary *,
.site-btn-primary *,
.site-btn--primary *,
.site-button-primary *,
.site-button--primary *,
.hero__button--primary *,
.hero__pill *,
.section__pill *,
.section-pill *,
.badge--dark *,
.pill--dark * {
    color: #FFFFFF !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.references-badge::before,
.references-pill::before,
.references-label::before,
.references-kicker::before,
.references-badge .dot,
.references-pill .dot,
.references-label .dot,
.references-kicker .dot,
.references-badge .badge-dot,
.references-pill .badge-dot,
.references-label .badge-dot,
.references-kicker .badge-dot {
    display: none !important;
    content: none !important;
}

/*
|--------------------------------------------------------------------------
| V78 — BADGE TEXT FIX
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO — DIJITAL BUYUME AJANSI
|--------------------------------------------------------------------------
*/

.hero .hero-eyebrow,
.hero .hero-eyebrow *,
.hero-eyebrow,
.hero-eyebrow * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| REFERENCES — REFERANSLARIMIZ
|--------------------------------------------------------------------------
*/

.references-v75 .ref75-kicker,
.references-v75 .ref75-kicker *,
.ref75-kicker,
.ref75-kicker * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE REFERENCES DOT
|--------------------------------------------------------------------------
*/

.references-v75 .ref75-kicker::before,
.ref75-kicker::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}


/*
|--------------------------------------------------------------------------
| KEEP ACCENT ON BACKGROUND DETAILS ONLY
|--------------------------------------------------------------------------
*/

.hero .hero-eyebrow,
.references-v75 .ref75-kicker {
    background: #171A1F !important;
}


/*
|--------------------------------------------------------------------------
| SERVICES KICKER — WHITE TEXT
|--------------------------------------------------------------------------
*/

.services-v61 .sv61-kicker,
.services-v61 .sv61-kicker *,
.sv61-kicker,
.sv61-kicker * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}



/*
|--------------------------------------------------------------------------
| V79 — PREMIUM FOOTER
|--------------------------------------------------------------------------
*/

.footer-v79 {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    margin-top: 90px;

    padding:
        88px
        0
        34px;

    border-radius:
        34px
        34px
        0
        0;

    background:
        radial-gradient(
            ellipse
            at 100% 0%,
            rgba(0,177,255,.17) 0%,
            rgba(0,177,255,.045) 28%,
            transparent 46%
        ),
        radial-gradient(
            ellipse
            at 0% 100%,
            rgba(0,177,255,.14) 0%,
            rgba(0,177,255,.035) 27%,
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #191B1E 0%,
            #14171A 48%,
            #0F1418 100%
        );

    color: #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| GLOW
|--------------------------------------------------------------------------
*/

.footer79-glow {
    position: absolute;

    z-index: -1;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    filter: blur(82px);

    pointer-events: none;
}


.footer79-glow-left {
    left: -190px;
    bottom: -210px;

    background:
        rgba(0,177,255,.32);
}


.footer79-glow-right {
    right: -185px;
    top: -215px;

    background:
        rgba(0,177,255,.27);
}


/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.footer79-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.48fr)
        .72fr
        1fr
        .72fr;

    gap:
        72px;

    align-items: start;
}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.footer79-brand {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;
}


.footer79-logo-mark {
    position: relative;

    display: block;

    width: 55px;
    height: 37px;
}


.footer79-logo-mark i {
    position: absolute;

    top: 8px;

    width: 25px;
    height: 22px;

    display: block;

    transform:
        skewY(-27deg);

    border-radius: 1px;
}


.footer79-logo-mark i:nth-child(1) {
    left: 0;

    background:
        #00B1FF;
}


.footer79-logo-mark i:nth-child(2) {
    left: 15px;

    background:
        #007CAD;
}


.footer79-logo-mark i:nth-child(3) {
    left: 30px;

    background:
        #00547B;
}


.footer79-brand-text {
    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        20px;

    font-weight:
        650;

    letter-spacing:
        .015em;
}


.footer79-description {
    max-width:
        385px;

    margin:
        25px
        0
        0;

    color:
        rgba(255,255,255,.56);

    font-family:
        var(--body);

    font-size:
        12px;

    line-height:
        1.9;
}


/*
|--------------------------------------------------------------------------
| SOCIAL
|--------------------------------------------------------------------------
*/

.footer79-socials {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top:
        29px;
}


.footer79-socials a {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

    color:
        #FFFFFF;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.footer79-socials a:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0,177,255,.44);

    background:
        rgba(0,177,255,.075);
}


.footer79-socials svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/*
|--------------------------------------------------------------------------
| COLUMNS
|--------------------------------------------------------------------------
*/

.footer79-column h3 {
    margin:
        0
        0
        24px;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        -.015em;
}


.footer79-column nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;
}


.footer79-column nav a {
    position: relative;

    color:
        rgba(255,255,255,.57);

    font-family:
        var(--body);

    font-size:
        11px;

    line-height:
        1.45;

    text-decoration:
        none;

    transition:
        color .18s ease,
        transform .18s ease;
}


.footer79-column nav a:hover {
    color:
        #FFFFFF;

    transform:
        translateX(3px);
}


.footer79-column nav a::before {
    content: "";

    position: absolute;

    left: -12px;
    top: 50%;

    width: 4px;
    height: 4px;

    transform:
        translateY(-50%) scale(0);

    border-radius:
        50%;

    background:
        #00B1FF;

    transition:
        transform .18s ease;
}


.footer79-column nav a:hover::before {
    transform:
        translateY(-50%) scale(1);
}


/*
|--------------------------------------------------------------------------
| BOTTOM
|--------------------------------------------------------------------------
*/

.footer79-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    margin-top:
        72px;

    padding-top:
        29px;

    border-top:
        1px solid
        rgba(255,255,255,.095);

    color:
        rgba(255,255,255,.40);

    font-family:
        var(--body);

    font-size:
        10px;
}


.footer79-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(255,255,255,.48);

    text-decoration:
        none;

    transition:
        color .18s ease;
}


.footer79-bottom > a:hover {
    color:
        #FFFFFF;
}


.footer79-bottom > a span {
    color:
        #00B1FF;

    font-size:
        13px;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .footer79-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            55px 70px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .footer-v79 {
        margin-top:
            60px;

        padding:
            64px
            0
            27px;

        border-radius:
            27px
            27px
            0
            0;
    }


    .footer79-grid {
        grid-template-columns:
            1fr;

        gap:
            42px;
    }


    .footer79-description {
        max-width:
            430px;
    }


    .footer79-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-top:
            50px;
    }

}



/*
|--------------------------------------------------------------------------
| V80 — REAL UPLOADED FOOTER LOGO
|--------------------------------------------------------------------------
*/

.footer79-uploaded-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 275px;
    max-height: 68px;

    object-fit: contain;
    object-position: left center;
}


.footer79-brand:has(
    .footer79-uploaded-logo
) {
    gap: 0;
}


@media (max-width: 720px) {

    .footer79-uploaded-logo {
        max-width: 235px;
        max-height: 58px;
    }

}


/*
|--------------------------------------------------------------------------
| V81 — FULL FOOTER MANAGEMENT
|--------------------------------------------------------------------------
*/

.footer79-uploaded-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 285px;
    max-height: 72px;

    object-fit: contain;
    object-position: left center;
}


.footer79-socials span {
    display: grid;

    place-items: center;

    color: #FFFFFF;

    font-family: var(--heading);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;
}


.footer79-bottom-links {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;
}


.footer79-bottom-links a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        rgba(255,255,255,.45);

    text-decoration: none;

    transition:
        color .18s ease;
}


.footer79-bottom-links a:hover {
    color: #FFFFFF;
}


.footer79-bottom-links a span {
    color: #00B1FF;
}


@media (max-width:720px) {

    .footer79-uploaded-logo {
        max-width: 235px;
        max-height: 60px;
    }

}


/*
|--------------------------------------------------------------------------
| V82 — PANEL CONTROLLED HEADER / FOOTER LOGO STYLE
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HEADER LOGO
|--------------------------------------------------------------------------
*/

.header .logo img,
.header a.logo img,
.header .site-logo img,
.site-header .logo img,
.site-header .site-logo img,
.header-logo img {
    width:
        var(
            --atilim-header-logo-width
        ) !important;

    max-width:
        var(
            --atilim-header-logo-width
        ) !important;

    height:
        auto !important;

    max-height:
        var(
            --atilim-header-logo-height
        ) !important;

    object-fit:
        contain !important;

    object-position:
        left center !important;

    transform:
        translateY(
            var(
                --atilim-header-logo-offset-y
            )
        ) !important;
}


/*
|--------------------------------------------------------------------------
| FOOTER LOGO
|--------------------------------------------------------------------------
*/

.footer79-uploaded-logo {
    width:
        var(
            --atilim-footer-logo-width
        ) !important;

    max-width:
        var(
            --atilim-footer-logo-width
        ) !important;

    height:
        auto !important;

    max-height:
        var(
            --atilim-footer-logo-height
        ) !important;

    object-fit:
        contain !important;

    object-position:
        left center !important;

    transform:
        translateY(
            var(
                --atilim-footer-logo-offset-y
            )
        ) !important;
}


/*
|--------------------------------------------------------------------------
| KEEP LOGO CONTAINERS FLEXIBLE
|--------------------------------------------------------------------------
*/

.header .logo,
.header a.logo,
.site-header .logo,
.footer79-brand {
    flex-shrink:
        0;
}


/*
|--------------------------------------------------------------------------
| V83 — FREE GROWTH ANALYSIS
|--------------------------------------------------------------------------
*/


.contact-modern-v83 {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        108px
        0
        104px;

    background:
        radial-gradient(
            ellipse
            at 8% 5%,
            rgba(
                0,
                177,
                255,
                .105
            ),
            transparent 30%
        ),
        radial-gradient(
            ellipse
            at 92% 95%,
            rgba(
                77,
                109,
                255,
                .08
            ),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #003852 0%,
            #063447 52%,
            #082D3D 100%
        );
}


/*
|--------------------------------------------------------------------------
| AMBIENT DETAILS
|--------------------------------------------------------------------------
*/

.contact-modern-v83::before {
    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    left:
        -300px;

    top:
        -300px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .055
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.contact-modern-v83::after {
    content:
        "";

    position:
        absolute;

    width:
        620px;

    height:
        620px;

    right:
        -380px;

    bottom:
        -390px;

    border:
        1px solid
        rgba(
            0,
            177,
            255,
            .11
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


.contact-modern-v83
> .container {
    position:
        relative;

    z-index:
        2;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.contact83-head {
    max-width:
        850px;

    margin:
        0 auto
        44px;

    text-align:
        center;
}


.contact83-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        32px;

    padding:
        0 14px;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .075
        );

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .015em;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.contact83-head h2 {
    max-width:
        850px;

    margin:
        0 auto;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        clamp(
            42px,
            4.6vw,
            60px
        );

    font-weight:
        750;

    line-height:
        1.05;

    letter-spacing:
        -.052em;

    text-wrap:
        balance;
}


.contact83-head p {
    max-width:
        680px;

    margin:
        21px auto 0;

    color:
        rgba(
            255,
            255,
            255,
            .63
        );

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.8;

    text-wrap:
        balance;
}


/*
|--------------------------------------------------------------------------
| FORM CARD
|--------------------------------------------------------------------------
*/

.contact83-card {
    width:
        min(
            100%,
            1180px
        );

    margin:
        0 auto;

    padding:
        36px
        38px
        38px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .74
        );

    border-radius:
        26px;

    background:
        rgba(
            255,
            255,
            255,
            .975
        );

    box-shadow:
        0
        32px
        80px
        rgba(
            0,
            16,
            25,
            .22
        );
}


/*
|--------------------------------------------------------------------------
| FORM GRID
|--------------------------------------------------------------------------
*/

.contact83-form {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        21px
        18px !important;

    width:
        100%;
}


/*
|--------------------------------------------------------------------------
| COMMON FIELD WRAPPERS
|--------------------------------------------------------------------------
*/

.contact83-form
.field,
.contact83-form
.form-field,
.contact83-form
.form-group,
.contact83-form
.contact-field {
    min-width:
        0;

    margin:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| FULL WIDTH FIELDS
|--------------------------------------------------------------------------
*/

.contact83-form
.field.full,
.contact83-form
.form-field.full,
.contact83-form
.form-group.full,
.contact83-form
.contact-field.full,

.contact83-form
> :has(textarea),

.contact83-form
> .form-actions,

.contact83-form
> .contact-actions,

.contact83-form
> .submit-row,

.contact83-form
> button[type="submit"] {
    grid-column:
        1 / -1 !important;
}


/*
|--------------------------------------------------------------------------
| HIDDEN TRACKING FIELDS
|--------------------------------------------------------------------------
*/

.contact83-form
input[type="hidden"] {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.contact83-form label {
    display:
        block;

    margin:
        0
        0
        9px;

    color:
        #283840;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.3;
}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.contact83-form
input:not(
    [type="hidden"]
):not(
    [type="checkbox"]
):not(
    [type="radio"]
),
.contact83-form
textarea,
.contact83-form
select {
    width:
        100% !important;

    min-width:
        0;

    border:
        1px solid
        #D8E0E5 !important;

    border-radius:
        14px !important;

    outline:
        none;

    background:
        #FCFDFD !important;

    color:
        #18262D !important;

    font-family:
        var(--body);

    font-size:
        12px;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .7
        );

    transition:
        border-color
        .18s
        ease,
        box-shadow
        .18s
        ease,
        background
        .18s
        ease;
}


.contact83-form
input:not(
    [type="hidden"]
):not(
    [type="checkbox"]
):not(
    [type="radio"]
),
.contact83-form
select {
    height:
        58px !important;

    padding:
        0
        17px !important;
}


.contact83-form textarea {
    min-height:
        150px !important;

    padding:
        16px
        17px !important;

    resize:
        vertical;
}


/*
|--------------------------------------------------------------------------
| PLACEHOLDER
|--------------------------------------------------------------------------
*/

.contact83-form
input::placeholder,
.contact83-form
textarea::placeholder {
    color:
        #9AA4AA;

    opacity:
        1;
}


/*
|--------------------------------------------------------------------------
| FOCUS
|--------------------------------------------------------------------------
*/

.contact83-form
input:focus,
.contact83-form
textarea:focus,
.contact83-form
select:focus {
    border-color:
        rgba(
            0,
            177,
            255,
            .52
        ) !important;

    background:
        #FFFFFF !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            0,
            177,
            255,
            .085
        ) !important;
}


/*
|--------------------------------------------------------------------------
| SUBMIT AREA
|--------------------------------------------------------------------------
*/

.contact83-form
button[type="submit"],
.contact83-form
input[type="submit"] {
    grid-column:
        1 / -1;

    width:
        100% !important;

    height:
        60px !important;

    min-height:
        60px !important;

    margin-top:
        4px !important;

    padding:
        0
        28px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            100deg,
            #00547B 0%,
            #003852 58%,
            #071E2A 100%
        ) !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;

    font-family:
        var(--heading);

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0
        11px
        28px
        rgba(
            0,
            56,
            82,
            .16
        );

    transition:
        transform
        .18s
        ease,
        box-shadow
        .18s
        ease;
}


.contact83-form
button[type="submit"]:hover,
.contact83-form
input[type="submit"]:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0
        15px
        34px
        rgba(
            0,
            56,
            82,
            .22
        );
}


/*
|--------------------------------------------------------------------------
| SUCCESS / ERROR
|--------------------------------------------------------------------------
*/

.contact83-form
.alert,
.contact83-form
.form-message,
.contact83-form
.errors,
.contact83-form
.success {
    grid-column:
        1 / -1;
}


/*
|--------------------------------------------------------------------------
| FOOTER TRANSITION
|--------------------------------------------------------------------------
*/

.contact-modern-v83
+ .footer-v79 {
    margin-top:
        58px !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    1050px
) {

    .contact-modern-v83 {
        padding:
            94px
            0
            90px;
    }


    .contact83-card {
        padding:
            31px
            30px
            33px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    720px
) {

    .contact-modern-v83 {
        padding:
            78px
            0
            76px;
    }


    .contact83-head {
        margin-bottom:
            32px;
    }


    .contact83-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            );
    }


    .contact83-head p {
        margin-top:
            16px;

        font-size:
            12px;
    }


    .contact83-card {
        padding:
            25px
            20px
            22px;

        border-radius:
            21px;
    }


    .contact83-form {
        grid-template-columns:
            1fr !important;

        gap:
            17px !important;
    }


    .contact83-form
    > * {
        grid-column:
            1 / -1 !important;
    }


    .contact83-form
    input:not(
        [type="hidden"]
    ):not(
        [type="checkbox"]
    ):not(
        [type="radio"]
    ) {
        height:
            55px !important;
    }


    .contact83-form textarea {
        min-height:
            135px !important;
    }


    .contact83-form
    button[type="submit"],
    .contact83-form
    input[type="submit"] {
        height:
            57px !important;

        min-height:
            57px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V84 — GROWTH ANALYSIS LIGHT SECTION + FULL FORM WIDTH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SECTION BACKGROUND
|--------------------------------------------------------------------------
*/

.contact-modern-v83 {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;

    padding:
        105px
        0
        110px !important;

    background:
        radial-gradient(
            ellipse at 7% 20%,
            rgba(137, 92, 246, .12) 0%,
            rgba(137, 92, 246, .035) 35%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 92% 18%,
            rgba(255, 207, 85, .16) 0%,
            rgba(255, 207, 85, .04) 34%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 82% 84%,
            rgba(244, 124, 81, .075) 0%,
            transparent 43%
        ),
        linear-gradient(
            180deg,
            #FBFAF8 0%,
            #F8F6F3 48%,
            #FBFAF9 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD DARK DECORATIONS
|--------------------------------------------------------------------------
*/

.contact-modern-v83::before,
.contact-modern-v83::after {
    border: 0 !important;
    background: none !important;
    opacity: 0 !important;
}


/*
|--------------------------------------------------------------------------
| SECTION HEADER
|--------------------------------------------------------------------------
*/

.contact83-head {
    max-width: 900px !important;

    margin:
        0 auto
        48px !important;

    text-align: center;
}


.contact83-kicker {
    min-height: 34px !important;

    padding:
        0 15px !important;

    margin-bottom:
        19px !important;

    border:
        1px solid rgba(23, 26, 31, .06) !important;

    background:
        #171A1F !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;

    box-shadow:
        0
        11px
        25px
        rgba(20, 23, 26, .075) !important;
}


.contact83-head h2 {
    max-width:
        820px !important;

    color:
        #171B1F !important;

    font-size:
        clamp(
            42px,
            4.4vw,
            58px
        ) !important;

    font-weight:
        750 !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.052em !important;
}


.contact83-head p {
    max-width:
        660px !important;

    margin:
        19px auto 0 !important;

    color:
        #70787D !important;

    font-size:
        13px !important;

    line-height:
        1.8 !important;
}


/*
|--------------------------------------------------------------------------
| MAIN FORM CARD
|--------------------------------------------------------------------------
*/

.contact83-card {
    width:
        min(
            100%,
            1240px
        ) !important;

    margin:
        0 auto !important;

    padding:
        38px !important;

    border:
        1px solid rgba(30, 35, 39, .075) !important;

    border-radius:
        28px !important;

    background:
        rgba(255, 255, 255, .94) !important;

    box-shadow:
        0
        26px
        70px
        rgba(33, 29, 25, .07) !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD FORM WIDTH LIMITS
|--------------------------------------------------------------------------
*/

.contact83-form,
.contact83-form.form,
.contact83-form.contact-form {
    display: block !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/*
|--------------------------------------------------------------------------
| IMPORTANT — ORIGINAL NESTED FORM GRID
|--------------------------------------------------------------------------
|
| Eski form yapısındaki grid yarım genişlikte kaldığı için
| sağ tarafta boşluk oluşuyordu.
|--------------------------------------------------------------------------
*/

.contact83-form .form-grid,
.contact83-form > .form-grid,
.contact83-form .contact-form-grid,
.contact83-form > .contact-form-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap:
        22px
        20px !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| FIELD WIDTHS
|--------------------------------------------------------------------------
*/

.contact83-form .field,
.contact83-form .form-field,
.contact83-form .form-group,
.contact83-form .contact-field {
    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| FULL WIDTH FIELDS
|--------------------------------------------------------------------------
*/

.contact83-form .field.full,
.contact83-form .form-field.full,
.contact83-form .form-group.full,
.contact83-form .contact-field.full,
.contact83-form .form-grid > :has(textarea),
.contact83-form .contact-form-grid > :has(textarea) {
    grid-column:
        1 / -1 !important;
}


/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact83-form
textarea,
.contact83-form
select {
    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    border:
        1px solid #D8E0E5 !important;

    background:
        #FCFDFD !important;

    border-radius:
        15px !important;
}


.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact83-form
select {
    height:
        60px !important;

    padding:
        0
        18px !important;
}


.contact83-form textarea {
    min-height:
        155px !important;

    padding:
        17px
        18px !important;
}


/*
|--------------------------------------------------------------------------
| FORM LABELS
|--------------------------------------------------------------------------
*/

.contact83-form label {
    margin-bottom:
        9px !important;

    color:
        #29383F !important;

    font-size:
        11px !important;

    font-weight:
        650 !important;
}


/*
|--------------------------------------------------------------------------
| SUBMIT BUTTON
|--------------------------------------------------------------------------
*/

.contact83-form
button[type="submit"],
.contact83-form
input[type="submit"],
.contact83-form
.form-actions,
.contact83-form
.submit-row,
.contact83-form
.contact-actions {
    width:
        100% !important;

    max-width:
        none !important;
}


.contact83-form
button[type="submit"],
.contact83-form
input[type="submit"] {
    height:
        61px !important;

    margin-top:
        24px !important;

    border-radius:
        999px !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| IF SUBMIT IS INSIDE GRID
|--------------------------------------------------------------------------
*/

.contact83-form
.form-grid
> .form-actions,

.contact83-form
.form-grid
> .submit-row,

.contact83-form
.form-grid
> .contact-actions,

.contact83-form
.form-grid
> button[type="submit"] {
    grid-column:
        1 / -1 !important;
}


/*
|--------------------------------------------------------------------------
| FOOTER SPACING
|--------------------------------------------------------------------------
*/

.contact-modern-v83
+ .footer-v79 {
    margin-top:
        64px !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .contact-modern-v83 {
        padding:
            90px
            0
            94px !important;
    }


    .contact83-card {
        padding:
            31px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .contact-modern-v83 {
        padding:
            76px
            0
            80px !important;
    }


    .contact83-head {
        margin-bottom:
            34px !important;
    }


    .contact83-head h2 {
        font-size:
            clamp(
                34px,
                10vw,
                44px
            ) !important;
    }


    .contact83-card {
        padding:
            23px
            19px !important;

        border-radius:
            22px !important;
    }


    .contact83-form .form-grid,
    .contact83-form .contact-form-grid {
        grid-template-columns:
            1fr !important;

        gap:
            17px !important;
    }


    .contact83-form
    .form-grid
    > *,

    .contact83-form
    .contact-form-grid
    > * {
        grid-column:
            1 / -1 !important;
    }

}


/*
|--------------------------------------------------------------------------
| V85 — REFERENCES CLEAN SECTION
|--------------------------------------------------------------------------
|
| Renkli arkaplan ve shape divider kaldırıldı.
|--------------------------------------------------------------------------
*/


.references-v75 {
    position:
        relative !important;

    overflow:
        visible !important;

    padding:
        100px
        0
        105px !important;

    background:
        transparent !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE SHAPE DIVIDERS
|--------------------------------------------------------------------------
*/

.references-v75::before,
.references-v75::after {
    display:
        none !important;

    content:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    background:
        none !important;
}


/*
|--------------------------------------------------------------------------
| KEEP CONTENT ABOVE NORMAL PAGE FLOW
|--------------------------------------------------------------------------
*/

.references-v75 > .container {
    position:
        relative;

    z-index:
        1;
}


/*
|--------------------------------------------------------------------------
| HEADER RHYTHM
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-head {
    margin-top:
        0 !important;

    margin-bottom:
        54px !important;
}


/*
|--------------------------------------------------------------------------
| LOGO AREA
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-logos {
    margin-bottom:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .references-v75 {
        padding:
            76px
            0
            82px !important;
    }


    .references-v75
    .ref75-head {
        margin-bottom:
            38px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V86 — REFERENCE LOGO ORBIT
|--------------------------------------------------------------------------
|
| Sağdan çıkar → sola gider → soldan kaybolur →
| tekrar sağ tarafta belirir.
|
| Duplicate logo yok.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| ORBIT WINDOW
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-row {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        180px !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    -webkit-mask-image:
        none !important;

    mask-image:
        none !important;
}


/*
|--------------------------------------------------------------------------
| SOFT EDGE FADES
|--------------------------------------------------------------------------
|
| Logo aniden kesilmiyor;
| dünya etrafına girip çıkıyormuş gibi yumuşuyor.
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-row::before,
.references-v75
.ref75-row::after {
    content:
        "";

    position:
        absolute;

    z-index:
        5;

    top:
        0;

    bottom:
        0;

    width:
        82px;

    pointer-events:
        none;
}


.references-v75
.ref75-row::before {
    left:
        0;

    background:
        linear-gradient(
            90deg,
            #FFFFFF 0%,
            rgba(
                255,
                255,
                255,
                .92
            ) 25%,
            rgba(
                255,
                255,
                255,
                0
            ) 100%
        );
}


.references-v75
.ref75-row::after {
    right:
        0;

    background:
        linear-gradient(
            270deg,
            #FFFFFF 0%,
            rgba(
                255,
                255,
                255,
                .92
            ) 25%,
            rgba(
                255,
                255,
                255,
                0
            ) 100%
        );
}


/*
|--------------------------------------------------------------------------
| TRACK
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-track {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        none !important;

    will-change:
        auto !important;
}


/*
|--------------------------------------------------------------------------
| ORBITING LOGO
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-row.is-orbiting
.ref75-logo-item {
    position:
        absolute !important;

    z-index:
        2;

    top:
        50% !important;

    left:
        0 !important;

    margin:
        0 !important;

    will-change:
        transform;

    transition:
        box-shadow
        .20s
        ease,
        border-color
        .20s
        ease !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD HOVER MOVEMENT
|--------------------------------------------------------------------------
|
| JS transform ile çakışmaması için.
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-row.is-orbiting
.ref75-logo-item:hover {
    border-color:
        rgba(
            0,
            177,
            255,
            .22
        ) !important;

    box-shadow:
        0
        28px
        58px
        rgba(
            25,
            28,
            31,
            .11
        ) !important;
}


.references-v75
.ref75-row.is-orbiting
.ref75-logo-item:hover img {
    transform:
        scale(1.055);

    transition:
        transform
        .18s
        ease;
}


/*
|--------------------------------------------------------------------------
| STATIC ACCESSIBILITY FALLBACK
|--------------------------------------------------------------------------
*/

.references-v75
.ref75-row.orbit-static {
    height:
        auto !important;
}


.references-v75
.ref75-row.orbit-static
.ref75-track {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        30px;

    height:
        auto !important;
}


.references-v75
.ref75-row.orbit-static
.ref75-logo-item {
    position:
        relative !important;

    top:
        auto !important;

    left:
        auto !important;

    transform:
        none !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    720px
) {

    .references-v75
    .ref75-row {
        height:
            132px !important;
    }


    .references-v75
    .ref75-row::before,
    .references-v75
    .ref75-row::after {
        width:
            40px;
    }

}


/*
|--------------------------------------------------------------------------
| V87 — CONTACT PAGE CTA
|--------------------------------------------------------------------------
*/


.contact-cta-v87 {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        560px;

    display:
        flex;

    align-items:
        center;

    padding:
        118px
        0
        122px;

    background:
        radial-gradient(
            ellipse at 4% 12%,
            rgba(119, 94, 246, .09) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 94% 82%,
            rgba(0, 177, 255, .085) 0%,
            transparent 32%
        ),
        radial-gradient(
            ellipse at 82% 8%,
            rgba(255, 205, 87, .095) 0%,
            transparent 33%
        ),
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.cta87-content {
    position:
        relative;

    z-index:
        4;

    width:
        min(
            100%,
            830px
        );

    margin:
        0 auto;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| KICKER
|--------------------------------------------------------------------------
*/

.cta87-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 15px;

    margin-bottom:
        23px;

    border:
        1px solid
        rgba(23, 26, 31, .07);

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:
        0
        11px
        28px
        rgba(20, 23, 26, .08);
}


/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.cta87-content h2 {
    max-width:
        830px;

    margin:
        0 auto;

    color:
        #171A1D;

    font-family:
        var(--heading);

    font-size:
        clamp(
            44px,
            4.5vw,
            62px
        );

    font-weight:
        700;

    line-height:
        1.06;

    letter-spacing:
        -.052em;

    text-wrap:
        balance;
}


.cta87-content h2 span {
    display:
        block;

    color:
        #00B1FF;
}


/*
|--------------------------------------------------------------------------
| DESCRIPTION
|--------------------------------------------------------------------------
*/

.cta87-content p {
    max-width:
        650px;

    margin:
        24px auto 0;

    color:
        #747C81;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.85;

    text-wrap:
        balance;
}


/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.cta87-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    min-height:
        54px;

    margin-top:
        34px;

    padding:
        0
        27px;

    border:
        1px solid
        #171A1F;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF !important;

    text-decoration:
        none;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0
        13px
        32px
        rgba(23, 26, 31, .11);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.cta87-button span,
.cta87-button b {
    color:
        #FFFFFF !important;
}


.cta87-button b {
    font-size:
        15px;

    font-weight:
        500;

    transition:
        transform .18s ease;
}


.cta87-button:hover {
    transform:
        translateY(-2px);

    background:
        #003852;

    border-color:
        #003852;

    box-shadow:
        0
        17px
        38px
        rgba(0, 56, 82, .17);
}


.cta87-button:hover b {
    transform:
        translate(
            2px,
            -2px
        );
}


/*
|--------------------------------------------------------------------------
| LEFT GEOMETRIC ACCENT
|--------------------------------------------------------------------------
*/

.cta87-shape-left {
    position:
        absolute;

    z-index:
        1;

    left:
        -28px;

    top:
        44px;

    width:
        235px;

    height:
        180px;

    transform:
        rotate(-13deg);

    opacity:
        .66;

    pointer-events:
        none;
}


.cta87-shape-left i {
    position:
        absolute;

    width:
        112px;

    height:
        48px;

    border-radius:
        16px
        34px
        16px
        34px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 177, 255, .92),
            rgba(77, 77, 215, .72)
        );

    box-shadow:
        0
        18px
        35px
        rgba(85, 91, 210, .12);
}


.cta87-shape-left i:nth-child(1) {
    left:
        0;

    top:
        27px;

    transform:
        rotate(30deg);
}


.cta87-shape-left i:nth-child(2) {
    left:
        67px;

    top:
        55px;

    transform:
        rotate(-25deg);

    opacity:
        .66;
}


.cta87-shape-left i:nth-child(3) {
    left:
        123px;

    top:
        16px;

    transform:
        rotate(35deg);

    opacity:
        .42;
}


/*
|--------------------------------------------------------------------------
| RIGHT ORBIT ACCENT
|--------------------------------------------------------------------------
*/

.cta87-shape-right {
    position:
        absolute;

    z-index:
        1;

    right:
        -68px;

    bottom:
        -35px;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    background:
        conic-gradient(
            from 30deg,
            #00B1FF,
            #6965FF,
            #00B1FF,
            #00547B,
            #00B1FF
        );

    opacity:
        .72;

    transform:
        rotate(-24deg);

    pointer-events:
        none;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 48%,
            #000 50%
        );

    mask:
        radial-gradient(
            circle,
            transparent 48%,
            #000 50%
        );
}


.cta87-shape-right span {
    position:
        absolute;

    inset:
        28px;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius:
        50%;
}


/*
|--------------------------------------------------------------------------
| FOOTER TRANSITION
|--------------------------------------------------------------------------
*/

.contact-cta-v87
+ .footer-v79 {
    margin-top:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .contact-cta-v87 {
        min-height:
            500px;

        padding:
            100px
            0;
    }


    .cta87-shape-left {
        opacity:
            .42;

        transform:
            scale(.75)
            rotate(-13deg);

        transform-origin:
            left top;
    }


    .cta87-shape-right {
        width:
            210px;

        height:
            210px;

        opacity:
            .45;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .contact-cta-v87 {
        min-height:
            auto;

        padding:
            82px
            0
            88px;
    }


    .cta87-content h2 {
        font-size:
            clamp(
                35px,
                10vw,
                46px
            );
    }


    .cta87-content p {
        font-size:
            12px;

        line-height:
            1.75;
    }


    .cta87-button {
        min-height:
            52px;

        margin-top:
            28px;
    }


    .cta87-shape-left {
        left:
            -92px;

        top:
            25px;

        opacity:
            .22;
    }


    .cta87-shape-right {
        right:
            -105px;

        bottom:
            -65px;

        width:
            185px;

        height:
            185px;

        opacity:
            .28;
    }

}


/*
|--------------------------------------------------------------------------
| V88 — CTA CLEAN BACKGROUND + GROWTH VISUALS
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.contact-cta-v87 {
    position:
        relative !important;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        560px !important;

    display:
        flex;

    align-items:
        center;

    margin:
        0 !important;

    padding:
        115px
        0
        118px !important;

    background:
        transparent !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE ALL OLD ATMOSPHERIC BACKGROUND
|--------------------------------------------------------------------------
*/

.contact-cta-v87::before,
.contact-cta-v87::after {
    display:
        none !important;

    content:
        none !important;

    background:
        none !important;
}


/*
|--------------------------------------------------------------------------
| OLD DECORATIONS COMPLETELY DISABLED
|--------------------------------------------------------------------------
*/

.cta87-shape,
.cta87-shape-left,
.cta87-shape-right {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.cta87-content {
    position:
        relative;

    z-index:
        5;
}


/*
|--------------------------------------------------------------------------
| BUTTON / FOOTER BREATHING ROOM
|--------------------------------------------------------------------------
*/

.cta87-button {
    margin-top:
        34px !important;
}


/*
|--------------------------------------------------------------------------
| CTA -> FOOTER
|--------------------------------------------------------------------------
|
| Section footer'a direkt yaslanir.
| Ancak section padding-bottom sayesinde
| buton footer'a yapismaz.
|--------------------------------------------------------------------------
*/

.contact-cta-v87
+ .footer-v79 {
    margin-top:
        0 !important;
}


.contact-cta-v87 {
    margin-bottom:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| LEFT — DIGITAL GROWTH CARD
|--------------------------------------------------------------------------
*/

.cta88-growth-visual {
    position:
        absolute;

    z-index:
        2;

    left:
        max(
            34px,
            calc(
                50% - 720px
            )
        );

    top:
        50%;

    width:
        235px;

    height:
        180px;

    transform:
        translateY(-50%)
        rotate(-5deg);

    pointer-events:
        none;
}


.cta88-growth-card {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    padding:
        20px;

    border:
        1px solid
        rgba(
            20,
            27,
            31,
            .07
        );

    border-radius:
        25px;

    background:
        rgba(
            255,
            255,
            255,
            .78
        );

    box-shadow:
        0
        26px
        60px
        rgba(
            23,
            26,
            30,
            .07
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.cta88-mini-label {
    position:
        relative;

    z-index:
        3;

    color:
        #6F797F;

    font-family:
        var(--body);

    font-size:
        9px;

    font-weight:
        500;
}


/*
|--------------------------------------------------------------------------
| GROWTH BARS
|--------------------------------------------------------------------------
*/

.cta88-growth-bars {
    position:
        absolute;

    left:
        22px;

    right:
        22px;

    bottom:
        24px;

    height:
        93px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        13px;

    opacity:
        .6;
}


.cta88-growth-bars i {
    flex:
        1;

    height:
        var(--h);

    max-width:
        29px;

    border-radius:
        7px
        7px
        3px
        3px;

    background:
        linear-gradient(
            180deg,
            rgba(
                0,
                177,
                255,
                .30
            ),
            rgba(
                0,
                84,
                123,
                .08
            )
        );
}


/*
|--------------------------------------------------------------------------
| GROWTH LINE
|--------------------------------------------------------------------------
*/

.cta88-growth-line {
    position:
        absolute;

    z-index:
        2;

    left:
        25px;

    bottom:
        32px;

    width:
        180px;

    height:
        72px;

    overflow:
        visible;
}


.cta88-growth-line path {
    fill:
        none;

    stroke:
        #00B1FF;

    stroke-width:
        3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.cta88-growth-line
.cta88-growth-arrow {
    stroke-width:
        2.5;
}


.cta88-growth-value {
    position:
        absolute;

    z-index:
        4;

    top:
        18px;

    right:
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        53px;

    height:
        31px;

    padding:
        0 10px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| RIGHT — CUSTOMER TARGET
|--------------------------------------------------------------------------
*/

.cta88-target-visual {
    position:
        absolute;

    z-index:
        2;

    right:
        max(
            38px,
            calc(
                50% - 720px
            )
        );

    top:
        50%;

    width:
        215px;

    height:
        215px;

    transform:
        translateY(-50%)
        rotate(7deg);

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| TARGET RINGS
|--------------------------------------------------------------------------
*/

.cta88-target-ring {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(
            0,
            84,
            123,
            .13
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );
}


.cta88-target-ring.ring-1 {
    width:
        205px;

    height:
        205px;
}


.cta88-target-ring.ring-2 {
    width:
        142px;

    height:
        142px;

    border-color:
        rgba(
            0,
            177,
            255,
            .19
        );
}


.cta88-target-ring.ring-3 {
    width:
        80px;

    height:
        80px;

    background:
        rgba(
            0,
            177,
            255,
            .035
        );

    border-color:
        rgba(
            0,
            177,
            255,
            .31
        );
}


/*
|--------------------------------------------------------------------------
| TARGET CENTER
|--------------------------------------------------------------------------
*/

.cta88-target-center {
    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    top:
        50%;

    width:
        18px;

    height:
        18px;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        5px solid
        #FFFFFF;

    border-radius:
        50%;

    background:
        #00B1FF;

    box-shadow:
        0
        0
        0
        1px
        rgba(
            0,
            177,
            255,
            .3
        ),
        0
        10px
        24px
        rgba(
            0,
            177,
            255,
            .17
        );
}


/*
|--------------------------------------------------------------------------
| TARGET ARROW
|--------------------------------------------------------------------------
*/

.cta88-target-arrow {
    position:
        absolute;

    z-index:
        4;

    left:
        51%;

    top:
        29%;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        37px;

    font-weight:
        400;

    line-height:
        1;
}


/*
|--------------------------------------------------------------------------
| TARGET LABEL
|--------------------------------------------------------------------------
*/

.cta88-target-label {
    position:
        absolute;

    z-index:
        5;

    right:
        -10px;

    bottom:
        12px;

    min-width:
        116px;

    padding:
        11px
        14px;

    border:
        1px solid
        rgba(
            23,
            26,
            31,
            .07
        );

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    box-shadow:
        0
        19px
        45px
        rgba(
            23,
            26,
            31,
            .075
        );
}


.cta88-target-label small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #899197;

    font-family:
        var(--body);

    font-size:
        8px;
}


.cta88-target-label strong {
    display:
        block;

    color:
        #182025;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    1180px
) {

    .cta88-growth-visual {
        left:
            -65px;

        opacity:
            .55;

        transform:
            translateY(-50%)
            scale(.85)
            rotate(-5deg);
    }


    .cta88-target-visual {
        right:
            -65px;

        opacity:
            .55;

        transform:
            translateY(-50%)
            scale(.85)
            rotate(7deg);
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    720px
) {

    .contact-cta-v87 {
        min-height:
            auto !important;

        padding:
            84px
            0
            100px !important;
    }


    .cta88-growth-visual {
        left:
            -118px;

        top:
            20%;

        opacity:
            .20;

        transform:
            scale(.68)
            rotate(-5deg);
    }


    .cta88-target-visual {
        right:
            -118px;

        top:
            75%;

        opacity:
            .20;

        transform:
            scale(.70)
            rotate(7deg);
    }

}


/*
|--------------------------------------------------------------------------
| V89 — CTA VISUAL REFINEMENT
|--------------------------------------------------------------------------
|
| Daha dolu
| Daha anlamlı
| Daha renkli
| Merkez metinden daha uzak
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SECTION CONTENT SAFETY
|--------------------------------------------------------------------------
*/

.contact-cta-v87 {
    overflow:
        hidden !important;
}


.cta87-content {
    position:
        relative !important;

    z-index:
        10 !important;

    width:
        min(100%, 790px) !important;
}


/*
|--------------------------------------------------------------------------
| LEFT — DIGITAL GROWTH DASHBOARD
|--------------------------------------------------------------------------
*/

.cta88-growth-visual {
    left:
        max(
            22px,
            calc(50% - 930px)
        ) !important;

    top:
        50% !important;

    width:
        330px !important;

    height:
        245px !important;

    transform:
        translateY(-50%)
        rotate(-4deg) !important;

    opacity:
        1 !important;
}


/*
|--------------------------------------------------------------------------
| LEFT CARD
|--------------------------------------------------------------------------
*/

.cta88-growth-card {
    position:
        relative !important;

    width:
        100% !important;

    height:
        100% !important;

    padding:
        25px !important;

    overflow:
        visible !important;

    border:
        1px solid
        rgba(108, 72, 190, .10) !important;

    border-radius:
        29px !important;

    background:
        linear-gradient(
            145deg,
            #F6F0FF 0%,
            #EFE4FF 54%,
            #F9F7FF 100%
        ) !important;

    box-shadow:
        0
        32px
        70px
        rgba(65, 49, 91, .10) !important;
}


/*
|--------------------------------------------------------------------------
| LEFT CARD — PERFORMANCE CHIP
|--------------------------------------------------------------------------
*/

.cta88-growth-card::before {
    content:
        "Yeni talepler  +42";

    position:
        absolute;

    left:
        -34px;

    bottom:
        24px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        43px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(23, 26, 31, .065);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.96);

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:
        0
        18px
        38px
        rgba(32, 27, 40, .10);
}


/*
|--------------------------------------------------------------------------
| LEFT CARD — ORGANIC CHIP
|--------------------------------------------------------------------------
*/

.cta88-growth-card::after {
    content:
        "Organik görünürlük  +28%";

    position:
        absolute;

    right:
        -42px;

    top:
        66px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        42px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(23, 26, 31, .06);

    border-radius:
        14px;

    background:
        #FFF4CB;

    color:
        #44391A;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    box-shadow:
        0
        18px
        38px
        rgba(99, 79, 28, .08);
}


/*
|--------------------------------------------------------------------------
| LEFT TITLE
|--------------------------------------------------------------------------
*/

.cta88-mini-label {
    color:
        #675D72 !important;

    font-family:
        var(--heading) !important;

    font-size:
        10px !important;

    font-weight:
        650 !important;
}


/*
|--------------------------------------------------------------------------
| LEFT VALUE
|--------------------------------------------------------------------------
*/

.cta88-growth-value {
    top:
        21px !important;

    right:
        21px !important;

    min-width:
        62px !important;

    height:
        36px !important;

    padding:
        0 12px !important;

    background:
        #171A1F !important;

    color:
        #FFFFFF !important;

    border:
        1px solid
        rgba(255,255,255,.05) !important;

    box-shadow:
        0
        10px
        24px
        rgba(23,26,31,.12) !important;
}


/*
|--------------------------------------------------------------------------
| LEFT BARS
|--------------------------------------------------------------------------
*/

.cta88-growth-bars {
    left:
        28px !important;

    right:
        28px !important;

    bottom:
        30px !important;

    height:
        130px !important;

    gap:
        17px !important;

    opacity:
        1 !important;
}


.cta88-growth-bars i {
    max-width:
        42px !important;

    border-radius:
        10px
        10px
        5px
        5px !important;

    background:
        linear-gradient(
            180deg,
            #D8B6FF 0%,
            #B785F5 100%
        ) !important;
}


.cta88-growth-bars i:nth-child(2) {
    background:
        linear-gradient(
            180deg,
            #FFE495 0%,
            #F9CA55 100%
        ) !important;
}


.cta88-growth-bars i:nth-child(3) {
    background:
        linear-gradient(
            180deg,
            #F0C5FF 0%,
            #A76AF2 100%
        ) !important;
}


.cta88-growth-bars i:nth-child(4) {
    background:
        linear-gradient(
            180deg,
            #46C5FF 0%,
            #00B1FF 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| LEFT TREND LINE
|--------------------------------------------------------------------------
*/

.cta88-growth-line {
    left:
        29px !important;

    bottom:
        47px !important;

    width:
        250px !important;

    height:
        100px !important;
}


.cta88-growth-line path {
    stroke:
        #5C36D6 !important;

    stroke-width:
        3.3 !important;
}


.cta88-growth-line
.cta88-growth-arrow {
    stroke:
        #00B1FF !important;

    stroke-width:
        3 !important;
}


/*
|--------------------------------------------------------------------------
| RIGHT — CUSTOMER ACQUISITION SYSTEM
|--------------------------------------------------------------------------
*/

.cta88-target-visual {
    right:
        max(
            24px,
            calc(50% - 930px)
        ) !important;

    top:
        50% !important;

    width:
        305px !important;

    height:
        305px !important;

    transform:
        translateY(-50%)
        rotate(4deg) !important;

    opacity:
        1 !important;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(244, 171, 151, .20) 0%,
            rgba(255, 218, 177, .16) 31%,
            rgba(225, 201, 255, .16) 57%,
            transparent 72%
        );
}


/*
|--------------------------------------------------------------------------
| RIGHT — CHANNEL CHIP 1
|--------------------------------------------------------------------------
*/

.cta88-target-visual::before {
    content:
        "Google Ads";

    position:
        absolute;

    left:
        -24px;

    top:
        48px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 15px;

    border-radius:
        13px;

    border:
        1px solid
        rgba(23,26,31,.055);

    background:
        #FFF1C3;

    color:
        #5B4511;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    box-shadow:
        0
        16px
        34px
        rgba(86,69,25,.08);
}


/*
|--------------------------------------------------------------------------
| RIGHT — CHANNEL CHIP 2
|--------------------------------------------------------------------------
*/

.cta88-target-visual::after {
    content:
        "SEO  •  Meta";

    position:
        absolute;

    right:
        -33px;

    top:
        95px;

    z-index:
        8;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        41px;

    padding:
        0 15px;

    border-radius:
        13px;

    border:
        1px solid
        rgba(23,26,31,.055);

    background:
        #F0DDFF;

    color:
        #543170;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;

    box-shadow:
        0
        16px
        34px
        rgba(73,44,91,.08);
}


/*
|--------------------------------------------------------------------------
| TARGET RINGS
|--------------------------------------------------------------------------
*/

.cta88-target-ring.ring-1 {
    width:
        286px !important;

    height:
        286px !important;

    border:
        1px dashed
        rgba(255, 107, 87, .23) !important;
}


.cta88-target-ring.ring-2 {
    width:
        196px !important;

    height:
        196px !important;

    border:
        2px solid
        rgba(153, 101, 220, .19) !important;

    background:
        rgba(241, 226, 255, .14);
}


.cta88-target-ring.ring-3 {
    width:
        108px !important;

    height:
        108px !important;

    border:
        2px solid
        rgba(255, 153, 126, .34) !important;

    background:
        linear-gradient(
            145deg,
            #FFE3D9 0%,
            #FFD5C7 100%
        ) !important;
}


/*
|--------------------------------------------------------------------------
| TARGET CENTER
|--------------------------------------------------------------------------
*/

.cta88-target-center {
    width:
        32px !important;

    height:
        32px !important;

    border:
        7px solid
        #FFFFFF !important;

    background:
        #171A1F !important;

    box-shadow:
        0
        0
        0
        5px
        rgba(255,107,87,.15),
        0
        15px
        30px
        rgba(23,26,31,.13) !important;
}


/*
|--------------------------------------------------------------------------
| TARGET ARROW
|--------------------------------------------------------------------------
*/

.cta88-target-arrow {
    left:
        50% !important;

    top:
        22% !important;

    color:
        #FF6B57 !important;

    font-size:
        48px !important;

    font-weight:
        500 !important;
}


/*
|--------------------------------------------------------------------------
| TARGET CUSTOMER CARD
|--------------------------------------------------------------------------
*/

.cta88-target-label {
    right:
        -25px !important;

    bottom:
        12px !important;

    min-width:
        155px !important;

    padding:
        14px
        17px !important;

    border:
        1px solid
        rgba(23,26,31,.055) !important;

    border-radius:
        17px !important;

    background:
        rgba(255,255,255,.97) !important;

    box-shadow:
        0
        22px
        50px
        rgba(23,26,31,.10) !important;
}


.cta88-target-label small {
    color:
        #A15E4F !important;

    font-size:
        9px !important;
}


.cta88-target-label strong {
    margin-top:
        4px;

    color:
        #171A1F !important;

    font-size:
        13px !important;
}


/*
|--------------------------------------------------------------------------
| ADD DEPTH — CENTER DECORATION
|--------------------------------------------------------------------------
*/

.cta88-target-center::before {
    content:
        "";

    position:
        absolute;

    left:
        -72px;

    top:
        -43px;

    width:
        20px;

    height:
        20px;

    border:
        6px solid #FFFFFF;

    border-radius:
        50%;

    background:
        #A66BE8;

    box-shadow:
        0
        10px
        22px
        rgba(110,74,155,.12);
}


.cta88-target-center::after {
    content:
        "";

    position:
        absolute;

    right:
        -84px;

    bottom:
        -38px;

    width:
        22px;

    height:
        22px;

    border:
        6px solid #FFFFFF;

    border-radius:
        50%;

    background:
        #F8CB52;

    box-shadow:
        0
        10px
        22px
        rgba(120,91,20,.12);
}


/*
|--------------------------------------------------------------------------
| LARGE DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 1500px) {

    .cta88-growth-visual {
        left:
            max(
                38px,
                calc(50% - 990px)
            ) !important;
    }


    .cta88-target-visual {
        right:
            max(
                40px,
                calc(50% - 990px)
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| MEDIUM DESKTOP / TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1250px) {

    .cta88-growth-visual {
        left:
            -105px !important;

        opacity:
            .56 !important;

        transform:
            translateY(-50%)
            scale(.78)
            rotate(-4deg) !important;
    }


    .cta88-target-visual {
        right:
            -95px !important;

        opacity:
            .56 !important;

        transform:
            translateY(-50%)
            scale(.78)
            rotate(4deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .cta88-growth-visual {
        left:
            -190px !important;

        opacity:
            .18 !important;

        transform:
            translateY(-50%)
            scale(.62)
            rotate(-4deg) !important;
    }


    .cta88-target-visual {
        right:
            -180px !important;

        opacity:
            .18 !important;

        transform:
            translateY(-50%)
            scale(.62)
            rotate(4deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V90 — CONTACT TEXTAREA SPACING
|--------------------------------------------------------------------------
*/

.contact83-form
.form-grid
> :has(textarea),

.contact83-form
.contact-form-grid
> :has(textarea),

.contact83-form
.field.full:has(textarea),

.contact83-form
.form-field.full:has(textarea),

.contact83-form
.form-group.full:has(textarea) {
    margin-top:
        12px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .contact83-form
    .form-grid
    > :has(textarea),

    .contact83-form
    .contact-form-grid
    > :has(textarea),

    .contact83-form
    .field.full:has(textarea) {
        margin-top:
            8px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V91 — MESSAGE FIELD DIRECT SPACING
|--------------------------------------------------------------------------
*/

.contact83-message-field {
    margin-top: 22px !important;
    padding-top: 0 !important;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA LABEL
|--------------------------------------------------------------------------
*/

.contact83-message-field > label,
.contact83-message-field label {
    margin-bottom: 10px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .contact83-message-field {
        margin-top: 12px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V92 — REAL MESSAGE FIELD SPACING
|--------------------------------------------------------------------------
*/

.contact83-form
> .message-field.contact83-message-field {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    margin:
        32px
        0
        0 !important;

    padding:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| MESSAGE LABEL
|--------------------------------------------------------------------------
*/

.contact83-form
> .message-field.contact83-message-field
> span {
    display:
        block !important;

    margin:
        0
        0
        10px !important;

    color:
        #29383F !important;

    font-family:
        var(--heading);

    font-size:
        11px !important;

    font-weight:
        650 !important;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA
|--------------------------------------------------------------------------
*/

.contact83-form
> .message-field.contact83-message-field
> textarea {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE WRONG OLD RULE EFFECT
|--------------------------------------------------------------------------
*/

.contact83-form
> .form-grid {
    margin-top:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .contact83-form
    > .message-field.contact83-message-field {
        margin-top:
            22px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V93 — CONTACT FORM POLISH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| MESSAGE FIELD SPACING
|--------------------------------------------------------------------------
*/

.contact83-form
> .message-field.contact83-message-field {
    margin-top:
        18px !important;
}


/*
|--------------------------------------------------------------------------
| MESSAGE LABEL — MATCH OTHER LABELS
|--------------------------------------------------------------------------
*/

.contact83-form
> .message-field.contact83-message-field
> span {
    margin-bottom:
        9px !important;

    color:
        #6F7A80 !important;

    font-family:
        var(--heading) !important;

    font-size:
        11px !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;
}


/*
|--------------------------------------------------------------------------
| DEFAULT INPUT STATE
|--------------------------------------------------------------------------
*/

.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact83-form
textarea,
.contact83-form
select {
    border-color:
        #D8DEE3 !important;

    box-shadow:
        none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}


/*
|--------------------------------------------------------------------------
| HOVER — NO TURQUOISE
|--------------------------------------------------------------------------
*/

.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
.contact83-form
textarea:hover,
.contact83-form
select:hover {
    border-color:
        #C6BDD6 !important;

    background:
        #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| FOCUS / ACTIVE — LAVENDER
|--------------------------------------------------------------------------
*/

.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.contact83-form
textarea:focus,
.contact83-form
select:focus,

.contact83-form
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
.contact83-form
textarea:focus-visible,
.contact83-form
select:focus-visible {
    outline:
        none !important;

    border-color:
        #9A7BD0 !important;

    background:
        #FFFFFF !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(154, 123, 208, .11) !important;
}


/*
|--------------------------------------------------------------------------
| AUTOFILL — KEEP CLEAN
|--------------------------------------------------------------------------
*/

.contact83-form
input:-webkit-autofill,
.contact83-form
input:-webkit-autofill:hover,
.contact83-form
input:-webkit-autofill:focus {
    -webkit-box-shadow:
        0
        0
        0
        1000px
        #FFFFFF
        inset !important;

    -webkit-text-fill-color:
        #18262D !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .contact83-form
    > .message-field.contact83-message-field {
        margin-top:
            12px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V94 — CONTACT PAGE
|--------------------------------------------------------------------------
*/


.contact-page-v94 {
    background:
        #F7F7F8;
}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.cp94-intro {
    position:
        relative;

    overflow:
        hidden;

    padding:
        122px
        0
        76px;

    text-align:
        center;

    background:
        radial-gradient(
            ellipse at 15% 15%,
            rgba(142, 98, 225, .09),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 84% 17%,
            rgba(247, 198, 71, .10),
            transparent 32%
        ),
        #F7F7F8;
}


.cp94-head {
    width:
        min(
            100%,
            900px
        );

    margin:
        0 auto;
}


.cp94-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 15px;

    margin-bottom:
        24px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:
        0
        10px
        25px
        rgba(23,26,31,.09);
}


.cp94-head h1 {
    margin:
        0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        clamp(
            48px,
            5.3vw,
            70px
        );

    font-weight:
        700;

    line-height:
        1.02;

    letter-spacing:
        -.055em;

    text-wrap:
        balance;
}


.cp94-head h1 span {
    display:
        block;

    color:
        #00B1FF;
}


.cp94-head p {
    width:
        min(
            100%,
            680px
        );

    margin:
        25px auto 0;

    color:
        #71797E;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.85;

    text-wrap:
        balance;
}


/*
|--------------------------------------------------------------------------
| INTRO CTA
|--------------------------------------------------------------------------
*/

.cp94-primary-cta {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        55px;

    margin-top:
        34px;

    padding:
        0
        29px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF !important;

    text-decoration:
        none;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0
        16px
        34px
        rgba(23,26,31,.11);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.cp94-primary-cta span,
.cp94-primary-cta b {
    color:
        #FFFFFF !important;
}


.cp94-primary-cta b {
    font-size:
        15px;

    font-weight:
        500;
}


.cp94-primary-cta:hover {
    transform:
        translateY(-2px);

    background:
        #003852;

    box-shadow:
        0
        19px
        40px
        rgba(0,56,82,.17);
}


/*
|--------------------------------------------------------------------------
| CONTACT AREA
|--------------------------------------------------------------------------
*/

.cp94-contact-area {
    padding:
        26px
        0
        112px;

    background:
        #F7F7F8;
}


/*
|--------------------------------------------------------------------------
| CARDS GRID
|--------------------------------------------------------------------------
*/

.cp94-contact-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        22px;
}


/*
|--------------------------------------------------------------------------
| CONTACT CARD
|--------------------------------------------------------------------------
*/

.cp94-contact-card {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        320px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        29px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            #17191D,
            #111316
        );

    color:
        #FFFFFF;

    box-shadow:
        0
        26px
        55px
        rgba(23,26,31,.10);
}


.cp94-card-glow {
    position:
        absolute;

    z-index:
        -1;

    width:
        230px;

    height:
        160px;

    border-radius:
        50%;

    filter:
        blur(42px);

    opacity:
        .55;

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| CARD COLORS
|--------------------------------------------------------------------------
*/

.cp94-address
.cp94-card-glow {
    left:
        -70px;

    top:
        -65px;

    background:
        linear-gradient(
            135deg,
            #8A63E8,
            #00B1FF
        );
}


.cp94-email
.cp94-card-glow {
    right:
        -60px;

    top:
        -70px;

    background:
        linear-gradient(
            135deg,
            #F4C84D,
            #FF765C
        );
}


.cp94-phone
.cp94-card-glow {
    left:
        -65px;

    bottom:
        -70px;

    background:
        linear-gradient(
            135deg,
            #B570F1,
            #FF7358
        );
}


/*
|--------------------------------------------------------------------------
| ICON
|--------------------------------------------------------------------------
*/

.cp94-icon {
    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        45px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(12px);
}


.cp94-icon svg {
    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        #FFFFFF;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/*
|--------------------------------------------------------------------------
| CARD TEXT
|--------------------------------------------------------------------------
*/

.cp94-card-copy {
    margin-bottom:
        25px;
}


.cp94-card-copy > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.cp94-email
.cp94-card-copy > span {
    color:
        #F4C84D;
}


.cp94-phone
.cp94-card-copy > span {
    color:
        #D69AFF;
}


.cp94-card-copy h2 {
    margin:
        0;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        23px;

    font-weight:
        650;

    letter-spacing:
        -.035em;
}


.cp94-card-copy p {
    margin:
        12px
        0
        0;

    color:
        rgba(255,255,255,.58);

    font-family:
        var(--body);

    font-size:
        11px;

    line-height:
        1.75;
}


/*
|--------------------------------------------------------------------------
| CARD LINKS
|--------------------------------------------------------------------------
*/

.cp94-card-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    margin-top:
        auto;

    color:
        #FFFFFF !important;

    text-decoration:
        none;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        650;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.cp94-card-link:hover {
    opacity:
        .74;

    transform:
        translateX(2px);
}


.cp94-card-link span {
    color:
        #00B1FF;
}


/*
|--------------------------------------------------------------------------
| PHONE ACTIONS
|--------------------------------------------------------------------------
*/

.cp94-phone-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        auto;
}


.cp94-whatsapp {
    color:
        #D69AFF !important;
}


/*
|--------------------------------------------------------------------------
| MAP
|--------------------------------------------------------------------------
*/

.cp94-map-shell {
    margin-top:
        28px;

    padding:
        28px;

    border:
        1px solid
        rgba(23,26,31,.065);

    border-radius:
        29px;

    background:
        #FFFFFF;

    box-shadow:
        0
        27px
        65px
        rgba(23,26,31,.065);
}


/*
|--------------------------------------------------------------------------
| MAP HEAD
|--------------------------------------------------------------------------
*/

.cp94-map-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        4px
        3px
        24px;
}


.cp94-map-head > div:first-child > span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.cp94-map-head h2 {
    margin:
        0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        27px;

    font-weight:
        650;

    letter-spacing:
        -.04em;
}


.cp94-map-address {
    max-width:
        390px;

    color:
        #747D82;

    font-family:
        var(--body);

    font-size:
        11px;

    line-height:
        1.65;

    text-align:
        right;
}


/*
|--------------------------------------------------------------------------
| MAP FRAME
|--------------------------------------------------------------------------
*/

.cp94-map-frame {
    position:
        relative;

    overflow:
        hidden;

    height:
        470px;

    border-radius:
        21px;

    background:
        #EEEFF1;
}


.cp94-map-frame iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


.cp94-map-empty {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.cp94-map-empty span {
    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        24px;

    font-weight:
        650;
}


.cp94-map-empty p {
    max-width:
        430px;

    margin:
        10px
        auto
        0;

    color:
        #7B8388;

    font-family:
        var(--body);

    font-size:
        11px;

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| CONTACT PAGE FOOTER
|--------------------------------------------------------------------------
*/

.contact-page-v94
+ .footer-v79 {
    margin-top:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .cp94-contact-grid {
        grid-template-columns:
            1fr;
    }


    .cp94-contact-card {
        min-height:
            250px;
    }


    .cp94-icon {
        margin-bottom:
            32px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .cp94-intro {
        padding:
            92px
            0
            58px;
    }


    .cp94-head h1 {
        font-size:
            clamp(
                39px,
                11vw,
                50px
            );
    }


    .cp94-head p {
        font-size:
            12px;
    }


    .cp94-contact-area {
        padding-bottom:
            76px;
    }


    .cp94-contact-card {
        min-height:
            255px;

        padding:
            24px;

        border-radius:
            22px;
    }


    .cp94-map-shell {
        padding:
            17px;

        border-radius:
            23px;
    }


    .cp94-map-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .cp94-map-address {
        text-align:
            left;
    }


    .cp94-map-frame {
        height:
            370px;

        border-radius:
            17px;
    }

}


/*
|--------------------------------------------------------------------------
| V95 — CONTACT LOGO + MODERN LOCATION
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HEADER LOGO
|--------------------------------------------------------------------------
*/

.contact-logo-v95 {
    display:
        inline-flex !important;

    align-items:
        center !important;

    width:
        auto !important;

    min-width:
        0 !important;
}


.contact-logo-image-v95 {
    display:
        block !important;

    width:
        var(
            --atilim-header-logo-width,
            220px
        ) !important;

    max-width:
        none !important;

    height:
        var(
            --atilim-header-logo-height,
            54px
        ) !important;

    object-fit:
        contain !important;

    object-position:
        left center !important;

    transform:
        translateY(
            var(
                --atilim-header-logo-offset-y,
                0px
            )
        );
}


/*
|--------------------------------------------------------------------------
| CONTACT KICKER
|--------------------------------------------------------------------------
*/

.cp94-kicker {
    padding:
        0 17px !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;
}


/*
|--------------------------------------------------------------------------
| LOCATION CARD
|--------------------------------------------------------------------------
*/

.cp95-location {
    margin-top:
        30px;

    padding:
        30px;

    border:
        1px solid
        rgba(
            23,
            26,
            31,
            .065
        );

    border-radius:
        30px;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    box-shadow:
        0
        30px
        75px
        rgba(
            23,
            26,
            31,
            .075
        );
}


/*
|--------------------------------------------------------------------------
| LOCATION HEADER
|--------------------------------------------------------------------------
*/

.cp95-location-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        5px
        4px
        27px;
}


.cp95-location-copy {
    width:
        min(
            100%,
            650px
        );
}


.cp95-location-kicker {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.cp95-location-copy h2 {
    margin:
        0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        clamp(
            27px,
            2.5vw,
            36px
        );

    font-weight:
        650;

    line-height:
        1.1;

    letter-spacing:
        -.045em;
}


.cp95-location-copy p {
    max-width:
        610px;

    margin:
        12px
        0
        0;

    color:
        #747D82;

    font-family:
        var(--body);

    font-size:
        11px;

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| MAP ACTIONS
|--------------------------------------------------------------------------
*/

.cp95-map-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    flex-shrink:
        0;
}


.cp95-map-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        46px;

    padding:
        0
        18px;

    border-radius:
        999px;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        650;

    text-decoration:
        none !important;

    transition:
        transform
        .18s
        ease,
        border-color
        .18s
        ease,
        background
        .18s
        ease;
}


.cp95-map-button:hover {
    transform:
        translateY(-2px);
}


.cp95-map-button-light {
    border:
        1px solid
        rgba(
            23,
            26,
            31,
            .11
        );

    background:
        #FFFFFF;

    color:
        #171A1F !important;
}


.cp95-map-button-dark {
    border:
        1px solid
        #171A1F;

    background:
        #171A1F;

    color:
        #FFFFFF !important;
}


.cp95-map-button-dark span {
    color:
        #00B1FF !important;
}


/*
|--------------------------------------------------------------------------
| MAP STAGE
|--------------------------------------------------------------------------
*/

.cp95-map-stage {
    position:
        relative;

    overflow:
        hidden;

    height:
        510px;

    border:
        1px solid
        rgba(
            23,
            26,
            31,
            .055
        );

    border-radius:
        23px;

    background:
        #EEEFF1;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .75
        );
}


.cp95-map-stage iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

    filter:
        saturate(.88)
        contrast(1.015);
}


/*
|--------------------------------------------------------------------------
| MAP INNER SOFT FRAME
|--------------------------------------------------------------------------
*/

.cp95-map-stage::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    border-radius:
        inherit;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            .25
        );

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| FLOATING LOCATION CARD
|--------------------------------------------------------------------------
*/

.cp95-map-overlay-card {
    position:
        absolute;

    z-index:
        5;

    left:
        22px;

    bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        min(
            calc(100% - 44px),
            420px
        );

    padding:
        17px
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .8
        );

    border-radius:
        19px;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    box-shadow:
        0
        23px
        55px
        rgba(
            14,
            28,
            38,
            .17
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/*
|--------------------------------------------------------------------------
| MAP PIN
|--------------------------------------------------------------------------
*/

.cp95-map-pin {
    flex:
        0
        0
        46px;

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #003852,
            #00547B
        );

    box-shadow:
        0
        13px
        26px
        rgba(
            0,
            56,
            82,
            .16
        );
}


.cp95-map-pin svg {
    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        #FFFFFF;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/*
|--------------------------------------------------------------------------
| OVERLAY COPY
|--------------------------------------------------------------------------
*/

.cp95-map-overlay-card > div {
    min-width:
        0;
}


.cp95-map-overlay-card small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        700;
}


.cp95-map-overlay-card strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        13px;

    font-weight:
        700;
}


.cp95-map-overlay-card > div > span {
    display:
        block;

    overflow:
        hidden;

    color:
        #778087;

    font-family:
        var(--body);

    font-size:
        9px;

    line-height:
        1.5;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/*
|--------------------------------------------------------------------------
| EMPTY MAP
|--------------------------------------------------------------------------
*/

.cp95-map-empty {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    text-align:
        center;
}


.cp95-map-empty strong {
    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        18px;
}


.cp95-map-empty span {
    max-width:
        420px;

    color:
        #7C858A;

    font-family:
        var(--body);

    font-size:
        10px;

    line-height:
        1.65;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    900px
) {

    .cp95-location-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .cp95-map-actions {
        justify-content:
            flex-start;
    }


    .cp95-map-stage {
        height:
            440px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width:
    720px
) {

    .contact-logo-image-v95 {
        width:
            var(
                --atilim-header-logo-width,
                170px
            ) !important;

        height:
            auto !important;
    }


    .cp95-location {
        padding:
            17px;

        border-radius:
            23px;
    }


    .cp95-location-head {
        padding:
            5px
            3px
            20px;
    }


    .cp95-map-actions {
        width:
            100%;

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .cp95-map-button {
        width:
            100%;
    }


    .cp95-map-stage {
        height:
            380px;

        border-radius:
            18px;
    }


    .cp95-map-overlay-card {
        left:
            13px;

        right:
            13px;

        bottom:
            13px;

        width:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| V96 — CONTACT HEADER LOGO + HERO TITLE SCALE
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HEADER LOGO
|--------------------------------------------------------------------------
|
| Contact sayfası artık ana sayfadaki aynı:
|
| .logo
| .site-logo-dynamic-v56
| .site-logo-image
|
| sınıflarını kullanıyor.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.cp94-head {
    max-width:
        820px !important;
}


.cp94-head h1 {
    width:
        min(
            100%,
            720px
        ) !important;

    max-width:
        720px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    font-size:
        clamp(
            38px,
            3.5vw,
            52px
        ) !important;

    line-height:
        1.035 !important;

    letter-spacing:
        -.048em !important;
}


.cp94-head h1 span {
    margin-top:
        1px !important;
}


/*
|--------------------------------------------------------------------------
| DESCRIPTION RHYTHM
|--------------------------------------------------------------------------
*/

.cp94-head p {
    max-width:
        620px !important;

    margin-top:
        20px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .cp94-head h1 {
        max-width:
            500px !important;

        font-size:
            clamp(
                34px,
                9.5vw,
                44px
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V97 — ABOUT PAGE
|--------------------------------------------------------------------------
*/

.about-page-v97 {
    overflow:
        hidden;

    background:
        #FFFFFF;
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ab97-hero {
    position:
        relative;

    padding:
        118px
        0
        110px;

    background:
        radial-gradient(
            ellipse at 12% 7%,
            rgba(143,104,220,.08),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 87% 10%,
            rgba(248,205,80,.09),
            transparent 30%
        ),
        #FFFFFF;
}


.ab97-hero-copy {
    width:
        min(100%, 820px);

    margin:
        0 auto;

    text-align:
        center;
}


.ab97-kicker,
.ab97-section-kicker {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 15px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF !important;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.ab97-hero-copy h1 {
    width:
        min(100%, 790px);

    margin:
        25px auto 0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        clamp(42px,4.5vw,60px);

    font-weight:
        700;

    line-height:
        1.035;

    letter-spacing:
        -.055em;
}


.ab97-hero-copy h1 span {
    display:
        block;

    color:
        #00B1FF;
}


.ab97-hero-copy p {
    width:
        min(100%,680px);

    margin:
        24px auto 0;

    color:
        #747D82;

    font-family:
        var(--body);

    font-size:
        13px;

    line-height:
        1.85;
}


/*
|--------------------------------------------------------------------------
| HERO VISUAL GRID
|--------------------------------------------------------------------------
*/

.ab97-hero-visuals {
    display:
        grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:
        24px;

    margin-top:
        70px;
}


.ab97-visual-card {
    position:
        relative;

    min-height:
        510px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,26,31,.065);

    border-radius:
        28px;

    box-shadow:
        0
        28px
        70px
        rgba(23,26,31,.065);
}


/*
|--------------------------------------------------------------------------
| LEFT PRODUCT VISUAL
|--------------------------------------------------------------------------
*/

.ab97-growth-system {
    background:
        linear-gradient(
            145deg,
            #F1E9FF,
            #FCFAFF
        );
}


.ab97-window-bar {
    height:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        rgba(23,26,31,.055);

    background:
        rgba(255,255,255,.85);
}


.ab97-window-bar > span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #D7DCE0;
}


.ab97-window-bar small {
    margin:
        0 auto;

    color:
        #9FA6AA;

    font-family:
        var(--body);

    font-size:
        8px;
}


.ab97-system-body {
    padding:
        32px;
}


.ab97-system-title {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.ab97-system-title small,
.ab97-system-title strong {
    display:
        block;
}


.ab97-system-title small {
    margin-bottom:
        5px;

    color:
        #8A8195;

    font-family:
        var(--body);

    font-size:
        9px;
}


.ab97-system-title strong {
    color:
        #17232B;

    font-family:
        var(--heading);

    font-size:
        21px;
}


.ab97-system-period {
    padding:
        8px 10px;

    border:
        1px solid
        rgba(23,26,31,.07);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.82);

    color:
        #81888D;

    font-family:
        var(--body);

    font-size:
        8px;
}


.ab97-system-stats {
    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        12px;

    margin-top:
        28px;
}


.ab97-system-stats > div {
    padding:
        17px;

    border:
        1px solid
        rgba(23,26,31,.06);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.78);
}


.ab97-system-stats small,
.ab97-system-stats strong,
.ab97-system-stats span {
    display:
        block;
}


.ab97-system-stats small {
    color:
        #8A9296;

    font-family:
        var(--body);

    font-size:
        8px;
}


.ab97-system-stats strong {
    margin-top:
        7px;

    color:
        #17232B;

    font-family:
        var(--heading);

    font-size:
        20px;
}


.ab97-system-stats span {
    margin-top:
        5px;

    color:
        #8D72C8;

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-system-chart {
    position:
        relative;

    height:
        210px;

    margin-top:
        18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(23,26,31,.06);

    border-radius:
        17px;

    background:
        rgba(255,255,255,.78);
}


.ab97-chart-grid {
    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 50px,
            rgba(23,26,31,.045) 51px
        );
}


.ab97-system-chart svg {
    position:
        absolute;

    left:
        18px;

    bottom:
        31px;

    width:
        calc(100% - 36px);

    height:
        145px;
}


.ab97-system-chart path {
    fill:
        none;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.ab97-line-main {
    stroke:
        #00B1FF;

    stroke-width:
        5;
}


.ab97-line-secondary {
    stroke:
        #9B73D4;

    stroke-width:
        3;
}


.ab97-chart-legend {
    position:
        absolute;

    left:
        18px;

    bottom:
        11px;

    display:
        flex;

    gap:
        15px;
}


.ab97-chart-legend span {
    color:
        #8D9499;

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-floating-result {
    position:
        absolute;

    left:
        21px;

    bottom:
        21px;

    padding:
        13px 16px;

    border-radius:
        14px;

    background:
        #FFFFFF;

    box-shadow:
        0
        16px
        38px
        rgba(23,26,31,.09);
}


.ab97-floating-result span,
.ab97-floating-result strong {
    display:
        block;
}


.ab97-floating-result span {
    color:
        #8B9297;

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-floating-result strong {
    margin-top:
        3px;

    color:
        #654C90;

    font-family:
        var(--heading);

    font-size:
        15px;
}


/*
|--------------------------------------------------------------------------
| RIGHT PRODUCT VISUAL
|--------------------------------------------------------------------------
*/

.ab97-customer-system {
    padding:
        38px;

    background:
        linear-gradient(
            145deg,
            #FFF1C8,
            #FFF9EB
        );
}


.ab97-customer-kicker {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #96731C;

    font-family:
        var(--body);

    font-size:
        9px;
}


.ab97-customer-top strong {
    display:
        block;

    max-width:
        365px;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        27px;

    line-height:
        1.13;

    letter-spacing:
        -.04em;
}


.ab97-customer-flow {
    position:
        relative;

    height:
        330px;

    margin-top:
        25px;
}


.ab97-channel-card {
    position:
        absolute;

    z-index:
        4;

    left:
        0;

    width:
        195px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        12px;

    border-radius:
        15px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0
        14px
        30px
        rgba(23,26,31,.06);
}


.ab97-channel-google {
    top:
        20px;
}


.ab97-channel-seo {
    top:
        119px;
}


.ab97-channel-meta {
    top:
        218px;
}


.ab97-channel-card > span {
    flex:
        0 0 36px;

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        #FFEBA6;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        11px;

    font-weight:
        700;
}


.ab97-channel-seo > span {
    background:
        #DFF29A;
}


.ab97-channel-meta > span {
    background:
        #FFD2C7;

    color:
        #B4523B;
}


.ab97-channel-card small,
.ab97-channel-card strong {
    display:
        block;
}


.ab97-channel-card small {
    margin-bottom:
        3px;

    color:
        #959A9D;

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-channel-card strong {
    color:
        #263037;

    font-family:
        var(--heading);

    font-size:
        9px;
}


.ab97-flow-lines {
    position:
        absolute;

    left:
        185px;

    top:
        37px;

    width:
        160px;

    height:
        230px;
}


.ab97-flow-lines i {
    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1px;

    transform-origin:
        left;

    background:
        rgba(23,26,31,.14);
}


.ab97-flow-lines i:nth-child(1) {
    top:
        0;

    transform:
        rotate(29deg);
}


.ab97-flow-lines i:nth-child(2) {
    top:
        95px;
}


.ab97-flow-lines i:nth-child(3) {
    top:
        190px;

    transform:
        rotate(-29deg);
}


.ab97-customer-target {
    position:
        absolute;

    z-index:
        3;

    right:
        0;

    top:
        64px;

    width:
        190px;

    height:
        190px;
}


.ab97-target-ring {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(155,115,212,.28);

    border-radius:
        50%;
}


.ab97-target-ring.ring-one {
    width:
        188px;

    height:
        188px;
}


.ab97-target-ring.ring-two {
    width:
        124px;

    height:
        124px;
}


.ab97-target-center {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        88px;

    height:
        88px;

    display:
        grid;

    place-content:
        center;

    transform:
        translate(-50%,-50%);

    text-align:
        center;

    border:
        7px solid #FFFFFF;

    border-radius:
        50%;

    background:
        #171A1F;

    box-shadow:
        0
        16px
        35px
        rgba(23,26,31,.14);
}


.ab97-target-center small,
.ab97-target-center strong {
    display:
        block;
}


.ab97-target-center small {
    color:
        rgba(255,255,255,.52);

    font-family:
        var(--body);

    font-size:
        6px;
}


.ab97-target-center strong {
    margin-top:
        3px;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| MISSION
|--------------------------------------------------------------------------
*/

.ab97-mission {
    padding:
        125px 0;
}


.ab97-mission-grid {
    display:
        grid;

    grid-template-columns:
        .92fr 1.08fr;

    align-items:
        center;

    gap:
        95px;
}


.ab97-mission-copy h2 {
    max-width:
        570px;

    margin:
        0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        clamp(39px,3.7vw,55px);

    font-weight:
        650;

    line-height:
        1.08;

    letter-spacing:
        -.052em;
}


.ab97-section-kicker {
    margin-bottom:
        23px;
}


.ab97-mission-copy p {
    max-width:
        590px;

    margin:
        21px 0 0;

    color:
        #747D82;

    font-family:
        var(--body);

    font-size:
        12px;

    line-height:
        1.85;
}


/*
|--------------------------------------------------------------------------
| MISSION ORBIT
|--------------------------------------------------------------------------
*/

.ab97-mission-visual {
    position:
        relative;

    height:
        500px;

    background:
        radial-gradient(
            circle,
            #EFE1FF 0%,
            #FAF7FF 52%,
            transparent 53%
        );
}


.ab97-orbit {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(23,26,31,.16);

    border-radius:
        50%;
}


.ab97-orbit.orbit-a {
    width:
        420px;

    height:
        190px;

    transform:
        translate(-50%,-50%)
        rotate(-18deg);
}


.ab97-orbit.orbit-b {
    width:
        340px;

    height:
        320px;

    transform:
        translate(-50%,-50%)
        rotate(31deg);
}


.ab97-mission-core {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        160px;

    height:
        160px;

    display:
        grid;

    place-content:
        center;

    transform:
        translate(-50%,-50%);

    text-align:
        center;

    border:
        12px solid #FFFFFF;

    border-radius:
        50%;

    background:
        #171A1F;

    box-shadow:
        0
        30px
        60px
        rgba(23,26,31,.14);
}


.ab97-mission-core small,
.ab97-mission-core strong,
.ab97-mission-core span {
    display:
        block;
}


.ab97-mission-core small {
    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        8px;

    font-weight:
        700;
}


.ab97-mission-core strong {
    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        25px;
}


.ab97-mission-core span {
    color:
        rgba(255,255,255,.48);

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-mission-node {
    position:
        absolute;

    min-width:
        70px;

    padding:
        11px 13px;

    text-align:
        center;

    border-radius:
        999px;

    background:
        #FFFFFF;

    color:
        #273138;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        650;

    box-shadow:
        0
        13px
        30px
        rgba(23,26,31,.07);
}


.node-web {
    left:
        50px;

    top:
        85px;
}


.node-ads {
    right:
        45px;

    top:
        89px;

    background:
        #FFF0B4;
}


.node-seo {
    left:
        58px;

    bottom:
        92px;

    background:
        #E0F19A;
}


.node-social {
    right:
        48px;

    bottom:
        90px;

    background:
        #FFD5CB;
}


.ab97-mission-result {
    position:
        absolute;

    right:
        0;

    top:
        50%;

    padding:
        14px 17px;

    transform:
        translateY(-50%);

    border-radius:
        16px;

    background:
        #FFFFFF;

    box-shadow:
        0
        20px
        45px
        rgba(23,26,31,.10);
}


.ab97-mission-result small,
.ab97-mission-result strong {
    display:
        block;
}


.ab97-mission-result small {
    color:
        #92989C;

    font-family:
        var(--body);

    font-size:
        7px;
}


.ab97-mission-result strong {
    margin-top:
        3px;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        11px;
}


/*
|--------------------------------------------------------------------------
| PRINCIPLES DARK PANEL
|--------------------------------------------------------------------------
*/

.ab97-principles {
    padding:
        10px 0 120px;
}


.ab97-principles-panel {
    display:
        grid;

    grid-template-columns:
        1.35fr repeat(3,1fr);

    overflow:
        hidden;

    border-radius:
        29px;

    background:
        linear-gradient(
            135deg,
            #17191D,
            #111316
        );

    box-shadow:
        0
        32px
        75px
        rgba(23,26,31,.13);
}


.ab97-principles-intro,
.ab97-principle {
    min-height:
        260px;

    padding:
        38px;
}


.ab97-principles-intro {
    border-right:
        1px solid
        rgba(255,255,255,.06);
}


.ab97-principles-intro > span {
    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.ab97-principles-intro h2 {
    max-width:
        300px;

    margin:
        18px 0 0;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        30px;

    font-weight:
        600;

    line-height:
        1.1;
}


.ab97-principles-intro p,
.ab97-principle p {
    margin:
        15px 0 0;

    color:
        rgba(255,255,255,.48);

    font-family:
        var(--body);

    font-size:
        10px;

    line-height:
        1.75;
}


.ab97-principle {
    border-right:
        1px solid
        rgba(255,255,255,.06);
}


.ab97-principle:last-child {
    border-right:
        0;
}


.ab97-principle-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        30px;

    border-radius:
        999px;

    background:
        rgba(0,177,255,.12);

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        9px;

    font-weight:
        700;
}


.ab97-principle strong {
    display:
        block;

    margin-top:
        62px;

    color:
        #FFFFFF;

    font-family:
        var(--heading);

    font-size:
        19px;
}


/*
|--------------------------------------------------------------------------
| FOUNDER MESSAGE
|--------------------------------------------------------------------------
*/

.ab97-founder {
    padding:
        10px 0 130px;
}


.ab97-founder-card {
    position:
        relative;

    overflow:
        hidden;

    width:
        min(100%,1110px);

    margin:
        0 auto;

    padding:
        72px 100px;

    text-align:
        center;

    border:
        1px solid
        rgba(23,26,31,.055);

    border-radius:
        31px;

    background:
        #F7F7F8;

    box-shadow:
        0
        28px
        65px
        rgba(23,26,31,.055);
}


.ab97-founder-accent {
    position:
        absolute;

    left:
        -100px;

    top:
        -135px;

    width:
        330px;

    height:
        310px;

    border-radius:
        42%;

    background:
        radial-gradient(
            circle at 75% 75%,
            #FFCB4C 0%,
            #FF8C59 28%,
            #C85CE3 53%,
            transparent 70%
        );

    opacity:
        .80;
}


.ab97-founder-avatar {
    position:
        relative;

    z-index:
        3;

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 13px;

    border:
        5px solid #FFFFFF;

    border-radius:
        50%;

    background:
        #171A1F;

    color:
        #00B1FF;

    font-family:
        var(--heading);

    font-size:
        15px;

    font-weight:
        700;
}


.ab97-founder-kicker {
    position:
        relative;

    z-index:
        3;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;
}


.ab97-founder-card blockquote {
    position:
        relative;

    z-index:
        3;

    width:
        min(100%,760px);

    margin:
        28px auto 0;

    color:
        #727A80;

    font-family:
        var(--body);

    font-size:
        17px;

    font-style:
        normal;

    line-height:
        1.6;
}


.ab97-founder-signature {
    position:
        relative;

    z-index:
        3;

    margin-top:
        24px;
}


.ab97-founder-signature strong,
.ab97-founder-signature span {
    display:
        block;
}


.ab97-founder-signature strong {
    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        13px;
}


.ab97-founder-signature span {
    margin-top:
        3px;

    color:
        #969B9E;

    font-family:
        var(--body);

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| FINAL CTA
|--------------------------------------------------------------------------
*/

.ab97-final-cta {
    padding:
        25px 0 125px;
}


.ab97-final-content {
    width:
        min(100%,790px);

    margin:
        0 auto;

    text-align:
        center;
}


.ab97-final-content h2 {
    margin:
        24px 0 0;

    color:
        #171A1F;

    font-family:
        var(--heading);

    font-size:
        clamp(39px,3.8vw,55px);

    font-weight:
        650;

    line-height:
        1.07;

    letter-spacing:
        -.052em;
}


.ab97-final-content h2 span {
    display:
        block;

    color:
        #00B1FF;
}


.ab97-final-content p {
    width:
        min(100%,580px);

    margin:
        21px auto 0;

    color:
        #747D82;

    font-family:
        var(--body);

    font-size:
        12px;

    line-height:
        1.8;
}


.ab97-final-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        55px;

    margin-top:
        31px;

    padding:
        0 27px;

    border-radius:
        999px;

    background:
        #171A1F;

    color:
        #FFFFFF !important;

    text-decoration:
        none;

    font-family:
        var(--heading);

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:
        0
        17px
        38px
        rgba(23,26,31,.11);
}


.ab97-final-button span {
    color:
        #00B1FF;
}


.about-page-v97
+ .footer-v79 {
    margin-top:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width:1100px) {

    .ab97-hero-visuals,
    .ab97-mission-grid {
        grid-template-columns:
            1fr;
    }


    .ab97-hero-visuals {
        max-width:
            760px;

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .ab97-mission-grid {
        gap:
            60px;
    }


    .ab97-mission-copy {
        text-align:
            center;
    }


    .ab97-mission-copy h2,
    .ab97-mission-copy p {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .ab97-mission-visual {
        width:
            min(100%,600px);

        margin:
            0 auto;
    }


    .ab97-principles-panel {
        grid-template-columns:
            repeat(2,1fr);
    }


    .ab97-principles-intro {
        grid-column:
            span 2;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .ab97-hero {
        padding:
            92px 0 80px;
    }


    .ab97-hero-copy h1 {
        font-size:
            clamp(36px,10vw,46px);
    }


    .ab97-hero-visuals {
        margin-top:
            48px;
    }


    .ab97-visual-card {
        min-height:
            455px;

        border-radius:
            22px;
    }


    .ab97-system-body,
    .ab97-customer-system {
        padding:
            23px;
    }


    .ab97-system-stats {
        grid-template-columns:
            1fr;
    }


    .ab97-customer-flow {
        transform:
            scale(.82);

        transform-origin:
            left top;
    }


    .ab97-mission {
        padding:
            90px 0;
    }


    .ab97-mission-visual {
        height:
            420px;

        transform:
            scale(.82);

        transform-origin:
            center;
    }


    .ab97-principles-panel {
        grid-template-columns:
            1fr;
    }


    .ab97-principles-intro {
        grid-column:
            auto;
    }


    .ab97-principles-intro,
    .ab97-principle {
        min-height:
            auto;

        padding:
            30px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.06);
    }


    .ab97-principle strong {
        margin-top:
            34px;
    }


    .ab97-founder-card {
        padding:
            55px 25px;

        border-radius:
            24px;
    }


    .ab97-founder-card blockquote {
        font-size:
            14px;
    }


    .ab97-final-cta {
        padding-bottom:
            90px;
    }

}


/*
|--------------------------------------------------------------------------
| V98 — ABOUT / CONTACT DESIGN CONSISTENCY
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| ABOUT HERO
|--------------------------------------------------------------------------
|
| İletişim sayfasındaki cp94-intro:
| padding-top = 122px
|
| Aynı başlangıç çizgisini Hakkımızda için de kullanıyoruz.
|--------------------------------------------------------------------------
*/

.ab97-hero {
    padding-top:
        122px !important;
}


/*
|--------------------------------------------------------------------------
| KICKER ALIGNMENT
|--------------------------------------------------------------------------
|
| İletişim ve Hakkımızda sayfalarındaki küçük üst etiketler
| artık birebir aynı yüksekliğe sahip.
|--------------------------------------------------------------------------
*/

.cp94-kicker,
.ab97-kicker {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        34px !important;

    height:
        34px !important;

    padding:
        0 15px !important;

    margin-bottom:
        0 !important;

    border-radius:
        999px !important;

    background:
        #171A1F !important;

    color:
        #FFFFFF !important;

    font-family:
        var(--heading) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    box-sizing:
        border-box !important;
}


/*
|--------------------------------------------------------------------------
| ABOUT HERO TITLE
|--------------------------------------------------------------------------
|
| İletişim sayfasındaki maksimum başlık boyutu = 52px.
| Hakkımızda da artık aynı.
|--------------------------------------------------------------------------
*/

.ab97-hero-copy {
    width:
        min(
            100%,
            820px
        ) !important;

    max-width:
        820px !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;
}


.ab97-hero-copy h1 {
    width:
        min(
            100%,
            720px
        ) !important;

    max-width:
        720px !important;

    margin:
        25px
        auto
        0 !important;

    font-size:
        clamp(
            38px,
            3.5vw,
            52px
        ) !important;

    line-height:
        1.035 !important;

    letter-spacing:
        -.048em !important;
}


.ab97-hero-copy p {
    width:
        min(
            100%,
            620px
        ) !important;

    max-width:
        620px !important;

    margin-top:
        20px !important;
}


/*
|--------------------------------------------------------------------------
| WORK MODEL ON ABOUT PAGE
|--------------------------------------------------------------------------
|
| Ana sayfadaki section birebir taşındı.
| About sayfasında ekstra dış boşluk dışında hiçbir görsel
| stilini değiştirmiyoruz.
|--------------------------------------------------------------------------
*/

.about-page-v97
.work-model,
.about-page-v97
.process-section,
.about-page-v97
#calisma-modelimiz,
.about-page-v97
#calisma-modeli {
    margin-top:
        0;
}


/*
|--------------------------------------------------------------------------
| FOUNDER SECTION WIDTH
|--------------------------------------------------------------------------
|
| Önceden 1110px ile sınırlandırılmıştı.
| Artık bulunduğu .container genişliğini tamamen kullanıyor.
|--------------------------------------------------------------------------
*/

.ab97-founder-card {
    width:
        100% !important;

    max-width:
        none !important;

    margin-left:
        0 !important;

    margin-right:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| FOUNDER SECTION RHYTHM
|--------------------------------------------------------------------------
*/

.ab97-founder {
    padding-top:
        18px !important;

    padding-bottom:
        125px !important;
}


.ab97-founder-card {
    padding:
        72px
        clamp(
            42px,
            7vw,
            105px
        ) !important;
}


/*
|--------------------------------------------------------------------------
| FOUNDER MESSAGE
|--------------------------------------------------------------------------
*/

.ab97-founder-card blockquote {
    width:
        min(
            100%,
            790px
        ) !important;

    max-width:
        790px !important;
}


/*
|--------------------------------------------------------------------------
| FOUNDER SIGNATURE
|--------------------------------------------------------------------------
*/

.ab97-founder-signature {
    margin-top:
        26px !important;
}


.ab97-founder-signature strong {
    color:
        #171A1F !important;

    font-family:
        var(--heading) !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


.ab97-founder-signature span {
    margin-top:
        4px !important;

    color:
        #92989C !important;

    font-family:
        var(--body) !important;

    font-size:
        9px !important;

    font-weight:
        400 !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .ab97-hero {
        padding-top:
            92px !important;
    }


    .ab97-hero-copy h1 {
        max-width:
            500px !important;

        font-size:
            clamp(
                34px,
                9.5vw,
                44px
            ) !important;
    }


    .ab97-founder-card {
        padding:
            55px
            25px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V99 — CONTACT HERO RHYTHM FIX
|--------------------------------------------------------------------------
|
| V98'de kicker ortaklaştırılırken İletişim sayfasındaki
| 24px alt boşluk kaybolmuştu.
|--------------------------------------------------------------------------
*/

.contact-page-v94
.cp94-kicker {
    margin-bottom:
        24px !important;
}


/*
|--------------------------------------------------------------------------
| CONTACT TITLE
|--------------------------------------------------------------------------
|
| Başlık boyutu korunuyor: max 52px.
|--------------------------------------------------------------------------
*/

.contact-page-v94
.cp94-head h1 {
    margin-top:
        0 !important;

    font-size:
        clamp(
            38px,
            3.5vw,
            52px
        ) !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .contact-page-v94
    .cp94-kicker {
        margin-bottom:
            20px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V100 — ABOUT WORK MODEL POSITION
|--------------------------------------------------------------------------
|
| Hakkımızda:
|
| Hero
| Çalışma Modelimiz
| Hedefimiz
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| ÇALIŞMA MODELİMİZ — HERO SONRASI BOSLUK
|--------------------------------------------------------------------------
|
| Ana sayfadaki tasarıma dokunmuyoruz.
| Hakkımızda sayfasında yalnızca dış ritmi sıkılaştırıyoruz.
|--------------------------------------------------------------------------
*/

.about-page-v97
.about-work-model-v100 {
    margin-top:
        0 !important;

    padding-top:
        42px !important;
}


/*
|--------------------------------------------------------------------------
| HERO ALT BOSLUGU
|--------------------------------------------------------------------------
|
| Çalışma Modelimiz artık hero'nun hemen altında olduğu için
| hero'nun eski geniş alt padding'ini de azaltıyoruz.
|--------------------------------------------------------------------------
*/

.about-page-v97
.ab97-hero {
    padding-bottom:
        54px !important;
}


/*
|--------------------------------------------------------------------------
| HEDEFIMIZ
|--------------------------------------------------------------------------
*/

.about-page-v97
.about-work-model-v100
~ .ab97-mission {
    padding-top:
        105px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:720px) {

    .about-page-v97
    .ab97-hero {
        padding-bottom:
            38px !important;
    }


    .about-page-v97
    .about-work-model-v100 {
        padding-top:
            30px !important;
    }


    .about-page-v97
    .about-work-model-v100
    ~ .ab97-mission {
        padding-top:
            78px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V101 — RESPONSIVE CTA SIDE VISUALS
|--------------------------------------------------------------------------
|
| 1440px civarında sol ve sağ görseller merkez başlığa giriyordu.
| Desktop XL görünüm korunuyor; laptop / standart desktop için
| görseller küçültülüp kenarlara taşınıyor.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 1281 — 1600
|--------------------------------------------------------------------------
*/

@media (min-width:1281px) and (max-width:1600px) {

    .contact-cta-v87 {
        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Merkez içerik her zaman üstte
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta87-content {
        position:
            relative !important;

        z-index:
            10 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Sol büyüme görseli
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -72px !important;

        width:
            300px !important;

        height:
            223px !important;

        transform:
            translateY(-50%)
            scale(.86)
            rotate(-4deg) !important;

        transform-origin:
            center center !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Sağ hedef görseli
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-target-visual {
        right:
            -64px !important;

        width:
            278px !important;

        height:
            278px !important;

        transform:
            translateY(-50%)
            scale(.86)
            rotate(4deg) !important;

        transform-origin:
            center center !important;
    }

}


/*
|--------------------------------------------------------------------------
| 1101 — 1280
|--------------------------------------------------------------------------
|
| Bu aralıkta merkez metne daha fazla alan bırakıyoruz.
|--------------------------------------------------------------------------
*/

@media (min-width:1101px) and (max-width:1280px) {

    .contact-cta-v87 {
        overflow:
            hidden !important;
    }


    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -145px !important;

        opacity:
            .72 !important;

        transform:
            translateY(-50%)
            scale(.73)
            rotate(-4deg) !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            -135px !important;

        opacity:
            .72 !important;

        transform:
            translateY(-50%)
            scale(.73)
            rotate(4deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| 901 — 1100
|--------------------------------------------------------------------------
|
| Tablet yatay / küçük laptop:
| Görseller dekoratif kalıyor, metne asla yaklaşmıyor.
|--------------------------------------------------------------------------
*/

@media (min-width:901px) and (max-width:1100px) {

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -205px !important;

        opacity:
            .34 !important;

        transform:
            translateY(-50%)
            scale(.64)
            rotate(-4deg) !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            -195px !important;

        opacity:
            .34 !important;

        transform:
            translateY(-50%)
            scale(.64)
            rotate(4deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V102 — CTA RESPONSIVE COMPOSITION
|--------------------------------------------------------------------------
|
| V101'de görseller fazla dışarı taşındı.
| V102:
| - görseller daima görünür
| - opacity 1
| - daha küçük
| - merkezin üzerine binmez
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 1281 - 1600
|--------------------------------------------------------------------------
*/

@media (min-width:1281px) and (max-width:1600px) {

    .contact-cta-v87 {
        position:
            relative !important;

        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MERKEZ ICERIK
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta87-content {
        position:
            relative !important;

        z-index:
            10 !important;

        width:
            min(
                100%,
                620px
            ) !important;

        max-width:
            620px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .contact-cta-v87
    .cta87-content h2 {
        max-width:
            620px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            clamp(
                38px,
                3.25vw,
                46px
            ) !important;

        line-height:
            1.05 !important;
    }


    .contact-cta-v87
    .cta87-content p {
        width:
            min(
                100%,
                500px
            ) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            11px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOL GORSEL
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            12px !important;

        right:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.70)
            rotate(-4deg) !important;

        transform-origin:
            left center !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SAG GORSEL
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-target-visual {
        right:
            10px !important;

        left:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.70)
            rotate(3deg) !important;

        transform-origin:
            right center !important;
    }

}


/*
|--------------------------------------------------------------------------
| 1101 - 1280
|--------------------------------------------------------------------------
*/

@media (min-width:1101px) and (max-width:1280px) {

    .contact-cta-v87 {
        overflow:
            hidden !important;
    }


    .contact-cta-v87
    .cta87-content {
        position:
            relative !important;

        z-index:
            10 !important;

        width:
            min(
                100%,
                540px
            ) !important;

        max-width:
            540px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    .contact-cta-v87
    .cta87-content h2 {
        font-size:
            38px !important;

        line-height:
            1.06 !important;
    }


    .contact-cta-v87
    .cta87-content p {
        max-width:
            440px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            10px !important;
    }


    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -6px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.58)
            rotate(-4deg) !important;

        transform-origin:
            left center !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            -4px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.58)
            rotate(3deg) !important;

        transform-origin:
            right center !important;
    }

}


/*
|--------------------------------------------------------------------------
| 901 - 1100
|--------------------------------------------------------------------------
|
| Görseller burada da kaybolmuyor.
|--------------------------------------------------------------------------
*/

@media (min-width:901px) and (max-width:1100px) {

    .contact-cta-v87
    .cta87-content {
        position:
            relative !important;

        z-index:
            10 !important;

        max-width:
            500px !important;

        margin:
            0 auto !important;
    }


    .contact-cta-v87
    .cta87-content h2 {
        font-size:
            35px !important;
    }


    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -28px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.46)
            rotate(-4deg) !important;

        transform-origin:
            left center !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            -25px !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.46)
            rotate(3deg) !important;

        transform-origin:
            right center !important;
    }

}


/*
|--------------------------------------------------------------------------
| V103 — CTA SIDE VISUALS CLOSER
|--------------------------------------------------------------------------
|
| V102 ölçüleri korunuyor.
| Yalnızca görseller merkez metne biraz yaklaştırılıyor.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| 1281 - 1600
|--------------------------------------------------------------------------
*/

@media (min-width:1281px) and (max-width:1600px) {

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            72px !important;

        opacity:
            1 !important;

        transform:
            translateY(-50%)
            scale(.70)
            rotate(-4deg) !important;

        transform-origin:
            left center !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            68px !important;

        opacity:
            1 !important;

        transform:
            translateY(-50%)
            scale(.70)
            rotate(3deg) !important;

        transform-origin:
            right center !important;
    }

}


/*
|--------------------------------------------------------------------------
| 1101 - 1280
|--------------------------------------------------------------------------
*/

@media (min-width:1101px) and (max-width:1280px) {

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            24px !important;

        opacity:
            1 !important;

        transform:
            translateY(-50%)
            scale(.58)
            rotate(-4deg) !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            24px !important;

        opacity:
            1 !important;

        transform:
            translateY(-50%)
            scale(.58)
            rotate(3deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| 901 - 1100
|--------------------------------------------------------------------------
*/

@media (min-width:901px) and (max-width:1100px) {

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            -5px !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            -5px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V104 — 1024 HERO RESPONSIVE
|--------------------------------------------------------------------------
|
| 901–1100 px aralığında:
|
| - Hero sağ tarafta boşluk bırakmayacak.
| - Hero kompozisyonu yatayda tam ortalanacak.
| - Dashboard viewport dışına taşmayacak.
| - Floating KPI kartları kesilmeyecek.
| - 1440px görünüm etkilenmeyecek.
|--------------------------------------------------------------------------
*/

@media (min-width:901px) and (max-width:1100px) {


    /*
    |--------------------------------------------------------------------------
    | HERO FULL WIDTH
    |--------------------------------------------------------------------------
    */

    main#top {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .hero {
        position:
            relative !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin-left:
            0 !important;

        margin-right:
            0 !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO CONTAINER
    |--------------------------------------------------------------------------
    */

    .hero
    > .container,
    .hero
    .hero-inner {
        width:
            calc(100% - 48px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO COPY
    |--------------------------------------------------------------------------
    */

    .hero-copy {
        width:
            min(
                100%,
                780px
            ) !important;

        max-width:
            780px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        text-align:
            center !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO TITLE
    |--------------------------------------------------------------------------
    |
    | 1024'te tek satıra zorlanıp fazla genişlemesin.
    |--------------------------------------------------------------------------
    */

    .hero-copy h1 {
        width:
            min(
                100%,
                760px
            ) !important;

        max-width:
            760px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        font-size:
            clamp(
                40px,
                4.5vw,
                48px
            ) !important;

        line-height:
            1.04 !important;
    }


    .hero-copy p {
        width:
            min(
                100%,
                690px
            ) !important;

        max-width:
            690px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PRODUCT STAGE
    |--------------------------------------------------------------------------
    */

    .product-stage {
        position:
            relative !important;

        width:
            min(
                100%,
                900px
            ) !important;

        max-width:
            900px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;

        overflow:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DASHBOARD BROWSER
    |--------------------------------------------------------------------------
    */

    .product-stage
    > .browser,
    .product-stage
    .browser {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DASHBOARD INTERNAL
    |--------------------------------------------------------------------------
    */

    .product-stage
    .dashboard,
    .product-stage
    .dash-main {
        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FLOATING KPI CARDS
    |--------------------------------------------------------------------------
    |
    | Sol +24% kart artık ekranın dışına taşmayacak.
    |--------------------------------------------------------------------------
    */

    .product-stage
    > .float-card {
        z-index:
            8 !important;

        transform:
            scale(.84) !important;
    }


    .product-stage
    > .float-card:nth-child(1) {
        left:
            10px !important;

        right:
            auto !important;

        transform-origin:
            left center !important;
    }


    .product-stage
    > .float-card:nth-child(2) {
        right:
            10px !important;

        left:
            auto !important;

        transform-origin:
            right center !important;
    }


}


/*
|--------------------------------------------------------------------------
| EXACT 1024 SAFETY
|--------------------------------------------------------------------------
*/

@media (min-width:981px) and (max-width:1040px) {

    .hero
    > .container,
    .hero
    .hero-inner {
        width:
            calc(100% - 40px) !important;
    }


    .product-stage {
        width:
            calc(100% - 12px) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V105 — 1024 HEADER + HERO FULL BLEED
|--------------------------------------------------------------------------
|
| 901–1100px:
|
| - Header içeriği viewport içinde tutulur.
| - Logo artık soldan kesilmez.
| - Hero parent genişliğine değil viewport'a bağlanır.
| - Sağdaki beyaz şerit tamamen kalkar.
| - 1440px ve üzeri etkilenmez.
|--------------------------------------------------------------------------
*/


@media (min-width:901px) and (max-width:1100px) {


    /*
    |--------------------------------------------------------------------------
    | HORIZONTAL SAFETY
    |--------------------------------------------------------------------------
    */

    html,
    body {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            clip !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    .header {
        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER INNER CONTAINER
    |--------------------------------------------------------------------------
    */

    .header
    .container,
    .header-wrap {
        width:
            calc(100% - 48px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;

        box-sizing:
            border-box !important;

        transform:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER LOGO
    |--------------------------------------------------------------------------
    */

    .header
    .logo,
    .header
    .site-logo-dynamic-v56 {
        flex:
            0 0 auto !important;

        margin-left:
            0 !important;

        left:
            auto !important;

        transform:
            none !important;
    }


    .header
    .site-logo-image {
        max-width:
            100% !important;

        object-position:
            left center !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER NAV
    |--------------------------------------------------------------------------
    */

    .header
    .nav {
        margin-left:
            auto !important;

        margin-right:
            22px !important;

        gap:
            25px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO — TRUE FULL VIEWPORT WIDTH
    |--------------------------------------------------------------------------
    |
    | Parent container dar olsa bile section viewport'un tamamını kaplar.
    |--------------------------------------------------------------------------
    */

    main#top {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .hero {
        position:
            relative !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            100vw !important;

        max-width:
            100vw !important;

        margin-left:
            -50vw !important;

        margin-right:
            0 !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO BACKGROUND SAFETY
    |--------------------------------------------------------------------------
    |
    | Background pseudo element kullanılıyorsa o da tam viewport olsun.
    |--------------------------------------------------------------------------
    */

    .hero::before,
    .hero::after {
        max-width:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO INNER
    |--------------------------------------------------------------------------
    */

    .hero
    .hero-inner {
        position:
            relative !important;

        width:
            calc(100% - 48px) !important;

        max-width:
            920px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        padding-left:
            0 !important;

        padding-right:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO COPY
    |--------------------------------------------------------------------------
    */

    .hero
    .hero-copy {
        width:
            min(
                100%,
                780px
            ) !important;

        max-width:
            780px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | PRODUCT STAGE
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage {
        width:
            calc(100% - 20px) !important;

        max-width:
            900px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/*
|--------------------------------------------------------------------------
| 981–1040 EXTRA SAFETY
|--------------------------------------------------------------------------
*/

@media (min-width:981px) and (max-width:1040px) {

    .header
    .container,
    .header-wrap {
        width:
            calc(100% - 42px) !important;
    }


    .hero
    .hero-inner {
        width:
            calc(100% - 42px) !important;
    }


    .header
    .nav {
        gap:
            22px !important;

        margin-right:
            18px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V114 — 1024 SERVICES CLEAN FIX
|--------------------------------------------------------------------------
|
| DOKUNULMAYANLAR:
| - Kurumsal Web Sitesi
| - E-Ticaret Sitesi
| - Google Ads
| - SEO
|
| SADECE:
| - .sv61-meta
| - .sv61-social
|
|--------------------------------------------------------------------------
*/


@media (min-width:901px) and (max-width:1100px) {


    /*
    |--------------------------------------------------------------------------
    | META
    |--------------------------------------------------------------------------
    |
    | Gerçek services grid 12 kolonlu.
    | Meta yarım satır = span 6.
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-meta {
        grid-column:
            span 6 !important;

        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL
    |--------------------------------------------------------------------------
    |
    | Desktop'taki wide / span 12 davranışını
    | yalnızca 1024 bandında span 6 yapıyoruz.
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social {
        grid-column:
            span 6 !important;

        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        justify-content:
            flex-start !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL COPY
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social
    .sv61-copy {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL VISUAL WRAPPER
    |--------------------------------------------------------------------------
    |
    | Görsel CTA'nın hemen ardından gelir.
    | margin-top:auto YOK.
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social
    .sv61-visual {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin:
            26px 0 0 !important;

        padding:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | META VISUAL WRAPPER
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-meta
    .sv61-visual {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | META + SOCIAL PREVIEW
    |--------------------------------------------------------------------------
    |
    | İki görsel aynı oranı kullanır.
    |
    | İç çocuklara height VERMİYORUZ.
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-meta
    .meta-preview,

    .services-v61
    .sv61-social
    .social-preview {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        height:
            auto !important;

        min-height:
            0 !important;

        aspect-ratio:
            16 / 9 !important;

        margin:
            0 !important;

        transform:
            none !important;

        transform-origin:
            center center !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL PREVIEW INTERNAL LAYOUT
    |--------------------------------------------------------------------------
    |
    | Wide desktop görünüm yarım kolona girince
    | sidebar + board yatay yapısını koruyoruz.
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social
    .social-preview {
        display:
            grid !important;

        grid-template-columns:
            48px
            minmax(0, 1fr) !important;

        align-items:
            stretch !important;
    }


    .services-v61
    .sv61-social
    .social-board {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL CALENDAR
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social
    .social-calendar {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SOCIAL POSTS
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-social
    .social-posts {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 1024
|--------------------------------------------------------------------------
*/

@media (min-width:981px) and (max-width:1040px) {

    .services-v61
    .sv61-meta,

    .services-v61
    .sv61-social {
        grid-column:
            span 6 !important;
    }

}


/*
|--------------------------------------------------------------------------
| V115 — CTA / 1024px visual fine-tune
|--------------------------------------------------------------------------
| Sadece:
| - Alt CTA bölümündeki sol görsel
| - Alt CTA bölümündeki sağ görsel
|
| Amaç:
| - Biraz büyüsünler
| - Metne biraz daha yaklaşsınlar
| - Başka bölümler etkilenmesin
|--------------------------------------------------------------------------
*/

@media (min-width: 981px) and (max-width: 1100px) {

    /*
    |--------------------------------------------------------------------------
    | CTA KAPSAMI
    |--------------------------------------------------------------------------
    */

    .cta88,
    .cta87 {
        overflow: hidden;
    }

    .cta88,
    .cta87,
    .cta88-inner,
    .cta87-inner,
    .cta88-wrap,
    .cta87-wrap,
    .cta88-container,
    .cta87-container,
    .cta88-shell,
    .cta87-shell {
        position: relative;
    }

    /*
    |--------------------------------------------------------------------------
    | ORTA METIN BLOGU
    |--------------------------------------------------------------------------
    */

    .cta88-content,
    .cta87-content,
    .cta88-copy,
    .cta87-copy {
        position: relative;
        z-index: 2;
    }

    /*
    |--------------------------------------------------------------------------
    | SOL GORSEL
    |--------------------------------------------------------------------------
    | Mevcut chart/bar görseli
    |--------------------------------------------------------------------------
    */

    .cta88-growth-bars,
    .cta87-shape-left,
    .cta88-left-visual,
    .cta87-left-visual,
    .cta88 .shape-left,
    .cta87 .shape-left {
        width: 240px !important;
        max-width: 240px !important;
        left: 26px !important;
        z-index: 1;
    }

    /*
    |--------------------------------------------------------------------------
    | SAG GORSEL
    |--------------------------------------------------------------------------
    | Mevcut hedef/radar/orbit görseli
    |--------------------------------------------------------------------------
    */

    .cta88-target,
    .cta88-target-rings,
    .cta88-goal-rings,
    .cta88-shape-right,
    .cta88-right-visual,
    .cta87-target,
    .cta87-shape-right,
    .cta88 .shape-right,
    .cta87 .shape-right {
        width: 232px !important;
        max-width: 232px !important;
        right: 26px !important;
        z-index: 1;
    }

    /*
    |--------------------------------------------------------------------------
    | Eger wrapper kullaniyorsa onları da biraz içeri al
    |--------------------------------------------------------------------------
    */

    .cta88-left,
    .cta87-left,
    .cta88-visual-left,
    .cta87-visual-left {
        left: 26px !important;
    }

    .cta88-right,
    .cta87-right,
    .cta88-visual-right,
    .cta87-visual-right {
        right: 26px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Kopya alanı ile görsellerin birbirine daha rahat yaklaşması için
    | orta blok gereksiz fazla genişse sınırla
    |--------------------------------------------------------------------------
    */

    .cta88-content,
    .cta87-content,
    .cta88-copy,
    .cta87-copy {
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/*
|--------------------------------------------------------------------------
| V116 — CTA / 1024 VISUAL POSITION
|--------------------------------------------------------------------------
|
| SADECE:
|
| .cta88-growth-visual
| .cta88-target-visual
|
| Hedef:
| - Görseller daha büyük
| - Tamamen görünür
| - Merkez metne daha yakın
| - CTA metnine temas etmiyor
|
|--------------------------------------------------------------------------
*/


@media (min-width:901px) and (max-width:1100px) {


    /*
    |--------------------------------------------------------------------------
    | SOL — DIJITAL BUYUME GORSELI
    |--------------------------------------------------------------------------
    |
    | Önceki değer yaklaşık:
    | left: -5px
    | scale(.46)
    |
    | Yeni:
    | left: 46px
    | scale(.62)
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            46px !important;

        right:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.62)
            rotate(-4deg) !important;

        transform-origin:
            left center !important;

        z-index:
            2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SAG — HEDEF GORSELI
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-target-visual {
        right:
            46px !important;

        left:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            translateY(-50%)
            scale(.62)
            rotate(3deg) !important;

        transform-origin:
            right center !important;

        z-index:
            2 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MERKEZ ICERIK GORSELLERIN USTUNDE KALSIN
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta87-content {
        position:
            relative !important;

        z-index:
            5 !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 1024
|--------------------------------------------------------------------------
|
| 1024px görünüm için biraz daha hassas konumlandırma.
|--------------------------------------------------------------------------
*/

@media (min-width:1000px) and (max-width:1040px) {

    .contact-cta-v87
    .cta88-growth-visual {
        left:
            52px !important;

        transform:
            translateY(-50%)
            scale(.64)
            rotate(-4deg) !important;
    }


    .contact-cta-v87
    .cta88-target-visual {
        right:
            52px !important;

        transform:
            translateY(-50%)
            scale(.64)
            rotate(3deg) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V117 — TABLET / MOBILE HEADER
|--------------------------------------------------------------------------
*/

.header-mobile-toggle-v117,
.header-mobile-panel-v117 {
    display:
        none;
}


@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | HEADER
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            absolute !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        max-width:
            none !important;

        overflow:
            visible !important;

        z-index:
            100 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER INNER
    |--------------------------------------------------------------------------
    */

    .header-wrap {
        position:
            relative !important;

        width:
            calc(100% - 40px) !important;

        max-width:
            none !important;

        min-height:
            76px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        gap:
            18px !important;

        transform:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGO
    |--------------------------------------------------------------------------
    */

    .header .logo {
        position:
            relative !important;

        z-index:
            103 !important;

        flex:
            0 1 auto !important;

        width:
            auto !important;

        max-width:
            220px !important;

        margin:
            0 !important;

        transform:
            none !important;
    }


    .header .logo img {
        display:
            block !important;

        width:
            auto !important;

        max-width:
            100% !important;

        height:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DESKTOP ELEMENTLER
    |--------------------------------------------------------------------------
    */

    .header .nav,
    .header .nav-cta {
        display:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER
    |--------------------------------------------------------------------------
    */

    .header-mobile-toggle-v117 {
        position:
            relative;

        z-index:
            104;

        width:
            44px;

        height:
            44px;

        flex:
            0 0 44px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        padding:
            0;

        border:
            1px solid rgba(4,59,82,.12);

        border-radius:
            14px;

        background:
            rgba(255,255,255,.88);

        box-shadow:
            0 8px 24px rgba(14,29,37,.07);

        appearance:
            none;

        cursor:
            pointer;
    }


    .header-mobile-toggle-v117 span {
        display:
            block;

        width:
            18px;

        height:
            2px;

        border-radius:
            999px;

        background:
            #063E55;

        transition:
            .2s ease;
    }


    .header-mobile-toggle-v117.is-active
    span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .header-mobile-toggle-v117.is-active
    span:nth-child(2) {
        opacity:
            0;
    }


    .header-mobile-toggle-v117.is-active
    span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /*
    |--------------------------------------------------------------------------
    | DROPDOWN
    |--------------------------------------------------------------------------
    */

    .header-mobile-panel-v117 {
        position:
            absolute;

        z-index:
            102;

        top:
            calc(100% + 8px);

        left:
            20px;

        right:
            20px;

        display:
            block;

        padding:
            8px;

        border:
            1px solid rgba(4,59,82,.08);

        border-radius:
            20px;

        background:
            rgba(255,255,255,.97);

        box-shadow:
            0 24px 65px rgba(17,31,39,.15);

        backdrop-filter:
            blur(20px);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(-8px);

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
    }


    .header-mobile-panel-v117.is-open {
        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }


    /*
    |--------------------------------------------------------------------------
    | MENU LINKS
    |--------------------------------------------------------------------------
    */

    .header-mobile-nav-v117 {
        display:
            flex;

        flex-direction:
            column;

        gap:
            3px;
    }


    .header-mobile-link-v117 {
        min-height:
            48px;

        display:
            flex;

        align-items:
            center;

        padding:
            0 16px;

        border-radius:
            13px;

        color:
            #173F50 !important;

        text-decoration:
            none !important;

        font-family:
            var(--heading);

        font-size:
            13px;

        font-weight:
            650;
    }


    .header-mobile-link-v117:hover {
        background:
            #F4F7F8;
    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE CTA
    |--------------------------------------------------------------------------
    */

    .header-mobile-cta-v117 {
        min-height:
            52px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        margin-top:
            5px;

        padding:
            0 20px;

        border-radius:
            14px;

        background:
            #063E55;

        color:
            #FFFFFF !important;

        text-decoration:
            none !important;

        font-family:
            var(--heading);

        font-size:
            12px;

        font-weight:
            700;
    }


    .header-mobile-cta-v117 span {
        color:
            #00B1FF;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 768
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .header-wrap {
        width:
            calc(100% - 36px) !important;
    }


    .header .logo {
        max-width:
            210px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V118 — TABLET 768
|--------------------------------------------------------------------------
|
| 1. Sağdaki beyaz şeridi kaldır.
| 2. Header tam viewport.
| 3. Hero tam viewport.
| 4. Mobile menu dropdown değil modern popup.
|--------------------------------------------------------------------------
*/


@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | VIEWPORT SAFETY
    |--------------------------------------------------------------------------
    */

    html {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow-x:
            hidden !important;
    }


    body {
        position:
            relative !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow-x:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MAIN FULL WIDTH
    |--------------------------------------------------------------------------
    |
    | Önceki responsive sürümlerden gelen dar width / max-width
    | davranışlarını tablet bandında tamamen kaldırıyoruz.
    |--------------------------------------------------------------------------
    */

    main#top {
        position:
            relative !important;

        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER TRUE FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            absolute !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            auto !important;

        width:
            100vw !important;

        max-width:
            100vw !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        box-sizing:
            border-box !important;

        overflow:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO TRUE FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .hero {
        position:
            relative !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            100vw !important;

        max-width:
            100vw !important;

        min-width:
            100vw !important;

        margin-left:
            -50vw !important;

        margin-right:
            0 !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO BACKGROUND
    |--------------------------------------------------------------------------
    */

    .hero::before,
    .hero::after {
        width:
            100% !important;

        max-width:
            none !important;

        left:
            0 !important;

        right:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER INNER
    |--------------------------------------------------------------------------
    */

    .header-wrap {
        position:
            relative !important;

        width:
            calc(100% - 36px) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO INNER
    |--------------------------------------------------------------------------
    */

    .hero-inner {
        width:
            calc(100% - 36px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MODERN POPUP MENU
    |--------------------------------------------------------------------------
    |
    | Header altındaki dropdown yerine viewport üzerinde
    | bağımsız popup kart.
    |--------------------------------------------------------------------------
    */

    .header-mobile-panel-v117 {
        position:
            fixed !important;

        z-index:
            10002 !important;

        top:
            96px !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            min(
                430px,
                calc(100vw - 36px)
            ) !important;

        max-width:
            430px !important;

        margin:
            0 !important;

        padding:
            10px !important;

        border:
            1px solid rgba(5, 61, 83, .10) !important;

        border-radius:
            26px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.99),
                rgba(247,250,251,.97)
            ) !important;

        box-shadow:
            0 30px 90px rgba(4, 25, 35, .22),
            0 8px 26px rgba(4, 25, 35, .08) !important;

        backdrop-filter:
            blur(24px) !important;

        -webkit-backdrop-filter:
            blur(24px) !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        transform:
            translateX(-50%)
            translateY(-14px)
            scale(.965) !important;

        transform-origin:
            top center !important;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s cubic-bezier(.2,.8,.2,1) !important;
    }


    .header-mobile-panel-v117.is-open {
        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | BACKDROP
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    )::before {
        content:
            "" !important;

        position:
            fixed !important;

        z-index:
            9998 !important;

        inset:
            0 !important;

        display:
            block !important;

        background:
            rgba(10, 24, 31, .28) !important;

        backdrop-filter:
            blur(5px) !important;

        -webkit-backdrop-filter:
            blur(5px) !important;

        animation:
            headerPopupBackdropV118
            .2s ease both !important;
    }


    body:has(
        .header-mobile-panel-v117.is-open
    ) {
        overflow:
            hidden !important;
    }


    @keyframes headerPopupBackdropV118 {

        from {
            opacity:
                0;
        }

        to {
            opacity:
                1;
        }

    }


    /*
    |--------------------------------------------------------------------------
    | POPUP NAV
    |--------------------------------------------------------------------------
    */

    .header-mobile-nav-v117 {
        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            5px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP LINK
    |--------------------------------------------------------------------------
    */

    .header-mobile-link-v117 {
        position:
            relative !important;

        min-height:
            54px !important;

        display:
            flex !important;

        align-items:
            center !important;

        padding:
            0 18px !important;

        border:
            1px solid transparent !important;

        border-radius:
            16px !important;

        background:
            transparent !important;

        color:
            #123C4D !important;

        font-family:
            var(--heading) !important;

        font-size:
            14px !important;

        font-weight:
            650 !important;

        text-decoration:
            none !important;

        transition:
            background .18s ease,
            border-color .18s ease,
            transform .18s ease !important;
    }


    .header-mobile-link-v117::after {
        content:
            "↗";

        position:
            absolute;

        right:
            18px;

        top:
            50%;

        transform:
            translateY(-50%);

        color:
            #00AEEF;

        font-size:
            13px;

        opacity:
            .68;
    }


    .header-mobile-link-v117:hover {
        border-color:
            rgba(5,61,83,.07) !important;

        background:
            #F4F8F9 !important;

        transform:
            translateX(2px) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP CTA
    |--------------------------------------------------------------------------
    */

    .header-mobile-cta-v117 {
        min-height:
            58px !important;

        margin-top:
            7px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        padding:
            0 20px !important;

        border-radius:
            17px !important;

        background:
            linear-gradient(
                110deg,
                #006A99 0%,
                #003A52 100%
            ) !important;

        color:
            #FFFFFF !important;

        box-shadow:
            0 14px 30px rgba(0, 74, 106, .18) !important;

        font-size:
            13px !important;

        text-decoration:
            none !important;
    }


    .header-mobile-cta-v117 span {
        width:
            29px;

        height:
            29px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            50%;

        background:
            rgba(255,255,255,.12);

        color:
            #FFFFFF !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER MODERNIZE
    |--------------------------------------------------------------------------
    */

    .header-mobile-toggle-v117 {
        width:
            46px !important;

        height:
            46px !important;

        flex:
            0 0 46px !important;

        border:
            1px solid rgba(5,61,83,.10) !important;

        border-radius:
            15px !important;

        background:
            rgba(255,255,255,.88) !important;

        box-shadow:
            0 8px 25px rgba(7, 36, 48, .08) !important;

        backdrop-filter:
            blur(14px) !important;

        -webkit-backdrop-filter:
            blur(14px) !important;
    }


    .header-mobile-toggle-v117.is-active {
        background:
            #083E54 !important;
    }


    .header-mobile-toggle-v117.is-active span {
        background:
            #FFFFFF !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 768
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .header-wrap,
    .hero-inner {
        width:
            calc(100% - 32px) !important;
    }


    .header-mobile-panel-v117 {
        top:
            88px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V119 — MOBILE POPUP / NO BLUR
|--------------------------------------------------------------------------
|
| Menü modern popup olarak kalıyor.
| Sayfanın arkasındaki blur tamamen kaldırılıyor.
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | BACKGROUND OVERLAY
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    )::before {

        background:
            rgba(9, 24, 31, .16) !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP DA TAMAMEN NET
    |--------------------------------------------------------------------------
    */

    .header-mobile-panel-v117 {

        background:
            #FFFFFF !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        box-shadow:
            0 28px 70px rgba(5, 24, 33, .18),
            0 8px 22px rgba(5, 24, 33, .06) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER BUTTON DA NET KALSIN
    |--------------------------------------------------------------------------
    */

    .header-mobile-toggle-v117 {

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| V120 — MOBILE POPUP FINAL STACKING FIX
|--------------------------------------------------------------------------
|
| Problem:
| body::before overlay, header stacking context'inin üzerinde kaldığı için:
|
| - sayfa kararıyordu
| - popup linkleri tıklanamıyordu
|
| Çözüm:
| overlay tamamen kaldırılıyor.
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | OVERLAY TAMAMEN KALDIR
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    )::before {

        content:
            none !important;

        display:
            none !important;

        position:
            static !important;

        inset:
            auto !important;

        background:
            transparent !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        animation:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SAYFA KARARMASIN
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    ) {

        filter:
            none !important;

        opacity:
            1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER STACKING
    |--------------------------------------------------------------------------
    |
    | Popup'ın tüm sayfanın üzerinde olduğundan emin oluyoruz.
    |--------------------------------------------------------------------------
    */

    .header {

        z-index:
            20000 !important;

        isolation:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP
    |--------------------------------------------------------------------------
    */

    .header-mobile-panel-v117 {

        z-index:
            20002 !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;

        filter:
            none !important;

        background:
            #FFFFFF !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    .header-mobile-panel-v117.is-open {

        z-index:
            20002 !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        filter:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER / CLOSE
    |--------------------------------------------------------------------------
    */

    .header-mobile-toggle-v117 {

        position:
            relative !important;

        z-index:
            20003 !important;

        pointer-events:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MENU
    |--------------------------------------------------------------------------
    */

    .header-mobile-nav-v117 {

        position:
            relative !important;

        z-index:
            1 !important;

        pointer-events:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LINKS
    |--------------------------------------------------------------------------
    */

    .header-mobile-link-v117,
    .header-mobile-cta-v117 {

        position:
            relative !important;

        z-index:
            2 !important;

        pointer-events:
            auto !important;

        cursor:
            pointer !important;
    }


    .header-mobile-link-v117::after {

        pointer-events:
            none !important;
    }


    .header-mobile-cta-v117 span {

        pointer-events:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| V121 — TABLET / 768
|--------------------------------------------------------------------------
|
| 1. Header sticky
| 2. Hizmetlerin tamamı tek kolon
| 3. Alt CTA yan görselleri gizli
|
| 1024px ve desktop etkilenmez.
|--------------------------------------------------------------------------
*/


@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | STICKY HEADER
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            sticky !important;

        top:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        z-index:
            20000 !important;

        background:
            rgba(255,255,255,.96) !important;

        box-shadow:
            0 1px 0 rgba(8,55,75,.07) !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    .header-wrap {
        min-height:
            74px !important;

        width:
            calc(100% - 32px) !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO
    |--------------------------------------------------------------------------
    |
    | Header artık absolute olmadığı için hero'nun ekstra header
    | telafi boşluğunu azaltıyoruz.
    |--------------------------------------------------------------------------
    */

    .hero {
        padding-top:
            58px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICES — TEK KOLON
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        grid-auto-columns:
            minmax(0, 1fr) !important;

        width:
            100% !important;

        max-width:
            100% !important;

        gap:
            20px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | TUM HIZMET KARTLARI TAM SATIR
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-grid
    > .sv61-card {

        grid-column:
            1 / -1 !important;

        grid-row:
            auto !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | WIDE / SMALL DESKTOP SPAN'LARI IPTAL
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-wide,

    .services-v61
    .sv61-small,

    .services-v61
    .sv61-meta,

    .services-v61
    .sv61-social {

        grid-column:
            1 / -1 !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SERVICE VISUAL SAFETY
    |--------------------------------------------------------------------------
    */

    .services-v61
    .sv61-visual {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | EN ALT CTA — YAN GORSELLERI GIZLE
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta88-growth-visual,

    .contact-cta-v87
    .cta88-target-visual {

        display:
            none !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CTA MERKEZ ICERIK
    |--------------------------------------------------------------------------
    |
    | Yan görseller kalkınca merkez içerik tam dengeli kalsın.
    |--------------------------------------------------------------------------
    */

    .contact-cta-v87
    .cta87-content {

        width:
            calc(100% - 40px) !important;

        max-width:
            620px !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT TABLET 700–820
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .services-v61
    .sv61-grid {
        gap:
            18px !important;
    }


    .contact-cta-v87
    .cta87-content {
        max-width:
            560px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V122 — TABLET HEADER STICKY FIX
|--------------------------------------------------------------------------
|
| Sadece max 900px:
|
| - Header gerçekten sticky
| - Beyaz header bandı kaldırıldı
| - Hero gradient header arkasından devam ediyor
| - overflow:hidden kaynaklı sticky problemi kaldırıldı
|--------------------------------------------------------------------------
*/


@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | STICKY'NIN CALISMASI ICIN SCROLL CONTAINER DUZELTMESI
    |--------------------------------------------------------------------------
    |
    | overflow-x:hidden sticky davranışını bozabiliyor.
    | clip yatay taşmayı engeller ama scroll container oluşturmaz.
    |--------------------------------------------------------------------------
    */

    html {
        overflow-x:
            clip !important;

        overflow-y:
            visible !important;
    }


    body {
        overflow-x:
            clip !important;

        overflow-y:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER — GERCEK STICKY
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            sticky !important;

        position:
            -webkit-sticky !important;

        top:
            0 !important;

        inset-block-start:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        align-self:
            start !important;

        transform:
            none !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        border:
            0 !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        overflow:
            visible !important;

        z-index:
            20000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER IC ALANI DA SEFFAF
    |--------------------------------------------------------------------------
    */

    .header-wrap {
        position:
            relative !important;

        width:
            calc(100% - 32px) !important;

        max-width:
            none !important;

        min-height:
            74px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        border:
            0 !important;

        transform:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO HEADER'IN ARKASINA GIRER
    |--------------------------------------------------------------------------
    |
    | Sticky header normal akışta yer kaplar.
    | Hero'yu header yüksekliği kadar yukarı alarak gradient'i
    | header'ın arkasında devam ettiriyoruz.
    |--------------------------------------------------------------------------
    */

    .hero {
        margin-top:
            -74px !important;

        padding-top:
            132px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER LOGO / MENU ONDE
    |--------------------------------------------------------------------------
    */

    .header .logo {
        position:
            relative !important;

        z-index:
            20002 !important;
    }


    .header-mobile-toggle-v117 {
        position:
            relative !important;

        z-index:
            20003 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP STICKY HEADER'DAN ETKILENMESIN
    |--------------------------------------------------------------------------
    */

    .header-mobile-panel-v117 {
        z-index:
            20005 !important;
    }

}


/*
|--------------------------------------------------------------------------
| 768 EXACT REFINEMENT
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .header {
        min-height:
            74px !important;
    }


    .hero {
        margin-top:
            -74px !important;

        padding-top:
            128px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V123 — CONTACT + ABOUT TABLET HEADER
|--------------------------------------------------------------------------
|
| Ana sayfadaki çalışan V122 davranışı iki iç sayfada
| kesinleştiriliyor.
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | PAGE WRAPPERS — STICKY SAFETY
    |--------------------------------------------------------------------------
    */

    .contact-page-v94,
    .about-page-v97 {

        overflow-x:
            clip !important;

        overflow-y:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | CONTACT + ABOUT HEADER
    |--------------------------------------------------------------------------
    */

    .contact-page-v94 .header,
    .about-page-v97 .header {

        position:
            sticky !important;

        position:
            -webkit-sticky !important;

        top:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        transform:
            none !important;

        overflow:
            visible !important;

        z-index:
            20000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER INNER
    |--------------------------------------------------------------------------
    */

    .contact-page-v94 .header-wrap,
    .about-page-v97 .header-wrap {

        position:
            relative !important;

        width:
            calc(100% - 32px) !important;

        max-width:
            none !important;

        min-height:
            74px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        transform:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DESKTOP NAV KAPALI
    |--------------------------------------------------------------------------
    */

    .contact-page-v94 .header .nav,
    .contact-page-v94 .header .nav-cta,

    .about-page-v97 .header .nav,
    .about-page-v97 .header .nav-cta {

        display:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER
    |--------------------------------------------------------------------------
    */

    .contact-page-v94
    .header-mobile-toggle-v117,

    .about-page-v97
    .header-mobile-toggle-v117 {

        display:
            flex !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP
    |--------------------------------------------------------------------------
    |
    | Ana sayfadaki V120 modern popup davranışı kullanılır.
    |--------------------------------------------------------------------------
    */

    .contact-page-v94
    .header-mobile-panel-v117,

    .about-page-v97
    .header-mobile-panel-v117 {

        z-index:
            20005 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGO
    |--------------------------------------------------------------------------
    */

    .contact-page-v94 .header .logo,
    .about-page-v97 .header .logo {

        position:
            relative !important;

        z-index:
            20002 !important;

        margin:
            0 !important;

        transform:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 768
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .contact-page-v94 .header-wrap,
    .about-page-v97 .header-wrap {

        width:
            calc(100% - 32px) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V124 — MOBILE POPUP ARCHITECTURE FIX
|--------------------------------------------------------------------------
|
| Popup artık JS ile body altına taşınacak.
|
| Sonuç:
| - sticky header kaybolmaz
| - popup parent tarafından kesilmez
| - popup linkleri tıklanabilir
| - background kararmaz
| - scroll-lock kaldırılır
|--------------------------------------------------------------------------
*/


@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | PAGE / BODY
    |--------------------------------------------------------------------------
    */

    html {
        overflow-x:
            clip !important;

        overflow-y:
            visible !important;
    }


    body {
        overflow-x:
            clip !important;

        overflow-y:
            auto !important;

        filter:
            none !important;

        opacity:
            1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MENU ACIKKEN BODY'YI KILITLEME
    |--------------------------------------------------------------------------
    |
    | V118'den kalan overflow:hidden davranışını öldürüyoruz.
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    ) {
        overflow-x:
            clip !important;

        overflow-y:
            auto !important;

        filter:
            none !important;

        opacity:
            1 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ESKI OVERLAY TAMAMEN YOK
    |--------------------------------------------------------------------------
    */

    body:has(
        .header-mobile-panel-v117.is-open
    )::before {
        content:
            none !important;

        display:
            none !important;

        position:
            static !important;

        background:
            transparent !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER — DAIMA GORUNUR / STICKY
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            sticky !important;

        position:
            -webkit-sticky !important;

        top:
            0 !important;

        left:
            auto !important;

        right:
            auto !important;

        display:
            block !important;

        width:
            100% !important;

        max-width:
            100% !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            none !important;

        filter:
            none !important;

        overflow:
            visible !important;

        isolation:
            isolate !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        z-index:
            2147482000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER ICERIGI
    |--------------------------------------------------------------------------
    */

    .header-wrap {
        position:
            relative !important;

        z-index:
            2 !important;

        overflow:
            visible !important;

        transform:
            none !important;

        filter:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGO
    |--------------------------------------------------------------------------
    */

    .header .logo {
        position:
            relative !important;

        z-index:
            4 !important;

        opacity:
            1 !important;

        visibility:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER / CLOSE BUTTON
    |--------------------------------------------------------------------------
    */

    .header-mobile-toggle-v117 {
        position:
            relative !important;

        z-index:
            2147482500 !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP — ARTIK BODY CHILD
    |--------------------------------------------------------------------------
    */

    body
    > .header-mobile-panel-v117 {
        position:
            fixed !important;

        top:
            92px !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            min(
                430px,
                calc(100vw - 36px)
            ) !important;

        max-width:
            430px !important;

        margin:
            0 !important;

        padding:
            10px !important;

        border:
            1px solid rgba(5,61,83,.10) !important;

        border-radius:
            26px !important;

        background:
            #FFFFFF !important;

        box-shadow:
            0 28px 75px rgba(6,30,40,.20),
            0 8px 24px rgba(6,30,40,.07) !important;

        opacity:
            0 !important;

        visibility:
            hidden !important;

        pointer-events:
            none !important;

        filter:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        transform:
            translateX(-50%)
            translateY(-12px)
            scale(.97) !important;

        transform-origin:
            top center !important;

        transition:
            opacity .2s ease,
            transform .2s cubic-bezier(.2,.8,.2,1),
            visibility .2s ease !important;

        z-index:
            2147483000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP OPEN
    |--------------------------------------------------------------------------
    */

    body
    > .header-mobile-panel-v117.is-open {
        display:
            block !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | NAV
    |--------------------------------------------------------------------------
    */

    body
    > .header-mobile-panel-v117
    .header-mobile-nav-v117 {
        position:
            relative !important;

        z-index:
            1 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            5px !important;

        pointer-events:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LINKS — KESIN TIKLANABILIR
    |--------------------------------------------------------------------------
    */

    body
    > .header-mobile-panel-v117
    .header-mobile-link-v117,

    body
    > .header-mobile-panel-v117
    .header-mobile-cta-v117 {
        position:
            relative !important;

        z-index:
            2 !important;

        pointer-events:
            auto !important;

        cursor:
            pointer !important;

        touch-action:
            manipulation !important;
    }


    body
    > .header-mobile-panel-v117
    .header-mobile-link-v117::after,

    body
    > .header-mobile-panel-v117
    .header-mobile-cta-v117 span {
        pointer-events:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 768
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    body
    > .header-mobile-panel-v117 {
        top:
            88px !important;

        width:
            min(
                420px,
                calc(100vw - 32px)
            ) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V125 — MOBILE / TABLET HEADER
|--------------------------------------------------------------------------
|
| CSS sticky bazı page wrapper'larında overflow / transform nedeniyle
| güvenilir çalışmıyor.
|
| Bu breakpoint'te header viewport'a sabitleniyor.
| Kullanıcı açısından sticky davranışı elde ediliyor.
|
| Popup V124 yapısına dokunulmuyor.
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {


    /*
    |--------------------------------------------------------------------------
    | VIEWPORT
    |--------------------------------------------------------------------------
    */

    html,
    body {
        overflow-x:
            clip !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER — DAIMA USTTE
    |--------------------------------------------------------------------------
    */

    .header {
        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            auto !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-height:
            74px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            none !important;

        filter:
            none !important;

        overflow:
            visible !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        z-index:
            2147482000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HEADER INNER
    |--------------------------------------------------------------------------
    */

    .header-wrap {
        position:
            relative !important;

        width:
            calc(100% - 32px) !important;

        max-width:
            none !important;

        min-height:
            74px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        background:
            transparent !important;

        border:
            0 !important;

        box-shadow:
            none !important;

        transform:
            none !important;

        overflow:
            visible !important;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGO + TOGGLE
    |--------------------------------------------------------------------------
    */

    .header .logo {
        position:
            relative !important;

        z-index:
            2147482100 !important;
    }


    .header-mobile-toggle-v117 {
        position:
            relative !important;

        z-index:
            2147482500 !important;

        pointer-events:
            auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | ANA SAYFA HERO
    |--------------------------------------------------------------------------
    |
    | V122'de sticky normal akışta yer kapladığı için -74px margin
    | kullanmıştık.
    |
    | Header artık fixed olduğu için bunu kaldırıyoruz.
    |--------------------------------------------------------------------------
    */

    .hero {
        margin-top:
            0 !important;

        padding-top:
            128px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | IC SAYFALAR
    |--------------------------------------------------------------------------
    |
    | Header fixed olduğu için içerik header'ın altına girmesin.
    |--------------------------------------------------------------------------
    */

    .contact-page-v94,
    .about-page-v97 {
        padding-top:
            74px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | IC SAYFALARDA HEADER BU PADDING'DEN ETKILENMESIN
    |--------------------------------------------------------------------------
    */

    .contact-page-v94 .header,
    .about-page-v97 .header {
        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        width:
            100% !important;

        margin:
            0 !important;

        z-index:
            2147482000 !important;
    }


    /*
    |--------------------------------------------------------------------------
    | POPUP
    |--------------------------------------------------------------------------
    |
    | V124 body portal popup aynen korunur.
    |--------------------------------------------------------------------------
    */

    body
    > .header-mobile-panel-v117 {
        z-index:
            2147483000 !important;
    }

}


/*
|--------------------------------------------------------------------------
| EXACT 768
|--------------------------------------------------------------------------
*/

@media (min-width:700px) and (max-width:820px) {

    .header,
    .header-wrap {
        min-height:
            74px !important;
    }


    .hero {
        padding-top:
            126px !important;
    }

}


/*
|--------------------------------------------------------------------------
| V126 — MOBILE HERO DASHBOARD
|--------------------------------------------------------------------------
|
| Problem:
| Desktop dashboard mobil genişlikte responsive olmaya çalışınca
| iç kartlar aşırı daralıyor ve dashboard çok uzuyor.
|
| Çözüm:
| Dashboard desktop oranında tutulup mobilde tek parça küçültülüyor.
|--------------------------------------------------------------------------
*/


@media (max-width:600px) {


    /*
    |--------------------------------------------------------------------------
    | PRODUCT STAGE
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage {
        position:
            relative !important;

        width:
            calc(100vw - 28px) !important;

        max-width:
            397px !important;

        height:
            340px !important;

        margin:
            44px auto 0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | BROWSER
    |--------------------------------------------------------------------------
    |
    | Desktop canvas genişliği korunuyor.
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    > .browser {

        position:
            absolute !important;

        top:
            0 !important;

        left:
            50% !important;

        width:
            860px !important;

        min-width:
            860px !important;

        max-width:
            none !important;

        margin:
            0 !important;

        transform:
            translateX(-50%)
            scale(.43) !important;

        transform-origin:
            top center !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DASHBOARD ANA CANVAS
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    .dashboard {

        width:
            100% !important;

        min-width:
            820px !important;

        max-width:
            none !important;

        display:
            grid !important;

        grid-template-columns:
            74px
            minmax(0, 1fr) !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | SIDEBAR
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    .dash-sidebar {

        width:
            74px !important;

        min-width:
            74px !important;

        max-width:
            74px !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MAIN
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    .dash-main {

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FLOATING CARDS
    |--------------------------------------------------------------------------
    |
    | Mobilde dashboard yeterince detaylı olduğu için floating KPI
    | kartlarını kaldırıyoruz. Bunlar küçük ekranda kompozisyonu bozuyor.
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    > .float-card {

        display:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| 390–460px
|--------------------------------------------------------------------------
*/

@media (min-width:390px) and (max-width:460px) {

    .hero
    .product-stage {

        height:
            350px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.445) !important;
    }

}


/*
|--------------------------------------------------------------------------
| 360–389px
|--------------------------------------------------------------------------
*/

@media (min-width:360px) and (max-width:389px) {

    .hero
    .product-stage {

        height:
            326px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.405) !important;
    }

}


/*
|--------------------------------------------------------------------------
| <=359px
|--------------------------------------------------------------------------
*/

@media (max-width:359px) {

    .hero
    .product-stage {

        height:
            300px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.37) !important;
    }

}



/*
|--------------------------------------------------------------------------
| V127 — MOBILE DASHBOARD TRUE DESKTOP RESTORE
|--------------------------------------------------------------------------
|
| Bu blok otomatik üretildi.
|
| Desktop dashboard kuralları 600px altında tekrar uygulanıyor.
| Böylece viewport mobil olsa bile dashboard'un içi desktop
| kompozisyonunda kalıyor.
|--------------------------------------------------------------------------
*/

@media (max-width:600px) {

.hero .product-stage h1,
.hero .product-stage h2,
.hero .product-stage h3,
.hero .product-stage .logo,
.hero .product-stage .nav,
.hero .product-stage .nav-cta,
.hero .product-stage .btn,
.hero .product-stage .section-tag,
.hero .product-stage .feature-link {

    font-family: var(--heading) !important;

}

.hero .product-stage .container {

    width: min(
            calc(100% - 48px),
            var(--container)
        ) !important;

    margin-inline: auto !important;

}

.hero .product-stage .hero {

    overflow: hidden !important;

    padding: 92px
        0
        0 !important;

    background: radial-gradient(
            circle at 50% 25%,
            rgba(0,106,153,.10),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #FBFDFE 55%,
            #F3F9FB 100%
        ) !important;

}

.hero .product-stage .hero-inner {

    text-align: center !important;

}

.hero .product-stage .hero-copy {

    max-width: 840px !important;

    margin-inline: auto !important;

}

.hero .product-stage .hero-eyebrow {

    width: fit-content !important;

    margin: 0 auto
        20px !important;

    padding: 7px 11px !important;

    border: 1px solid
        #DDECEF !important;

    border-radius: 999px !important;

    background: rgba(255,255,255,.82) !important;

    color: var(--blue) !important;

    font-family: var(--heading) !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: .03em !important;

}

.hero .product-stage .hero h1 {

    margin: 0
        auto
        22px !important;

    max-width: 850px !important;

    color: #092F41 !important;

    font-size: clamp(
            54px,
            5.6vw,
            82px
        ) !important;

    line-height: .99 !important;

    letter-spacing: -.058em !important;

    font-weight: 800 !important;

}

.hero .product-stage .hero-copy > p {

    max-width: 690px !important;

    margin: 0 auto
        29px !important;

    color: #607883 !important;

    font-size: 16px !important;

    line-height: 1.75 !important;

}

.hero .product-stage .hero-buttons {

    display: flex !important;
    justify-content: center !important;

    gap: 11px !important;

}

.hero .product-stage .btn {

    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    padding: 0
        18px !important;

    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

}

.hero .product-stage .btn-dark {

    background: var(--navy) !important;
    color: #fff !important;

}

.hero .product-stage .btn-dark span {

    opacity: .75 !important;

}

.hero .product-stage .btn-light {

    border: 1px solid #DDE7EB !important;

    background: #fff !important;

    color: #173746 !important;

}

.hero .product-stage .hero-mini-proof {

    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 24px !important;

    margin-top: 27px !important;

    color: #84949B !important;

    font-size: 11px !important;

}

.hero .product-stage .hero-mini-proof span::before {

    content: "✓" !important;

    margin-right: 6px !important;

    color: var(--blue) !important;

}

.hero .product-stage .browser-header {

    min-height: 43px !important;

    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    padding: 0
        16px !important;

    border-bottom: 1px solid #EDF2F4 !important;

    background: #FAFCFD !important;

}

.hero .product-stage .browser-dots {

    display: flex !important;
    gap: 5px !important;

}

.hero .product-stage .browser-dots i {

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;

    background: #C7D4D9 !important;

}

.hero .product-stage .browser-address {

    width: 300px !important;

    margin-inline: auto !important;

    padding: 5px
        12px !important;

    border: 1px solid #E7EEF1 !important;

    border-radius: 7px !important;

    background: #fff !important;

    color: #9AABB2 !important;

    font-size: 9px !important;

}

.hero .product-stage .dashboard {

    display: grid !important;

    grid-template-columns: 66px 1fr !important;

    text-align: left !important;

    min-height: 560px !important;

}

.hero .product-stage .dash-sidebar {

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 16px !important;

    padding-top: 23px !important;

    border-right: 1px solid #EDF2F4 !important;

    background: #FCFDFE !important;

}

.hero .product-stage .dash-brand {

    width: 32px !important;
    height: 32px !important;

    display: grid !important;
    place-items: center !important;

    margin-bottom: 12px !important;

    border-radius: 9px !important;

    background: var(--blue) !important;

    color: #fff !important;

    font-family: var(--heading) !important;
    font-weight: 800 !important;

}

.hero .product-stage .dash-menu {

    width: 26px !important;
    height: 26px !important;

    border-radius: 8px !important;

    background: #EFF4F6 !important;

}

.hero .product-stage .dash-menu.active {

    background: #E2F2F7 !important;

}

.hero .product-stage .dash-main {

    padding: 28px !important;

}

.hero .product-stage .dash-top {

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

}

.hero .product-stage .dash-top small {

    color: #93A3AA !important;

    font-size: 9px !important;

    font-weight: 600 !important;

}

.hero .product-stage .dash-top h3 {

    margin: 4px 0 0 !important;

    color: var(--navy) !important;

    font-size: 19px !important;

}

.hero .product-stage .period {

    padding: 6px
        9px !important;

    border: 1px solid #E4ECEF !important;

    border-radius: 7px !important;

    color: #7C9099 !important;

    font-size: 9px !important;

}

.hero .product-stage .kpi-grid {

    display: grid !important;

    grid-template-columns: repeat(4,1fr) !important;

    gap: 12px !important;

    margin-top: 25px !important;

}

.hero .product-stage .kpi {

    padding: 17px !important;

    border: 1px solid #E8EFF2 !important;

    border-radius: 13px !important;

    background: #fff !important;

}

.hero .product-stage .kpi span {

    display: block !important;

    color: #80939B !important;

    font-size: 9px !important;

}

.hero .product-stage .kpi strong {

    display: block !important;

    margin: 8px 0 4px !important;

    color: var(--navy) !important;

    font-family: var(--heading) !important;

    font-size: 24px !important;

}

.hero .product-stage .kpi small {

    color: #93A1A7 !important;

    font-size: 8px !important;

}

.hero .product-stage .kpi .up {

    color: #16956A !important;

}

.hero .product-stage .dashboard-grid {

    display: grid !important;

    grid-template-columns: 1.65fr 1fr !important;

    gap: 13px !important;

    margin-top: 13px !important;

}

.hero .product-stage .chart-card,
.hero .product-stage .lead-card {

    padding: 18px !important;

    border: 1px solid #E8EFF2 !important;

    border-radius: 14px !important;

    background: #fff !important;

}

.hero .product-stage .card-heading {

    display: flex !important;
    justify-content: space-between !important;

    gap: 10px !important;

}

.hero .product-stage .card-heading strong {

    display: block !important;

    color: var(--navy) !important;

    font-family: var(--heading) !important;

    font-size: 11px !important;

}

.hero .product-stage .card-heading small,
.hero .product-stage .card-heading > span {

    color: #98A7AD !important;

    font-size: 8px !important;

}

.hero .product-stage .real-chart {

    position: relative !important;

    height: 220px !important;

    margin-top: 16px !important;

}

.hero .product-stage .real-chart svg {

    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;
    height: 100% !important;

}

.hero .product-stage .real-chart .line {

    fill: none !important;

    stroke: var(--blue) !important;

    stroke-width: 4 !important;

    stroke-linecap: round !important;

}

.hero .product-stage .real-chart .area {

    fill: url(#areaGradient) !important;

}

.hero .product-stage .chart-grid-lines {

    position: absolute !important;

    inset: 0 !important;

    display: grid !important;

    grid-template-rows: repeat(4,1fr) !important;

}

.hero .product-stage .chart-grid-lines i {

    border-bottom: 1px solid #EEF3F5 !important;

}

.hero .product-stage .chart-legend {

    display: flex !important;

    gap: 17px !important;

    color: #84959C !important;

    font-size: 8px !important;

}

.hero .product-stage .chart-legend span {

    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

}

.hero .product-stage .dot {

    width: 6px !important;
    height: 6px !important;

    border-radius: 50% !important;

}

.hero .product-stage .google {

    background: var(--blue) !important;

}

.hero .product-stage .seo {

    background: #70B7D0 !important;

}

.hero .product-stage .social {

    background: #B4D6E2 !important;

}

.hero .product-stage .lead-list {

    display: grid !important;

    gap: 9px !important;

    margin-top: 18px !important;

}

.hero .product-stage .lead {

    display: grid !important;

    grid-template-columns: 32px 1fr auto !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 10px 0 !important;

    border-bottom: 1px solid #EFF3F5 !important;

}

.hero .product-stage .avatar {

    width: 32px !important;
    height: 32px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    background: #EAF5F8 !important;

    color: var(--blue) !important;

    font-size: 8px !important;
    font-weight: 700 !important;

}

.hero .product-stage .lead strong {

    display: block !important;

    color: var(--navy) !important;

    font-size: 9px !important;

}

.hero .product-stage .lead small {

    color: #99A7AD !important;

    font-size: 7px !important;

}

.hero .product-stage .lead b {

    padding: 4px
        6px !important;

    border-radius: 999px !important;

    background: #F1F7F9 !important;

    color: #6F858E !important;

    font-size: 7px !important;

    font-weight: 600 !important;

}

.hero .product-stage .channel-row {

    display: grid !important;

    grid-template-columns: repeat(4,1fr) !important;

    gap: 10px !important;

    margin-top: 13px !important;

}

.hero .product-stage .channel-row div {

    padding: 12px 13px !important;

    border-radius: 10px !important;

    background: #F8FAFB !important;

}

.hero .product-stage .channel-row span {

    display: block !important;

    color: #8A9AA1 !important;

    font-size: 8px !important;

}

.hero .product-stage .channel-row strong {

    display: block !important;

    margin-top: 3px !important;

    color: var(--navy) !important;

    font-family: var(--heading) !important;

    font-size: 12px !important;

}

.hero .product-stage .float-card-left {

    left: -46px !important;
    top: 72px !important;

}

.hero .product-stage .float-card-right {

    right: -42px !important;
    top: 144px !important;

}

.hero .product-stage .hero {

    padding: 30px
        0
        0 !important;

    overflow: visible !important;

    background: #EEF6F9 !important;

}

.hero .product-stage .hero-inner {

    position: relative !important;

    padding: 72px
        68px
        0 !important;

    overflow: visible !important;

    border: 1px solid
        rgba(
            0,
            84,
            123,
            .09
        ) !important;

    border-radius: 34px !important;

    background: radial-gradient(
            circle
            at
            85%
            20%,
            rgba(
                0,
                125,
                178,
                .16
            ),
            transparent
            28%
        ),
        radial-gradient(
            circle
            at
            14%
            55%,
            rgba(
                129,
                196,
                219,
                .10
            ),
            transparent
            32%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FCFD 60%,
            #EEF7FA 100%
        ) !important;

    box-shadow: inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .9
        ),
        0 24px 70px
        rgba(
            0,
            56,
            82,
            .055
        ) !important;

}

.hero .product-stage .hero-inner::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    border-radius: inherit !important;

    pointer-events: none !important;

    opacity: .28 !important;

    background-image: radial-gradient(
            rgba(
                0,
                84,
                123,
                .15
            )
            .65px,
            transparent
            .65px
        ) !important;

    background-size: 22px 22px !important;

    mask-image: linear-gradient(
            90deg,
            transparent 12%,
            black 50%,
            transparent 92%
        ) !important;

}

.hero .product-stage .hero-copy {

    position: relative !important;

    z-index: 3 !important;

    max-width: 790px !important;

}

.hero .product-stage .hero-eyebrow {

    margin-bottom: 17px !important;

    padding: 6px
        10px !important;

    background: rgba(
            255,
            255,
            255,
            .84
        ) !important;

    border-color: rgba(
            0,
            84,
            123,
            .11
        ) !important;

    box-shadow: 0 7px 20px
        rgba(
            0,
            56,
            82,
            .035
        ) !important;

    font-size: 10px !important;

}

.hero .product-stage .hero h1 {

    max-width: 790px !important;

    margin-bottom: 19px !important;

    font-size: clamp(
            50px,
            4.75vw,
            68px
        ) !important;

    line-height: 1.01 !important;

    letter-spacing: -.052em !important;

}

.hero .product-stage .hero-copy > p {

    max-width: 650px !important;

    margin-bottom: 25px !important;

    font-size: 14px !important;

    line-height: 1.74 !important;

}

.hero .product-stage .hero-buttons {

    gap: 9px !important;

}

.hero .product-stage .btn {

    min-height: 44px !important;

    padding: 0
        17px !important;

    font-size: 11px !important;

}

.hero .product-stage .btn-dark {

    background: #06394F !important;

    box-shadow: 0 10px 22px
        rgba(
            0,
            56,
            82,
            .14
        ) !important;

}

.hero .product-stage .btn-light {

    background: rgba(
            255,
            255,
            255,
            .88
        ) !important;

    border-color: rgba(
            0,
            84,
            123,
            .10
        ) !important;

}

.hero .product-stage .hero-mini-proof {

    gap: 21px !important;

    margin-top: 23px !important;

    font-size: 9px !important;

}

.hero .product-stage .browser-header {

    min-height: 39px !important;

}

.hero .product-stage .browser-address {

    width: 270px !important;

    font-size: 8px !important;

}

.hero .product-stage .dashboard {

    grid-template-columns: 60px
        1fr !important;

    min-height: 475px !important;

}

.hero .product-stage .dash-sidebar {

    padding-top: 20px !important;

}

.hero .product-stage .dash-brand {

    width: 29px !important;

    height: 29px !important;

}

.hero .product-stage .dash-menu {

    width: 23px !important;

    height: 23px !important;

}

.hero .product-stage .dash-main {

    padding: 24px !important;

}

.hero .product-stage .dash-top h3 {

    font-size: 17px !important;

}

.hero .product-stage .kpi-grid {

    gap: 10px !important;

    margin-top: 20px !important;

}

.hero .product-stage .kpi {

    padding: 14px !important;

}

.hero .product-stage .kpi strong {

    margin: 6px
        0
        3px !important;

    font-size: 21px !important;

}

.hero .product-stage .dashboard-grid {

    grid-template-columns: 1.72fr
        .88fr !important;

    gap: 10px !important;

    margin-top: 10px !important;

}

.hero .product-stage .chart-card,
.hero .product-stage .lead-card {

    padding: 15px !important;

    border-radius: 12px !important;

}

.hero .product-stage .real-chart {

    height: 178px !important;

}

.hero .product-stage .channel-row {

    gap: 8px !important;

    margin-top: 10px !important;

}

.hero .product-stage .channel-row div {

    padding: 10px
        11px !important;

}

.hero .product-stage .float-card-left {

    left: -28px !important;

    top: 65px !important;

}

.hero .product-stage .float-card-right {

    right: -28px !important;

    top: 120px !important;

}

.hero .product-stage .hero {

    padding: 76px
        0
        0 !important;

    overflow: hidden !important;

    background: #FFFFFF !important;

}

.hero .product-stage .hero-inner {

    position: relative !important;

    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

}

.hero .product-stage .hero-inner::before {

    display: none !important;

}

.hero .product-stage .hero-copy {

    position: relative !important;

    z-index: 5 !important;

    max-width: 810px !important;

    margin-inline: auto !important;

}

.hero .product-stage .hero-eyebrow {

    margin-bottom: 18px !important;

    background: #F7FAFB !important;

    border: 1px solid
        #E3ECEF !important;

    box-shadow: none !important;

}

.hero .product-stage .hero h1 {

    max-width: 800px !important;

    margin-bottom: 19px !important;

}

.hero .product-stage .hero-copy > p {

    max-width: 665px !important;

}

.hero .product-stage .hero-mini-proof {

    margin-bottom: 0 !important;

}

.hero .product-stage .float-card-left {

    left: -14px !important;

}

.hero .product-stage .float-card-right {

    right: -14px !important;

}

.hero .product-stage .hero {

    position: relative !important;

    padding: 74px
        0
        0 !important;

    overflow: hidden !important;

    background: linear-gradient(
            180deg,
            #F3F8FB 0%,
            #F8FBFD 20%,
            #FFFFFF 52%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    content: "" !important;

    position: absolute !important;

    inset: 0
        0
        auto
        0 !important;

    height: 560px !important;

    pointer-events: none !important;

    background: radial-gradient(
            circle at 50% 16%,
            rgba(0, 106, 153, .08),
            transparent 31%
        ),
        radial-gradient(
            circle at 16% 24%,
            rgba(206, 223, 233, .62),
            transparent 18%
        ),
        radial-gradient(
            circle at 84% 26%,
            rgba(213, 228, 238, .68),
            transparent 19%
        ),
        linear-gradient(
            180deg,
            rgba(242, 247, 250, .96) 0%,
            rgba(247, 251, 253, .78) 48%,
            rgba(255, 255, 255, 0) 100%
        ) !important;

}

.hero .product-stage .hero::after {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    opacity: .14 !important;

    background-image: radial-gradient(
            rgba(0, 84, 123, .13) .65px,
            transparent .65px
        ) !important;

    background-size: 22px 22px !important;

    mask-image: linear-gradient(
            180deg,
            black 0%,
            black 48%,
            transparent 82%
        ) !important;

}

.hero .product-stage .hero-copy {

    position: relative !important;
    z-index: 5 !important;

}

.hero .product-stage .hero-copy::before,
.hero .product-stage .hero-copy::after {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    width: 210px !important;

    height: 108px !important;

    border: 1px solid
        rgba(219, 232, 238, .82) !important;

    border-radius: 999px !important;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(243, 248, 251, .96)
        ) !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.96),
        0 18px 42px rgba(0,47,70,.045),
        42px -10px 0 6px rgba(250,253,255,.96),
        -26px -6px 0 1px rgba(245,250,252,.96) !important;

    filter: blur(.2px) !important;

    opacity: .96 !important;

    pointer-events: none !important;

}

.hero .product-stage .hero-copy::before {

    left: -255px !important;

    top: 202px !important;

    transform: rotate(-6deg)
        scale(.96) !important;

}

.hero .product-stage .hero-copy::after {

    right: -255px !important;

    top: 226px !important;

    transform: rotate(5deg)
        scale(1) !important;

}

.hero .product-stage .hero-eyebrow {

    background: rgba(255,255,255,.88) !important;

    border: 1px solid
        rgba(0,84,123,.10) !important;

}

.hero .product-stage .hero h1 {

    max-width: 790px !important;

    margin-bottom: 18px !important;

    font-size: clamp(
            50px,
            4.85vw,
            68px
        ) !important;

    line-height: 1.02 !important;

}

.hero .product-stage .hero-copy > p {

    max-width: 680px !important;

    color: #6E838C !important;

}

.hero .product-stage .hero-mini-proof {

    margin-top: 21px !important;

}

.hero .product-stage .float-card-left {

    left: -10px !important;

}

.hero .product-stage .float-card-right {

    right: -10px !important;

}

.hero .product-stage .hero {

    position: relative !important;

    padding: 142px
        0
        0 !important;

    background: linear-gradient(
            180deg,
            #EEF6FA 0%,
            #F5FAFC 20%,
            #FFFFFF 53%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    top: 0 !important;

    height: 600px !important;

    background: radial-gradient(
            ellipse
            at
            50%
            13%,
            rgba(
                0,
                106,
                153,
                .09
            ),
            transparent
            34%
        ),
        radial-gradient(
            ellipse
            at
            18%
            31%,
            rgba(
                198,
                220,
                231,
                .25
            ),
            transparent
            25%
        ),
        radial-gradient(
            ellipse
            at
            82%
            30%,
            rgba(
                198,
                220,
                231,
                .28
            ),
            transparent
            25%
        ),
        linear-gradient(
            180deg,
            rgba(
                237,
                246,
                250,
                .88
            )
            0%,
            rgba(
                249,
                252,
                253,
                .45
            )
            55%,
            rgba(
                255,
                255,
                255,
                0
            )
            100%
        ) !important;

}

.hero .product-stage .hero-copy::before,
.hero .product-stage .hero-copy::after {

    display: none !important;

    content: none !important;

}

.hero .product-stage .hero-media-stage {

    position: relative !important;

    z-index: 4 !important;

    width: min(
            100%,
            980px
        ) !important;

    margin: 54px auto
        -96px !important;

    padding: 0
        14px !important;

    isolation: isolate !important;

}

.hero .product-stage .hero-media-stage::before {

    content: "" !important;

    position: absolute !important;

    z-index: -2 !important;

    width: 1080px !important;

    height: 400px !important;

    left: 50% !important;

    top: 56% !important;

    transform: translate(
            -50%,
            -50%
        ) !important;

    border-radius: 50% !important;

    background: radial-gradient(
            ellipse
            at
            center,
            rgba(
                0,
                117,
                168,
                .13
            )
            0%,
            rgba(
                0,
                117,
                168,
                .055
            )
            42%,
            rgba(
                0,
                117,
                168,
                0
            )
            75%
        ) !important;

    filter: blur(35px) !important;

}

.hero .product-stage .hero-media-stage::after {

    content: "" !important;

    position: absolute !important;

    z-index: -1 !important;

    width: 760px !important;

    height: 120px !important;

    left: 50% !important;

    bottom: -33px !important;

    transform: translateX(
            -50%
        ) !important;

    border-radius: 50% !important;

    background: rgba(
            0,
            56,
            82,
            .09
        ) !important;

    filter: blur(52px) !important;

    opacity: .44 !important;

}

.hero .product-stage .hero-media-browser {

    overflow: hidden !important;

    border: 1px solid
        rgba(
            0,
            84,
            123,
            .11
        ) !important;

    border-radius: 22px !important;

    background: #FFFFFF !important;

    box-shadow: 0
        34px
        78px
        rgba(
            0,
            47,
            70,
            .105
        ),
        0
        8px
        24px
        rgba(
            0,
            47,
            70,
            .045
        ) !important;

}

.hero .product-stage .hero-media-top {

    position: relative !important;

    min-height: 40px !important;

    display: flex !important;

    align-items: center !important;

    padding: 0
        15px !important;

    border-bottom: 1px solid
        #EDF2F4 !important;

    background: #FAFCFD !important;

}

.hero .product-stage .hero-media-dots {

    display: flex !important;

    gap: 5px !important;

}

.hero .product-stage .hero-media-dots i {

    width: 7px !important;

    height: 7px !important;

    display: block !important;

    border-radius: 50% !important;

    background: #C8D5DA !important;

}

.hero .product-stage .hero-media-address {

    position: absolute !important;

    left: 50% !important;

    top: 50% !important;

    transform: translate(
            -50%,
            -50%
        ) !important;

    width: 270px !important;

    padding: 5px
        12px !important;

    border: 1px solid
        #E6EEF1 !important;

    border-radius: 7px !important;

    background: #FFFFFF !important;

    color: #9BAAB1 !important;

    font-size: 8px !important;

    text-align: center !important;

}

.hero .product-stage .hero-media-content {

    position: relative !important;

    overflow: hidden !important;

    background: #FFFFFF !important;

}

.hero .product-stage .hero-media-content img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-height: 720px !important;

    object-fit: contain !important;

    object-position: center top !important;

}

.hero .product-stage .hero {

    position: relative !important;

    margin: 0 !important;

    padding: 144px
        0
        0 !important;

    overflow: hidden !important;

    /*
     * Atmosfer sayfanın sıfır noktasından başlar.
     * Header bunun üzerinde transparan durur.
     */
    background: radial-gradient(
            ellipse
            at
            50%
            5%,
            rgba(
                0,
                113,
                162,
                .115
            ),
            transparent
            31%
        ),
        radial-gradient(
            ellipse
            at
            13%
            28%,
            rgba(
                188,
                216,
                229,
                .18
            ),
            transparent
            24%
        ),
        radial-gradient(
            ellipse
            at
            87%
            26%,
            rgba(
                188,
                216,
                229,
                .20
            ),
            transparent
            24%
        ),
        linear-gradient(
            180deg,
            #EDF6FA 0%,
            #F5FAFC 22%,
            #FFFFFF 54%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    inset: 0
        0
        auto
        0 !important;

    height: 590px !important;

    pointer-events: none !important;

    background: radial-gradient(
            ellipse
            at
            50%
            10%,
            rgba(
                255,
                255,
                255,
                .18
            ),
            transparent
            42%
        ) !important;

    opacity: 1 !important;

}

.hero .product-stage .hero-inner,
.hero .product-stage .hero-copy,
.product-stage,
.hero .product-stage .hero-media-stage {

    position: relative !important;

    z-index: 2 !important;

}

.hero .product-stage .hero-copy {

    padding-top: 1px !important;

}

.product-stage,
.hero .product-stage .hero-media-stage {

    margin-top: 54px !important;

}

.hero .product-stage .container {

    width: min(
            calc(100% - 56px),
            var(--container)
        ) !important;

}

.hero .product-stage .header .container,
.hero .product-stage .hero .container {

    width: min(
            calc(100% - 48px),
            1220px
        ) !important;

}

.hero .product-stage .services-v6 .container {

    width: min(
            calc(100% - 56px),
            1480px
        ) !important;

}

.hero .product-stage .hero {

    background: radial-gradient(
            ellipse
            at 50% 4%,
            rgba(23, 26, 31, .045),
            transparent 31%
        ),
        radial-gradient(
            ellipse
            at 13% 28%,
            rgba(110, 116, 122, .045),
            transparent 24%
        ),
        radial-gradient(
            ellipse
            at 87% 26%,
            rgba(110, 116, 122, .045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #F5F6F7 0%,
            #FAFAFB 23%,
            #FFFFFF 55%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    background: radial-gradient(
            ellipse
            at 50% 10%,
            rgba(255, 255, 255, .35),
            transparent 42%
        ) !important;

}

.hero .product-stage .hero-eyebrow {

    background: #F7F7F8 !important;

    border-color: #E1E4E6 !important;

    color: #00547B !important;

}

.product-stage::before,
.hero .product-stage .hero-media-stage::before {

    background: radial-gradient(
            ellipse
            at center,
            rgba(23, 26, 31, .075) 0%,
            rgba(23, 26, 31, .035) 40%,
            rgba(23, 26, 31, 0) 74%
        ) !important;

    filter: blur(38px) !important;

}

.product-stage::after,
.hero .product-stage .hero-media-stage::after {

    background: rgba(23, 26, 31, .075) !important;

    opacity: .38 !important;

}

.hero .product-stage .browser,
.hero .product-stage .hero-media-browser {

    border-color: #DDE1E4 !important;

    background: #FFFFFF !important;

}

.hero .product-stage .browser-header,
.hero .product-stage .hero-media-top {

    background: #F7F7F8 !important;

    border-bottom-color: #E5E8EA !important;

}

.hero .product-stage .browser-dots i,
.hero .product-stage .hero-media-dots i {

    background: #C9CDD0 !important;

}

.hero .product-stage .browser-address,
.hero .product-stage .hero-media-address {

    border-color: #E1E4E6 !important;

    background: #FFFFFF !important;

    color: #999FA4 !important;

}

.hero .product-stage .dash-sidebar {

    background: #FAFAFA !important;

    border-right-color: #E7E9EB !important;

}

.hero .product-stage .dash-menu {

    background: #ECEEEF !important;

}

.hero .product-stage .dash-menu.active {

    background: #D9DDE0 !important;

}

.hero .product-stage .kpi,
.hero .product-stage .chart-card,
.hero .product-stage .lead-card {

    border-color: #E3E6E8 !important;

    background: #FFFFFF !important;

}

.hero .product-stage .channel-row div {

    background: #F5F6F7 !important;

}

.hero .product-stage .real-chart .line {

    stroke: #00547B !important;

}

.hero .product-stage .real-chart .area {

    fill: rgba(23, 26, 31, .055) !important;

}

.hero .product-stage .chart-grid-lines i {

    border-bottom-color: #ECEEEF !important;

}

.hero .product-stage .chart-legend .google {

    background: #00547B !important;

}

.hero .product-stage .chart-legend .seo {

    background: #8B9297 !important;

}

.hero .product-stage .chart-legend .social {

    background: #C3C7CA !important;

}

.hero .product-stage .avatar {

    background: #ECEEEF !important;

    color: #00547B !important;

}

.hero .product-stage .lead b {

    background: #F2F3F4 !important;

    color: #697178 !important;

}

.hero .product-stage .hero-mini-proof span::before {

    color: #00547B !important;

}

.hero .product-stage .hero {

    position: relative !important;

    background: radial-gradient(
            ellipse
            at 50% 2%,
            rgba(0, 84, 123, .085) 0%,
            rgba(0, 84, 123, .035) 30%,
            rgba(0, 84, 123, 0) 58%
        ),
        radial-gradient(
            ellipse
            at 8% 34%,
            rgba(76, 97, 110, .065) 0%,
            rgba(76, 97, 110, 0) 34%
        ),
        radial-gradient(
            ellipse
            at 92% 30%,
            rgba(76, 97, 110, .055) 0%,
            rgba(76, 97, 110, 0) 34%
        ),
        linear-gradient(
            180deg,
            #E9EEF2 0%,
            #EDF1F4 20%,
            #F2F4F6 52%,
            #F7F8F9 82%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    background: radial-gradient(
            ellipse
            at 50% 38%,
            rgba(255, 255, 255, .72) 0%,
            rgba(255, 255, 255, .30) 32%,
            rgba(255, 255, 255, 0) 66%
        ) !important;

    opacity: 1 !important;

}

.hero .product-stage .hero-inner,
.hero .product-stage .hero-copy,
.product-stage,
.hero .product-stage .hero-media-stage {

    position: relative !important;
    z-index: 2 !important;

}

.hero .product-stage .hero-eyebrow {

    background: rgba(255, 255, 255, .78) !important;

    border-color: rgba(0, 56, 82, .10) !important;

    color: #00547B !important;

    box-shadow: 0 6px 18px
        rgba(0, 56, 82, .025) !important;

}

.product-stage::before,
.hero .product-stage .hero-media-stage::before {

    background: radial-gradient(
            ellipse
            at center,
            rgba(0, 56, 82, .095) 0%,
            rgba(0, 56, 82, .045) 39%,
            rgba(0, 56, 82, 0) 73%
        ) !important;

    filter: blur(40px) !important;

}

.product-stage::after,
.hero .product-stage .hero-media-stage::after {

    background: rgba(0, 47, 70, .08) !important;

    opacity: .40 !important;

}

.hero .product-stage .hero-mini-proof {

    color: #697981 !important;

}

.hero .product-stage .hero-mini-proof span::before {

    color: #00547B !important;

}

.hero .product-stage .container,
.hero .product-stage .header .container,
.hero .product-stage .hero .container,
.hero .product-stage .services-v6 .container {

    width: min(
            calc(100% - 56px),
            1350px
        ) !important;

    max-width: 1350px !important;

    margin-left: auto !important;

    margin-right: auto !important;

}

.hero .product-stage .header-wrap,
.hero .product-stage .hero-inner,
.hero .product-stage .sv6-head,
.hero .product-stage .system-layout,
.hero .product-stage .about-layout,
.hero .product-stage .contact-layout,
.hero .product-stage .footer-layout {

    max-width: none !important;

}

.hero .product-stage .hero {

    position: relative !important;

    background: radial-gradient(
            ellipse
            at 50% 3%,
            rgba(116, 91, 70, .055) 0%,
            rgba(116, 91, 70, .018) 31%,
            rgba(116, 91, 70, 0) 58%
        ),
        radial-gradient(
            ellipse
            at 8% 32%,
            rgba(121, 108, 96, .035) 0%,
            rgba(121, 108, 96, 0) 31%
        ),
        radial-gradient(
            ellipse
            at 92% 30%,
            rgba(121, 108, 96, .035) 0%,
            rgba(121, 108, 96, 0) 31%
        ),
        linear-gradient(
            180deg,
            #F1EDE8 0%,
            #F4F1ED 22%,
            #F8F6F3 52%,
            #FCFBFA 82%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    background: radial-gradient(
            ellipse
            at 50% 43%,
            rgba(255, 255, 255, .67) 0%,
            rgba(255, 255, 255, .23) 34%,
            rgba(255, 255, 255, 0) 68%
        ) !important;

    opacity: 1 !important;

}

.hero .product-stage .hero-eyebrow {

    background: rgba(255, 255, 255, .70) !important;

    border-color: rgba(71, 62, 54, .10) !important;

    color: #00547B !important;

    box-shadow: none !important;

}

.product-stage::before,
.hero .product-stage .hero-media-stage::before {

    background: radial-gradient(
            ellipse
            at center,
            rgba(67, 59, 52, .080) 0%,
            rgba(67, 59, 52, .035) 41%,
            rgba(67, 59, 52, 0) 74%
        ) !important;

    filter: blur(40px) !important;

}

.product-stage::after,
.hero .product-stage .hero-media-stage::after {

    background: rgba(49, 44, 40, .075) !important;

    opacity: .38 !important;

}

.hero .product-stage .hero {

    position: relative !important;

    isolation: isolate !important;

    background: radial-gradient(
            ellipse
            at 12% 18%,
            rgba(
                135,
                88,
                255,
                .14
            ) 0%,
            rgba(
                135,
                88,
                255,
                .055
            ) 27%,
            transparent 55%
        ),
        radial-gradient(
            ellipse
            at 88% 14%,
            rgba(
                255,
                205,
                79,
                .18
            ) 0%,
            rgba(
                255,
                205,
                79,
                .06
            ) 30%,
            transparent 57%
        ),
        radial-gradient(
            ellipse
            at 87% 66%,
            rgba(
                242,
                135,
                105,
                .10
            ) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse
            at 21% 72%,
            rgba(
                185,
                223,
                80,
                .055
            ) 0%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #F6F2ED 0%,
            #F9F6F2 35%,
            #FCFAF8 68%,
            #FFFFFF 100%
        ) !important;

}

.hero .product-stage .hero::before {

    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    inset: 0 !important;

    pointer-events: none !important;

    background: radial-gradient(
            ellipse
            at 50% 28%,
            rgba(
                255,
                255,
                255,
                .78
            ) 0%,
            rgba(
                255,
                255,
                255,
                .38
            ) 28%,
            rgba(
                255,
                255,
                255,
                0
            ) 61%
        ) !important;

}

.hero .product-stage .hero::after {

    content: "" !important;

    position: absolute !important;

    z-index: 0 !important;

    left: 50% !important;

    bottom: 4% !important;

    width: min(
            900px,
            70vw
        ) !important;

    height: 360px !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    pointer-events: none !important;

    background: radial-gradient(
            ellipse
            at 25% 50%,
            rgba(
                135,
                88,
                255,
                .08
            ),
            transparent 48%
        ),
        radial-gradient(
            ellipse
            at 75% 48%,
            rgba(
                255,
                205,
                79,
                .08
            ),
            transparent 48%
        ) !important;

    filter: blur(48px) !important;

    opacity: .8 !important;

}

.hero .product-stage .hero-inner,
.hero .product-stage .hero-copy,
.product-stage,
.hero .product-stage .hero-media-stage {

    position: relative !important;

    z-index: 2 !important;

}

.hero .product-stage .hero-eyebrow {

    min-height: 30px !important;

    padding: 0 13px !important;

    border: 1px solid
        rgba(
            0,
            177,
            255,
            .14
        ) !important;

    border-radius: 999px !important;

    background: #171A1F !important;

    color: #00B1FF !important;

    box-shadow: 0
        10px
        24px
        rgba(
            20,
            23,
            26,
            .08
        ) !important;

    font-weight: 700 !important;

}

.hero .product-stage .hero h1 {

    color: #07384D !important;

}

.hero .product-stage .hero-copy > p {

    color: #6C757A !important;

}

.hero .product-stage .hero .btn-primary,
.hero .product-stage .hero-primary {

    background: #003852 !important;

    border-color: #003852 !important;

    color: #FFFFFF !important;

    box-shadow: 0
        12px
        26px
        rgba(
            0,
            56,
            82,
            .13
        ) !important;

}

.hero .product-stage .hero .btn-secondary,
.hero .product-stage .hero-secondary {

    background: rgba(
            255,
            255,
            255,
            .74
        ) !important;

    border-color: rgba(
            34,
            43,
            48,
            .12
        ) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

}

.hero .product-stage .hero-mini-proof span::before {

    color: #00B1FF !important;

}

.product-stage::before,
.hero .product-stage .hero-media-stage::before {

    background: radial-gradient(
            ellipse
            at 22% 48%,
            rgba(
                135,
                88,
                255,
                .16
            ) 0%,
            transparent 44%
        ),
        radial-gradient(
            ellipse
            at 76% 42%,
            rgba(
                255,
                205,
                79,
                .14
            ) 0%,
            transparent 43%
        ),
        radial-gradient(
            ellipse
            at 52% 78%,
            rgba(
                0,
                177,
                255,
                .085
            ) 0%,
            transparent 42%
        ) !important;

    filter: blur(44px) !important;

    opacity: .9 !important;

}

.product-stage::after,
.hero .product-stage .hero-media-stage::after {

    background: rgba(
            33,
            29,
            26,
            .08
        ) !important;

    opacity: .42 !important;

}

.hero .product-stage .hero .float-card {

    border-color: rgba(
            35,
            37,
            39,
            .10
        ) !important;

    background: rgba(
            255,
            255,
            255,
            .92
        ) !important;

    box-shadow: 0
        18px
        40px
        rgba(
            25,
            27,
            29,
            .09
        ) !important;

}

.hero .product-stage .hero .real-chart .line {

    stroke: #00B1FF !important;

}

.hero .product-stage .hero .chart-legend .google {

    background: #00B1FF !important;

}

.hero .product-stage .hero .hero-actions,
.hero .product-stage .hero .hero-cta,
.hero .product-stage .hero .cta-group {

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;

}

.hero .product-stage .hero .hero-actions .btn,
.hero .product-stage .hero .hero-cta .btn,
.hero .product-stage .hero .cta-group .btn,
.hero .product-stage .hero .btn-primary,
.hero .product-stage .hero .btn-secondary,
.hero .product-stage .hero-primary,
.hero .product-stage .hero-secondary {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-family: var(--body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease !important;

}

.hero .product-stage .hero .hero-actions .btn:hover,
.hero .product-stage .hero .hero-cta .btn:hover,
.hero .product-stage .hero .cta-group .btn:hover,
.hero .product-stage .hero .btn-primary:hover,
.hero .product-stage .hero .btn-secondary:hover,
.hero .product-stage .hero-primary:hover,
.hero .product-stage .hero-secondary:hover {

    transform: translateY(-1px) !important;

}

.hero .product-stage .hero .btn-primary,
.hero .product-stage .hero-primary {

    background: #003852 !important;
    border: 1px solid #003852 !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 28px rgba(0, 56, 82, .14),
        0 2px 6px rgba(0, 56, 82, .08) !important;

}

.hero .product-stage .hero .btn-secondary,
.hero .product-stage .hero-secondary {

    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(7, 56, 77, .12) !important;
    color: #07384D !important;
    box-shadow: 0 10px 24px rgba(20, 28, 32, .05) !important;

}

.hero .product-stage .hero .hero-actions .btn svg,
.hero .product-stage .hero .hero-cta .btn svg,
.hero .product-stage .hero .cta-group .btn svg,
.hero .product-stage .hero .hero-actions .btn i,
.hero .product-stage .hero .hero-cta .btn i,
.hero .product-stage .hero .cta-group .btn i,
.hero .product-stage .hero .btn-primary svg,
.hero .product-stage .hero .btn-secondary svg,
.hero .product-stage .hero .btn-primary i,
.hero .product-stage .hero .btn-secondary i {

    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;

}

.hero .product-stage .hero .btn-primary .btn-icon,
.hero .product-stage .hero-primary .btn-icon,
.hero .product-stage .hero .btn-primary .icon-wrap,
.hero .product-stage .hero-primary .icon-wrap {

    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .12) !important;

}

.hero .product-stage .hero-copy > p {

    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;

}

.hero .product-stage,
.hero .product-stage .hero .hero-media-stage {

    position: relative !important;

}

.hero .product-stage .dashboard-shell,
.hero .product-stage .hero-dashboard,
.hero .product-stage .dashboard-browser,
.hero .product-stage .hero .hero-media-stage .dashboard-shell,
.hero .product-stage .hero .hero-media-stage .hero-dashboard,
.hero .product-stage .hero .hero-media-stage .dashboard-browser {

    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(12, 26, 32, .08) !important;
    box-shadow: 0 28px 70px rgba(19, 24, 27, .12),
        0 8px 20px rgba(19, 24, 27, .06) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    opacity: 1 !important;

}

.hero .product-stage .hero .float-card {

    min-width: 98px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(19, 24, 27, .08) !important;
    box-shadow: 0 18px 40px rgba(20, 24, 27, .09) !important;

}

.hero .product-stage .float-card:first-of-type,
.hero .product-stage .hero .hero-media-stage .float-card:first-of-type {

    background: linear-gradient(145deg, #FFFFFF 0%, #F8F1FF 100%) !important;

}

.hero .product-stage .float-card:last-of-type,
.hero .product-stage .hero .hero-media-stage .float-card:last-of-type {

    background: linear-gradient(145deg, #FFFFFF 0%, #FFF3EA 100%) !important;

}

.hero .product-stage .dashboard-stats > *,
.hero .product-stage .stats-grid > *,
.hero .product-stage .metrics-grid > *,
.hero .product-stage .hero .hero-media-stage .dashboard-stats > *,
.hero .product-stage .hero .hero-media-stage .stats-grid > *,
.hero .product-stage .hero .hero-media-stage .metrics-grid > * {

    border: 1px solid rgba(13, 25, 31, .08) !important;
    box-shadow: 0 8px 18px rgba(17, 23, 26, .04) !important;

}

.hero .product-stage .dashboard-stats > *:nth-child(1),
.hero .product-stage .stats-grid > *:nth-child(1),
.hero .product-stage .metrics-grid > *:nth-child(1),
.hero .product-stage .hero .hero-media-stage .dashboard-stats > *:nth-child(1),
.hero .product-stage .hero .hero-media-stage .stats-grid > *:nth-child(1),
.hero .product-stage .hero .hero-media-stage .metrics-grid > *:nth-child(1) {

    background: linear-gradient(145deg, #F8F1FF 0%, #FFFFFF 100%) !important;

}

.hero .product-stage .dashboard-stats > *:nth-child(2),
.hero .product-stage .stats-grid > *:nth-child(2),
.hero .product-stage .metrics-grid > *:nth-child(2),
.hero .product-stage .hero .hero-media-stage .dashboard-stats > *:nth-child(2),
.hero .product-stage .hero .hero-media-stage .stats-grid > *:nth-child(2),
.hero .product-stage .hero .hero-media-stage .metrics-grid > *:nth-child(2) {

    background: linear-gradient(145deg, #FFF7E1 0%, #FFFFFF 100%) !important;

}

.hero .product-stage .dashboard-stats > *:nth-child(3),
.hero .product-stage .stats-grid > *:nth-child(3),
.hero .product-stage .metrics-grid > *:nth-child(3),
.hero .product-stage .hero .hero-media-stage .dashboard-stats > *:nth-child(3),
.hero .product-stage .hero .hero-media-stage .stats-grid > *:nth-child(3),
.hero .product-stage .hero .hero-media-stage .metrics-grid > *:nth-child(3) {

    background: linear-gradient(145deg, #FFF1EC 0%, #FFFFFF 100%) !important;

}

.hero .product-stage .dashboard-stats > *:nth-child(4),
.hero .product-stage .stats-grid > *:nth-child(4),
.hero .product-stage .metrics-grid > *:nth-child(4),
.hero .product-stage .hero .hero-media-stage .dashboard-stats > *:nth-child(4),
.hero .product-stage .hero .hero-media-stage .stats-grid > *:nth-child(4),
.hero .product-stage .hero .hero-media-stage .metrics-grid > *:nth-child(4) {

    background: linear-gradient(145deg, #F3FAFF 0%, #FFFFFF 100%) !important;

}

.hero .product-stage .dashboard-main,
.hero .product-stage .chart-panel,
.hero .product-stage .performance-panel,
.hero .product-stage .performance-card,
.hero .product-stage .hero .hero-media-stage .dashboard-main,
.hero .product-stage .hero .hero-media-stage .chart-panel,
.hero .product-stage .hero .hero-media-stage .performance-panel,
.hero .product-stage .hero .hero-media-stage .performance-card {

    background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,251,253,.96) 100%) !important;
    border: 1px solid rgba(17, 24, 28, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;

}

.hero .product-stage .dashboard-sidebar,
.hero .product-stage .recent-leads,
.hero .product-stage .leads-panel,
.hero .product-stage .hero .hero-media-stage .dashboard-sidebar,
.hero .product-stage .hero .hero-media-stage .recent-leads,
.hero .product-stage .hero .hero-media-stage .leads-panel {

    background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(252,248,244,.95) 100%) !important;
    border: 1px solid rgba(17, 24, 28, .08) !important;

}

.hero .product-stage .hero .real-chart .line,
.hero .product-stage .hero .chart-line,
.hero .product-stage .hero .performance-line {

    stroke: #00B1FF !important;
    stroke-width: 3.5 !important;

}

.hero .product-stage .hero .chart-fill,
.hero .product-stage .hero .performance-fill,
.hero .product-stage .hero .real-chart .area {

    fill: rgba(0, 177, 255, .10) !important;

}

.hero .product-stage .hero .chart-legend .google,
.hero .product-stage .hero .legend-google {

    background: #00B1FF !important;

}

.hero .product-stage .hero .chart-legend .seo,
.hero .product-stage .hero .legend-seo {

    background: #C8DB63 !important;

}

.hero .product-stage .hero .chart-legend .meta,
.hero .product-stage .hero .legend-meta {

    background: #F1B39F !important;

}

.hero .product-stage .hero .recent-leads .badge,
.hero .product-stage .hero .leads-panel .badge,
.hero .product-stage .hero .dashboard-sidebar .badge {

    border-radius: 999px !important;
    background: #F4F7F9 !important;
    color: #58707C !important;

}

.hero .product-stage .hero .browser-bar,
.hero .product-stage .hero .dashboard-bar,
.hero .product-stage .hero .dashboard-shell .topbar {

    background: rgba(248, 247, 245, .92) !important;
    border-bottom: 1px solid rgba(16, 24, 29, .06) !important;

}

.hero .product-stage .hero-eyebrow {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: var(--body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    overflow: visible !important;
    box-shadow: 0 12px 30px rgba(18, 23, 27, .10),
        0 2px 8px rgba(18, 23, 27, .06) !important;

}

.hero .product-stage .hero-eyebrow * {

    line-height: 1 !important;
    white-space: nowrap !important;

}

.hero .product-stage .hero-copy > .hero-eyebrow,
.hero .product-stage .hero-copy > .eyebrow,
.hero .product-stage .hero-copy > .kicker {

    margin-bottom: 18px !important;

}

.hero .product-stage,
.hero .product-stage .hero .hero-media-stage,
.hero .product-stage .dashboard-shell,
.hero .product-stage .hero-dashboard,
.hero .product-stage .hero .hero-media-stage .dashboard-shell,
.hero .product-stage .hero .hero-media-stage .hero-dashboard {

    overflow: visible !important;

}

.hero .product-stage .float-card,
.hero .product-stage .hero .hero-media-stage .float-card {

    z-index: 5 !important;

}

.hero .product-stage .float-card:first-of-type,
.hero .product-stage .hero .hero-media-stage .float-card:first-of-type {

    top: 52px !important;
    left: -44px !important;
    right: auto !important;
    transform: none !important;

}

.hero .product-stage .float-card:last-of-type,
.hero .product-stage .hero .hero-media-stage .float-card:last-of-type {

    top: 96px !important;
    right: -24px !important;
    left: auto !important;
    transform: none !important;

}

.hero .product-stage .dashboard-main,
.hero .product-stage .chart-panel,
.hero .product-stage .performance-panel,
.hero .product-stage .hero .hero-media-stage .dashboard-main,
.hero .product-stage .hero .hero-media-stage .chart-panel,
.hero .product-stage .hero .hero-media-stage .performance-panel {

    position: relative !important;
    z-index: 1 !important;

}

.hero .product-stage .hero .real-chart,
.hero .product-stage .hero .chart-panel,
.hero .product-stage .hero .performance-chart,
.hero .product-stage .hero .performance-card {

    position: relative !important;
    overflow: hidden !important;

}

.hero .product-stage .hero .real-chart::before,
.hero .product-stage .hero .chart-panel::before,
.hero .product-stage .hero .performance-chart::before,
.hero .product-stage .hero .performance-card::before {

    content: "" !important;
    position: absolute !important;
    left: 7% !important;
    right: 28% !important;
    bottom: 14% !important;
    top: 22% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 142 C60 138 100 126 145 124 C190 122 220 110 260 106 C300 102 335 94 382 92 C438 90 470 82 530 73 C560 69 585 66 600 62' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 152 C58 150 102 144 146 136 C188 129 230 128 272 121 C312 114 356 112 402 106 C455 99 506 95 600 82' fill='none' stroke='%23F1B39F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat !important;
    opacity: .92 !important;

}

.hero .product-stage .hero .real-chart .line,
.hero .product-stage .hero .chart-line,
.hero .product-stage .hero .performance-line {

    stroke: #00B1FF !important;
    stroke-width: 3.5 !important;

}

.hero .product-stage .hero .chart-fill,
.hero .product-stage .hero .performance-fill,
.hero .product-stage .hero .real-chart .area {

    fill: rgba(0, 177, 255, .08) !important;

}

.hero .product-stage .hero .chart-legend,
.hero .product-stage .hero .legend-row {

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;

}

.hero .product-stage .hero .chart-legend .google,
.hero .product-stage .hero .legend-google {

    background: #00B1FF !important;

}

.hero .product-stage .hero .chart-legend .seo,
.hero .product-stage .hero .legend-seo {

    background: #C8DB63 !important;

}

.hero .product-stage .hero .chart-legend .meta,
.hero .product-stage .hero .legend-meta {

    background: #F1B39F !important;

}

.hero .product-stage .hero .recent-leads,
.hero .product-stage .hero .leads-panel,
.hero .product-stage .hero .dashboard-sidebar {

    background: linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(252,248,244,.95) 100%
        ) !important;

}

.hero .product-stage .hero .recent-leads li,
.hero .product-stage .hero .leads-panel li,
.hero .product-stage .hero .recent-leads .lead-row,
.hero .product-stage .hero .leads-panel .lead-row,
.hero .product-stage .hero .dashboard-sidebar .lead-row {

    border-radius: 14px !important;
    background: linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FBF7F3 100%
        ) !important;
    border: 1px solid rgba(19, 24, 27, .07) !important;
    box-shadow: 0 8px 18px rgba(19, 24, 27, .04) !important;
    padding: 10px 12px !important;

}

.hero .product-stage .hero .recent-leads .avatar,
.hero .product-stage .hero .leads-panel .avatar,
.hero .product-stage .hero .dashboard-sidebar .avatar,
.hero .product-stage .hero .recent-leads .lead-avatar,
.hero .product-stage .hero .leads-panel .lead-avatar {

    background: linear-gradient(
            135deg,
            #FFF7E1 0%,
            #F8F1FF 100%
        ) !important;
    color: #07384D !important;
    border: 1px solid rgba(19, 24, 27, .08) !important;
    box-shadow: none !important;

}

.hero .product-stage .hero .recent-leads .name,
.hero .product-stage .hero .leads-panel .name,
.hero .product-stage .hero .dashboard-sidebar .name,
.hero .product-stage .hero .recent-leads .lead-name,
.hero .product-stage .hero .leads-panel .lead-name,
.hero .product-stage .hero .dashboard-sidebar strong {

    color: #07384D !important;
    font-weight: 700 !important;

}

.hero .product-stage .hero .recent-leads .source,
.hero .product-stage .hero .leads-panel .source,
.hero .product-stage .hero .dashboard-sidebar .source,
.hero .product-stage .hero .recent-leads .lead-source,
.hero .product-stage .hero .leads-panel .lead-source,
.hero .product-stage .hero .dashboard-sidebar small {

    color: #8A7B67 !important;
    font-weight: 500 !important;

}

.hero .product-stage .hero .recent-leads .badge,
.hero .product-stage .hero .leads-panel .badge,
.hero .product-stage .hero .dashboard-sidebar .badge {

    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    box-shadow: none !important;

}

.hero .product-stage .hero .badge.whatsapp,
.hero .product-stage .hero .badge-whatsapp,
.hero .product-stage .hero .channel-whatsapp,
.hero .product-stage .hero [class*="whatsapp-badge"] {

    background: #ECFFF4 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .12) !important;

}

.hero .product-stage .hero .badge.phone,
.hero .product-stage .hero .badge-phone,
.hero .product-stage .hero .channel-phone,
.hero .product-stage .hero [class*="phone-badge"] {

    background: #F3F7FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .12) !important;

}

.hero .product-stage .hero .badge.form,
.hero .product-stage .hero .badge-form,
.hero .product-stage .hero .channel-form,
.hero .product-stage .hero [class*="form-badge"] {

    background: #FFF3EC !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .12) !important;

}

.hero .product-stage .hero .recent-leads li + li,
.hero .product-stage .hero .leads-panel li + li,
.hero .product-stage .hero .recent-leads .lead-row + .lead-row,
.hero .product-stage .hero .leads-panel .lead-row + .lead-row {

    margin-top: 10px !important;

}

.hero .product-stage .hero .real-chart::before,
.hero .product-stage .hero .chart-panel::before,
.hero .product-stage .hero .performance-chart::before,
.hero .product-stage .hero .performance-card::before {

    content: "" !important;
    position: absolute !important;
    left: 6% !important;
    right: 6% !important;
    top: 21% !important;
    bottom: 13% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 150 C55 146 95 141 140 135 C185 129 228 124 275 118 C320 113 365 105 415 98 C468 91 528 81 600 70' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 157 C52 154 98 149 142 143 C188 136 235 131 284 126 C336 120 390 113 446 104 C500 95 548 87 600 79' fill='none' stroke='%23F1B39F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat !important;

}

.hero .product-stage .hero .chart-legend .seo,
.hero .product-stage .hero .legend-seo {

    background: #C8DB63 !important;

}

.hero .product-stage .hero .chart-legend .meta,
.hero .product-stage .hero .legend-meta {

    background: #F1B39F !important;

}

.hero .product-stage .hero .recent-leads,
.hero .product-stage .hero .leads-panel,
.hero .product-stage .hero .dashboard-sidebar {

    background: linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(253,248,243,.98) 100%
        ) !important;

}

.hero .product-stage .hero .recent-leads li,
.hero .product-stage .hero .leads-panel li,
.hero .product-stage .hero .recent-leads .lead-row,
.hero .product-stage .hero .leads-panel .lead-row,
.hero .product-stage .hero .dashboard-sidebar .lead-row {

    position: relative !important;
    border-radius: 16px !important;
    border: 1px solid rgba(17, 24, 28, .07) !important;
    box-shadow: 0 10px 24px rgba(20, 24, 27, .05) !important;
    padding: 12px 14px !important;
    transition: transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;

}

.hero .product-stage .hero .recent-leads li:hover,
.hero .product-stage .hero .leads-panel li:hover,
.hero .product-stage .hero .recent-leads .lead-row:hover,
.hero .product-stage .hero .leads-panel .lead-row:hover,
.hero .product-stage .hero .dashboard-sidebar .lead-row:hover {

    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(20, 24, 27, .07) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(1),
.hero .product-stage .hero .leads-panel li:nth-child(1),
.hero .product-stage .hero .recent-leads .lead-row:nth-child(1),
.hero .product-stage .hero .leads-panel .lead-row:nth-child(1) {

    background: linear-gradient(180deg, #FFFFFF 0%, #F2FBF6 100%) !important;
    border-color: rgba(34, 197, 94, .14) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(2),
.hero .product-stage .hero .leads-panel li:nth-child(2),
.hero .product-stage .hero .recent-leads .lead-row:nth-child(2),
.hero .product-stage .hero .leads-panel .lead-row:nth-child(2) {

    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%) !important;
    border-color: rgba(0, 84, 123, .12) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(3),
.hero .product-stage .hero .leads-panel li:nth-child(3),
.hero .product-stage .hero .recent-leads .lead-row:nth-child(3),
.hero .product-stage .hero .leads-panel .lead-row:nth-child(3) {

    background: linear-gradient(180deg, #FFFFFF 0%, #FFF4ED 100%) !important;
    border-color: rgba(234, 120, 67, .14) !important;

}

.hero .product-stage .hero .recent-leads .avatar,
.hero .product-stage .hero .leads-panel .avatar,
.hero .product-stage .hero .dashboard-sidebar .avatar,
.hero .product-stage .hero .recent-leads .lead-avatar,
.hero .product-stage .hero .leads-panel .lead-avatar {

    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 28, .06) !important;
    box-shadow: 0 6px 14px rgba(20, 24, 27, .05) !important;
    color: #07384D !important;
    font-weight: 700 !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(1) .avatar,
.hero .product-stage .hero .leads-panel li:nth-child(1) .avatar,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(1) .avatar,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(1) .avatar,
.hero .product-stage .hero .recent-leads li:nth-child(1) .lead-avatar,
.hero .product-stage .hero .leads-panel li:nth-child(1) .lead-avatar {

    background: linear-gradient(135deg, #E8FFF1 0%, #CFF6DF 100%) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(2) .avatar,
.hero .product-stage .hero .leads-panel li:nth-child(2) .avatar,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(2) .avatar,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(2) .avatar,
.hero .product-stage .hero .recent-leads li:nth-child(2) .lead-avatar,
.hero .product-stage .hero .leads-panel li:nth-child(2) .lead-avatar {

    background: linear-gradient(135deg, #EEF5FF 0%, #DCEBFF 100%) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(3) .avatar,
.hero .product-stage .hero .leads-panel li:nth-child(3) .avatar,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(3) .avatar,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(3) .avatar,
.hero .product-stage .hero .recent-leads li:nth-child(3) .lead-avatar,
.hero .product-stage .hero .leads-panel li:nth-child(3) .lead-avatar {

    background: linear-gradient(135deg, #FFF2EA 0%, #FFE1D2 100%) !important;

}

.hero .product-stage .hero .recent-leads .name,
.hero .product-stage .hero .leads-panel .name,
.hero .product-stage .hero .dashboard-sidebar .name,
.hero .product-stage .hero .recent-leads .lead-name,
.hero .product-stage .hero .leads-panel .lead-name,
.hero .product-stage .hero .dashboard-sidebar strong {

    color: #07384D !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(1) .name,
.hero .product-stage .hero .leads-panel li:nth-child(1) .name,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(1) .name,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(1) .name {

    color: #127145 !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(2) .name,
.hero .product-stage .hero .leads-panel li:nth-child(2) .name,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(2) .name,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(2) .name {

    color: #00547B !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(3) .name,
.hero .product-stage .hero .leads-panel li:nth-child(3) .name,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(3) .name,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(3) .name {

    color: #C76B3A !important;

}

.hero .product-stage .hero .recent-leads .source,
.hero .product-stage .hero .leads-panel .source,
.hero .product-stage .hero .dashboard-sidebar .source,
.hero .product-stage .hero .recent-leads .lead-source,
.hero .product-stage .hero .leads-panel .lead-source,
.hero .product-stage .hero .dashboard-sidebar small {

    font-weight: 600 !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(1) .source,
.hero .product-stage .hero .leads-panel li:nth-child(1) .source,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(1) .source,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(1) .source {

    color: #22A35D !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(2) .source,
.hero .product-stage .hero .leads-panel li:nth-child(2) .source,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(2) .source,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(2) .source {

    color: #2D7CF3 !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(3) .source,
.hero .product-stage .hero .leads-panel li:nth-child(3) .source,
.hero .product-stage .hero .recent-leads .lead-row:nth-child(3) .source,
.hero .product-stage .hero .leads-panel .lead-row:nth-child(3) .source {

    color: #E17843 !important;

}

.hero .product-stage .hero .recent-leads .badge,
.hero .product-stage .hero .leads-panel .badge,
.hero .product-stage .hero .dashboard-sidebar .badge,
.hero .product-stage .hero .badge.whatsapp,
.hero .product-stage .hero .badge-whatsapp,
.hero .product-stage .hero .channel-whatsapp,
.hero .product-stage .hero .badge.phone,
.hero .product-stage .hero .badge-phone,
.hero .product-stage .hero .channel-phone,
.hero .product-stage .hero .badge.form,
.hero .product-stage .hero .badge-form,
.hero .product-stage .hero .channel-form {

    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;

}

.hero .product-stage .hero .badge.whatsapp,
.hero .product-stage .hero .badge-whatsapp,
.hero .product-stage .hero .channel-whatsapp,
.hero .product-stage .hero [class*="whatsapp-badge"] {

    background: #EAFBF1 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .15) !important;

}

.hero .product-stage .hero .badge.phone,
.hero .product-stage .hero .badge-phone,
.hero .product-stage .hero .channel-phone,
.hero .product-stage .hero [class*="phone-badge"] {

    background: #EEF5FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .14) !important;

}

.hero .product-stage .hero .badge.form,
.hero .product-stage .hero .badge-form,
.hero .product-stage .hero .channel-form,
.hero .product-stage .hero [class*="form-badge"] {

    background: #FFF1E8 !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .15) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(1) [class*="badge"],
.hero .product-stage .hero .leads-panel li:nth-child(1) [class*="badge"] {

    background: #EAFBF1 !important;
    color: #14804A !important;
    border-color: rgba(20, 128, 74, .15) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(2) [class*="badge"],
.hero .product-stage .hero .leads-panel li:nth-child(2) [class*="badge"] {

    background: #EEF5FF !important;
    color: #00547B !important;
    border-color: rgba(0, 84, 123, .14) !important;

}

.hero .product-stage .hero .recent-leads li:nth-child(3) [class*="badge"],
.hero .product-stage .hero .leads-panel li:nth-child(3) [class*="badge"] {

    background: #FFF1E8 !important;
    color: #C76B3A !important;
    border-color: rgba(199, 107, 58, .15) !important;

}

.hero .product-stage .hero .real-chart::before,
.hero .product-stage .hero .chart-panel::before,
.hero .product-stage .hero .performance-chart::before,
.hero .product-stage .hero .performance-card::before {

    content: "" !important;
    position: absolute !important;
    left: 6% !important;
    right: 6% !important;
    top: 21% !important;
    bottom: 13% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 142 C32 136 62 128 92 124 C126 119 154 126 188 117 C222 108 256 97 291 95 C325 93 360 84 396 80 C431 76 466 73 504 67 C540 61 571 55 600 50' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 151 C30 149 60 145 88 138 C118 130 149 120 180 122 C212 124 241 111 275 106 C309 101 344 100 380 91 C417 82 452 90 491 81 C531 72 566 74 600 64' fill='none' stroke='%238B5CF6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat !important;

}

.hero .product-stage .hero .chart-legend .seo,
.hero .product-stage .hero .legend-seo {

    background: #C8DB63 !important;

}

.hero .product-stage .hero .chart-legend .meta,
.hero .product-stage .hero .legend-meta {

    background: #8B5CF6 !important;

}

.hero .product-stage .hero [class*="legend"] [class*="seo"]::before,
.hero .product-stage .hero [class*="legend"] [class*="meta"]::before {

    opacity: 1 !important;

}

.hero .product-stage .hero .real-chart::before,
.hero .product-stage .hero .chart-panel::before,
.hero .product-stage .hero .performance-chart::before,
.hero .product-stage .hero .performance-card::before {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    top: 17% !important;
    bottom: 10% !important;

    width: 100% !important;

    pointer-events: none !important;

    z-index: 2 !important;

    opacity: 1 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'%3E%3Cpath d='M0 145 C35 139 63 128 96 124 C130 120 156 128 192 115 C225 103 252 98 286 102 C322 106 350 87 387 84 C424 81 450 91 486 76 C522 61 555 68 600 52' fill='none' stroke='%23C8DB63' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 157 C36 154 64 146 93 136 C125 125 153 131 187 128 C219 125 248 108 281 111 C316 114 343 119 376 103 C408 88 439 95 471 90 C507 84 539 69 568 73 C581 75 591 68 600 62' fill='none' stroke='%23F47A4A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    background-size: 100% 100% !important;

}

.hero .product-stage .hero .chart-legend .google,
.hero .product-stage .hero .legend-google {

    background: #00B1FF !important;

}

.hero .product-stage .hero .chart-legend .seo,
.hero .product-stage .hero .legend-seo {

    background: #C8DB63 !important;

}

.hero .product-stage .hero .chart-legend .meta,
.hero .product-stage .hero .chart-legend .social,
.hero .product-stage .hero .legend-meta,
.hero .product-stage .hero .legend-social {

    background: #F47A4A !important;

}

.hero .product-stage .hero .chart-legend span:nth-child(3)::before,
.hero .product-stage .hero .chart-legend span:nth-child(3) i,
.hero .product-stage .hero .legend-row span:nth-child(3)::before,
.hero .product-stage .hero .legend-row span:nth-child(3) i {

    background: #F47A4A !important;

}

.hero .product-stage .hero .chart-legend span:nth-child(3),
.hero .product-stage .hero .legend-row span:nth-child(3) {

    color: #7B6258 !important;

}

.hero .product-stage .references-v75 > .container {

    position: relative !important;

    z-index: 3 !important;

}

.hero .product-stage .references-badge::before,
.hero .product-stage .references-pill::before,
.hero .product-stage .references-label::before,
.hero .product-stage .references-kicker::before,
.hero .product-stage .references-badge .dot,
.hero .product-stage .references-pill .dot,
.hero .product-stage .references-label .dot,
.hero .product-stage .references-kicker .dot,
.hero .product-stage .references-badge .badge-dot,
.hero .product-stage .references-pill .badge-dot,
.hero .product-stage .references-label .badge-dot,
.hero .product-stage .references-kicker .badge-dot {

    display: none !important;
    content: none !important;

}

.hero .product-stage .hero .hero-eyebrow,
.hero .product-stage .hero .hero-eyebrow *,
.hero .product-stage .hero-eyebrow,
.hero .product-stage .hero-eyebrow * {

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

}

.hero .product-stage .hero .hero-eyebrow,
.hero .product-stage .references-v75 .ref75-kicker {

    background: #171A1F !important;

}

.hero .product-stage .contact-modern-v83
> .container {

    position: relative !important;

    z-index: 2 !important;

}

.hero .product-stage .references-v75 > .container {

    position: relative !important;

    z-index: 1 !important;

}

    /*
    |--------------------------------------------------------------------------
    | WRAPPER — MOBILE PREVIEW WINDOW
    |--------------------------------------------------------------------------
    */

    .hero .product-stage {

        position:
            relative !important;

        width:
            calc(100vw - 24px) !important;

        max-width:
            401px !important;

        height:
            350px !important;

        margin:
            38px auto 0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | WHOLE DESKTOP BROWSER
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    > .browser {

        position:
            absolute !important;

        top:
            0 !important;

        left:
            50% !important;

        right:
            auto !important;

        width:
            860px !important;

        min-width:
            860px !important;

        max-width:
            860px !important;

        margin:
            0 !important;

        transform:
            translateX(-50%)
            scale(.455) !important;

        transform-origin:
            top center !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DASHBOARD FULL CANVAS
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    .dashboard {

        width:
            100% !important;

        min-width:
            860px !important;

        max-width:
            860px !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MAIN AREA FULL WIDTH
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    .dash-main {

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        box-sizing:
            border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | FLOAT CARDS MOBILDE YOK
    |--------------------------------------------------------------------------
    */

    .hero
    .product-stage
    > .float-card {

        display:
            none !important;
    }

}


/*
|--------------------------------------------------------------------------
| 390–460 / 425px
|--------------------------------------------------------------------------
*/

@media (min-width:390px) and (max-width:460px) {

    .hero
    .product-stage {

        height:
            360px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.455) !important;
    }

}


/*
|--------------------------------------------------------------------------
| 360–389
|--------------------------------------------------------------------------
*/

@media (min-width:360px) and (max-width:389px) {

    .hero
    .product-stage {

        height:
            330px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.405) !important;
    }

}


/*
|--------------------------------------------------------------------------
| <=359
|--------------------------------------------------------------------------
*/

@media (max-width:359px) {

    .hero
    .product-stage {

        height:
            302px !important;
    }


    .hero
    .product-stage
    > .browser {

        transform:
            translateX(-50%)
            scale(.365) !important;
    }

}


/*
|--------------------------------------------------------------------------
| V128 — QUICK CONTACT
|--------------------------------------------------------------------------
*/


.quick-contact-v128 {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 15000;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    pointer-events: none;
}


.qc128-desktop-label {
    padding: 7px 11px;

    border: 1px solid rgba(0,56,82,.07);
    border-radius: 999px;

    background: #FFFFFF;

    color: #74848B;

    box-shadow:
        0 8px 24px rgba(4,30,42,.07);

    font-family: var(--heading);
    font-size: 9px;
    font-weight: 650;
}


.qc128-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}


.qc128-action {
    min-width: 158px;
    min-height: 58px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 7px 15px 7px 8px;

    border-radius: 18px;

    color: #FFFFFF !important;
    text-decoration: none !important;

    box-shadow:
        0 18px 42px rgba(3,34,48,.15);

    pointer-events: auto;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.qc128-action:hover {
    transform: translateY(-3px);

    box-shadow:
        0 23px 48px rgba(3,34,48,.21);
}


.qc128-phone {
    background:
        linear-gradient(
            120deg,
            #006A99,
            #003852
        );
}


.qc128-whatsapp {
    background:
        linear-gradient(
            120deg,
            #25D366,
            #128C4B
        );
}


.qc128-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        rgba(255,255,255,.14);
}


.qc128-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.qc128-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}


.qc128-copy small {
    color:
        rgba(255,255,255,.68);

    font-family: var(--body);
    font-size: 8px;
}


.qc128-copy strong {
    color: #FFFFFF;

    font-family: var(--heading);
    font-size: 12px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| MOBILE + TABLET
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {

    body {
        padding-bottom:
            calc(
                78px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            ) !important;
    }


    .quick-contact-v128 {
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        display: block;

        padding:
            8px
            10px
            calc(
                8px
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        background:
            #FFFFFF;

        border-top:
            1px solid
            rgba(0,56,82,.08);

        box-shadow:
            0 -10px 30px
            rgba(4,30,42,.08);

        box-sizing:
            border-box;

        pointer-events:
            auto;
    }


    .qc128-desktop-label {
        display: none;
    }


    .qc128-actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 8px;
    }


    .qc128-actions
    .qc128-action:only-child {
        grid-column:
            1 / -1;
    }


    .qc128-action {
        width: 100%;
        min-width: 0;
        min-height: 56px;

        justify-content: center;

        padding:
            6px 10px 6px 7px;

        gap: 8px;

        border-radius: 15px;

        box-sizing: border-box;

        box-shadow:
            0 8px 20px
            rgba(3,34,48,.10);
    }


    .qc128-action:hover {
        transform: none;
    }


    .qc128-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 11px;
    }


    .qc128-icon svg {
        width: 19px;
        height: 19px;
    }


    .qc128-copy small {
        font-size: 7px;
    }


    .qc128-copy strong {
        font-size: 11px;
    }


    body
    > .header-mobile-panel-v117 {
        z-index:
            2147483000 !important;
    }

}


/*
|--------------------------------------------------------------------------
| V129 — QUICK CONTACT POLISH
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SMALL LABELS — DAHA OKUNAKLI
|--------------------------------------------------------------------------
*/

.qc128-copy small {
    color:
        rgba(255,255,255,.90) !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        .01em !important;
}


/*
|--------------------------------------------------------------------------
| ANA METIN
|--------------------------------------------------------------------------
*/

.qc128-copy strong {
    font-size:
        12px !important;

    font-weight:
        750 !important;

    line-height:
        1.25 !important;
}


/*
|--------------------------------------------------------------------------
| DESKTOP HOVER — YUKARI DEGIL SOLA
|--------------------------------------------------------------------------
*/

@media (min-width:901px) {

    .qc128-action:hover {
        transform:
            translateX(-5px) !important;

        box-shadow:
            0 20px 46px
            rgba(3,34,48,.19) !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE / TABLET — HAREKET YOK
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {

    .qc128-action:hover,
    .qc128-action:active {
        transform:
            none !important;
    }


    .qc128-copy small {
        font-size:
            9px !important;

        font-weight:
            600 !important;

        color:
            rgba(255,255,255,.92) !important;
    }


    .qc128-copy strong {
        font-size:
            11px !important;

        font-weight:
            750 !important;
    }

}