@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: #ffffff;
}


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


/* ================================
   CAMPAIGN
================================ */

.campaign-bar {
    height: 62px;

    background:
        linear-gradient(
            90deg,
            #061c4c 0%,
            #030d20 45%,
            #02050a 100%
        );

    border-bottom: 1px solid rgba(255,255,255,.06);
}


.campaign-inner {
    width: 1180px;
    max-width: calc(100% - 50px);
    height: 100%;

    margin: auto;

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

    font-size: 14px;
}


.campaign-text {
    display: flex;
    align-items: center;
    gap: 25px;
}


.campaign-text > span {
    font-size: 15px;
}


.campaign-text strong {
    font-weight: 400;
}


.campaign-right {
    display: flex;
    align-items: center;
    gap: 25px;
}


.countdown {
    display: flex;
    gap: 10px;
}


.countdown span {

    padding: 11px 16px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 9px;

    font-size: 12px;
}


.campaign-link {
    font-size: 13px;
    text-decoration: underline;
}


/* ================================
   NAVBAR
================================ */

.navbar {

    width: 100%;

    height: 105px;

    padding: 0 45px;

    display: flex;
    align-items: center;

    position: absolute;

    top: 62px;
    left: 0;

    z-index: 100;

}


.logo {

    min-width: 205px;

    display: flex;
    align-items: center;

    font-size: 31px;

    font-weight: 700;

    letter-spacing: -2px;

}


.logo-icon {

    font-size: 46px;

    margin-right: 8px;

    color: #4c7cff;

    filter:
        drop-shadow(0 0 12px #1478ff);

}


.logo-white {
    color: #fff;
}


.logo-blue {

    color: #334cff;

}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 38px;

    margin-left: auto;

}


.nav-menu > a,
.nav-item > a {

    font-size: 13px;

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

    white-space: nowrap;

    transition: .2s;

}


.nav-menu > a:hover,
.nav-item > a:hover {

    color: #5977ff;

}


/* Dropdown */

.nav-item {

    position: relative;

}


.dropdown-menu {

    position: absolute;

    top: 30px;

    left: -20px;

    width: 220px;

    padding: 10px;

    border-radius: 12px;

    background: #09121e;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow: 0 20px 50px rgba(0,0,0,.35);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .2s;

}


.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.dropdown-menu a {

    display: block;

    padding: 12px 14px;

    font-size: 13px;

    border-radius: 7px;

}


.dropdown-menu a:hover {

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

}


/* navbar right */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-left: 35px;

    white-space: nowrap;

}


.phone {

    font-size: 13px;

}


.start-btn {

    padding: 15px 20px;

    background:
        linear-gradient(
            135deg,
            #244fff,
            #302be8
        );

    border-radius: 22px;

    font-size: 13px;

    transition: .25s;

}


.start-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(42,73,255,.35);

}


.login {

    font-size: 13px;

}


.mobile-menu-btn {

    display: none;

    background: transparent;

    border: none;

    color: white;

    font-size: 28px;

}


/* ================================
   HERO
================================ */

.hero {

    min-height: 715px;

    position: relative;

    display: flex;

    align-items: center;

    background-image:
        linear-gradient(
            90deg,
            rgba(2,10,20,1) 0%,
            rgba(2,10,20,.98) 31%,
            rgba(2,10,20,.75) 50%,
            rgba(2,10,20,.15) 75%
        ),
        url('../images/hero-ecommerce-v2.jpg');

    background-size: cover;

    background-position: center right;

    padding-top: 90px;

}


.hero-container {

    width: 100%;

    padding: 0 58px;

    position: relative;

    z-index: 2;

}


.hero-content {

    width: 600px;
    transform: translateX(20%);

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 20px;

    margin-bottom: 45px;

    border: 1px solid rgba(255,255,255,.45);

    border-radius: 30px;

    font-size: 14px;

}


.hero h1 {

    font-size: 45px;

    line-height: 1.35;

    font-weight: 300;

    letter-spacing: -1.5px;

    margin-bottom: 22px;

}


.hero h1 strong {

    display: block;

    font-size: 45px;

    font-weight: 700;

}


.hero p {

    width: 570px;

    max-width: 100%;

    font-size: 15px;

    line-height: 1.8;

    color: #c8ccd3;

    margin-bottom: 38px;

}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;

}


.primary-btn {

    min-width: 240px;

    height: 57px;

    padding: 0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            #244fff,
            #302cff
        );

    border-radius: 28px;

    font-size: 15px;

    transition: .25s;

}


.primary-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(39,66,255,.35);

}


.secondary-btn {

    min-width: 220px;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    border: 1px solid rgba(255,255,255,.65);

    border-radius: 28px;

    font-size: 15px;

    transition: .25s;

}


.secondary-btn:hover {

    background: white;

    color: #050a12;

}


/* ================================
   BRANDS
================================ */

.brands {

    height: 115px;

    background: #07111c;

    display: grid;

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

    align-items: center;

    padding: 0 60px;

}


.brand {

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    border-right: 1px solid rgba(255,255,255,.12);

    color: #c7cbd3;

    font-size: 24px;

}


.brand:last-child {

    border-right: none;

}


.brand span {

    font-size: 17px;

    letter-spacing: 4px;

    font-weight: 600;

}


/* ================================
   RESPONSIVE
================================ */

@media(max-width: 1200px) {

    .nav-menu {
        gap: 18px;
    }

    .phone {
        display: none;
    }

}


@media(max-width: 1000px) {

    .campaign-right {
        display: none;
    }

    .campaign-inner {
        justify-content: center;
    }

    .navbar {
        padding: 0 25px;
    }

    .nav-menu,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        margin-left: auto;
    }

    .hero {
        min-height: 700px;
    }

    .hero-container {
        padding: 0 30px;
    }

    .brands {
        grid-template-columns: repeat(3,1fr);
        height: auto;
        padding: 25px;
        gap: 20px;
    }

    .brand {
        border: none;
    }

}


@media(max-width: 650px) {

    .campaign-bar {
        height: 50px;
    }

    .campaign-text strong {
        display: none;
    }

    .navbar {
        top: 50px;
        height: 85px;
    }

    .logo {
        font-size: 26px;
    }

    .logo-icon {
        font-size: 35px;
    }

    .hero {
        padding-top: 130px;

        background-position: 70% center;
    }

    .hero::before {

        content: "";

        position: absolute;

        inset: 0;

        background: rgba(2,8,16,.55);

    }

    .hero-content {
        width: 100%;
        transform: none;
    }

    .hero-badge {
        margin-bottom: 30px;
        font-size: 12px;
    }

    .hero h1,
    .hero h1 strong {
        font-size: 35px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
    }

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

}

/* =================================
   SUCCESS SECTION
================================= */

.success-section {
    position: relative;
    min-height: 920px;
    padding: 70px 60px 75px;
    background: #fff;
    color: #070b24;
    overflow: hidden;
}


/* BRAND CLOUD */

.brand-cloud {
    max-width: 1370px;
    margin: 0 auto;
}

.cloud-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.brand-card {
    width: 102px;
    height: 102px;

    flex-shrink: 0;

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

    text-align: center;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 16px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, .06);

    color: #080808;

    font-size: 15px;
    line-height: 1.05;
}

.brand-card small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
}

.brand-card.empty {
    box-shadow:
        0 2px 10px rgba(0, 0, 0, .025);

    opacity: .65;
}

.person-card {
    font-size: 52px;
    overflow: hidden;
    background: #f3f3f3;
}

.green {
    color: #32991e;
}

.green small {
    color: #111;
}

.blue-text {
    color: #2738df;
}

.serif {
    font-family: Georgia, serif;
    font-size: 13px;
}

.spaced {
    font-family: Georgia, serif;
    letter-spacing: 4px;
    font-size: 12px;
}

.brand-symbol {
    font-size: 45px;
}

.cloud-gap {
    width: 205px;
    flex-shrink: 0;
}

.cloud-gap.large {
    width: 480px;
}


/* CENTER CONTENT */

.success-content {
    position: relative;
    z-index: 5;

    margin: -90px auto 55px;

    text-align: center;
}

.success-content h2 {
    font-size: 50px;
    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1px;

    margin-bottom: 30px;
}

.success-content h2 span {
    display: block;
}

.success-button {
    width: 365px;
    max-width: 100%;

    height: 70px;

    margin: auto;

    padding: 0 30px;

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

    color: #fff;

    font-size: 19px;
    font-weight: 500;

    background:
        linear-gradient(
            135deg,
            #273dff,
            #3428ef
        );

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(44, 54, 255, .20);

    transition: .25s;
}

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

    box-shadow:
        0 16px 35px rgba(44, 54, 255, .30);
}

.success-button span {
    font-size: 30px;
    font-weight: 300;
}


/* =================================
   STATISTICS
================================= */

.stats-box {
    max-width: 1340px;

    min-height: 305px;

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 22px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);

    padding: 35px 20px;
}

.stat-item {
    min-height: 190px;

    padding: 5px 25px;

    text-align: center;

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

    border-right: 1px solid #dedede;
}

.stat-item:last-child {
    border-right: none;
}

.stat-icon {
    height: 55px;

    display: flex;
    align-items: center;

    color: #243cff;

    font-size: 45px;

    margin-bottom: 10px;
}

.stat-item strong {
    display: block;

    color: #2538ed;

    font-size: 47px;

    line-height: 1;

    margin-bottom: 17px;
}

.stat-item h3 {
    color: #111;

    font-size: 19px;
    font-weight: 500;

    margin-bottom: 13px;
}

.stat-item p {
    color: #777;

    font-size: 14px;

    line-height: 1.45;
}


/* =================================
   RESPONSIVE
================================= */

@media(max-width: 1100px) {

    .brand-cloud {
        opacity: .55;
    }

    .brand-card {
        width: 85px;
        height: 85px;
    }

    .cloud-gap {
        width: 100px;
    }

    .cloud-gap.large {
        width: 300px;
    }

    .success-content h2 {
        font-size: 42px;
    }

}


@media(max-width: 800px) {

    .success-section {
        padding: 60px 20px;
        min-height: auto;
    }

    .brand-cloud {
        display: none;
    }

    .success-content {
        margin: 0 auto 50px;
    }

    .success-content h2 {
        font-size: 35px;
    }

    .success-button {
        height: 60px;
        font-size: 16px;
    }

    .stats-box {
        grid-template-columns: 1fr 1fr;
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

}


@media(max-width: 520px) {

    .success-content h2 {
        font-size: 30px;
    }

    .stats-box {
        grid-template-columns: 1fr;
    }

    .stat-item {
        padding: 30px 10px;
    }

    .stat-item strong {
        font-size: 40px;
    }

}

/* =================================
   SHIPPING SECTION
================================= */

.shipping-section {
    background: #ffffff;
    padding: 80px 0 95px;
    color: #080b20;
}

.shipping-container {
    width: 1180px;
    max-width: calc(100% - 50px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 70px;
}


/* LEFT */

.shipping-content {
    max-width: 560px;
}

.shipping-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 13px;

    margin-bottom: 22px;

    background: #f5f4ff;

    color: #4b45d8;

    border-radius: 20px;

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

.shipping-content h2 {
    font-size: 39px;
    line-height: 1.2;
    letter-spacing: -1.2px;

    font-weight: 700;

    margin-bottom: 24px;
}

.shipping-content h2 span {
    display: block;
}

.shipping-content h2 strong {
    color: #3738ef;
    font-weight: 700;
}

.shipping-content p {
    max-width: 540px;

    color: #737582;

    font-size: 15px;
    line-height: 1.7;

    margin-bottom: 30px;
}

.shipping-button {
    width: 290px;
    height: 52px;

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

    padding: 0 20px;

    background:
        linear-gradient(
            135deg,
            #2e43f6,
            #3628ed
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    border-radius: 7px;

    box-shadow:
        0 10px 25px rgba(56, 46, 237, .20);

    transition: .25s;
}

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

    box-shadow:
        0 14px 30px rgba(56, 46, 237, .28);
}

.shipping-button span {
    font-size: 23px;
}


/* RIGHT */

.shipping-visual {
    min-height: 420px;

    position: relative;

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

.shipping-glow {
    width: 390px;
    height: 390px;

    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(89, 69, 255, .17) 0%,
            rgba(89, 69, 255, .08) 45%,
            rgba(89, 69, 255, 0) 72%
        );

    filter: blur(3px);
}


/* BOX */

.package-box {
    width: 180px;
    height: 180px;

    position: relative;

    z-index: 3;

    transform: rotate(5deg);

    filter:
        drop-shadow(0 20px 25px rgba(0,0,0,.13));
}

.package-front {
    width: 180px;
    height: 155px;

    position: absolute;
    bottom: 0;

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

    background:
        linear-gradient(
            135deg,
            #e9b673,
            #bd7842
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            92% 100%,
            8% 100%
        );

    color: #9c5d25;

    font-size: 55px;
}

.package-top {
    width: 172px;
    height: 62px;

    position: absolute;

    top: 0;
    left: 4px;

    background:
        linear-gradient(
            135deg,
            #f3cb92,
            #d7985d
        );

    clip-path:
        polygon(
            12% 0,
            100% 20%,
            88% 100%,
            0 78%
        );

    z-index: 4;
}


/* CARGO LOGOS */

.cargo-card {
    position: absolute;

    z-index: 4;

    min-width: 125px;
    min-height: 66px;

    padding: 12px 18px;

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

    text-align: center;

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

    border: 1px solid #eeeeee;

    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .08);

    font-size: 14px;
    font-weight: 600;
}

.cargo-1 {
    top: 25px;
    left: 40px;

    transform: rotate(-8deg);

    color: #70a844;
}

.cargo-2 {
    top: 0;
    right: 100px;

    transform: rotate(10deg);

    color: #1e4c95;
}

.cargo-3 {
    top: 125px;
    right: 5px;

    transform: rotate(10deg);

    color: #f39218;
}

.cargo-4 {
    bottom: 30px;
    left: 55px;

    transform: rotate(6deg);

    color: #2584bf;
}

.cargo-5 {
    bottom: 20px;
    right: 30px;

    transform: rotate(-8deg);

    color: #d82217;
}


/* RESPONSIVE */

@media(max-width: 900px) {

    .shipping-container {
        grid-template-columns: 1fr;
    }

    .shipping-content {
        max-width: none;
        text-align: center;
    }

    .shipping-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .shipping-button {
        margin: auto;
    }

    .shipping-visual {
        margin-top: 20px;
    }

}


@media(max-width: 600px) {

    .shipping-section {
        padding: 60px 0;
    }

    .shipping-container {
        max-width: calc(100% - 30px);
    }

    .shipping-content h2 {
        font-size: 30px;
    }

    .shipping-content p {
        font-size: 14px;
    }

    .shipping-visual {
        transform: scale(.8);
        margin-left: -30px;
        margin-right: -30px;
    }

}

/* ================================
   SALES CHANNELS
================================ */

.sales-channels-section {
    background: #fff;
    padding: 85px 0 100px;
    color: #080b20;
}

.sales-channels-container {
    width: 1180px;
    max-width: calc(100% - 50px);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 80px;
}


/* LEFT */

.sales-channels-content {
    max-width: 570px;
}

.sales-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    margin-bottom: 25px;

    border-radius: 20px;

    background: #f4f3ff;

    color: #4e47d9;

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

.sales-channels-content h2 {
    font-size: 40px;

    line-height: 1.2;

    letter-spacing: -1.2px;

    margin-bottom: 24px;
}

.sales-channels-content h2 span {
    display: block;
}

.sales-channels-content h2 strong {
    color: #3437e9;
}

.sales-channels-content p {
    max-width: 540px;

    color: #747680;

    font-size: 15px;
    line-height: 1.7;

    margin-bottom: 30px;
}

.sales-button {
    width: 245px;
    height: 52px;

    padding: 0 20px;

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

    background:
        linear-gradient(
            135deg,
            #3045f7,
            #3328ed
        );

    color: #fff;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 500;

    box-shadow:
        0 10px 25px rgba(52, 44, 238, .20);

    transition: .25s;
}

.sales-button:hover {
    transform: translateY(-3px);
}

.sales-button span {
    font-size: 23px;
}


/* ================================
   RIGHT VISUAL
================================ */

.sales-visual {
    position: relative;

    min-height: 430px;

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

.sales-glow {
    width: 410px;
    height: 410px;

    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(69, 61, 255, .16) 0%,
            rgba(69, 61, 255, .08) 45%,
            rgba(69, 61, 255, 0) 72%
        );
}


/* PRODUCT */

.product-card {
    position: relative;

    z-index: 3;

    width: 165px;

    background: #fff;

    border-radius: 16px;

    padding: 10px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

    border: 1px solid #eee;
}

.product-image {
    height: 145px;

    position: relative;

    background:
        linear-gradient(
            145deg,
            #f5f1eb,
            #e9e4de
        );

    border-radius: 10px;

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

.chair {
    font-size: 85px;
}

.heart {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    background: #fff;

    color: #999;
}

.product-info {
    position: relative;

    padding: 12px 3px 4px;
}

.product-info strong {
    display: block;

    font-size: 12px;

    margin-bottom: 10px;
}

.fake-line {
    height: 5px;

    background: #e8e8ed;

    border-radius: 10px;

    margin-bottom: 6px;
}

.line-1 {
    width: 75%;
}

.line-2 {
    width: 55%;
}

.stock {
    position: absolute;

    right: 2px;
    bottom: 3px;

    color: #58a44c;

    font-size: 9px;
}


/* CHANNEL CARDS */

.channel-card {
    position: absolute;

    z-index: 4;

    width: 78px;
    height: 70px;

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

    background: #fff;

    border-radius: 13px;

    border: 1px solid #ededed;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    font-weight: 700;
}


/* POSITION */

.amazon {
    top: 10px;
    left: 70px;

    font-size: 16px;
}

.trendyol {
    top: 12px;
    right: 60px;

    background:
        linear-gradient(
            #f26f21 0 28%,
            #111 28% 72%,
            #f26f21 72%
        );

    color: white;

    font-size: 10px;
}

.hepsiburada {
    top: 140px;
    left: 18px;

    color: #f1741c;

    line-height: .9;

    font-size: 15px;
}

.n11 {
    top: 140px;
    right: 15px;

    color: #222;

    font-size: 19px;
}

.instagram {
    left: 70px;
    bottom: 45px;

    font-size: 46px;

    color: #d4388f;
}

.shopify {
    right: 70px;
    bottom: 45px;

    color: #72aa36;

    font-size: 37px;
}

.facebook {
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 72px;
    height: 65px;

    background: #fff;

    color: #3076e8;

    font-family: Arial, sans-serif;

    font-size: 46px;
}


/* CONNECTOR LINES */

.sales-visual::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 250px;

    border:
        1px dashed rgba(71, 73, 145, .25);

    border-radius: 40%;

    z-index: 1;
}


/* RESPONSIVE */

@media(max-width: 900px) {

    .sales-channels-container {
        grid-template-columns: 1fr;
    }

    .sales-channels-content {
        max-width: none;
        text-align: center;
    }

    .sales-channels-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .sales-button {
        margin: auto;
    }

}


@media(max-width: 600px) {

    .sales-channels-section {
        padding: 60px 0;
    }

    .sales-channels-container {
        max-width: calc(100% - 30px);
    }

    .sales-channels-content h2 {
        font-size: 30px;
    }

    .sales-visual {
        transform: scale(.82);

        margin-left: -35px;
        margin-right: -35px;
    }

}

/* ================================
   GLOBAL SALES
================================ */

.global-sales-section {
    background: #fff;
    padding: 90px 0 105px;
    color: #080b20;
}

.global-sales-container {
    width: 1180px;
    max-width: calc(100% - 50px);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 70px;
}


/* LEFT */

.global-sales-content {
    max-width: 560px;
}

.global-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    margin-bottom: 24px;

    background: #f4f3ff;
    color: #4a45d5;

    border-radius: 20px;

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

.global-sales-content h2 {
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;

    margin-bottom: 24px;
}

.global-sales-content h2 span {
    display: block;
}

.global-sales-content h2 strong {
    color: #3438e8;
}

.global-sales-content p {
    max-width: 540px;

    color: #767985;

    font-size: 15px;
    line-height: 1.7;

    margin-bottom: 30px;
}

.global-button {
    width: 290px;
    height: 52px;

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

    padding: 0 20px;

    background:
        linear-gradient(
            135deg,
            #3045f7,
            #3429ec
        );

    color: #fff;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 500;

    box-shadow:
        0 10px 25px rgba(52, 43, 237, .20);

    transition: .25s;
}

.global-button:hover {
    transform: translateY(-3px);
}

.global-button span {
    font-size: 23px;
}


/* RIGHT */

.global-sales-visual {
    position: relative;

    min-height: 460px;

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


/* WORLD */

.global-glow {
    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72, 66, 255, .18) 0%,
            rgba(72, 66, 255, .08) 50%,
            rgba(72, 66, 255, 0) 75%
        );
}

.world-circle {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 35%,
            #ffffff 0%,
            #eef0ff 28%,
            #dfe3ff 55%,
            #cfd6ff 100%
        );

    box-shadow:
        inset -20px -20px 40px rgba(85, 94, 220, .08),
        0 20px 50px rgba(70, 73, 200, .10);
}

.world-circle::before {
    content: "🌍";

    position: absolute;
    inset: 0;

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

    font-size: 245px;

    opacity: .22;
    filter: grayscale(1);
}


/* PRODUCT */

.global-product-card {
    position: relative;
    z-index: 5;

    width: 175px;

    padding: 10px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 16px;

    box-shadow:
        0 16px 40px rgba(0,0,0,.12);
}

.global-product-image {
    height: 140px;

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

    background:
        linear-gradient(
            145deg,
            #f6f6fa,
            #e9ebf4
        );

    border-radius: 10px;

    font-size: 82px;
}

.global-product-info {
    padding: 12px 3px 4px;
}

.global-product-info strong {
    display: block;

    font-size: 12px;

    margin-bottom: 10px;
}

.stock-row {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #59a652;

    font-size: 10px;

    margin-bottom: 10px;
}

.stock-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #54b65f;
}

.global-line {
    height: 5px;

    background: #ececf0;

    border-radius: 10px;

    margin-bottom: 6px;
}

.line-a {
    width: 76%;
}

.line-b {
    width: 55%;
}


/* COUNTRY CARDS */

.country-card {
    position: absolute;

    z-index: 6;

    min-width: 110px;
    height: 60px;

    padding: 10px 13px;

    display: flex;
    align-items: center;

    gap: 9px;

    background: #fff;

    border: 1px solid #ededed;
    border-radius: 13px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.07);
}

.flag {
    font-size: 24px;
}

.country-card div {
    display: flex;
    flex-direction: column;
}

.country-card strong {
    font-size: 10px;
    line-height: 1.2;
}

.country-card small {
    color: #777;

    font-size: 9px;

    margin-top: 2px;
}


/* POSITIONS */

.country-us {
    top: 10px;
    left: 85px;
}

.country-de {
    top: 15px;
    right: 55px;
}

.country-sa {
    left: 0;
    top: 165px;

    min-width: 150px;
}

.country-ae {
    right: 0;
    top: 170px;
}

.country-fr {
    left: 55px;
    bottom: 30px;
}

.country-gb {
    right: 35px;
    bottom: 35px;
}


/* AIRPLANE */

.plane-icon {
    position: absolute;

    z-index: 7;

    top: 100px;
    right: 150px;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3148fa,
            #3926e9
        );

    color: #fff;

    font-size: 22px;

    box-shadow:
        0 10px 25px rgba(55, 46, 235, .25);
}


/* ORBIT */

.global-sales-visual::before {
    content: "";

    position: absolute;

    width: 395px;
    height: 350px;

    border: 1px dashed rgba(62, 68, 170, .35);

    border-radius: 50%;

    transform: rotate(12deg);
}


/* RESPONSIVE */

@media(max-width: 900px) {

    .global-sales-container {
        grid-template-columns: 1fr;
    }

    .global-sales-content {
        max-width: none;
        text-align: center;
    }

    .global-sales-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .global-button {
        margin: auto;
    }

}


@media(max-width: 600px) {

    .global-sales-section {
        padding: 60px 0;
    }

    .global-sales-container {
        max-width: calc(100% - 30px);
    }

    .global-sales-content h2 {
        font-size: 30px;
    }

    .global-sales-visual {
        transform: scale(.78);

        margin-left: -50px;
        margin-right: -50px;
    }

}

/* ================================
   DASHBOARD SECTION
================================ */

.dashboard-section {
    background: #fff;
    padding: 90px 0 110px;
    color: #080b20;
}

.dashboard-container {
    width: 1180px;
    max-width: calc(100% - 50px);
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;

    gap: 65px;
}


/* LEFT */

.dashboard-content {
    max-width: 560px;
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    margin-bottom: 24px;

    border-radius: 20px;

    background: #f4f3ff;
    color: #4c46d6;

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

.dashboard-content h2 {
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -1.2px;

    margin-bottom: 24px;
}

.dashboard-content h2 span {
    display: block;
}

.dashboard-content h2 strong {
    color: #3438e8;
}

.dashboard-content p {
    max-width: 530px;

    color: #747781;

    font-size: 15px;
    line-height: 1.7;

    margin-bottom: 30px;
}

.dashboard-button {
    width: 245px;
    height: 52px;

    padding: 0 20px;

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

    background:
        linear-gradient(
            135deg,
            #3045f7,
            #3429ed
        );

    color: #fff;

    border-radius: 7px;

    font-size: 14px;
    font-weight: 500;

    box-shadow:
        0 10px 25px rgba(52,43,237,.20);

    transition: .25s;
}

.dashboard-button:hover {
    transform: translateY(-3px);
}

.dashboard-button span {
    font-size: 23px;
}


/* RIGHT */

.dashboard-visual {
    position: relative;

    min-height: 470px;

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

.dashboard-glow {
    position: absolute;

    width: 500px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(71,65,255,.14) 0%,
            rgba(71,65,255,.06) 55%,
            rgba(71,65,255,0) 75%
        );
}


/* ADMIN MOCKUP */

.admin-mockup {
    position: relative;
    z-index: 3;

    width: 570px;
    height: 350px;

    display: grid;
    grid-template-columns: 118px 1fr;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 13px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.11);

    overflow: hidden;
}


/* SIDEBAR */

.mock-sidebar {
    padding: 14px 10px;

    background:
        linear-gradient(
            180deg,
            #111936,
            #182143
        );

    color: #fff;
}

.mock-logo {
    font-size: 12px;
    font-weight: 600;

    margin-bottom: 18px;
}

.mock-nav {
    height: 31px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 8px;

    margin-bottom: 3px;

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

    border-radius: 6px;

    font-size: 9px;
}

.mock-nav.active {
    background:
        linear-gradient(
            90deg,
            #4158ff,
            #5d42ee
        );

    color: #fff;
}


/* MAIN */

.mock-main {
    padding: 14px;
}

.mock-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 15px;
}

.mock-topbar strong {
    display: block;

    font-size: 11px;
}

.mock-topbar small {
    color: #aaa;

    font-size: 7px;
}

.mock-period {
    padding: 6px 9px;

    border: 1px solid #eee;
    border-radius: 5px;

    font-size: 7px;
}


/* STATS */

.mock-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);

    gap: 8px;

    margin-bottom: 12px;
}

.mini-stat {
    height: 76px;

    padding: 9px;

    background: #fff;

    border: 1px solid #f0f0f0;
    border-radius: 7px;

    box-shadow:
        0 5px 12px rgba(0,0,0,.04);
}

.mini-stat span {
    color: #4644ef;

    font-size: 14px;
}

.mini-stat small {
    display: block;

    font-size: 6px;

    margin: 5px 0 10px;
}

.mini-line {
    height: 18px;

    border-bottom: 2px solid #5d52ee;

    border-radius: 50%;

    transform: skewY(-10deg);
}


/* BOTTOM */

.mock-bottom {
    display: grid;
    grid-template-columns: 1.35fr .9fr;

    gap: 10px;
}

.chart-card,
.products-card {
    height: 155px;

    padding: 10px;

    border: 1px solid #eee;
    border-radius: 7px;

    background: #fff;
}

.chart-card > strong,
.products-card > strong {
    font-size: 8px;
}


/* BAR CHART */

.bar-chart {
    height: 105px;

    margin-top: 15px;

    display: flex;
    align-items: flex-end;

    gap: 8px;
}

.bar-chart span {
    width: 12px;

    background:
        linear-gradient(
            180deg,
            #6436ef,
            #3952f0
        );

    border-radius: 3px 3px 0 0;
}


/* PRODUCTS */

.mock-product {
    display: grid;
    grid-template-columns: 28px 1fr 25px;
    align-items: center;

    gap: 7px;

    margin-top: 12px;
}

.mock-product span {
    font-size: 18px;
}

.mock-product div i {
    display: block;

    height: 4px;

    margin-bottom: 5px;

    background: #ececf0;
    border-radius: 10px;
}

.mock-product div i:first-child {
    width: 80%;
}

.mock-product div i:last-child {
    width: 55%;
}

.mock-product b {
    font-size: 7px;
}


/* CHANNEL WIDGET */

.channel-widget {
    position: absolute;

    z-index: 5;

    left: 20px;
    bottom: 10px;

    width: 200px;

    padding: 14px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.11);
}

.channel-widget > strong {
    font-size: 10px;
}

.channel-widget-body {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-top: 10px;
}

.donut-chart {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    background:
        conic-gradient(
            #4355ef 0 28%,
            #6543e8 28% 52%,
            #38b6d5 52% 76%,
            #f68a2d 76% 100%
        );

    position: relative;
}

.donut-chart::after {
    content: "";

    position: absolute;

    inset: 17px;

    border-radius: 50%;

    background: #fff;
}

.channel-legend {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.channel-legend span {
    font-size: 7px;
}

.channel-legend i {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 5px;

    border-radius: 50%;

    background: #4a50e8;
}


/* SECURITY */

.security-widget {
    position: absolute;

    z-index: 5;

    right: 0;
    bottom: -15px;

    width: 185px;

    padding: 12px 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}

.security-widget > span {
    color: #3849eb;

    font-size: 30px;
}

.security-widget strong {
    display: block;

    font-size: 10px;
}

.security-widget small {
    color: #999;

    font-size: 7px;
}


/* RESPONSIVE */

@media(max-width: 950px) {

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

    .dashboard-content {
        max-width: none;
        text-align: center;
    }

    .dashboard-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-button {
        margin: auto;
    }

}


@media(max-width: 650px) {

    .dashboard-section {
        padding: 60px 0;
    }

    .dashboard-container {
        max-width: calc(100% - 30px);
    }

    .dashboard-content h2 {
        font-size: 30px;
    }

    .dashboard-visual {
        transform: scale(.72);

        margin-left: -90px;
        margin-right: -90px;
    }

}

/* ================================
   PARTNERS
================================ */

.partners-section {
    background: #fff;
    padding: 80px 0 55px;
    color: #080b20;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 35px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;
    margin-bottom: 18px;

    border-radius: 22px;

    background: #f7f6ff;
    border: 1px solid #ecebfa;

    color: #303cd8;
    font-size: 13px;
    font-weight: 500;
}

.section-head h2 {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.section-head p {
    color: #6f7484;
    font-size: 15px;
    line-height: 1.6;
}

.partners-box {
    width: 1250px;
    max-width: calc(100% - 50px);
    margin: auto;

    min-height: 170px;

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

    align-items: center;

    background: #fff;

    border: 1px solid #ececec;
    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}

.partner-item {
    min-height: 110px;

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

    border-right: 1px solid #e8e8e8;
}

.partner-item:last-child {
    border-right: none;
}

.partner-item strong {
    display: block;
    margin-bottom: 16px;
}

.partner-item span {
    color: #6d7485;
    font-size: 13px;
}

.meta-logo {
    font-size: 27px;
    color: #1677ed;
}

.mastercard-logo {
    font-size: 19px;
    color: #111;
}

.paytr-logo {
    font-size: 31px;
    color: #1680d2;
}

.geliver-logo {
    font-size: 29px;
    color: #1684d9;
}

.aws-logo {
    font-size: 32px;
    color: #26364b;
}


/* ================================
   TESTIMONIALS
================================ */

.testimonials-section {
    position: relative;
    width: calc(100% - 36px);
    max-width: none;
    margin: 0 18px 80px;
    padding: 60px 55px 40px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(74, 70, 255, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(74, 70, 255, .05),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #fbfbff 0%,
            #f6f7ff 100%
        );

    border: 1px solid #e4e6fa;
    border-radius: 24px;

    box-shadow:
        0 20px 55px rgba(20, 24, 70, .05);

    color: #080b20;
}

.testimonials-section::before {
    content: "“";
    position: absolute;
    top: 15px;
    right: 65px;
    font-size: 140px;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(56, 64, 240, .05);
    pointer-events: none;
}

.testimonials-section .section-head {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.testimonials-section .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: #f6f5ff;
    border: 1px solid #e6e5fa;
    color: #3442e7;
    font-size: 13px;
    font-weight: 500;
}

.testimonials-section .section-head h2 {
    margin-bottom: 13px;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -1.3px;
    color: #090c1c;
}

.testimonials-section .section-head p {
    max-width: 590px;
    margin: auto;
    color: #70778e;
    font-size: 14px;
    line-height: 1.65;
}

.testimonials-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1360px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0 auto;
}

.testimonial-card {
    min-height: 235px;
    padding: 26px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #e8eaf1;
    border-radius: 18px;
    box-shadow:
        0 10px 30px rgba(23, 28, 75, .06);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: #daddf7;
    box-shadow:
        0 18px 40px rgba(23, 28, 75, .10);
}

.testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf0f5;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.customer-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #f1f0ff,
            #dfe1ff
        );
    color: #111522;
    font-size: 14px;
    font-weight: 700;
}

.customer-info strong {
    display: block;
    margin-bottom: 4px;
    color: #111522;
    font-size: 15px;
    font-weight: 600;
}

.customer-info span {
    display: block;
    color: #3949e8;
    font-size: 12px;
}

.stars {
    flex-shrink: 0;
    color: #ff9d00;
    font-size: 16px;
    letter-spacing: 1px;
}

.testimonial-text {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.quote {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #f0efff,
            #e9eaff
        );
    color: #3543ef;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
}

.testimonial-text p {
    margin: 0;
    color: #667188;
    font-size: 13px;
    line-height: 1.7;
}

.testimonial-dots {
    position: relative;
    z-index: 2;
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}

.testimonial-dots span {
    width: 24px;
    height: 7px;
    display: block;
    border-radius: 50px;
    background: #d8dbe7;
}

.testimonial-dots span.active {
    width: 34px;
    background:
        linear-gradient(
            90deg,
            #3449ff,
            #4933f3
        );
}

/* RESPONSIVE */

@media(max-width: 1050px) {
    .testimonials-section {
        padding: 50px 30px 36px;
    }

    .testimonials-grid {
        gap: 18px;
    }

    .testimonial-card {
        padding: 22px 18px;
    }

    .stars {
        font-size: 13px;
    }
}

@media(max-width: 950px) {
    .partners-box {
        grid-template-columns: repeat(2,1fr);
    }

    .partner-item {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

@media(max-width: 850px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        min-height: auto;
    }
}

@media(max-width: 600px) {
    .partners-section {
        padding-top: 60px;
    }

    .section-head {
        padding: 0 15px;
    }

    .section-head h2 {
        font-size: 31px;
    }

    .partners-box {
        grid-template-columns: 1fr;
        max-width: calc(100% - 30px);
    }

    .testimonials-section {
        width: calc(100% - 24px);
        margin: 0 12px 55px;
        padding: 42px 16px 30px;
        border-radius: 20px;
    }

    .testimonials-section::before {
        display: none;
    }

    .testimonials-section .section-head {
        margin-bottom: 30px;
    }

    .testimonials-section .section-head h2 {
        font-size: 30px;
    }

    .testimonials-section .section-head p {
        font-size: 13px;
    }

    .testimonial-top {
        align-items: flex-start;
    }

    .customer-avatar {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }
}

/* ================================
   FAQ
================================ */

.faq-section {
    padding: 75px 0 90px;
    background: #fff;
    color: #080b20;
}

.faq-header {
    max-width: 750px;
    margin: 0 auto 35px;
    text-align: center;
}

.faq-header h2 {
    font-size: 43px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    margin-bottom: 18px;
}

.faq-header h2 span {
    display: block;
}

.faq-header p {
    max-width: 620px;
    margin: auto;

    color: #697086;

    font-size: 15px;
    line-height: 1.6;
}


/* FAQ BOX */

.faq-box {
    width: 1320px;
    max-width: calc(100% - 50px);

    margin: auto;
    padding: 25px 30px 30px;

    border: 1px solid #e8e8ec;
    border-radius: 17px;

    box-shadow: 0 10px 35px rgba(0,0,0,.045);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.faq-item {
    border: 1px solid #e8e8ec;
    border-radius: 8px;

    background: #fff;

    overflow: hidden;

    transition: .2s;
}

.faq-item:hover {
    border-color: #d5d7ef;
}

.faq-question {
    width: 100%;
    min-height: 48px;

    padding: 10px 15px;

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

    gap: 20px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #11131c;

    text-align: left;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;
}

.faq-question span {
    flex-shrink: 0;

    color: #293be9;

    font-size: 27px;
    font-weight: 300;

    line-height: 1;

    transition: transform .25s;
}

.faq-answer {
    max-height: 0;

    padding: 0 15px;

    overflow: hidden;

    color: #6f7482;

    font-size: 13px;
    line-height: 1.6;

    transition:
        max-height .3s ease,
        padding .3s ease;
}

.faq-item.active .faq-answer {
    max-height: 180px;
    padding: 0 15px 15px;
}

.faq-item.active .faq-question span {
    transform: rotate(45deg);
}


/* SUPPORT */

.faq-support {
    width: 670px;
    max-width: 100%;

    min-height: 88px;

    margin: 25px auto 0;

    padding: 15px 20px;

    display: flex;
    align-items: center;

    gap: 18px;

    border: 1px solid #e7e7ed;
    border-radius: 10px;

    background: #fff;
}

.support-icon {
    color: #3141ec;
    font-size: 35px;
}

.support-text {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.support-text strong {
    font-size: 14px;
}

.support-text span {
    color: #7b7f8d;
    font-size: 11px;
}

.support-button {
    min-width: 165px;
    height: 47px;

    padding: 0 18px;

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

    background: linear-gradient(
        135deg,
        #3045f7,
        #3529ed
    );

    color: #fff;

    border-radius: 7px;

    font-size: 13px;

    transition: .25s;
}

.support-button:hover {
    transform: translateY(-2px);
}

.support-button span {
    font-size: 21px;
}


/* RESPONSIVE */

@media(max-width: 800px) {

    .faq-header {
        padding: 0 20px;
    }

    .faq-header h2 {
        font-size: 32px;
    }

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

    .faq-box {
        max-width: calc(100% - 30px);
        padding: 20px 15px;
    }

}

@media(max-width: 550px) {

    .faq-section {
        padding: 55px 0;
    }

    .faq-header h2 {
        font-size: 28px;
    }

    .faq-support {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .support-button {
        width: 100%;
    }

}

/* ================================
   FOOTER
================================ */

.site-footer {
    background: #fbfbff;
    color: #101323;

    border-top: 1px solid #eeeeF5;
}


.footer-main {
    width: 1180px;
    max-width: calc(100% - 50px);

    margin: auto;

    padding: 60px 0 65px;

    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr .8fr 1.4fr;

    gap: 55px;
}


/* BRAND */

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

    gap: 7px;

    margin-bottom: 24px;

    font-size: 27px;
    font-weight: 700;

    color: #11152a;
}

.footer-logo span {
    color: #3447f1;

    font-size: 34px;
}

.footer-brand p {
    max-width: 230px;

    color: #687087;

    font-size: 13px;
    line-height: 1.8;

    margin-bottom: 25px;
}


/* SOCIAL */

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 42px;
    height: 42px;

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

    background: #fff;

    border: 1px solid #e9e9f0;

    border-radius: 8px;

    color: #3043e8;

    font-size: 16px;
    font-weight: 600;

    box-shadow:
        0 5px 15px rgba(0,0,0,.03);

    transition: .2s;
}

.social-links a:hover {
    transform: translateY(-2px);
}


/* COLUMNS */

.footer-column h3,
.footer-newsletter h3 {
    font-size: 14px;

    margin-bottom: 24px;

    color: #10121d;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column a {
    color: #697086;

    font-size: 13px;

    margin-bottom: 16px;

    transition: .2s;
}

.footer-column a:hover {
    color: #3043e8;
}


/* NEWSLETTER */

.footer-newsletter p {
    color: #687087;

    font-size: 13px;
    line-height: 1.7;

    margin-bottom: 23px;
}

.newsletter-form {
    display: grid;
    grid-template-columns: 1fr 52px;

    gap: 8px;

    margin-bottom: 22px;
}

.newsletter-form input {
    height: 50px;

    padding: 0 15px;

    border: 1px solid #dedfe9;

    border-radius: 8px;

    outline: 0;

    background: #fff;

    font-family: inherit;

    color: #222;
}

.newsletter-form input:focus {
    border-color: #4857ee;
}

.newsletter-form button {
    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #3045f7,
            #3629ed
        );

    color: #fff;

    font-size: 23px;

    cursor: pointer;
}

.newsletter-note {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #657089;

    font-size: 11px;
}

.newsletter-note:first-child {
    color: #3444e9;
}


/* FEATURE STRIP */

.footer-features {
    border-top: 1px solid #e8e9f0;
    border-bottom: 1px solid #e8e9f0;

    min-height: 125px;

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

    align-items: center;

    padding: 0 max(30px, calc((100% - 1180px) / 2));
}

.footer-feature {
    min-height: 65px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 0 28px;

    border-right: 1px solid #e8e8ef;
}

.footer-feature:first-child {
    padding-left: 0;
}

.footer-feature:last-child {
    border-right: 0;
}

.feature-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: #f1f2ff;

    color: #3344e8;

    font-size: 26px;
}

.footer-feature strong {
    display: block;

    font-size: 13px;

    margin-bottom: 5px;
}

.footer-feature span {
    color: #747b8c;

    font-size: 11px;
}


/* BOTTOM */

.footer-bottom {
    width: 1180px;
    max-width: calc(100% - 50px);

    min-height: 110px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom p {
    color: #677087;

    font-size: 12px;
}

.payment-logos {
    display: flex;
    align-items: center;

    gap: 27px;

    color: #39415b;
}

.payment-logos span,
.payment-logos strong {
    font-size: 14px;
}

.payment-logos strong {
    font-size: 18px;
}


/* RESPONSIVE */

@media(max-width: 1000px) {

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

    .footer-newsletter {
        grid-column: 1 / -1;
    }

    .footer-features {
        grid-template-columns: repeat(2,1fr);

        padding-top: 20px;
        padding-bottom: 20px;
    }

    .footer-feature {
        border-right: none;
    }

}


@media(max-width: 600px) {

    .footer-main {
        grid-template-columns: 1fr;

        max-width: calc(100% - 30px);

        gap: 35px;
    }

    .footer-newsletter {
        grid-column: auto;
    }

    .footer-features {
        grid-template-columns: 1fr;

        padding: 20px;
    }

    .footer-feature {
        padding: 15px 0;

        border-bottom: 1px solid #e8e8ef;
    }

    .footer-feature:last-child {
        border-bottom: 0;
    }

    .footer-bottom {
        max-width: calc(100% - 30px);

        padding: 30px 0;

        flex-direction: column;

        gap: 25px;

        text-align: center;
    }

    .payment-logos {
        flex-wrap: wrap;
        justify-content: center;

        gap: 18px;
    }

}

/* =========================================
   SABİT HEADER + NAVBAR
========================================= */

header {
    position: sticky;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;
}


/* KAMPANYA BAR */

.campaign-bar {
    position: relative;

    width: 100%;

    z-index: 1001;
}


/* NAVBAR */

.navbar {
    position: relative !important;

    top: 0 !important;
    left: 0;

    width: 100%;

    background: rgba(2, 10, 22, 0.96);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    z-index: 1000;
}


/* Dropdown navbarın üstünde kalsın */

.dropdown-menu {
    z-index: 10000;
}
/* =========================================
   NAVBAR YERLEŞİM DÜZELTMESİ
   Logo solda / menü ortada / aksiyonlar sağda
========================================= */

.navbar {
    padding: 0 !important;
    height: 104px;
}

.navbar-container {
    width: 1280px;
    max-width: calc(100% - 96px);
    height: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(360px, 1fr);
    align-items: center;
    column-gap: 34px;
}

.navbar-container .logo {
    min-width: 0;
    justify-self: start;
    margin: 0;
}

.navbar-container .nav-menu {
    justify-self: center;
    margin: 0;
    gap: 34px;
}

.navbar-container .nav-actions {
    justify-self: end;
    margin: 0;
    gap: 20px;
}

.navbar-container .phone,
.navbar-container .login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.navbar-container .start-btn {
    flex-shrink: 0;
}

/* Kampanya satırını da navbar ile aynı hizada tut */
.campaign-inner {
    width: 1280px;
    max-width: calc(100% - 96px);
}

@media (max-width: 1320px) {
    .navbar-container,
    .campaign-inner {
        max-width: calc(100% - 56px);
    }

    .navbar-container {
        grid-template-columns: auto 1fr auto;
        column-gap: 26px;
    }

    .navbar-container .nav-menu {
        gap: 22px;
    }

    .navbar-container .phone {
        display: none;
    }
}

@media (max-width: 1020px) {
    .navbar-container,
    .campaign-inner {
        max-width: calc(100% - 40px);
    }

    .navbar-container {
        display: flex;
        justify-content: space-between;
    }

    .navbar-container .nav-menu,
    .navbar-container .nav-actions {
        display: none;
    }

    .navbar-container .mobile-menu-btn {
        display: block;
        margin-left: auto;
    }
}

@media (max-width: 650px) {
    .navbar {
        height: 82px;
    }

    .navbar-container,
    .campaign-inner {
        max-width: calc(100% - 28px);
    }
}

/* =========================================
   NAVBAR SON HIZALAMA
   Logo daha solda / aksiyonlar daha sağda
========================================= */
@media (min-width: 1321px) {
    .navbar-container {
        width: 1450px;
        max-width: calc(100% - 70px);
        grid-template-columns: minmax(230px, 1fr) auto minmax(390px, 1fr);
        column-gap: 55px;
    }

    .navbar-container .nav-menu {
        gap: 40px;
    }

    .navbar-container .nav-actions {
        gap: 24px;
    }

    .navbar-container .phone {
        margin-right: 4px;
    }

    .navbar-container .start-btn {
        padding-left: 23px;
        padding-right: 23px;
    }

    .navbar-container .login {
        margin-left: 2px;
    }
}


/* =========================================
   NAVBAR REVİZE PAKETİ - 29.08.2026
   1) Kampanya barı sabit değil
   2) Logo biraz daha küçük
   3) Menü / telefon arası biraz daha açık
   4) Kurumsal alt menü revize
   5) Tema Kütüphanesi normal bağlantı
   6) E-Ticaret Çözümleri alt menü revize
========================================= */

/* Kampanya barı normal akışta kalır ve aşağı kaydırınca görünmez olur. */
.campaign-bar {
    position: relative !important;
    top: auto !important;
    z-index: 1001;
}

/* Kampanya barından bağımsız olarak yalnızca navbar sabit kalır. */
.site-header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.site-header .navbar {
    position: relative !important;
    top: 0 !important;
}

/* Logo bir tık daha kompakt. */
.navbar-container .logo {
    font-size: 28px;
    letter-spacing: -1.8px;
}

.navbar-container .logo-icon {
    font-size: 40px;
    margin-right: 7px;
}

/* Tema Kütüphanesi artık dropdown değil, normal menü linkidir. */
.theme-library-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@media (min-width: 1321px) {
    /* Mevcut logo-menü hizasını koruyup sağ aksiyon grubunu biraz aç. */
    .navbar-container .nav-actions {
        transform: translateX(24px);
    }
}

@media (max-width: 1320px) {
    .navbar-container .logo {
        font-size: 27px;
    }

    .navbar-container .logo-icon {
        font-size: 38px;
    }
}

@media (max-width: 1020px) {
    .navbar-container .nav-actions {
        transform: none;
    }
}


/* FINAL HEADER COLOR REVISION */
.campaign-bar {
    background: #0d2250 !important;
}

.navbar {
    background: #111c2d !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================================
   PREMIUM HEADER COLOR REVISION
========================================= */
.campaign-bar {
    background: linear-gradient(90deg, #102957 0%, #16366c 50%, #102957 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar,
.site-header .navbar {
    background: linear-gradient(90deg, #15243a 0%, #1b2d47 50%, #15243a 100%) !important;
    border-bottom: 1px solid rgba(91, 124, 255, 0.14);
    box-shadow: 0 8px 30px rgba(7, 17, 34, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* =========================================
   NEDEN TIDESOFT - HERO
========================================= */

.why-hero {
    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(52, 90, 255, .07),
            transparent 28%
        ),
        #ffffff;

    color: #0b1020;

    padding: 75px 0 60px;
}


.why-hero-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: 65px;
}


/* LEFT */

.why-hero-content {
    max-width: 620px;
}


.why-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

    padding: 10px 18px;

    background: #eef4ff;

    color: #2761e9;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 500;
}


.why-hero-content h1 {
    margin-bottom: 22px;

    color: #060b18;

    font-size: 64px;

    line-height: 1.08;

    letter-spacing: -2.5px;

    font-weight: 700;
}


.why-hero-content h1 strong {
    color: #3150e9;

    font-weight: 700;
}


.why-description {
    max-width: 580px;

    margin-bottom: 30px;

    color: #556074;

    font-size: 18px;

    line-height: 1.6;
}


/* BENEFITS */

.why-benefits {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 30px;
}


.why-benefit {
    min-height: 48px;

    padding: 0 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: #fff;

    border: 1px solid #e5e9f2;

    border-radius: 10px;

    color: #172033;

    font-size: 13px;

    box-shadow:
        0 5px 18px rgba(20, 40, 100, .035);
}


.why-benefit span {
    color: #3156ee;

    font-size: 19px;
}


/* FORM */

.why-start-form {
    max-width: 600px;

    display: grid;

    grid-template-columns: 1fr 215px;

    gap: 15px;

    margin-bottom: 15px;
}


.why-start-form input {
    height: 60px;

    padding: 0 20px;

    border: 1px solid #dfe3ec;

    border-radius: 9px;

    outline: none;

    font-family: inherit;

    font-size: 15px;

    color: #151a27;

    background: #fff;
}


.why-start-form input:focus {
    border-color: #3456ee;

    box-shadow:
        0 0 0 3px rgba(52, 86, 238, .08);
}


.why-start-form button {
    border: none;

    border-radius: 9px;

    cursor: pointer;

    color: #fff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    background:
        linear-gradient(
            135deg,
            #3156ff,
            #3930ed
        );

    box-shadow:
        0 10px 25px rgba(52, 61, 238, .20);

    transition: .25s;
}


.why-start-form button:hover {
    transform: translateY(-2px);
}


.why-form-note {
    color: #788093;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================
   RIGHT VISUAL
========================================= */

.why-hero-visual {
    position: relative;
}


.why-visual-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.why-visual-card {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #e8f1ff,
            #dbe8f8
        );

    box-shadow:
        0 10px 35px rgba(37, 67, 120, .08);
}


.person-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 15px;

    font-size: 185px;

    overflow: hidden;
}


.person-one {
    background: linear-gradient(
        145deg,
        #a9caec,
        #e2effa
    );
}


.person-two {
    background: linear-gradient(
        145deg,
        #d8e8f7,
        #edf3fb
    );
}


.person-three {
    background: linear-gradient(
        145deg,
        #d9e3ee,
        #f1f4f8
    );
}


.person-four {
    background: linear-gradient(
        145deg,
        #dceaf7,
        #edf5fc
    );
}


/* PRODUCT */

.floating-product {
    position: absolute;

    z-index: 3;

    top: 35px;

    right: 20px;

    width: 155px;

    padding: 12px;

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

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(22, 37, 75, .12);
}


.product-image-small {
    height: 95px;

    margin-bottom: 8px;

    display: flex;

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

    background: #f4f6f9;

    border-radius: 8px;

    font-size: 55px;
}


.floating-product span,
.floating-product strong,
.floating-product b {
    display: block;
}


.floating-product span {
    color: #747b87;

    font-size: 8px;
}


.floating-product strong {
    margin: 4px 0;

    font-size: 11px;
}


.floating-product b {
    margin-bottom: 8px;

    font-size: 10px;
}


.floating-product button {
    width: 100%;

    height: 28px;

    border: 0;

    border-radius: 6px;

    background: #3470ef;

    color: white;

    font-size: 8px;
}


.visual-stock {
    display: inline-block !important;

    padding: 4px 7px;

    border-radius: 6px;

    background: #e8f9eb;

    color: #4da65c !important;
}


/* SALES */

.sales-mini-card {
    position: absolute;

    top: 30px;

    right: 20px;

    z-index: 3;

    width: 155px;

    padding: 15px;

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

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(22, 37, 75, .10);
}


.sales-mini-card > div:not(.mini-sales-chart) {
    position: relative;

    margin-bottom: 13px;
}


.sales-mini-card span {
    display: block;

    color: #656e7e;

    font-size: 8px;
}


.sales-mini-card strong {
    display: block;

    margin-top: 3px;

    font-size: 12px;
}


.sales-mini-card small {
    position: absolute;

    top: 5px;
    right: 0;

    color: #56b36a;

    font-size: 7px;
}


.mini-sales-chart {
    color: #3470ef;

    font-size: 25px;
}


/* ORDER */

.order-status {
    position: absolute;

    right: 20px;
    top: 35px;

    z-index: 3;

    width: 170px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.order-status div {
    padding: 11px 13px;

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

    border-radius: 8px;

    box-shadow:
        0 8px 20px rgba(25, 45, 85, .09);
}


.order-status span,
.order-status b,
.order-status strong {
    display: block;

    font-size: 9px;
}


.order-status strong {
    margin-top: 3px;

    color: #4aa45d;
}


/* CAPTION */

.visual-caption {
    position: absolute;

    z-index: 6;

    left: 18px;
    bottom: 14px;

    padding: 8px 13px;

    border-radius: 8px;

    background: rgba(25, 28, 34, .70);

    backdrop-filter: blur(8px);

    color: #fff;

    font-size: 12px;
}


/* =========================================
   STATS
========================================= */

.why-stats {
    width: 1400px;
    max-width: calc(100% - 120px);

    min-height: 95px;

    margin: 45px auto 0;

    padding: 15px 35px;

    display: grid;

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

    align-items: center;

    background: #fff;

    border: 1px solid #e6e9f1;

    border-radius: 17px;

    box-shadow:
        0 10px 30px rgba(20, 35, 75, .04);
}


.why-stat {
    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    border-right: 1px solid #e7e9ef;
}


.why-stat:last-child {
    border-right: none;
}


.why-stat-icon {
    color: #3155ec;

    font-size: 28px;
}


.why-stat strong {
    display: block;

    margin-bottom: 3px;

    color: #3152e8;

    font-size: 21px;
}


.why-stat div span {
    color: #647086;

    font-size: 12px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .why-hero-container {
        grid-template-columns: 1fr;

        max-width: calc(100% - 50px);
    }

    .why-hero-content {
        max-width: none;

        text-align: center;
    }

    .why-benefits {
        justify-content: center;
    }

    .why-start-form {
        margin-left: auto;
        margin-right: auto;
    }

    .why-form-note {
        display: block;

        text-align: center;
    }

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

    .why-stat {
        border-right: none;

        padding: 15px;
    }

}


@media(max-width: 650px) {

    .why-hero {
        padding-top: 50px;
    }

    .why-hero-container {
        max-width: calc(100% - 30px);
    }

    .why-hero-content h1 {
        font-size: 42px;
    }

    .why-description {
        font-size: 15px;
    }

    .why-benefits {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

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

    .why-start-form button {
        height: 56px;
    }

    .why-visual-grid {
        grid-template-columns: 1fr;
    }

    .why-stats {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .why-stat {
        border-bottom: 1px solid #eee;
    }

    .why-stat:last-child {
        border-bottom: none;
    }

}

/* =========================================
   NEDEN TIDESOFT - FEATURES
========================================= */

.why-features-section {
    padding: 95px 0 110px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(54, 91, 255, .035),
            transparent 38%
        ),
        #ffffff;

    color: #09101f;
}


.why-features-head {
    width: 760px;
    max-width: calc(100% - 40px);

    margin: 0 auto 55px;

    text-align: center;
}


.why-features-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 30px;

    background: #edf3ff;

    color: #2460e8;

    font-size: 14px;

    font-weight: 500;
}


.why-features-head h2 {
    margin-bottom: 20px;

    font-size: 56px;

    line-height: 1.1;

    letter-spacing: -2px;

    color: #0a1020;

    font-weight: 700;
}


.why-features-head h2 strong {
    display: block;

    color: #2860e9;
}


.why-features-head p {
    max-width: 650px;

    margin: auto;

    color: #637087;

    font-size: 18px;

    line-height: 1.55;
}


/* GRID */

.why-features-grid {
    width: 1380px;

    max-width: calc(100% - 70px);

    margin: auto;

    display: grid;

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

    gap: 22px;
}


/* CARD */

.why-feature-card {
    padding: 28px 28px 32px;

    background: #ffffff;

    border: 1px solid #e5e9f2;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(33, 56, 110, .05);

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


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

    box-shadow:
        0 18px 45px rgba(33, 56, 110, .09);
}


.why-feature-visual {
    position: relative;

    height: 270px;

    margin-bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 14px;

    border: 1px solid #e0eaf9;

    background-color: #f8fbff;

    background-image:
        linear-gradient(
            rgba(58, 116, 222, .09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(58, 116, 222, .09) 1px,
            transparent 1px
        );

    background-size: 34px 34px;
}


/* FEATURE ICON */

.why-feature-icon {
    width: 58px;

    height: 58px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #edf4ff;

    color: #225ff0;

    font-size: 27px;
}


.why-feature-card h3 {
    margin-bottom: 12px;

    font-size: 24px;

    line-height: 1.2;

    color: #0a1020;
}


.why-feature-card > p {
    color: #59667c;

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   PRODUCT UPLOAD
========================================= */

.upload-product-box {
    width: 285px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e5ec;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(20, 45, 90, .10);
}


.upload-product-top {
    padding: 14px;

    display: grid;

    grid-template-columns: 90px 1fr;

    align-items: center;

    gap: 15px;

    border-bottom: 1px solid #eceff4;
}


.upload-product-image {
    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef3fa;

    border-radius: 8px;

    font-size: 60px;
}


.upload-product-info strong {
    display: block;

    margin-bottom: 14px;

    font-size: 12px;
}


.upload-product-info span {
    display: block;

    width: 80%;

    height: 6px;

    margin-bottom: 7px;

    border-radius: 20px;

    background: #e6e8ed;
}


.upload-product-info span:nth-child(3) {
    width: 65%;
}


.upload-product-info span:nth-child(4) {
    width: 48%;
}


.upload-bottom {
    padding: 15px;
}


.upload-bottom b {
    display: block;

    margin-bottom: 12px;

    font-size: 11px;
}


.upload-progress-row {
    display: flex;

    align-items: center;

    gap: 10px;
}


.upload-progress {
    flex: 1;

    height: 9px;

    overflow: hidden;

    border-radius: 20px;

    background: #e6e8ee;
}


.upload-progress span {
    display: block;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #255eff,
            #3488f8
        );
}


.upload-progress-row strong {
    font-size: 11px;
}


.upload-check {
    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #35c384;

    color: #ffffff;

    font-size: 21px;
}


/* =========================================
   TRAFFIC
========================================= */

.browser-window {
    width: 265px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e7ef;

    border-radius: 13px;

    box-shadow:
        0 15px 35px rgba(20, 45, 90, .10);
}


.browser-header {
    height: 34px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 0 13px;

    background:
        linear-gradient(
            90deg,
            #2260ed,
            #3076f5
        );
}


.browser-header span {
    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #fff;
}


.browser-content {
    height: 150px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.browser-content strong {
    padding: 14px 22px;

    background: #fff;

    border: 1px solid #dfe3eb;

    border-radius: 9px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.04);

    color: #2463e7;

    font-size: 23px;
}


.browser-cursor {
    position: absolute;

    right: 63px;

    bottom: 38px;

    color: #111827;

    font-size: 32px;
}


.traffic-circle {
    position: absolute;

    right: 30px;

    bottom: 15px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3376f2,
            #2455e8
        );

    color: white;

    font-size: 30px;

    box-shadow:
        0 10px 25px rgba(35, 90, 235, .22);
}


/* =========================================
   LANGUAGE
========================================= */

.language-grid {
    display: grid;

    grid-template-columns: repeat(3, 78px);

    gap: 12px;
}


.language-item {
    height: 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #fff;

    border: 1px solid #dfe4ed;

    border-radius: 9px;

    box-shadow:
        0 6px 15px rgba(15, 35, 70, .04);
}


.language-item span {
    font-size: 30px;
}


.language-item strong {
    margin-top: 5px;

    font-size: 11px;
}


.add-language {
    color: #667289;

    font-size: 35px;
}


.language-world {
    position: absolute;

    right: 30px;

    bottom: 15px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #3778f5,
            #2457e8
        );

    font-size: 25px;

    box-shadow:
        0 10px 25px rgba(35, 90, 235, .22);
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1000px) {

    .why-features-grid {
        grid-template-columns: 1fr;
    }

    .why-feature-card {
        max-width: 650px;

        width: 100%;

        margin: auto;
    }

}


@media(max-width: 600px) {

    .why-features-section {
        padding: 65px 0;
    }

    .why-features-head h2 {
        font-size: 39px;
    }

    .why-features-head p {
        font-size: 15px;
    }

    .why-features-grid {
        max-width: calc(100% - 30px);
    }

    .why-feature-card {
        padding: 18px;
    }

    .why-feature-visual {
        height: 235px;
    }

    .why-feature-card h3 {
        font-size: 21px;
    }

    .upload-product-box,
    .browser-window {
        transform: scale(.88);
    }

}

/* =========================================
   CHECKOUT SECTION
========================================= */

.checkout-section {
    padding: 100px 0 90px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(51, 91, 255, .035),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


.checkout-container {
    width: 1400px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: 100px;
}


/* =========================================
   MOCKUP
========================================= */

.checkout-mockup {
    min-height: 590px;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e1e5ec;

    border-radius: 18px;

    box-shadow:
        0 15px 45px rgba(30, 50, 90, .08);
}


.checkout-left-panel {
    padding: 40px 35px;

    border-right: 1px solid #e6e9ee;
}


.checkout-right-panel {
    padding: 40px 35px;

    background: #fbfcfe;
}


/* LOGO */

.checkout-brand {
    margin-bottom: 38px;

    font-size: 25px;
}


.checkout-brand strong {
    color: #101522;
}


.checkout-brand strong span {
    color: #3154eb;
}


/* STEPS */

.checkout-step {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 30px;
}


.step-number {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    background: #2f49ef;

    color: #fff;

    font-size: 16px;

    font-weight: 600;
}


.checkout-step div:last-child {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.checkout-step strong {
    font-size: 15px;
}


.checkout-step span {
    color: #6d7485;

    font-size: 12px;
}


.checkout-step.muted {
    opacity: .58;
}


.checkout-step.muted .step-number {
    background: #fff;

    color: #697286;

    border: 1px solid #aeb6c4;
}


/* LINES */

.checkout-lines {
    margin: -13px 0 22px 52px;
}


.checkout-lines span {
    display: block;

    width: 120px;
    height: 7px;

    margin-bottom: 8px;

    background: #ebedf2;

    border-radius: 20px;
}


.checkout-lines span:nth-child(2) {
    width: 90px;
}


.checkout-lines span:nth-child(3) {
    width: 72px;
}


.verified {
    margin: 0 0 45px 52px;

    color: #35aa6e;

    font-size: 12px;
}


/* PRODUCT */

.checkout-product {
    display: grid;

    grid-template-columns: 120px 1fr;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;
}


.checkout-product-image {
    height: 130px;

    display: flex;

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

    background: #fff;

    border-radius: 10px;

    font-size: 80px;

    box-shadow:
        0 5px 20px rgba(20,30,50,.04);
}


.checkout-product strong {
    display: block;

    margin-bottom: 7px;

    font-size: 15px;
}


.checkout-product span {
    color: #71788a;

    font-size: 13px;
}


.checkout-product-lines {
    margin-bottom: 28px;

    padding-bottom: 26px;

    border-bottom: 1px solid #e7e9ee;
}


.checkout-product-lines span {
    display: block;

    width: 70%;

    height: 8px;

    margin-bottom: 8px;

    border-radius: 30px;

    background: #eaecf1;
}


.checkout-product-lines span:last-child {
    width: 48%;
}


/* PRICES */

.checkout-price-row,
.checkout-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;

    font-size: 13px;
}


.checkout-price-row strong {
    font-weight: 500;
}


.green-text {
    color: #35a963;
}


.checkout-total {
    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid #e5e7eb;

    font-size: 16px;
}


.checkout-total strong {
    font-size: 17px;
}


/* SECURE */

.checkout-secure {
    margin-top: 80px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #657086;

    font-size: 11px;
}


.checkout-powered {
    margin-top: 55px;

    text-align: right;

    color: #687186;

    font-size: 13px;
}


.checkout-powered strong {
    margin-left: 5px;

    color: #0a1020;

    font-size: 19px;
}


.checkout-powered strong span {
    color: #3153eb;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.checkout-content {
    max-width: 590px;
}


.checkout-content h2 {
    margin-bottom: 28px;

    font-size: 66px;

    line-height: 1.05;

    letter-spacing: -2.5px;

    color: #0b1121;
}


.checkout-content h2 strong {
    display: block;

    color: #3152e9;
}


.checkout-content p {
    margin-bottom: 38px;

    color: #5e687d;

    font-size: 18px;

    line-height: 1.7;
}


.checkout-button {
    width: 390px;
    max-width: 100%;

    height: 72px;

    padding: 0 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #2e4fff,
            #3528ee
        );

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    box-shadow:
        0 12px 30px rgba(52, 55, 235, .22);

    transition: .25s;
}


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

    box-shadow:
        0 17px 40px rgba(52, 55, 235, .30);
}


/* =========================================
   BOTTOM FEATURES
========================================= */

.checkout-features {
    width: 1400px;

    max-width: calc(100% - 80px);

    margin: 65px auto 0;

    display: grid;

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

    align-items: center;
}


.checkout-feature {
    min-height: 60px;

    padding: 0 35px;

    display: flex;

    align-items: center;

    gap: 17px;

    border-right: 1px solid #e6e8ee;
}


.checkout-feature:first-child {
    padding-left: 0;
}


.checkout-feature:last-child {
    border-right: none;
}


.checkout-feature-icon {
    color: #3157ef;

    font-size: 31px;
}


.checkout-feature strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;
}


.checkout-feature span {
    color: #697386;

    font-size: 11px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1050px) {

    .checkout-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .checkout-content {
        max-width: none;

        text-align: center;
    }

    .checkout-button {
        margin: auto;
    }

    .checkout-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;
    }

    .checkout-feature {
        border-right: none;
    }

}


@media(max-width: 650px) {

    .checkout-section {
        padding: 65px 0;
    }

    .checkout-container {
        max-width: calc(100% - 30px);
    }

    .checkout-mockup {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .checkout-left-panel {
        border-right: 0;

        border-bottom: 1px solid #e6e9ee;
    }

    .checkout-content h2 {
        font-size: 44px;
    }

    .checkout-content p {
        font-size: 15px;
    }

    .checkout-button {
        height: 62px;

        font-size: 15px;
    }

    .checkout-features {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .checkout-feature {
        padding: 15px 0;

        border-bottom: 1px solid #eee;
    }

    .checkout-feature:last-child {
        border-bottom: none;
    }

}

/* =========================================
   TIDESOFT PAZARLAMA - SHOWCASE
========================================= */

.marketing-showcase-section {
    padding: 80px 0 100px;
    background: #ffffff;
    color: #0b1120;
}

.marketing-showcase-head {
    width: 900px;
    max-width: calc(100% - 40px);
    margin: 0 auto 45px;
    text-align: center;
}

.marketing-showcase-head h1 {
    margin-bottom: 15px;
    font-size: 45px;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.marketing-showcase-head h1 strong {
    color: #2f63e8;
}

.marketing-showcase-head p {
    color: #59667c;
    font-size: 16px;
}


/* GRID */

.marketing-showcase-grid {
    width: 1400px;
    max-width: calc(100% - 70px);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.marketing-showcase-card {
    grid-column: span 2;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e7ef;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(25, 45, 85, .04);

    transition: .25s;
}

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

    box-shadow:
        0 18px 42px rgba(25, 45, 85, .08);
}

.marketing-showcase-card.wide-card {
    grid-column: span 3;
}


/* VISUAL */

.marketing-visual {
    height: 320px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f6f9ff,
            #eef4fb
        );
}


/* CONTENT */

.marketing-card-content {
    padding: 18px 20px 25px;

    display: flex;
    align-items: flex-start;

    gap: 14px;
}

.marketing-card-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: #edf4ff;

    border-radius: 12px;

    color: #2462ed;

    font-size: 22px;
}

.marketing-card-content h3 {
    margin-bottom: 10px;

    color: #0c1220;

    font-size: 17px;
}

.marketing-card-content p {
    color: #536078;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================
   CUSTOMER VISUAL
========================================= */

.customer-visual {
    padding: 25px;
}

.marketing-message-panel {
    width: 82%;
    margin: 0 auto;

    padding: 16px;

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

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(30, 50, 80, .08);
}

.message-title {
    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 700;
}

.message-row {
    margin-bottom: 7px;

    display: flex;

    gap: 8px;

    font-size: 8px;
}

.message-row span {
    color: #687185;
}

.message-bubble {
    width: 78%;

    margin: 10px 0;

    padding: 8px 10px;

    background: #eef3fa;

    border-radius: 7px;

    font-size: 8px;
}

.message-bubble.answer {
    margin-left: auto;

    background: #275cf4;

    color: #fff;
}

.marketing-products-row {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 22px;

    padding: 15px;

    background: #fff;

    border-radius: 10px;

    text-align: center;

    font-size: 40px;
}

.marketing-discount {
    position: absolute;

    left: 25px;
    bottom: 95px;

    padding: 8px 12px;

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

    border-radius: 8px;

    font-size: 9px;

    box-shadow:
        0 6px 18px rgba(20, 30, 50, .08);
}


/* =========================================
   CART
========================================= */

.cart-visual {
    display: flex;

    align-items: center;
    justify-content: center;
}

.marketing-person {
    font-size: 180px;
}

.mini-product-float {
    position: absolute;

    top: 25px;
    left: 28px;

    width: 75px;
    height: 75px;

    display: flex;

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

    background: #fff;

    border-radius: 10px;

    font-size: 45px;

    box-shadow:
        0 8px 20px rgba(30, 45, 80, .08);
}

.cart-notification {
    position: absolute;

    left: 40px;
    right: 40px;
    bottom: 25px;

    padding: 15px;

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

    border-radius: 12px;

    box-shadow:
        0 10px 25px rgba(20, 40, 80, .13);
}

.cart-notification strong {
    font-size: 11px;
}

.cart-notification > span {
    float: right;

    color: #9aa0ac;

    font-size: 8px;
}

.cart-notification p {
    margin: 8px 0 4px;

    font-size: 10px;

    font-weight: 600;
}

.cart-notification small {
    color: #687185;

    font-size: 8px;
}

.cart-count {
    position: absolute;

    top: 25px;
    right: 25px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 10px;

    background: #fff;

    font-size: 25px;
}

.cart-count span {
    position: absolute;

    right: -5px;
    top: -5px;

    width: 20px;
    height: 20px;

    display: flex;

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

    border-radius: 50%;

    background: #2761ef;

    color: #fff;

    font-size: 9px;
}


/* =========================================
   CAMPAIGN
========================================= */

.campaign-visual {
    padding: 25px;

    display: flex;

    align-items: center;

    gap: 20px;
}

.campaign-product {
    width: 55%;

    height: 245px;

    display: flex;

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

    font-size: 155px;
}

.campaign-product-info {
    flex: 1;
}

.campaign-product-info h4 {
    margin-bottom: 22px;

    font-size: 16px;
}

.campaign-product-info > span {
    color: #657084;

    font-size: 11px;
}

.campaign-colors {
    display: flex;

    gap: 7px;

    margin: 8px 0 30px;
}

.campaign-colors i {
    width: 14px;
    height: 14px;

    display: block;

    border-radius: 50%;

    background: #789078;
}

.campaign-colors i:nth-child(2) {
    background: #c8c8c8;
}

.campaign-colors i:nth-child(3) {
    background: #152235;
}

.campaign-product-info del {
    display: block;

    margin-bottom: 8px;

    color: #9aa0ab;

    font-size: 12px;
}

.campaign-product-info strong {
    display: block;

    font-size: 22px;
}

.campaign-badge {
    position: absolute;

    left: 45px;
    bottom: 25px;

    padding: 8px 12px;

    background: #2862f3;

    color: #fff;

    border-radius: 7px;

    font-size: 10px;
}


/* =========================================
   LOYALTY
========================================= */

.loyalty-visual {
    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 0;
}

.loyalty-person {
    width: 52%;

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    font-size: 210px;
}

.loyalty-phone {
    width: 210px;
    height: 295px;

    margin-right: 25px;

    padding: 22px 15px;

    background: #fff;

    border-radius: 28px 28px 0 0;

    text-align: center;

    box-shadow:
        0 0 0 6px #111,
        0 10px 30px rgba(0,0,0,.12);
}

.loyalty-logo {
    margin-bottom: 20px;

    text-align: left;

    color: #1d2b4c;

    font-size: 9px;
}

.loyalty-phone h4 {
    margin-bottom: 10px;

    font-size: 14px;
}

.loyalty-phone span {
    display: block;

    margin-bottom: 7px;

    color: #687186;

    font-size: 10px;
}

.loyalty-phone > strong {
    display: block;

    margin-bottom: 15px;

    font-size: 24px;
}

.loyalty-phone p {
    font-size: 10px;

    line-height: 1.4;
}

.loyalty-phone p b {
    display: block;
}

.loyalty-gift {
    margin-top: 14px;

    font-size: 45px;
}


/* =========================================
   POPUP
========================================= */

.popup-visual {
    padding: 20px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.popup-box {
    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding: 18px;

    background: #fff;

    border-radius: 10px;
}

.popup-box h4 {
    margin-bottom: 10px;

    font-size: 15px;

    line-height: 1.4;
}

.popup-box p {
    margin-bottom: 14px;

    color: #657084;

    font-size: 9px;

    line-height: 1.4;
}

.popup-box input {
    height: 38px;

    margin-bottom: 9px;

    padding: 0 10px;

    border: 1px solid #d9dee7;

    border-radius: 7px;

    outline: none;

    font-size: 9px;
}

.popup-box button {
    height: 38px;

    border: 0;

    border-radius: 7px;

    background: #265ff0;

    color: #fff;

    font-size: 9px;
}

.popup-product {
    display: flex;

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

    background:
        linear-gradient(
            145deg,
            #9ed5ef,
            #eff7fb
        );

    border-radius: 10px;

    font-size: 150px;
}


/* RESPONSIVE */

@media(max-width: 1000px) {

    .marketing-showcase-card,
    .marketing-showcase-card.wide-card {
        grid-column: span 3;
    }

}

@media(max-width: 700px) {

    .marketing-showcase-head h1 {
        font-size: 34px;
    }

    .marketing-showcase-grid {
        max-width: calc(100% - 30px);
    }

    .marketing-showcase-card,
    .marketing-showcase-card.wide-card {
        grid-column: span 6;
    }

    .marketing-visual {
        height: 280px;
    }

}

/* =========================================
   MARKETING TOOLS
========================================= */

.marketing-tools-section {
    padding: 95px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(42, 85, 255, .04),
            transparent 30%
        ),
        #ffffff;

    color: #0b1120;
}


.marketing-tools-head {
    width: 820px;
    max-width: calc(100% - 40px);

    margin: 0 auto 55px;

    text-align: center;
}


.marketing-tools-head h2 {
    margin-bottom: 15px;

    font-size: 50px;

    line-height: 1.15;

    letter-spacing: -1.5px;

    color: #0a1020;
}


.marketing-tools-head h2 strong {
    color: #2f62e9;
}


.marketing-tools-head p {
    max-width: 680px;

    margin: auto;

    color: #5d687d;

    font-size: 16px;

    line-height: 1.6;
}


/* GRID */

.marketing-tools-grid {
    width: 1400px;

    max-width: calc(100% - 70px);

    margin: auto;

    display: grid;

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

    gap: 20px;
}


/* CARD */

.marketing-tool-card {
    position: relative;

    min-height: 350px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e7ef;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(24, 45, 85, .04);

    transition: .25s;
}


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

    border-color: #d6def5;

    box-shadow:
        0 18px 40px rgba(25, 45, 85, .09);
}


.tool-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    display: flex;

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

    background: #eef4ff;

    border: 1px solid #d9e5ff;

    border-radius: 12px;

    color: #2e61ec;

    font-size: 25px;
}


.marketing-tool-card h3 {
    margin-bottom: 12px;

    font-size: 21px;

    color: #0b1120;
}


.marketing-tool-card > p {
    width: 55%;

    color: #566277;

    font-size: 14px;

    line-height: 1.55;
}


.tool-visual {
    position: absolute;

    right: 25px;

    top: 75px;

    width: 42%;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* BUTTON */

.tool-button {
    width: 200px;

    max-width: 100%;

    height: 50px;

    margin-top: auto;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid #dde3eb;

    border-radius: 9px;

    color: #101521;

    font-size: 13px;

    font-weight: 500;

    background: #fff;

    box-shadow:
        0 4px 12px rgba(25, 45, 85, .03);

    transition: .2s;
}


.tool-button:hover {
    border-color: #315deb;

    color: #315deb;
}


/* =========================================
   AUTOMATION
========================================= */

.automation-visual {
    flex-direction: column;
}


.automation-top {
    width: 46px;
    height: 46px;

    display: flex;

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

    background: #5279ef;

    color: #fff;

    border-radius: 10px;

    box-shadow:
        0 8px 20px rgba(50, 90, 235, .15);
}


.automation-line {
    width: 2px;
    height: 35px;

    background: #bfc9de;
}


.automation-boxes {
    position: relative;

    display: flex;

    gap: 35px;
}


.automation-boxes::before {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    top: -12px;

    height: 2px;

    background: #bfc9de;
}


.automation-boxes span {
    width: 45px;
    height: 35px;

    display: block;

    background: #edf1f7;

    border-radius: 7px;
}


.automation-check {
    width: 35px;
    height: 35px;

    margin-top: 20px;

    display: flex;

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

    border-radius: 50%;

    background: #87a6fa;

    color: white;
}


/* =========================================
   SMS
========================================= */

.sms-phone {
    width: 120px;
    height: 190px;

    padding: 18px 10px;

    background: #f9fbff;

    border: 4px solid #dce2ec;

    border-radius: 22px;

    box-shadow:
        0 10px 25px rgba(20, 40, 80, .05);
}


.sms-speaker {
    width: 35px;
    height: 4px;

    margin: 0 auto 18px;

    background: #d7dce6;

    border-radius: 20px;
}


.sms-line {
    height: 8px;

    margin-bottom: 12px;

    background: #e9edf4;

    border-radius: 20px;
}


.sms-line.short {
    width: 70%;
}


.sms-active {
    height: 35px;

    margin: 15px -4px;

    background:
        linear-gradient(
            90deg,
            #3565ed,
            #477ef8
        );

    border-radius: 7px;
}


/* =========================================
   EMAIL
========================================= */

.email-window {
    width: 150px;

    padding-bottom: 15px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e1e5ed;

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(20, 40, 80, .05);
}


.email-browser-top {
    height: 24px;

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 0 8px;

    background: #f3f5f8;
}


.email-browser-top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #b9c2d3;
}


.email-image {
    height: 75px;

    margin: 12px;

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #9ac4ff,
            #6086ea
        );
}


.email-text {
    width: 75%;

    height: 6px;

    margin: 10px 12px;

    background: #e9ecf2;

    border-radius: 15px;
}


.email-text.small {
    width: 55%;
}


.email-button {
    width: 70%;

    height: 19px;

    margin: 12px;

    background: #edf1f7;

    border-radius: 5px;
}


/* =========================================
   AFFILIATE
========================================= */

.affiliate-visual {
    flex-direction: column;

    align-items: flex-start;

    justify-content: center;
}


.affiliate-review {
    width: 145px;

    padding: 9px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: #fff;

    border: 1px solid #e5e9f0;

    border-radius: 8px;
}


.affiliate-review.second {
    margin-top: 8px;
}


.affiliate-review b {
    color: #7798ef;

    font-size: 9px;
}


.affiliate-review.second b {
    color: #f2a226;
}


.affiliate-bars {
    width: 135px;
    height: 75px;

    margin-top: 14px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 9px;
}


.affiliate-bars span {
    width: 13px;

    background:
        linear-gradient(
            180deg,
            #7395ef,
            #3365ef
        );

    border-radius: 3px 3px 0 0;
}


/* =========================================
   POPUP
========================================= */

.popup-window {
    width: 145px;

    padding-bottom: 15px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e1e5ed;

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(20, 40, 80, .05);
}


.popup-window-top {
    height: 24px;

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 0 8px;

    background: #aeb6c5;
}


.popup-window-top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #e8ebef;
}


.popup-gift {
    margin: 15px 0;

    text-align: center;

    font-size: 40px;
}


.popup-line {
    width: 70%;

    height: 6px;

    margin: 8px auto;

    background: #e7eaf0;

    border-radius: 20px;
}


.popup-line.small {
    width: 52%;
}


.popup-action {
    width: 70%;

    height: 20px;

    margin: 12px auto 0;

    background: #3970ef;

    border-radius: 5px;
}


/* =========================================
   SEGMENT
========================================= */

.segment-visual {
    flex-direction: column;
}


.segment-chart {
    width: 125px;
    height: 125px;

    position: relative;

    display: flex;

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

    border-radius: 50%;

    background:
        conic-gradient(
            #315cec 0 25%,
            #5279ed 25% 47%,
            #91a8e8 47% 66%,
            #d5dced 66% 100%
        );
}


.segment-inner {
    width: 70px;
    height: 70px;

    display: flex;

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

    background: #fff;

    border-radius: 50%;

    font-size: 28px;
}


.segment-lines {
    width: 100px;

    margin-top: 20px;
}


.segment-lines span {
    width: 100%;

    height: 5px;

    display: block;

    margin-bottom: 7px;

    background: #e8ebf0;

    border-radius: 20px;
}


.segment-lines span:nth-child(2) {
    width: 75%;
}


.segment-lines span:nth-child(3) {
    width: 55%;
}


/* =========================================
   CTA
========================================= */

.marketing-tools-cta {
    width: 1400px;

    max-width: calc(100% - 70px);

    min-height: 105px;

    margin: 28px auto 0;

    padding: 20px 32px;

    display: flex;

    align-items: center;

    gap: 20px;

    background:
        linear-gradient(
            90deg,
            #f0f5ff,
            #eef3ff
        );

    border: 1px solid #e1e8f8;

    border-radius: 16px;
}


.marketing-tools-cta-icon {
    width: 60px;
    height: 60px;

    display: flex;

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

    background: #dfe9ff;

    color: #2960e8;

    border-radius: 50%;

    font-size: 32px;
}


.marketing-tools-cta-text {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.marketing-tools-cta-text strong {
    font-size: 16px;
}


.marketing-tools-cta-text span {
    color: #667286;

    font-size: 12px;
}


.marketing-tools-all-button {
    min-width: 220px;

    height: 52px;

    padding: 0 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            #2d59ef,
            #356ee9
        );

    color: #fff;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1000px) {

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

}


@media(max-width: 650px) {

    .marketing-tools-section {
        padding: 65px 0;
    }

    .marketing-tools-head h2 {
        font-size: 36px;
    }

    .marketing-tools-grid {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .marketing-tool-card > p {
        width: 58%;
    }

    .marketing-tools-cta {
        max-width: calc(100% - 30px);

        flex-direction: column;

        text-align: center;
    }

    .marketing-tools-all-button {
        width: 100%;
    }

}

/* =========================================
   MARKETING FAQ
========================================= */

.marketing-faq-section {
    padding: 95px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(51, 91, 255, .04),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


.marketing-faq-head {
    width: 800px;
    max-width: calc(100% - 40px);

    margin: 0 auto 50px;

    text-align: center;
}


.marketing-faq-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 18px;

    margin-bottom: 24px;

    border-radius: 28px;

    background: #eef3ff;

    color: #2f5fea;

    font-size: 14px;

    font-weight: 500;
}


.marketing-faq-head h2 {
    margin-bottom: 17px;

    font-size: 54px;

    line-height: 1.1;

    letter-spacing: -1.8px;

    color: #0a1121;
}


.marketing-faq-head p {
    max-width: 670px;

    margin: auto;

    color: #69748a;

    font-size: 15px;

    line-height: 1.6;
}


/* GRID */

.marketing-faq-grid {
    width: 1320px;

    max-width: calc(100% - 70px);

    margin: auto;

    display: grid;

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

    gap: 30px;
}


.marketing-faq-column {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ITEM */

.marketing-faq-item {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e9f0;

    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(25, 45, 85, .035);

    transition: .25s;
}


.marketing-faq-item:hover {
    border-color: #d7def3;

    box-shadow:
        0 12px 30px rgba(25, 45, 85, .06);
}


.marketing-faq-question {
    width: 100%;

    min-height: 90px;

    padding: 18px 22px;

    display: grid;

    grid-template-columns: 50px 1fr 30px;

    align-items: center;

    gap: 14px;

    border: 0;

    background: transparent;

    color: #101728;

    text-align: left;

    font-family: inherit;

    font-size: 15px;

    font-weight: 500;

    cursor: pointer;
}


.marketing-faq-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 50%;

    background: #f0f4ff;

    color: #2d61f0;

    border: 1px solid #e3eaff;

    font-size: 20px;

    font-weight: 600;
}


.marketing-faq-question b {
    color: #2f5ff0;

    font-size: 29px;

    font-weight: 300;

    transition: transform .25s;
}


/* ANSWER */

.marketing-faq-answer {
    max-height: 0;

    padding: 0 85px;

    overflow: hidden;

    color: #687387;

    font-size: 13px;

    line-height: 1.65;

    transition:
        max-height .3s ease,
        padding .3s ease;
}


.marketing-faq-item.active .marketing-faq-answer {
    max-height: 180px;

    padding: 0 85px 22px;
}


.marketing-faq-item.active .marketing-faq-question b {
    transform: rotate(45deg);
}


/* CONTACT */

.marketing-faq-contact {
    width: 950px;

    max-width: calc(100% - 70px);

    min-height: 105px;

    margin: 35px auto 0;

    padding: 18px 25px;

    display: flex;

    align-items: center;

    gap: 20px;

    background:
        linear-gradient(
            90deg,
            #f7f9ff,
            #f1f5ff
        );

    border: 1px solid #dde6fa;

    border-radius: 14px;
}


.marketing-faq-contact-icon {
    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

    background: #e8efff;

    font-size: 31px;
}


.marketing-faq-contact-text {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.marketing-faq-contact-text strong {
    font-size: 16px;
}


.marketing-faq-contact-text span {
    color: #6c778c;

    font-size: 12px;
}


.marketing-faq-contact-button {
    min-width: 230px;

    height: 52px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            #2f5df2,
            #356ff0
        );

    color: #fff;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 500;

    box-shadow:
        0 9px 22px rgba(45, 91, 235, .17);
}


/* RESPONSIVE */

@media(max-width: 850px) {

    .marketing-faq-grid {
        grid-template-columns: 1fr;
    }

}


@media(max-width: 600px) {

    .marketing-faq-section {
        padding: 65px 0;
    }

    .marketing-faq-head h2 {
        font-size: 38px;
    }

    .marketing-faq-grid {
        max-width: calc(100% - 30px);
    }

    .marketing-faq-question {
        grid-template-columns: 42px 1fr 25px;

        min-height: 80px;

        padding: 15px;
    }

    .marketing-faq-icon {
        width: 40px;
        height: 40px;
    }

    .marketing-faq-answer,
    .marketing-faq-item.active .marketing-faq-answer {
        padding-left: 70px;
        padding-right: 25px;
    }

    .marketing-faq-contact {
        max-width: calc(100% - 30px);

        flex-direction: column;

        text-align: center;
    }

    .marketing-faq-contact-button {
        width: 100%;
    }

}

/* =========================================
   PRICING PAGE
========================================= */

.pricing-section {
    position: relative;

    padding: 75px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(61, 90, 255, .04),
            transparent 28%
        ),
        #ffffff;

    color: #0b1120;
}


/* HEAD */

.pricing-head {
    width: 900px;
    max-width: calc(100% - 40px);

    margin: 0 auto 35px;

    text-align: center;
}

.pricing-gift {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;

    padding: 8px 14px;

    border: 1px solid #9fb6ff;
    border-radius: 10px;

    color: #1635a1;

    background: #fff;

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

.pricing-head h1 {
    margin-bottom: 12px;

    font-size: 52px;
    line-height: 1.1;

    letter-spacing: -1.6px;

    color: #080f1f;
}

.pricing-head p {
    margin-bottom: 30px;

    color: #667187;

    font-size: 15px;
}


/* SWITCH */

.pricing-switch {
    width: 650px;
    max-width: 100%;

    margin: auto;

    padding: 4px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border: 1px solid #7798ff;
    border-radius: 35px;

    background: #fff;
}

.pricing-switch-item {
    min-height: 58px;

    border: 0;
    border-radius: 30px;

    background: transparent;

    color: #0d1730;

    font-family: inherit;

    cursor: pointer;
}

.pricing-switch-item strong,
.pricing-switch-item span {
    display: block;
}

.pricing-switch-item strong {
    margin-bottom: 3px;

    font-size: 15px;
}

.pricing-switch-item span {
    color: #67738a;

    font-size: 11px;
}

.pricing-switch-item.active {
    background:
        linear-gradient(
            135deg,
            #09142b,
            #0a1834
        );

    color: #fff;
}

.pricing-switch-item.active span {
    color: rgba(255,255,255,.8);
}


/* GUARANTEE */

.price-guarantee {
    position: absolute;

    top: 40px;
    right: 8%;

    width: 92px;
    height: 92px;

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

    text-align: center;

    color: #111;

    font-size: 9px;

    background: #fff;

    border: 1px solid #e1e3e8;

    clip-path:
        polygon(
            50% 0%,
            61% 8%,
            75% 5%,
            83% 17%,
            95% 25%,
            92% 40%,
            100% 50%,
            92% 61%,
            95% 75%,
            83% 83%,
            75% 95%,
            61% 92%,
            50% 100%,
            39% 92%,
            25% 95%,
            17% 83%,
            5% 75%,
            8% 61%,
            0% 50%,
            8% 39%,
            5% 25%,
            17% 17%,
            25% 5%,
            39% 8%
        );
}

.price-guarantee strong,
.price-guarantee b {
    display: block;

    font-size: 11px;
}


/* GRID */

.pricing-grid {
    width: 1180px;
    max-width: calc(100% - 60px);

    margin: auto;

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

    gap: 24px;

    align-items: stretch;
}


/* CARD */

.pricing-card {
    position: relative;

    min-height: 760px;

    padding: 28px 24px 28px;

    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid #e3e7ee;
    border-radius: 17px;

    box-shadow:
        0 12px 35px rgba(28, 47, 90, .05);
}

.pricing-card h2 {
    margin-bottom: 16px;

    font-size: 24px;
}


/* LABELS */

.pricing-labels {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}

.discount,
.gift-label {
    display: inline-flex;

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

    min-height: 30px;

    padding: 0 10px;

    border-radius: 6px;

    font-size: 11px;

    white-space: nowrap;
}

.discount {
    background:
        linear-gradient(
            135deg,
            #2e74ff,
            #008fff
        );

    color: #fff;

    font-weight: 600;
}

.gift-label {
    background: #f1f5ff;

    border: 1px solid #cedbff;

    color: #213875;
}


/* PRICE */

.pricing-card > del {
    margin-bottom: 6px;

    color: #798196;

    font-size: 13px;
}

.price {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    margin-bottom: 8px;
}

.price strong {
    font-size: 38px;

    line-height: 1;
}

.price span {
    padding-bottom: 3px;

    color: #53607a;

    font-size: 13px;
}

.annual-price {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 25px;

    color: #5e687d;

    font-size: 12px;
}

.annual-price strong {
    font-weight: 500;
}


/* BUTTON */

.pricing-call-btn {
    height: 50px;

    margin-bottom: 22px;

    padding: 0 18px;

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

    gap: 12px;

    border-radius: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0a1731,
            #061123
        );

    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(5, 15, 35, .12);
}

.pricing-call-btn.blue {
    background:
        linear-gradient(
            135deg,
            #4179ff,
            #079be9
        );
}


/* FEATURES */

.package-extra-title {
    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 600;
}

.pricing-features {
    margin: 0 0 25px;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;

    gap: 11px;
}

.pricing-features li {
    position: relative;

    padding-left: 28px;

    color: #3f4d66;

    font-size: 12px;

    line-height: 1.35;
}

.pricing-features li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #3264ff;

    font-weight: 600;
}

.more-features {
    margin-top: auto;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #2458f2;

    font-size: 13px;
}


/* FEATURED */

.pricing-card.featured {
    padding-top: 52px;

    border-color: #cbd8ff;
}

.featured-top {
    position: absolute;

    top: 0;
    left: -1px;
    right: -1px;

    height: 36px;

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

    border-radius: 17px 17px 0 0;

    background:
        linear-gradient(
            90deg,
            #1981f5,
            #00bce7
        );

    color: #fff;

    font-size: 12px;

    font-weight: 600;
}

.popular-ribbon {
    position: absolute;

    top: 36px;
    right: -3px;

    width: 90px;
    height: 30px;

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

    transform: rotate(45deg) translate(23px, -25px);

    background: #3474ee;

    color: #fff;

    font-size: 8px;

    font-weight: 600;
}


/* RESPONSIVE */

@media(max-width: 950px) {

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

    .pricing-card {
        min-height: auto;
    }

    .price-guarantee {
        display: none;
    }

}


@media(max-width: 600px) {

    .pricing-section {
        padding: 55px 0 70px;
    }

    .pricing-head h1 {
        font-size: 36px;
    }

    .pricing-switch {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .pricing-switch-item {
        border-radius: 14px;
    }

    .pricing-grid {
        max-width: calc(100% - 30px);
    }

    .pricing-labels {
        flex-wrap: wrap;
    }

}

/* =========================================
   PAYMENT / INSTALLMENT
========================================= */

.payment-installment-section {
    padding: 10px 0 90px;

    background: #ffffff;
}


.payment-installment-box {
    width: 1100px;
    max-width: calc(100% - 60px);

    margin: auto;

    padding: 28px 35px 24px;

    background: #fff;

    border: 1px solid #e1e6ef;

    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(30, 50, 90, .05);
}


/* TITLE */

.payment-installment-title {
    display: flex;

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

    gap: 12px;

    margin-bottom: 25px;

    color: #1b2742;

    font-size: 16px;
}


.payment-card-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 8px;

    background: #eef3ff;

    color: #2e5cf0;

    font-size: 23px;
}


.payment-installment-title span:last-child,
.payment-installment-title strong span {
    color: #2456ef;
}


/* BANK GRID */

.payment-bank-grid {
    display: grid;

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

    align-items: center;
}


.payment-bank-item {
    min-height: 48px;

    display: flex;

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

    border-right: 1px solid #e4e7ed;
}


.payment-bank-item:last-child {
    border-right: none;
}


/* LOGOS */

.bank-logo {
    display: inline-flex;

    align-items: center;

    white-space: nowrap;

    font-weight: 700;

    letter-spacing: -1px;
}


.axess-logo {
    position: relative;

    color: #111;

    font-size: 24px;
}


.axess-logo::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 13px;

    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 0;
    border-bottom: 10px solid #ffc400;
}


.bonus-logo {
    color: #76b82a;

    font-size: 21px;
}


.bonus-logo::first-letter {
    color: #f5bf00;
}


.world-logo {
    color: #722a8f;

    font-size: 22px;

    font-weight: 800;
}


.maximum-logo {
    color: #ec168c;

    font-size: 21px;

    font-style: italic;
}


.qnb-logo {
    color: #0d1d3c;

    font-size: 22px;
}


.advantage-logo {
    color: #ee6524;

    font-size: 18px;
}


/* RESPONSIVE */

@media(max-width: 900px) {

    .payment-bank-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 15px 0;
    }

    .payment-bank-item {
        border-right: none;
    }

}


@media(max-width: 600px) {

    .payment-installment-section {
        padding-bottom: 60px;
    }

    .payment-installment-box {
        max-width: calc(100% - 30px);

        padding: 22px 18px;
    }

    .payment-installment-title {
        align-items: flex-start;

        text-align: center;

        font-size: 14px;
    }

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

    .bank-logo {
        transform: scale(.9);
    }

}

/* =========================================
   CUSTOMER TRUST
========================================= */

.customer-trust-section {
    padding: 20px 0 100px;
    background: #ffffff;
    color: #0b1120;
}


.customer-trust-box {
    position: relative;

    width: 1500px;
    max-width: calc(100% - 70px);

    margin: auto;

    padding: 52px 52px 28px;

    display: grid;
    grid-template-columns: .85fr 1.35fr;
    gap: 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(76, 112, 255, .07),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fafdff 0%,
            #f6f9ff 100%
        );

    border: 1px solid #d7e2fb;
    border-radius: 28px;

    box-shadow:
        0 16px 45px rgba(30, 50, 100, .04);
}


.customer-trust-box::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: -250px;
    top: -170px;

    border: 1px solid rgba(55, 104, 240, .11);
    border-radius: 50%;

    pointer-events: none;
}


.customer-trust-box::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -190px;
    top: -105px;

    border: 1px solid rgba(55, 104, 240, .07);
    border-radius: 50%;

    pointer-events: none;
}


/* LEFT */

.customer-trust-left {
    position: relative;
    z-index: 2;
}


.customer-trust-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    margin-bottom: 42px;

    background: #eaf1ff;

    border: 1px solid #d7e4ff;

    border-radius: 25px;

    color: #2258e8;

    font-size: 14px;

    font-weight: 600;
}


.customer-trust-left h2 {
    max-width: 470px;

    margin-bottom: 23px;

    font-size: 52px;

    line-height: 1.08;

    letter-spacing: -1.7px;

    color: #10162b;
}


.customer-trust-left h2 strong {
    display: block;

    color: #2d5fe9;
}


.customer-trust-left p {
    max-width: 430px;

    margin-bottom: 28px;

    color: #59667c;

    font-size: 16px;

    line-height: 1.65;
}


.customer-trust-button {
    width: 190px;
    height: 54px;

    padding: 0 22px;

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

    margin-bottom: 30px;

    background:
        linear-gradient(
            135deg,
            #2756f4,
            #1249ee
        );

    color: #fff;

    border-radius: 28px;

    font-size: 14px;
    font-weight: 600;

    box-shadow:
        0 10px 25px rgba(41, 87, 239, .18);
}


/* STATS */

.customer-trust-stats {
    display: grid;

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

    gap: 12px;
}


.customer-stat-card {
    min-height: 135px;

    padding: 18px 12px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

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

    border: 1px solid #dfe7f4;

    border-radius: 16px;

    box-shadow:
        0 8px 20px rgba(31, 49, 88, .03);
}


.customer-stat-icon {
    margin-bottom: 9px;

    font-size: 27px;
}


.customer-stat-card strong {
    display: block;

    margin-bottom: 4px;

    color: #2258ef;

    font-size: 23px;
}


.customer-stat-card span {
    color: #667389;

    font-size: 12px;
}


/* =========================================
   BRANDS
========================================= */

.customer-trust-brands {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 24px;
}


.trust-brand-card {
    min-height: 140px;

    display: flex;

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

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

    border: 1px solid #dfe6f2;

    border-radius: 16px;

    box-shadow:
        0 8px 22px rgba(30, 48, 85, .035);

    transition: .25s;
}


.trust-brand-card:hover {
    transform: translateY(-4px);

    border-color: #cddaff;

    box-shadow:
        0 14px 30px rgba(31, 55, 100, .07);
}


.fake-brand-logo {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #111827;

    font-size: 24px;
}


.fake-brand-logo strong {
    font-size: 23px;

    font-weight: 600;

    letter-spacing: .5px;
}


.text-logo strong {
    letter-spacing: 7px;

    font-size: 23px;
}


.brand-symbol {
    font-size: 34px;

    font-weight: 800;
}


.novexa-symbol {
    color: #3173f0;
}


.zevra-symbol {
    color: #28bb8b;
}


.marvio-symbol {
    color: #5751ed;
}


.qentro-symbol {
    color: #2f6df1;
}


.brandora-symbol {
    color: #f1b510;
}


.solvex-symbol {
    color: #20af7b;
}


.pento-symbol {
    color: #9b2af2;
}


.vionca-symbol {
    color: #ff6969;
}


/* =========================================
   BOTTOM
========================================= */

.customer-trust-bottom {
    position: relative;
    z-index: 2;

    grid-column: 1 / -1;

    min-height: 95px;

    margin-top: 5px;

    padding: 16px 28px;

    display: flex;

    align-items: center;

    gap: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.88),
            rgba(246,249,255,.90)
        );

    border: 1px solid #d9e3f6;

    border-radius: 16px;
}


.trust-bottom-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;

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

    border-radius: 50%;

    background: #e7efff;

    font-size: 25px;
}


.trust-bottom-text {
    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.trust-bottom-text span {
    color: #637088;

    font-size: 14px;
}


.trust-bottom-text strong {
    color: #2057ef;

    font-size: 14px;
}


.trust-bottom-arrow {
    width: 42px;
    height: 42px;

    display: flex;

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

    color: #1f5cf0;

    font-size: 28px;

    border-radius: 50%;

    transition: .2s;
}


.trust-bottom-arrow:hover {
    background: #e9f0ff;
}


/* RESPONSIVE */

@media(max-width: 1050px) {

    .customer-trust-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .customer-trust-left {
        text-align: center;
    }

    .customer-trust-left h2,
    .customer-trust-left p {
        margin-left: auto;
        margin-right: auto;
    }

    .customer-trust-button {
        margin-left: auto;
        margin-right: auto;
    }

}


@media(max-width: 700px) {

    .customer-trust-section {
        padding-bottom: 65px;
    }

    .customer-trust-box {
        max-width: calc(100% - 30px);

        padding: 35px 18px 20px;

        border-radius: 20px;
    }

    .customer-trust-left h2 {
        font-size: 38px;
    }

    .customer-trust-stats {
        grid-template-columns: 1fr;
    }

    .customer-trust-brands {
        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }

    .trust-brand-card {
        min-height: 100px;
    }

    .fake-brand-logo {
        transform: scale(.82);
    }

    .customer-trust-bottom {
        flex-direction: column;

        text-align: center;

        padding: 22px;
    }

}


@media(max-width: 450px) {

    .customer-trust-brands {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   REFERENCES HERO
========================================= */

.references-hero {
    padding: 75px 0 90px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(47, 91, 255, .035),
            transparent 28%
        ),
        #ffffff;

    color: #0b1120;
}


.references-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

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

    align-items: center;

    gap: 70px;
}


/* LEFT */

.references-content {
    max-width: 620px;
}


.reference-ratings {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 48px;

    padding: 11px 16px;

    background: #fff;

    border: 1px solid #e4e8ef;

    border-radius: 10px;

    box-shadow:
        0 7px 20px rgba(26, 43, 76, .04);
}


.rating-item {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #58647a;

    font-size: 12px;
}


.rating-brand {
    font-weight: 600;
}


.rating-brand.google {
    color: #4285f4;
}


.rating-brand.sikayet {
    color: #26b7ad;
}


.rating-brand.tidesoft-rating {
    color: #2a58e8;
}


.references-content h1 {
    margin-bottom: 28px;

    font-size: 64px;

    line-height: 1.08;

    letter-spacing: -2px;

    color: #0a1020;
}


.references-content h1 strong {
    display: block;

    color: #2f5ee9;
}


.references-content p {
    max-width: 570px;

    margin-bottom: 35px;

    color: #667186;

    font-size: 17px;

    line-height: 1.7;
}


.references-content p strong {
    color: #204ff0;
}


.references-start-btn {
    width: 320px;
    max-width: 100%;

    min-height: 58px;

    padding: 0 22px;

    display: flex;

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

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #2e57f4,
            #214cf0
        );

    color: #fff;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 600;

    box-shadow:
        0 12px 28px rgba(40, 78, 240, .18);

    transition: .25s;
}


.references-start-btn:hover {
    transform: translateY(-3px);
}


/* =========================================
   SHOWCASE
========================================= */

.references-showcase {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}


.reference-showcase-card {
    position: relative;

    min-height: 220px;

    overflow: hidden;

    border-radius: 14px;

    text-decoration: none;

    color: #101522;

    box-shadow:
        0 8px 24px rgba(25, 40, 70, .05);
}


.reference-showcase-card:nth-child(3),
.reference-showcase-card:nth-child(4) {
    min-height: 260px;
}


.roselin-card {
    background:
        linear-gradient(
            135deg,
            #e9edf3,
            #d9e0ea
        );
}


.lunessa-card {
    background:
        linear-gradient(
            135deg,
            #ead7ca,
            #d7bcae
        );
}


.strongfit-card {
    background:
        linear-gradient(
            135deg,
            #111,
            #222
        );
}


.dekomax-card {
    background:
        linear-gradient(
            135deg,
            #0c1c3e,
            #152d55
        );
}


.miniko-card {
    background:
        linear-gradient(
            135deg,
            #aab99b,
            #d5dec8
        );
}


.natura-card {
    background:
        linear-gradient(
            135deg,
            #c9c2b6,
            #e9e3db
        );
}


.reference-brand-name {
    position: absolute;

    z-index: 4;

    left: 24px;
    top: 25px;

    font-size: 23px;

    letter-spacing: 2px;
}


.reference-brand-name.light {
    color: #fff;
}


.reference-brand-name small {
    display: block;

    margin-top: 3px;

    font-size: 8px;

    letter-spacing: 2px;
}


.reference-person,
.reference-product {
    position: absolute;

    right: 20px;
    bottom: 10px;

    font-size: 130px;
}


.reference-product {
    font-size: 95px;
}


.reference-read-more {
    position: absolute;

    z-index: 5;

    left: 24px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    font-size: 12px;
}


.reference-read-more.light {
    color: #fff;
}


/* =========================================
   STATS
========================================= */

.references-stats {
    width: 1450px;
    max-width: calc(100% - 80px);

    min-height: 135px;

    margin: 55px auto 0;

    padding: 20px 30px;

    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;

    align-items: center;

    background: #fff;

    border: 1px solid #e1e6ef;

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(30, 45, 80, .04);
}


.references-stat-intro {
    display: flex;

    align-items: center;

    gap: 18px;

    padding-right: 30px;

    border-right: 1px solid #e6e9ef;
}


.references-stat-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: flex;

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

    background: #f1f4ff;

    color: #2f5bea;

    border-radius: 50%;

    font-size: 35px;
}


.references-stat-intro span,
.references-stat-intro strong {
    display: block;

    font-size: 13px;
}


.references-stat-intro strong {
    margin-top: 4px;

    color: #2a56ea;
}


.references-stat-item {
    min-height: 75px;

    display: flex;

    flex-direction: column;

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

    border-right: 1px solid #e7e9ef;
}


.references-stat-item:last-child {
    border-right: none;
}


.references-stat-item strong {
    margin-bottom: 6px;

    color: #2855ed;

    font-size: 35px;

    font-weight: 500;
}


.references-stat-item span {
    color: #171d29;

    font-size: 13px;
}


/* RESPONSIVE */

@media(max-width: 1050px) {

    .references-container {
        grid-template-columns: 1fr;
    }

    .references-content {
        max-width: none;

        text-align: center;
    }

    .references-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .references-start-btn {
        margin: auto;
    }

    .references-stats {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .references-stat-intro {
        border-right: none;
    }

    .references-stat-item {
        border-right: none;
    }

}


@media(max-width: 650px) {

    .references-hero {
        padding: 50px 0 65px;
    }

    .references-container {
        max-width: calc(100% - 30px);
    }

    .reference-ratings {
        flex-wrap: wrap;

        justify-content: center;
    }

    .references-content h1 {
        font-size: 42px;
    }

    .references-content p {
        font-size: 15px;
    }

    .references-showcase {
        grid-template-columns: 1fr;
    }

    .references-stats {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .references-stat-intro {
        justify-content: center;

        text-align: center;
    }

}

/* =========================================
   SECTOR REFERENCES
========================================= */

.sector-reference-section {
    padding: 95px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(52, 91, 255, .04),
            transparent 30%
        ),
        #ffffff;

    color: #0b1120;
}


.sector-reference-head {
    width: 900px;
    max-width: calc(100% - 40px);

    margin: 0 auto 55px;

    text-align: center;
}


.sector-reference-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 17px;
    margin-bottom: 20px;

    background: #f3f6ff;

    border: 1px solid #dfe7ff;
    border-radius: 24px;

    color: #2d5cf0;

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


.sector-reference-head h2 {
    margin-bottom: 18px;

    color: #0b1020;

    font-size: 50px;
    line-height: 1.12;

    letter-spacing: -1.8px;
}


.sector-reference-head h2 strong {
    display: block;

    color: #2f5fe9;
}


.sector-reference-head p {
    max-width: 650px;

    margin: auto;

    color: #667287;

    font-size: 15px;
    line-height: 1.6;
}


/* GRID */

.sector-reference-grid {
    width: 1280px;
    max-width: calc(100% - 70px);

    margin: auto;

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

    gap: 20px;
}


/* CARD */

.sector-reference-card {
    min-height: 240px;

    padding: 24px 22px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    background: #fff;

    border: 1px solid #e2e7ef;
    border-radius: 15px;

    box-shadow:
        0 8px 24px rgba(25, 45, 85, .035);

    transition: .25s;
}


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

    border-color: #d4ddf7;

    box-shadow:
        0 16px 34px rgba(25, 45, 85, .07);
}


/* LOGOS */

.sector-logo {
    min-height: 82px;

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

    margin-bottom: 8px;
}


.sector-logo span {
    margin-bottom: 4px;

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


.sector-logo strong {
    font-size: 19px;

    letter-spacing: 2px;
}


.luxora-logo span {
    color: #b58a4a;
}

.viterra-logo span {
    color: #3aa24f;
}

.technova-logo span {
    color: #2d63ef;
}

.yapistan-logo span {
    color: #2d4f84;
}

.gurmea-logo span {
    color: #a44c36;
}

.mobelia-logo span {
    color: #3c3c3c;
}

.petrio-logo span {
    color: #58a454;
}

.autexia-logo span {
    color: #d9271b;
}


/* DESCRIPTION */

.sector-reference-card p {
    flex: 1;

    margin-bottom: 17px;

    color: #657188;

    font-size: 12px;
    line-height: 1.55;
}


/* TAG */

.sector-tag {
    min-height: 32px;

    padding: 0 14px;

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

    gap: 6px;

    background: #f2f5ff;

    border-radius: 18px;

    color: #2859ed;

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


/* =========================================
   CTA
========================================= */

.sector-reference-cta {
    width: 1280px;
    max-width: calc(100% - 70px);

    min-height: 92px;

    margin: 28px auto 0;

    padding: 18px 28px;

    display: flex;
    align-items: center;

    gap: 18px;

    background:
        linear-gradient(
            90deg,
            #f5f8ff,
            #f0f4ff
        );

    border: 1px solid #dce4f8;
    border-radius: 15px;
}


.sector-reference-cta-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

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

    background:
        linear-gradient(
            135deg,
            #3762ef,
            #5537f1
        );

    color: #fff;

    border-radius: 50%;

    font-size: 28px;
}


.sector-reference-cta-text {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.sector-reference-cta-text strong {
    color: #121928;

    font-size: 14px;
}


.sector-reference-cta-text span {
    color: #2856e9;

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


.sector-reference-cta-button {
    min-width: 235px;
    height: 52px;

    padding: 0 20px;

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

    background:
        linear-gradient(
            135deg,
            #2d5af0,
            #2351ef
        );

    color: #fff;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(38, 82, 238, .15);
}


/* RESPONSIVE */

@media(max-width: 1050px) {

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

}


@media(max-width: 650px) {

    .sector-reference-section {
        padding: 65px 0;
    }

    .sector-reference-head h2 {
        font-size: 36px;
    }

    .sector-reference-grid {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

    .sector-reference-cta {
        max-width: calc(100% - 30px);

        flex-direction: column;

        text-align: center;
    }

    .sector-reference-cta-button {
        width: 100%;
    }

}

/* =========================================
   ECOSYSTEM
========================================= */

.ecosystem-section {
    padding: 100px 0 110px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(71, 55, 244, .045),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


/* HEAD */

.ecosystem-head {
    width: 1000px;
    max-width: calc(100% - 40px);

    margin: 0 auto 50px;

    text-align: center;
}


.ecosystem-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 17px;
    margin-bottom: 22px;

    border: 1px solid #ddd8ff;
    border-radius: 24px;

    background: #f7f5ff;

    color: #3b2fe1;

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


.ecosystem-head h2 {
    margin-bottom: 17px;

    font-size: 54px;
    line-height: 1.1;

    letter-spacing: -1.8px;

    color: #090f1e;
}


.ecosystem-head h2 strong {
    color: #4533ef;
}


.ecosystem-head p {
    max-width: 830px;

    margin: auto;

    color: #687389;

    font-size: 15px;
    line-height: 1.7;
}


/* GRID */

.ecosystem-grid {
    width: 1450px;
    max-width: calc(100% - 70px);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.4fr
        1.25fr
        .75fr;

    grid-template-areas:
        "operation sites sector"
        "orders performance uptime";

    gap: 20px;
}


/* BASE CARD */

.ecosystem-card {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e1e4eb;
    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(25, 40, 80, .035);
}


/* =========================================
   OPERATION
========================================= */

.ecosystem-operation {
    grid-area: operation;

    min-height: 350px;

    padding: 30px;

    display: flex;

    flex-direction: column;
    justify-content: flex-end;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(62, 88, 255, .45),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #06143c,
            #112a76
        );

    color: #fff;
}


.operation-visual {
    position: absolute;

    inset: 0;
}


.operation-cart {
    position: absolute;

    left: 70px;
    top: 75px;

    font-size: 85px;

    transform: rotate(-12deg);
}


.operation-bag {
    position: absolute;

    left: 210px;
    top: 65px;

    font-size: 150px;

    filter: drop-shadow(0 20px 25px rgba(0,0,0,.2));
}


.operation-pos {
    position: absolute;

    right: 65px;
    top: 90px;

    font-size: 100px;

    transform: rotate(13deg);
}


.operation-dot {
    position: absolute;

    width: 12px;
    height: 12px;

    background: #4f79ff;

    border-radius: 50%;

    box-shadow:
        0 0 30px #5c80ff;
}


.dot-one {
    top: 65px;
    left: 310px;
}

.dot-two {
    top: 180px;
    right: 130px;
}

.dot-three {
    top: 120px;
    left: 120px;
}


.operation-content {
    position: relative;

    z-index: 2;

    max-width: 530px;
}


.operation-content h3 {
    margin-bottom: 13px;

    font-size: 25px;
}


.operation-content p {
    color: rgba(255,255,255,.78);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================
   SITES
========================================= */

.ecosystem-sites {
    grid-area: sites;

    padding: 30px;
}


.ecosystem-small-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 12px;

    background: #eeeaff;

    color: #4835ee;

    font-size: 23px;
}


.ecosystem-small-icon.mint {
    background: #daf9f8;

    color: #19aaa3;
}


.ecosystem-growth {
    position: absolute;

    right: 30px;
    top: 35px;

    color: #3f2ee8;

    font-size: 13px;

    font-weight: 700;
}


.vertical-bars {
    height: 105px;

    margin: 35px 0 25px;

    display: flex;

    align-items: flex-end;

    gap: 10px;
}


.vertical-bars span {
    flex: 1;

    max-width: 26px;

    min-height: 10px;

    background:
        linear-gradient(
            180deg,
            #9c89ff,
            #6551ef
        );

    border-radius: 4px 4px 0 0;
}


.ecosystem-number {
    margin-bottom: 8px;

    font-size: 45px;

    font-weight: 700;

    line-height: 1;
}


.ecosystem-card > strong {
    font-size: 14px;
}


/* =========================================
   SECTOR
========================================= */

.ecosystem-sector {
    grid-area: sector;

    padding: 30px;

    background:
        linear-gradient(
            160deg,
            #f6ffff,
            #effefd
        );

    border-color: #ccefed;
}


.ecosystem-sector-top {
    display: flex;

    align-items: center;

    gap: 13px;
}


.ecosystem-sector-top > strong {
    font-size: 13px;

    line-height: 1.4;
}


.sector-dot-grid {
    width: 105px;

    margin: 45px auto 50px;

    display: grid;

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

    gap: 9px;
}


.sector-dot-grid span {
    width: 7px;
    height: 7px;

    background: #30d2c8;

    border-radius: 50%;
}


/* =========================================
   ORDERS
========================================= */

.ecosystem-orders {
    grid-area: orders;

    padding: 28px;
}


.ecosystem-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.ecosystem-card-top > span {
    color: #4431ea;

    font-size: 13px;

    font-weight: 700;
}


.horizontal-stat-bars {
    margin: 30px 0 25px;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.horizontal-stat-bars i {
    height: 9px;

    display: block;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #6c51ee,
            #c9bfff
        );
}


/* =========================================
   PERFORMANCE
========================================= */

.ecosystem-performance {
    grid-area: performance;

    padding: 28px;
}


.performance-top {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}


.performance-top h3 {
    margin-bottom: 15px;

    font-size: 17px;
}


.performance-top p {
    max-width: 260px;

    color: #6b758a;

    font-size: 11px;

    line-height: 1.6;
}


.performance-top > span {
    color: #4934ef;

    font-size: 13px;

    font-weight: 700;
}


.performance-chart {
    height: 160px;

    margin-top: 25px;
}


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


/* =========================================
   UPTIME
========================================= */

.ecosystem-uptime {
    grid-area: uptime;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #fbf9ff,
            #f4f1ff
        );

    border-color: #ded8ff;
}


.uptime-head {
    display: flex;

    align-items: center;

    gap: 16px;
}


.uptime-head .ecosystem-number {
    font-size: 42px;
}


.uptime-head strong {
    color: #4634ef;

    font-size: 13px;
}


.uptime-status {
    margin-left: auto;

    padding: 7px 12px;

    background: #e9e4ff;

    color: #4a37e7;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 600;
}


.uptime-line {
    height: 105px;

    margin: 18px 0 10px;
}


.uptime-line svg {
    width: 100%;
    height: 100%;
}


.ecosystem-uptime p {
    color: #6a7589;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .ecosystem-grid {
        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "operation operation"
            "sites sector"
            "orders orders"
            "performance uptime";
    }

}


@media(max-width: 700px) {

    .ecosystem-section {
        padding: 65px 0;
    }

    .ecosystem-head h2 {
        font-size: 37px;
    }

    .ecosystem-grid {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;

        grid-template-areas:
            "operation"
            "sites"
            "sector"
            "orders"
            "performance"
            "uptime";
    }

    .ecosystem-card {
        min-height: auto;
    }

    .ecosystem-operation {
        min-height: 370px;
    }

    .operation-bag {
        left: 50%;

        transform: translateX(-50%);
    }

    .operation-cart {
        left: 25px;
    }

    .operation-pos {
        right: 25px;
    }

}

/* =========================================
   ABOUT PAGE - HERO
========================================= */

.about-hero-section {
    padding: 80px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(44, 88, 255, .045),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


/* HEAD */

.about-hero-head {
    width: 950px;
    max-width: calc(100% - 40px);

    margin: 0 auto 45px;

    text-align: center;
}


.about-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    margin-bottom: 30px;

    background: #eaf1ff;

    border-radius: 28px;

    color: #225ce8;

    font-size: 15px;

    font-weight: 600;
}


.about-hero-head h1 {
    margin-bottom: 22px;

    color: #0a1122;

    font-size: 62px;

    line-height: 1.07;

    letter-spacing: -2px;
}


.about-hero-head h1 span {
    display: block;
}


.about-hero-head h1 strong {
    color: #2d5af0;
}


.about-hero-head p {
    max-width: 760px;

    margin: auto;

    color: #647087;

    font-size: 17px;

    line-height: 1.6;
}


/* =========================================
   GRID
========================================= */

.about-values-grid {
    width: 1450px;

    max-width: calc(100% - 70px);

    margin: auto;

    display: grid;

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

    gap: 18px;
}


/* CARD */

.about-value-card {
    min-height: 520px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #dfe5ef;

    border-radius: 20px;

    box-shadow:
        0 12px 30px rgba(26, 44, 85, .04);

    transition: .25s;
}


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

    border-color: #cedafd;

    box-shadow:
        0 18px 40px rgba(26, 44, 85, .08);
}


/* VISUAL */

.about-value-visual {
    position: relative;

    min-height: 315px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(51, 90, 240, .09),
            transparent 55%
        ),
        #fbfdff;
}


.about-value-visual::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    border: 2px dashed rgba(52, 92, 236, .16);

    border-radius: 50%;
}


/* =========================================
   STORE VISUAL
========================================= */

.mini-dashboard {
    position: relative;

    z-index: 2;

    width: 180px;
    height: 145px;

    padding: 18px;

    background: #fff;

    border: 1px solid #dfe4ef;

    border-radius: 10px;

    box-shadow:
        0 12px 30px rgba(28, 47, 87, .10);
}


.mini-dashboard-logo {
    margin-bottom: 22px;

    color: #1f56ea;

    font-size: 18px;

    font-weight: 700;
}


.mini-dashboard-logo span,
.mobile-top span {
    color: #2b50e8;
}


.mini-chart {
    height: 50px;

    display: flex;

    align-items: flex-end;

    gap: 5px;
}


.mini-chart span {
    width: 12px;

    background:
        linear-gradient(
            180deg,
            #70a1ff,
            #315ff0
        );

    border-radius: 3px 3px 0 0;
}


.mini-chart span:nth-child(1) {
    height: 30%;
}

.mini-chart span:nth-child(2) {
    height: 55%;
}

.mini-chart span:nth-child(3) {
    height: 75%;
}

.mini-chart span:nth-child(4) {
    height: 100%;
}


.mini-chart-circle {
    position: absolute;

    right: 20px;
    bottom: 25px;

    width: 38px;
    height: 38px;

    border: 7px solid #355fef;

    border-right-color: #b7c8ff;

    border-radius: 50%;
}


.floating-store-icon,
.floating-cart-icon {
    position: absolute;

    z-index: 4;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #3267f3,
            #5888ff
        );

    color: #fff;

    font-size: 26px;

    box-shadow:
        0 9px 22px rgba(43, 92, 240, .18);
}


.floating-store-icon {
    left: 28px;
    top: 50px;
}


.floating-cart-icon {
    right: 23px;
    bottom: 60px;
}


/* =========================================
   IDEAS
========================================= */

.idea-cloud {
    position: relative;

    z-index: 2;

    font-size: 150px;
}


.idea-puzzle {
    position: absolute;

    z-index: 4;

    font-size: 75px;
}


.idea-code {
    position: absolute;

    top: 58px;
    right: 25px;

    z-index: 5;

    width: 54px;
    height: 54px;

    display: flex;

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

    border-radius: 50%;

    background: #9fb8ff;

    color: #fff;

    font-weight: 700;
}


/* =========================================
   INFRASTRUCTURE
========================================= */

.server-stack {
    position: relative;

    z-index: 2;

    width: 180px;
}


.server-stack span {
    display: block;

    height: 55px;

    margin-top: -10px;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #77a2ff,
            #3d6bee
        );

    border: 3px solid #dbe5ff;

    box-shadow:
        0 10px 20px rgba(42, 80, 180, .11);
}


.server-shield {
    position: absolute;

    z-index: 5;

    right: 35px;
    bottom: 45px;

    width: 80px;
    height: 90px;

    display: flex;

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

    clip-path:
        polygon(
            50% 0,
            90% 15%,
            85% 70%,
            50% 100%,
            15% 70%,
            10% 15%
        );

    background:
        linear-gradient(
            145deg,
            #4b7cff,
            #2d5bea
        );

    color: #fff;

    font-size: 38px;
}


/* =========================================
   GROWTH
========================================= */

.mobile-mockup {
    position: relative;

    z-index: 2;

    width: 120px;
    height: 210px;

    padding: 20px 14px;

    border: 7px solid #123a92;

    border-radius: 26px;

    background: #fff;

    transform: rotate(7deg);

    box-shadow:
        0 12px 30px rgba(28, 48, 90, .12);
}


.mobile-top {
    margin-bottom: 25px;

    color: #1950e9;

    font-size: 15px;

    font-weight: 700;
}


.mobile-cart {
    margin-bottom: 20px;

    text-align: center;

    font-size: 42px;
}


.mobile-bars span {
    display: block;

    width: 80%;

    height: 6px;

    margin: 7px auto;

    background: #e3e7ef;

    border-radius: 15px;
}


.growth-chart-box {
    position: absolute;

    right: 25px;
    bottom: 55px;

    width: 85px;
    height: 75px;

    display: flex;

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

    background: #fff;

    border: 1px solid #dde3ef;

    border-radius: 10px;

    box-shadow:
        0 8px 20px rgba(25, 45, 80, .08);
}


.growth-line {
    color: #4072f4;

    font-size: 45px;
}


/* =========================================
   SUPPORT
========================================= */

.support-headset {
    position: relative;

    z-index: 2;

    font-size: 150px;
}


.support-message {
    position: absolute;

    z-index: 4;

    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 50%;

    background: #315deb;

    color: #fff;

    font-size: 26px;
}


.support-time {
    position: absolute;

    right: 20px;
    top: 65px;

    z-index: 5;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    background: #aec1ff;

    color: #fff;

    font-weight: 700;
}


/* =========================================
   CONTENT
========================================= */

.about-value-content {
    flex: 1;

    padding: 22px 20px 28px;
}


.about-value-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 12px;

    display: flex;

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

    background: #eff4ff;

    border-radius: 12px;

    color: #2c5aec;

    font-size: 22px;
}


.about-value-content h3 {
    margin-bottom: 14px;

    color: #111827;

    font-size: 17px;

    line-height: 1.35;
}


.about-value-content p {
    color: #627087;

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1200px) {

    .about-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media(max-width: 800px) {

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

}


@media(max-width: 600px) {

    .about-hero-section {
        padding: 55px 0 70px;
    }

    .about-hero-head h1 {
        font-size: 40px;
    }

    .about-hero-head p {
        font-size: 15px;
    }

    .about-values-grid {
        max-width: calc(100% - 30px);

        grid-template-columns: 1fr;
    }

}

/* =========================================
   ABOUT - PROFESSIONAL SOLUTIONS
========================================= */

.about-solutions-section {
    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 25% 45%,
            rgba(45, 93, 245, .05),
            transparent 30%
        ),
        #ffffff;

    color: #0b1120;
}


.about-solutions-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: 95px;
}


/* =========================================
   LEFT VISUAL
========================================= */

.about-solutions-visual {
    position: relative;

    min-height: 620px;
}


.solutions-bg-panel {
    position: absolute;

    left: 55px;
    top: 40px;

    width: 78%;
    height: 500px;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 50% 70%,
            rgba(63, 52, 238, .8),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #5ca1f5,
            #3d67f0
        );

    box-shadow:
        0 25px 55px rgba(47, 86, 210, .18);
}


.solutions-bg-panel::before {
    content: "";

    position: absolute;

    inset: 90px;

    border: 2px dashed rgba(255,255,255,.55);

    border-radius: 50%;
}


.solutions-person {
    position: absolute;

    z-index: 4;

    left: 130px;
    bottom: 15px;

    font-size: 360px;

    filter:
        drop-shadow(
            0 24px 30px rgba(25, 40, 80, .15)
        );
}


/* PRODUCT */

.solutions-product-card {
    position: absolute;

    z-index: 6;

    left: 85px;
    top: 175px;

    width: 235px;

    padding: 20px;

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

    border: 1px solid rgba(255,255,255,.9);

    border-radius: 14px;

    box-shadow:
        0 14px 30px rgba(25, 45, 90, .13);
}


.solutions-product-card span,
.solutions-product-card strong {
    display: block;
}


.solutions-product-card span {
    margin-bottom: 8px;

    color: #657086;

    font-size: 12px;
}


.solutions-product-card strong {
    margin-bottom: 15px;

    font-size: 17px;
}


.solutions-product-lines {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.solutions-product-lines i {
    width: 80%;

    height: 6px;

    display: block;

    background: #e3e7ef;

    border-radius: 20px;
}


.solutions-product-lines i:last-child {
    width: 55%;
}


/* SALES */

.solutions-sales-card {
    position: absolute;

    z-index: 7;

    right: 15px;
    top: 150px;

    width: 280px;

    padding: 22px;

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

    border: 1px solid #e2e6ef;

    border-radius: 14px;

    box-shadow:
        0 14px 32px rgba(25, 45, 90, .14);
}


.solutions-sales-card span,
.solutions-sales-card strong,
.solutions-sales-card small {
    display: block;
}


.solutions-sales-card span {
    margin-bottom: 12px;

    color: #7a8293;

    font-size: 10px;
}


.solutions-sales-card strong {
    margin-bottom: 10px;

    color: #111827;

    font-size: 22px;
}


.solutions-sales-card small {
    color: #34a96b;

    font-size: 11px;
}


.solutions-sales-badge {
    position: absolute;

    z-index: 8;

    left: 100px;
    top: 335px;

    padding: 12px 23px;

    border-radius: 25px;

    background: #0b1731;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    box-shadow:
        0 10px 25px rgba(10, 20, 45, .15);
}


/* SIDE ICONS */

.solutions-side-icons {
    position: absolute;

    z-index: 8;

    left: 5px;
    top: 285px;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.solutions-side-icons span {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 50%;

    background: #edf3ff;

    color: #315fed;

    font-size: 22px;

    box-shadow:
        0 7px 18px rgba(40, 70, 120, .06);
}


.solutions-side-icons span:first-child {
    background: #315bef;

    color: #fff;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.about-solutions-content {
    max-width: 570px;
}


.about-solutions-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 16px;

    margin-bottom: 25px;

    border-radius: 25px;

    background: #f1f4ff;

    color: #2858ea;

    font-size: 13px;

    font-weight: 600;
}


.about-solutions-content h2 {
    margin-bottom: 26px;

    font-size: 58px;

    line-height: 1.08;

    letter-spacing: -2px;

    color: #0b1121;
}


.about-solutions-content h2 strong {
    display: block;

    color: #2f5aee;
}


.about-solutions-line {
    width: 50px;
    height: 5px;

    margin-bottom: 30px;

    border-radius: 10px;

    background: #3158ed;
}


.about-solutions-content > p {
    margin-bottom: 40px;

    color: #5e697e;

    font-size: 16px;

    line-height: 1.8;
}


/* FEATURES */

.about-solutions-features {
    display: grid;

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


.about-solution-feature {
    min-height: 110px;

    padding: 0 18px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    border-right: 1px solid #e5e8ef;
}


.about-solution-feature:first-child {
    padding-left: 0;
}


.about-solution-feature:last-child {
    border-right: none;
}


.about-solution-feature-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 10px;

    display: flex;

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

    border-radius: 14px;

    background: #f0f4ff;

    color: #315ded;

    font-size: 25px;
}


.about-solution-feature span {
    color: #202838;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .about-solutions-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .about-solutions-content {
        max-width: none;

        text-align: center;
    }

    .about-solutions-line {
        margin-left: auto;
        margin-right: auto;
    }

}


@media(max-width: 700px) {

    .about-solutions-section {
        padding: 70px 0;
    }

    .about-solutions-container {
        max-width: calc(100% - 30px);
    }

    .about-solutions-visual {
        min-height: 500px;

        transform: scale(.9);
    }

    .about-solutions-content h2 {
        font-size: 42px;
    }

    .about-solutions-content > p {
        font-size: 14px;
    }

    .about-solutions-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .about-solution-feature {
        border-right: none;

        padding: 15px;
    }

}

/* =========================================
   ABOUT TEAM
========================================= */

.about-team-section {
    padding: 105px 0 115px;

    background:
        radial-gradient(
            circle at 25% 55%,
            rgba(57, 83, 246, .05),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


.about-team-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 95px;
}


/* =========================================
   LEFT VISUAL
========================================= */

.about-team-visual {
    position: relative;

    min-height: 760px;
}


.team-orbit {
    position: absolute;

    border: 2px dashed rgba(48, 88, 245, .25);

    border-radius: 50%;
}


.team-orbit-one {
    width: 670px;
    height: 670px;

    left: -50px;
    top: 30px;
}


.team-orbit-two {
    width: 520px;
    height: 520px;

    left: 70px;
    top: 105px;

    border-color: rgba(49, 93, 240, .09);
}


.team-grid {
    position: relative;

    z-index: 2;

    width: 620px;
    max-width: 100%;

    margin: auto;

    display: grid;

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

    grid-auto-rows: 165px;

    gap: 16px;

    align-items: end;
}


.team-person-card {
    position: relative;

    height: 165px;

    overflow: hidden;

    display: flex;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #315df1,
            #5436eb
        );

    box-shadow:
        0 12px 28px rgba(46, 70, 190, .13);
}


.team-person-card.tall {
    height: 210px;
}


.team-person-card:nth-child(2),
.team-person-card:nth-child(6),
.team-person-card:nth-child(10) {
    transform: translateY(35px);
}


.team-person-card:nth-child(3),
.team-person-card:nth-child(7),
.team-person-card:nth-child(11) {
    transform: translateY(-15px);
}


.team-avatar {
    font-size: 115px;

    line-height: 1;

    filter:
        drop-shadow(
            0 10px 15px rgba(0,0,0,.10)
        );
}


.team-person-card::before {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -45px;
    top: -45px;

    border: 1px solid rgba(255,255,255,.17);

    border-radius: 50%;
}


.team-person-card::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    left: -20px;
    bottom: -20px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.about-team-content {
    max-width: 600px;
}


.about-team-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    margin-bottom: 28px;

    background: #eff3ff;

    border-radius: 28px;

    color: #2d5ce9;

    font-size: 14px;

    font-weight: 600;
}


.about-team-content h2 {
    margin-bottom: 27px;

    color: #0b1122;

    font-size: 62px;

    line-height: 1.08;

    letter-spacing: -2px;
}


.about-team-content h2 span {
    display: block;
}


.about-team-content h2 strong {
    color: #2d5bf0;
}


.about-team-line {
    width: 55px;
    height: 5px;

    margin-bottom: 31px;

    border-radius: 20px;

    background: #305bed;
}


.about-team-content > p {
    margin-bottom: 42px;

    color: #5f6a7f;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   TEAM STATS
========================================= */

.about-team-stats {
    display: grid;

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


.about-team-stat {
    min-height: 145px;

    padding: 15px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    border-right: 1px solid #e2e6ee;
}


.about-team-stat:last-child {
    border-right: none;
}


.about-team-stat-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 12px;

    display: flex;

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

    border-radius: 14px;

    background: #eef3ff;

    color: #2d5ced;

    font-size: 27px;
}


.about-team-stat strong {
    margin-bottom: 4px;

    color: #111827;

    font-size: 21px;
}


.about-team-stat span {
    color: #455169;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .about-team-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-team-content {
        max-width: none;

        text-align: center;
    }

    .about-team-line {
        margin-left: auto;
        margin-right: auto;
    }

    .about-team-visual {
        min-height: 700px;
    }

}


@media(max-width: 700px) {

    .about-team-section {
        padding: 70px 0;
    }

    .about-team-container {
        max-width: calc(100% - 30px);
    }

    .about-team-content h2 {
        font-size: 42px;
    }

    .about-team-content > p {
        font-size: 14px;
    }

    .about-team-visual {
        min-height: auto;
    }

    .team-orbit {
        display: none;
    }

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

        grid-auto-rows: auto;
    }

    .team-person-card,
    .team-person-card.tall {
        height: 190px;

        transform: none !important;
    }

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

    .about-team-stat {
        border-right: none;

        border-bottom: 1px solid #e5e8ee;
    }

}

/* =========================================
   ABOUT ACADEMY
========================================= */

.about-academy-section {
    padding: 110px 0 115px;

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(43, 82, 238, .05),
            transparent 30%
        ),
        #ffffff;

    color: #0b1120;
}


.about-academy-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    align-items: center;

    gap: 80px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.about-academy-content {
    max-width: 620px;
}


.about-academy-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    margin-bottom: 28px;

    border-radius: 25px;

    background: #eef3ff;

    color: #2858ea;

    font-size: 14px;

    font-weight: 600;
}


.about-academy-content h2 {
    margin-bottom: 25px;

    color: #0b1122;

    font-size: 53px;

    line-height: 1.15;

    letter-spacing: -1.7px;
}


.about-academy-content h2 strong {
    color: #3d35e8;
}


.about-academy-line {
    width: 55px;

    height: 5px;

    margin-bottom: 30px;

    border-radius: 10px;

    background: #3731e8;
}


.about-academy-content > p {
    margin-bottom: 38px;

    color: #657087;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   STATS
========================================= */

.about-academy-stats {
    display: grid;

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

    gap: 12px;
}


.about-academy-stat {
    min-height: 190px;

    padding: 20px 12px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    background: #fff;

    border: 1px solid #e5e9f1;

    border-radius: 15px;

    box-shadow:
        0 8px 24px rgba(27, 43, 80, .04);
}


.about-academy-stat-icon {
    width: 56px;

    height: 56px;

    margin-bottom: 15px;

    display: flex;

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

    border-radius: 50%;

    background: #eef2ff;

    color: #2f55ec;

    font-size: 25px;
}


.about-academy-stat-icon.mint {
    background: #dffafa;

    color: #16beb8;
}


.about-academy-stat strong {
    display: block;

    margin-bottom: 7px;

    color: #2456eb;

    font-size: 21px;
}


.about-academy-stat span {
    color: #172032;

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================
   RIGHT VISUAL
========================================= */

.about-academy-visual {
    position: relative;

    min-height: 690px;
}


/* MAIN CARD */

.academy-main-card {
    position: absolute;

    left: 100px;

    top: 50px;

    width: 385px;

    height: 550px;

    overflow: hidden;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 17px 40px rgba(28, 48, 90, .12);
}


.academy-photo-placeholder {
    height: calc(100% - 70px);

    display: flex;

    align-items: flex-end;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #d5e4ff,
            #edf5ff
        );

    font-size: 280px;
}


.academy-card-footer {
    height: 70px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:
        linear-gradient(
            90deg,
            #3925ec,
            #3823eb
        );

    color: #fff;

    font-size: 13px;

    font-weight: 500;
}


/* SECOND */

.academy-second-card {
    position: absolute;

    z-index: 5;

    right: 5px;

    bottom: 10px;

    width: 315px;

    height: 430px;

    overflow: hidden;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 18px 40px rgba(28, 48, 90, .14);
}


.academy-photo-placeholder.second {
    height: calc(100% - 65px);

    background:
        linear-gradient(
            145deg,
            #e8f5f4,
            #dceae9
        );

    font-size: 220px;
}


.academy-second-footer {
    height: 65px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #12d7d1;

    color: #08161d;

    font-size: 12px;

    font-weight: 500;
}


/* FEATURE LIST */

.academy-feature-list {
    position: absolute;

    z-index: 8;

    left: 25px;

    top: 115px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.academy-feature-item {
    width: 125px;

    min-height: 105px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-align: center;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 10px 25px rgba(27, 46, 85, .09);
}


.academy-feature-item span {
    color: #2d56ed;

    font-size: 25px;
}


.academy-feature-item strong {
    color: #172035;

    font-size: 10px;

    line-height: 1.35;
}


/* BIG ICON */

.academy-big-icon {
    position: absolute;

    z-index: 9;

    right: 250px;

    top: 205px;

    width: 105px;

    height: 105px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #3228ec,
            #4133ed
        );

    color: #0dd6d0;

    font-size: 48px;

    box-shadow:
        0 12px 30px rgba(50, 40, 230, .17);
}


/* UI DECORATION */

.academy-ui-detail {
    position: absolute;

    right: 40px;

    top: 95px;

    width: 195px;
}


.academy-ui-detail > span {
    width: 140px;

    height: 7px;

    display: block;

    margin-bottom: 20px;

    border-radius: 15px;

    background: #3e32e9;
}


.academy-ui-detail > small {
    width: 50px;

    height: 7px;

    display: block;

    margin-bottom: 18px;

    background: #5c50eb;

    border-radius: 15px;
}


.academy-ui-detail > div {
    min-height: 58px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 30px;

    background: #fff;

    border-radius: 10px;

    box-shadow:
        0 7px 18px rgba(25, 44, 80, .05);
}


.academy-ui-detail i {
    width: 42px;

    height: 8px;

    display: block;

    border-radius: 20px;

    background: #12d6cd;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .about-academy-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-academy-content {
        max-width: none;

        text-align: center;
    }

    .about-academy-line {
        margin-left: auto;
        margin-right: auto;
    }

}


@media(max-width: 700px) {

    .about-academy-section {
        padding: 70px 0;
    }

    .about-academy-container {
        max-width: calc(100% - 30px);
    }

    .about-academy-content h2 {
        font-size: 40px;
    }

    .about-academy-content > p {
        font-size: 14px;
    }

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

    .about-academy-visual {
        min-height: 600px;

        transform: scale(.83);

        transform-origin: top center;
    }

}

/* =========================================
   ABOUT SOCIAL RESPONSIBILITY
========================================= */

.about-social-section {
    padding: 110px 0 120px;

    background:
        radial-gradient(
            circle at 25% 45%,
            rgba(55, 55, 235, .06),
            transparent 32%
        ),
        #ffffff;

    color: #0b1120;
}


.about-social-container {
    width: 1450px;
    max-width: calc(100% - 80px);

    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 100px;
}


/* =========================================
   LEFT VISUAL
========================================= */

.about-social-visual {
    position: relative;

    min-height: 700px;
}


.social-main-circle {
    position: absolute;

    width: 610px;
    height: 610px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(90, 74, 255, .35),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #4934ef,
            #3123df
        );

    box-shadow:
        0 25px 55px rgba(55, 42, 210, .15);
}


.social-main-circle::after {
    content: "";

    position: absolute;

    inset: 90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10) 2px,
            transparent 3px
        );

    background-size: 18px 18px;

    opacity: .35;
}


/* PERSON */

.social-person {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 65px;

    transform: translateX(-50%);

    font-size: 380px;

    filter:
        drop-shadow(
            0 20px 30px rgba(20, 30, 70, .17)
        );
}


/* =========================================
   BUBBLES
========================================= */

.social-bubble {
    position: absolute;

    z-index: 8;

    width: 145px;
    height: 145px;

    padding: 18px;

    display: flex;

    flex-direction: column;

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

    gap: 8px;

    text-align: center;

    border-radius: 50%;

    box-shadow:
        0 12px 30px rgba(24, 40, 80, .10);
}


.social-bubble span {
    font-size: 36px;
}


.social-bubble strong {
    font-size: 11px;

    line-height: 1.35;
}


.bubble-dark {
    left: 35px;
    top: 70px;

    background: #08152f;

    color: #fff;
}


.bubble-cyan {
    background: #13ddd4;

    color: #071925;
}


.bubble-white {
    background: #fff;

    color: #142033;

    border: 1px solid #e1e6ef;
}


.top-right {
    right: 25px;
    top: 75px;
}


.left-mid {
    left: -5px;
    top: 355px;
}


.center-right {
    right: -10px;
    top: 310px;
}


.bottom-left {
    left: 20px;
    bottom: 20px;
}


.bottom-right {
    right: 40px;
    bottom: 35px;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.about-social-content {
    max-width: 600px;
}


.about-social-content h2 {
    margin-bottom: 28px;

    color: #0c1324;

    font-size: 55px;

    line-height: 1.1;

    letter-spacing: -1.8px;
}


.about-social-content h2 strong {
    display: block;

    color: #4a3de8;
}


.about-social-line {
    width: 55px;
    height: 5px;

    margin-bottom: 32px;

    background: #4336e9;

    border-radius: 20px;
}


.about-social-content p {
    margin-bottom: 18px;

    color: #5e697d;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width: 1100px) {

    .about-social-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-social-content {
        max-width: none;

        text-align: center;
    }

    .about-social-line {
        margin-left: auto;
        margin-right: auto;
    }

}


@media(max-width: 700px) {

    .about-social-section {
        padding: 70px 0;
    }

    .about-social-container {
        max-width: calc(100% - 30px);
    }

    .about-social-visual {
        min-height: 580px;

        transform: scale(.8);

        transform-origin: top center;
    }

    .about-social-content h2 {
        font-size: 40px;
    }

    .about-social-content p {
        font-size: 14px;
    }

}
/* TideSoft mobile navigation */
@media (max-width: 1020px) {
    .navbar-container {
        position: relative;
        flex-wrap: wrap;
    }

    .navbar-container .nav-menu.mobile-open {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 12000;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px;
        border-radius: 0 0 16px 16px;
        background: rgba(2, 10, 22, 0.99);
        box-shadow: 0 20px 40px rgba(0,0,0,.3);
    }

    .navbar-container .nav-menu.mobile-open > a,
    .navbar-container .nav-menu.mobile-open .nav-item > a {
        display: flex;
        justify-content: space-between;
        padding: 13px 10px;
    }

    .navbar-container .nav-menu.mobile-open .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0 0 6px 14px;
        box-shadow: none;
    }

    .navbar-container .nav-menu.mobile-open .dropdown.mobile-dropdown-open .dropdown-menu {
        display: block;
    }

    .navbar-container .nav-actions.mobile-open {
        display: flex !important;
        position: absolute;
        top: calc(100% + 300px);
        left: 0;
        right: 0;
        z-index: 12001;
        padding: 0 16px 18px;
        background: rgba(2, 10, 22, 0.99);
        justify-content: center;
        flex-wrap: wrap;
    }
}

.mobile-nav-actions { display: none; }
@media (max-width: 1020px) {
    .navbar-container .nav-actions.mobile-open { display: none !important; }
    .navbar-container .nav-menu.mobile-open .mobile-nav-actions {
        display: grid;
        gap: 8px;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .navbar-container .nav-menu.mobile-open .mobile-nav-actions a {
        display: block;
        padding: 12px 10px;
        border-radius: 10px;
        text-decoration: none;
    }
}

/* =========================================================
   KARIYER SAYFASI
   ========================================================= */
.career-page {
    background: #fff;
    color: #0e1a2b;
}

.career-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.career-intro-section {
    padding: 92px 0 100px;
    background:
        radial-gradient(circle at 86% 18%, rgba(36, 92, 255, .08), transparent 27%),
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.career-intro-grid,
.career-life-grid {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(440px, 1.04fr);
    gap: 74px;
    align-items: center;
}

.career-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #2854f5;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.career-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: #2854f5;
}

.career-intro-content h1,
.career-life-content h2,
.career-culture-heading h2 {
    margin: 0;
    color: #0b1728;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.career-intro-content h1 {
    max-width: 620px;
    font-size: clamp(42px, 4.4vw, 66px);
    margin-bottom: 28px;
}

.career-intro-content h1 span,
.career-life-content h2 strong,
.career-culture-heading h2 strong {
    color: #2854f5;
}

.career-intro-content p,
.career-life-content p {
    margin: 0 0 17px;
    color: #65728a;
    font-size: 16px;
    line-height: 1.9;
}

.career-quote {
    margin-top: 30px;
    padding: 15px 0 15px 18px;
    border-left: 3px solid #2854f5;
    color: #101c2d;
    font-size: 18px;
    font-weight: 800;
}

.career-team-visual {
    position: relative;
    min-height: 440px;
    padding: 22px;
    border-radius: 28px;
    background: linear-gradient(145deg, #edf3ff 0%, #dce7ff 48%, #eef2f8 100%);
    box-shadow: 0 28px 70px rgba(28, 48, 86, .16);
    overflow: hidden;
}

.career-team-visual::before,
.career-team-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(41, 84, 245, .11);
}

.career-team-visual::before { width: 240px; height: 240px; right: -90px; top: -80px; }
.career-team-visual::after { width: 190px; height: 190px; left: -90px; bottom: -80px; }

.career-photo-badge {
    position: absolute;
    z-index: 5;
    top: 18px;
    left: 18px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: #17305e;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(20,41,80,.09);
    backdrop-filter: blur(8px);
}

.career-office-scene {
    position: absolute;
    inset: 66px 32px 30px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(#cfe0ff 0 56%, #dfe8d4 56% 100%);
    border: 1px solid rgba(255,255,255,.85);
}

.career-window {
    position: absolute;
    left: 26px;
    right: 26px;
    top: 24px;
    height: 125px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.career-window span {
    border-radius: 12px;
    background: linear-gradient(180deg, #a9c8ff 0%, #e4f0ff 65%, #b8d08d 66%, #a7c078 100%);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.72);
}

.career-board {
    position: absolute;
    right: 36px;
    top: 168px;
    padding: 13px 16px;
    border-radius: 12px;
    background: #12213a;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(7,25,55,.18);
}
.career-board span { color: #3d6bff; }

.career-people-row {
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 67px;
    height: 145px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 9px;
}

.career-person {
    position: relative;
    display: block;
    width: 46px;
    height: 92px;
    border-radius: 18px 18px 12px 12px;
    background: #20365b;
    box-shadow: 0 10px 22px rgba(10,25,51,.12);
}
.career-person::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    left: 6px;
    top: -27px;
    border-radius: 50%;
    background: #f1c9a5;
    box-shadow: inset 0 9px 0 rgba(49,38,42,.35);
}
.career-person::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: -34px;
    height: 41px;
    border-left: 12px solid #17263f;
    border-right: 12px solid #17263f;
}
.career-person.p2,.career-person.p6 { height: 104px; background:#2854f5; }
.career-person.p3 { height: 84px; background:#ffbf3f; }
.career-person.p4 { height: 110px; background:#0e8f7e; }
.career-person.p5 { height: 95px; background:#6b4de6; }
.career-person.p7 { height: 88px; background:#d85b5b; }

.career-desk {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 28px;
    height: 26px;
    border-radius: 8px;
    background: #8a633f;
    box-shadow: 0 10px 0 #6e4c31;
}

.career-floating-note {
    position: absolute;
    z-index: 6;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    color: #172a49;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(24,47,88,.14);
}
.career-floating-note.note-one { left: 18px; bottom: 28px; }
.career-floating-note.note-two { right: 18px; bottom: 86px; }

.career-life-section {
    padding: 110px 0;
    background: #f8faff;
}

.career-life-grid {
    grid-template-columns: minmax(450px, 1fr) minmax(0, .95fr);
    gap: 92px;
}

.career-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.career-collage-card {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 17px;
    box-shadow: 0 10px 24px rgba(20, 39, 76, .08);
    isolation: isolate;
}
.career-collage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 70% 18%, rgba(255,255,255,.48), transparent 22%),
      linear-gradient(150deg, rgba(16,31,57,.03), rgba(16,31,57,.22));
    z-index: -1;
}
.career-collage-card span { font-size: 38px; transform: translateY(-8px); }
.career-collage-card small {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    padding: 7px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(6px);
    color: #152641;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}
.cc1 { background: #f8dcc5; }
.cc2 { background: #c8dbff; }
.cc3 { background: #f6e7a9; }
.cc4 { background: #d7d0ff; }
.cc5 { background: #cce7d3; }
.cc6 { background: #c8d5e7; }
.cc7 { background: #cce4bc; }
.cc8 { background: #f3c8d6; }
.cc9 { background: #d9e4ff; }

.career-life-content h2 {
    font-size: clamp(35px, 3.25vw, 50px);
    margin-bottom: 24px;
}
.career-life-content h2 strong { display: block; margin-top: 6px; }
.career-life-content h3 {
    margin: 0 0 12px;
    color: #1a2940;
    font-size: 17px;
}
.career-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: #2854f5;
    font-weight: 800;
    text-decoration: none;
}
.career-inline-link span { transition: transform .2s ease; }
.career-inline-link:hover span { transform: translateX(5px); }

.career-culture-section {
    padding: 98px 0 112px;
    background: #fff;
}

.career-culture-heading {
    max-width: 780px;
    margin-bottom: 44px;
}
.career-culture-heading h2 {
    font-size: clamp(34px, 3vw, 48px);
}

.career-culture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.career-culture-card {
    position: relative;
    min-height: 250px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #edf0f6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(24, 47, 88, .08);
}
.career-culture-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #2854f5, #5637ff);
}
.career-culture-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -45px;
    bottom: -45px;
    border-radius: 50%;
    background: rgba(40,84,245,.045);
}
.career-culture-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #eef3ff;
    font-size: 21px;
}
.career-culture-card h3 {
    margin: 0 0 12px;
    color: #111d2f;
    font-size: 20px;
}
.career-culture-card p {
    margin: 0;
    color: #6a768a;
    font-size: 14px;
    line-height: 1.8;
}

@media (max-width: 1024px) {
    .career-intro-grid,
    .career-life-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }
    .career-intro-content { max-width: 760px; }
    .career-team-visual { min-height: 460px; }
    .career-life-content { max-width: 760px; }
    .career-collage { max-width: 680px; }
}

@media (max-width: 760px) {
    .career-container { width: min(100% - 32px, 1180px); }
    .career-intro-section { padding: 58px 0 66px; }
    .career-life-section { padding: 70px 0; }
    .career-culture-section { padding: 68px 0 76px; }
    .career-intro-grid,
    .career-life-grid { gap: 36px; }
    .career-intro-content h1 { font-size: 40px; }
    .career-intro-content p,
    .career-life-content p { font-size: 15px; line-height: 1.78; }
    .career-team-visual { min-height: 360px; padding: 14px; border-radius: 22px; }
    .career-office-scene { inset: 58px 16px 20px; }
    .career-window { left: 16px; right: 16px; height: 88px; }
    .career-board { top: 132px; right: 18px; font-size: 14px; }
    .career-people-row { left: 18px; right: 18px; bottom: 60px; height: 100px; gap: 5px; }
    .career-person { width: 34px; height: 66px; }
    .career-person::before { width: 26px; height: 26px; left: 4px; top: -20px; }
    .career-person::after { left: 4px; right: 4px; bottom: -27px; height: 32px; border-left-width: 9px; border-right-width: 9px; }
    .career-person.p2,.career-person.p6 { height: 76px; }
    .career-person.p3 { height: 61px; }
    .career-person.p4 { height: 79px; }
    .career-person.p5 { height: 69px; }
    .career-person.p7 { height: 64px; }
    .career-floating-note { font-size: 11px; padding: 8px 10px; }
    .career-collage { gap: 8px; }
    .career-collage-card { border-radius: 12px; }
    .career-collage-card span { font-size: 28px; }
    .career-collage-card small { font-size: 8px; left: 6px; right: 6px; bottom: 6px; padding: 5px; }
    .career-life-content h2,
    .career-culture-heading h2 { font-size: 34px; }
    .career-culture-grid { grid-template-columns: 1fr; gap: 16px; }
    .career-culture-card { min-height: 0; padding: 26px 24px; }
}

@media (max-width: 420px) {
    .career-container { width: min(100% - 24px, 1180px); }
    .career-intro-content h1 { font-size: 34px; }
    .career-life-content h2,
    .career-culture-heading h2 { font-size: 30px; }
    .career-team-visual { min-height: 320px; }
    .career-collage { grid-template-columns: repeat(3, 1fr); }
    .career-photo-badge { top: 12px; left: 12px; }
    .career-floating-note.note-two { right: 10px; bottom: 67px; }
}

/* =========================================================
   TIDESOFT HEADER / NAVBAR — PROFESSIONAL REVISION 31.08.2026
   ========================================================= */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999;
    background: #0d1b30;
    border-bottom: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 10px 34px rgba(4, 13, 28, .14);
}

.site-header .navbar,
.navbar {
    height: 82px !important;
    min-height: 82px;
    padding: 0 !important;
    background: linear-gradient(180deg, #14263f 0%, #112138 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.navbar-container {
    width: 1380px !important;
    max-width: calc(100% - 64px) !important;
    height: 100%;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) auto !important;
    column-gap: 34px !important;
    align-items: center;
}

.navbar-container .logo {
    min-width: 0 !important;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    line-height: 1;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffd12f;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffda3e, #ffbd20);
    box-shadow: 0 8px 22px rgba(255, 193, 31, .18), inset 0 1px 0 rgba(255,255,255,.5);
}
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-word { display: inline-flex; align-items: baseline; font-size: 25px; font-weight: 800; letter-spacing: -.8px; }
.logo-white { color: #f8fbff; }
.logo-blue { color: #4a6fff; }

.navbar-container .nav-menu {
    justify-self: center !important;
    display: flex;
    align-items: center;
    gap: 6px !important;
    margin: 0 !important;
    min-width: 0;
}

.nav-menu > a,
.nav-item > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    color: rgba(255,255,255,.86) !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: -.15px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav-menu > a:hover,
.nav-item > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.065);
}
.nav-menu > a::after,
.nav-item > a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: #5374ff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.nav-menu > a:hover::after,
.nav-item > a:hover::after { transform: scaleX(1); }

.nav-caret {
    font-size: 14px;
    line-height: 1;
    color: rgba(255,255,255,.62);
    transform: translateY(-1px);
    transition: transform .2s ease;
}
.dropdown:hover .nav-caret { transform: translateY(-1px) rotate(180deg); }

.dropdown-menu {
    top: calc(100% + 10px) !important;
    left: 0 !important;
    width: 290px !important;
    padding: 9px !important;
    border-radius: 15px !important;
    background: rgba(10, 24, 43, .98) !important;
    border: 1px solid rgba(151, 173, 204, .15) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.30) !important;
    transform: translateY(7px) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.dropdown:hover .dropdown-menu { transform: translateY(0) !important; }
.dropdown-menu-compact { width: 250px !important; }
.dropdown-menu a {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px !important;
    border-radius: 10px !important;
    color: #eef4fb !important;
    transition: background .18s ease, transform .18s ease;
}
.dropdown-menu a:hover {
    background: rgba(82, 113, 255, .11) !important;
    transform: translateX(2px);
}
.dropdown-menu a strong { font-size: 13px; font-weight: 650; }
.dropdown-menu a small { color: #8fa1b9; font-size: 11px; line-height: 1.4; font-weight: 400; }

.navbar-container .nav-actions {
    justify-self: end !important;
    display: flex;
    align-items: center;
    gap: 10px !important;
    margin: 0 !important;
    transform: none !important;
}

.navbar-container .phone,
.navbar-container .login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    color: #cbd6e5;
    font-size: 12.5px;
    font-weight: 600;
    transition: color .2s ease, background .2s ease;
}
.navbar-container .phone:hover,
.navbar-container .login:hover { color: #fff; background: rgba(255,255,255,.055); }

.navbar-container .start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px !important;
    background: linear-gradient(135deg, #3162f5 0%, #4d47f5 100%) !important;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 9px 22px rgba(48, 77, 236, .23);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.navbar-container .start-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(48, 77, 236, .32) !important;
    filter: brightness(1.06);
}

.mobile-menu-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px;
    background: rgba(255,255,255,.055) !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.mobile-menu-btn span { width: 18px; height: 2px; border-radius: 999px; background: #fff; display: block; }

/* Kampanya barını koru; yalnızca navbar ile aynı modern ritme getir. */
.campaign-bar {
    min-height: 52px;
    height: 52px;
    background: linear-gradient(90deg, #123064 0%, #183d78 52%, #123064 100%) !important;
}
.campaign-inner {
    width: 1380px !important;
    max-width: calc(100% - 64px) !important;
    font-size: 12.5px;
}
.campaign-text { gap: 14px !important; }
.campaign-gift { color: #ffd32f; font-size: 15px; }
.campaign-text > span:not(.campaign-gift) { font-size: 13px; font-weight: 750; }
.campaign-text strong { color: #e9eff8; font-weight: 500; }
.campaign-right { gap: 18px !important; }
.countdown { gap: 7px !important; }
.countdown span { padding: 7px 11px !important; border-radius: 8px !important; font-size: 10.5px !important; background: rgba(255,255,255,.025); }
.campaign-link { font-size: 11.5px !important; font-weight: 650; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 2px; }

@media (max-width: 1280px) {
    .navbar-container,
    .campaign-inner { max-width: calc(100% - 40px) !important; }
    .navbar-container { grid-template-columns: 190px minmax(0,1fr) auto !important; column-gap: 18px !important; }
    .brand-word { font-size: 23px; }
    .brand-mark { width: 39px; height: 39px; flex-basis: 39px; border-radius: 12px; }
    .nav-menu > a, .nav-item > a { padding-left: 9px; padding-right: 9px; font-size: 12px !important; }
    .navbar-container .phone { display: none !important; }
}

@media (max-width: 1040px) {
    .site-header .navbar, .navbar { height: 72px !important; min-height: 72px; }
    .navbar-container { display: flex !important; justify-content: space-between; max-width: calc(100% - 32px) !important; }
    .navbar-container .nav-menu,
    .navbar-container .nav-actions { display: none; }
    .navbar-container .mobile-menu-btn { display: flex !important; margin-left: auto; }
    .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
    .brand-mark svg { width: 23px; height: 23px; }
    .brand-word { font-size: 22px; }

    .navbar-container .nav-menu.mobile-open {
        display: flex !important;
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        z-index: 12000;
        flex-direction: column;
        align-items: stretch;
        gap: 4px !important;
        padding: 12px !important;
        border: 1px solid rgba(151,173,204,.14);
        border-radius: 16px !important;
        background: rgba(10,24,43,.985) !important;
        box-shadow: 0 22px 50px rgba(0,0,0,.28) !important;
    }
    .navbar-container .nav-menu.mobile-open > a,
    .navbar-container .nav-menu.mobile-open .nav-item > a {
        min-height: 46px;
        padding: 0 12px !important;
        border-radius: 10px;
        justify-content: space-between;
        font-size: 13px !important;
    }
    .navbar-container .nav-menu.mobile-open > a::after,
    .navbar-container .nav-menu.mobile-open .nav-item > a::after { display: none; }
    .navbar-container .nav-menu.mobile-open .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin: 4px 0 6px !important;
        padding: 5px !important;
        border-radius: 11px !important;
        box-shadow: none !important;
        background: rgba(255,255,255,.035) !important;
    }
    .navbar-container .nav-menu.mobile-open .mobile-nav-actions {
        display: grid;
        gap: 6px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,.1);
    }
    .navbar-container .nav-menu.mobile-open .mobile-nav-actions a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border-radius: 10px;
        color: #e7eef8;
        background: rgba(255,255,255,.045);
        font-size: 13px;
        font-weight: 650;
    }
    .navbar-container .nav-menu.mobile-open .mobile-nav-actions .mobile-primary-action {
        background: linear-gradient(135deg, #3162f5, #4d47f5);
        color: #fff;
    }
}

@media (max-width: 760px) {
    .campaign-bar { height: auto; min-height: 44px; padding: 8px 0; }
    .campaign-inner { max-width: calc(100% - 28px) !important; justify-content: center; }
    .campaign-text { gap: 7px !important; text-align: center; line-height: 1.35; }
    .campaign-text strong { display: none; }
    .campaign-right { display: none !important; }
    .navbar-container { max-width: calc(100% - 24px) !important; }
    .brand-word { font-size: 21px; }
}

/* NAVBAR MENU CONTRAST TUNING - 31.08.2026 */
.navbar-container .nav-menu > a,
.navbar-container .nav-item > a {
    color: rgba(255, 255, 255, .86) !important;
}
.navbar-container .nav-menu > a:hover,
.navbar-container .nav-item > a:hover,
.navbar-container .nav-menu > a:focus-visible,
.navbar-container .nav-item > a:focus-visible {
    color: #ffffff !important;
}
.navbar-container .nav-caret {
    color: rgba(255, 255, 255, .62) !important;
}
.navbar-container .nav-menu > a:hover .nav-caret,
.navbar-container .nav-item > a:hover .nav-caret {
    color: rgba(255, 255, 255, .92) !important;
}
.navbar-container .phone,
.navbar-container .login {
    color: rgba(255, 255, 255, .72) !important;
}
.navbar-container .phone:hover,
.navbar-container .login:hover {
    color: #ffffff !important;
}

/* DROPDOWN TRIGGER POLISH - 31.08.2026 */
.navbar-container .nav-item.dropdown > .dropdown-toggle {
    gap: 9px !important;
    padding-right: 8px !important;
    color: rgba(255,255,255,.9) !important;
}
.navbar-container .nav-item.dropdown > .dropdown-toggle::after {
    display: none !important;
}
.navbar-container .nav-item.dropdown > .dropdown-toggle > span:first-child {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.navbar-container .nav-chevron {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.055);
    transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease;
}
.navbar-container .nav-chevron svg {
    width: 15px;
    height: 15px;
    display: block;
}
.navbar-container .nav-item.dropdown:hover > .dropdown-toggle,
.navbar-container .nav-item.dropdown:focus-within > .dropdown-toggle {
    background: rgba(255,255,255,.06);
    color: #fff !important;
}
.navbar-container .nav-item.dropdown:hover .nav-chevron,
.navbar-container .nav-item.dropdown:focus-within .nav-chevron {
    transform: rotate(180deg);
    color: #fff;
    background: rgba(83,116,255,.22);
    border-color: rgba(117,143,255,.34);
}

@media (max-width: 1040px) {
    .navbar-container .nav-menu.mobile-open .nav-item.dropdown > .dropdown-toggle {
        padding-right: 9px !important;
    }
    .navbar-container .nav-menu.mobile-open .nav-chevron {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 8px;
    }
    .navbar-container .nav-menu.mobile-open .dropdown.mobile-dropdown-open .nav-chevron {
        transform: rotate(180deg);
        color: #fff;
        background: rgba(83,116,255,.22);
        border-color: rgba(117,143,255,.34);
    }
}


/* DROPDOWN TRIGGER + MENU POLISH - 31.08.2026 */
.navbar-container .nav-item.dropdown > .dropdown-toggle {
    gap: 7px !important;
    padding-left: 13px !important;
    padding-right: 11px !important;
    border: 1px solid transparent;
    border-radius: 10px !important;
    background: transparent;
    line-height: 1;
}
.navbar-container .nav-item.dropdown > .dropdown-toggle:hover,
.navbar-container .nav-item.dropdown:hover > .dropdown-toggle,
.navbar-container .nav-item.dropdown > .dropdown-toggle:focus-visible {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.065);
    color: #fff !important;
}
.navbar-container .nav-item.dropdown > .dropdown-toggle::after {
    display: none !important;
}
.navbar-container .nav-caret {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    border-radius: 6px;
    color: rgba(255,255,255,.56) !important;
    background: rgba(255,255,255,.045);
    transition: transform .2s ease, color .2s ease, background .2s ease;
}
.navbar-container .nav-caret svg {
    display: block;
    width: 12px;
    height: 12px;
}
.navbar-container .dropdown:hover .nav-caret,
.navbar-container .dropdown.mobile-dropdown-open .nav-caret {
    transform: rotate(180deg) !important;
    color: #fff !important;
    background: rgba(83,116,255,.22);
}

.navbar-container .dropdown-menu {
    top: calc(100% + 12px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(160,180,210,.14) !important;
    background: #0c1c31 !important;
    box-shadow: 0 20px 55px rgba(1,8,20,.34), 0 2px 8px rgba(1,8,20,.16) !important;
}
.navbar-container .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 24px;
    width: 10px;
    height: 10px;
    background: #0c1c31;
    border-left: 1px solid rgba(160,180,210,.14);
    border-top: 1px solid rgba(160,180,210,.14);
    transform: rotate(45deg);
}
.navbar-container .dropdown-menu a {
    position: relative;
    min-height: 58px;
    justify-content: center;
    padding: 10px 12px 10px 14px !important;
    border-radius: 9px !important;
    border: 1px solid transparent;
    transform: none !important;
}
.navbar-container .dropdown-menu a:hover {
    background: rgba(60,95,235,.10) !important;
    border-color: rgba(92,124,255,.12);
}
.navbar-container .dropdown-menu a strong {
    color: #f7f9fc;
    font-size: 12.8px;
    font-weight: 680;
    letter-spacing: -.1px;
}
.navbar-container .dropdown-menu a small {
    color: #8699b3;
    font-size: 10.8px;
    line-height: 1.45;
}

@media (max-width: 1040px) {
    .navbar-container .nav-item.dropdown > .dropdown-toggle {
        padding-left: 12px !important;
        padding-right: 10px !important;
    }
    .navbar-container .nav-menu.mobile-open .dropdown-menu::before { display: none; }
    .navbar-container .nav-menu.mobile-open .nav-caret {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}


/* Dynamic campaign countdown */
.countdown span{display:inline-flex;align-items:baseline;gap:4px}.countdown span b{font:inherit;font-weight:800;color:inherit}.countdown-seconds{min-width:55px}@media(max-width:860px){.countdown-seconds{display:none!important}}

/* Callback request modal */
.secondary-btn.callback-open{font:inherit;cursor:pointer;background:transparent}
.secondary-btn.callback-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/*
 * Modal is deliberately kept laid out while closed. Using display:none here
 * would force the browser to calculate the whole form layout on the first
 * click. visibility + pointer-events makes opening a single, synchronous
 * class change with no animation, blur or expensive first-click reflow.
 */
.callback-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:none;
    animation:none;
}
.callback-modal.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}
.callback-backdrop{
    position:absolute;
    inset:0;
    background:rgba(4,15,32,.72);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.callback-dialog{
    position:relative;
    z-index:1;
    width:min(680px,100%);
    max-height:min(760px,calc(100vh - 48px));
    overflow:auto;
    background:#fff;
    border:1px solid rgba(218,226,239,.9);
    border-radius:26px;
    box-shadow:0 32px 90px rgba(0,15,40,.28);
    padding:34px;
    color:#101828;
    transform:none;
    transition:none;
    animation:none;
    contain:layout paint;
}
.callback-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:12px;border:1px solid #e6ebf3;background:#f8fafc;color:#64748b;display:grid;place-items:center;cursor:pointer;transition:none}
.callback-close:hover{background:#eef3ff;color:#1f5cff;border-color:#dbe5ff}
.callback-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.callback-dialog-head{padding-right:54px;margin-bottom:26px}
.callback-kicker{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#edf3ff;color:#2458e6;font-size:11px;font-weight:800;letter-spacing:.09em}
.callback-dialog-head h2{font-size:34px;line-height:1.08;letter-spacing:-.035em;margin:12px 0 9px;color:#0d1b32}
.callback-dialog-head p{margin:0;color:#69758b;line-height:1.65;font-size:15px;max-width:570px}
.callback-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.callback-field{display:flex;flex-direction:column;gap:8px}
.callback-field--full{grid-column:1/-1}
.callback-field>span{font-size:12px;font-weight:750;color:#344054}
.callback-field em{font-style:normal;color:#98a2b3;font-weight:500}
.callback-input-wrap{height:52px;border:1px solid #dce3ee;border-radius:13px;background:#fff;display:flex;align-items:center;padding:0 14px;gap:10px;transition:none;box-shadow:0 1px 2px rgba(16,24,40,.02)}
.callback-input-wrap:focus-within{border-color:#5e84f8;box-shadow:0 0 0 4px rgba(37,99,235,.09)}
.callback-input-wrap svg{width:18px;height:18px;fill:none;stroke:#91a0b8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.callback-input-wrap input,.callback-input-wrap select{border:0;outline:0;background:transparent;width:100%;height:100%;font:inherit;color:#172033;font-size:14px;min-width:0}
.callback-input-wrap input::placeholder{color:#a4afc1}
.callback-select-wrap select{appearance:none;cursor:pointer}
.callback-field textarea{width:100%;resize:vertical;min-height:88px;border:1px solid #dce3ee;border-radius:13px;padding:13px 14px;font:inherit;font-size:14px;color:#172033;outline:0;transition:none;box-sizing:border-box}
.callback-field textarea:focus{border-color:#5e84f8;box-shadow:0 0 0 4px rgba(37,99,235,.09)}
.callback-field textarea::placeholder{color:#a4afc1}
.callback-form-status{display:none;margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:650}
.callback-form-status.is-error{display:block;background:#fff1f2;color:#b42318;border:1px solid #ffd5d9}
.callback-form-status.is-success{display:block;background:#ecfdf3;color:#027a48;border:1px solid #b7ebc9}
.callback-form-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding-top:20px;border-top:1px solid #edf0f5}
.callback-form-foot p{margin:0;max-width:310px;color:#8a96a8;font-size:11px;line-height:1.55}
.callback-submit{height:48px;border:0;border-radius:13px;background:linear-gradient(135deg,#2765ef,#4842f2);color:#fff;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px rgba(40,91,226,.24);transition:none;white-space:nowrap}
.callback-submit:hover{transform:none;box-shadow:0 16px 28px rgba(40,91,226,.3)}
.callback-submit:disabled{opacity:.65;cursor:wait;transform:none}
.callback-submit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.callback-modal-open{overflow:hidden}

/* Callback CTA visibility hardening */
.hero-buttons .secondary-btn.callback-open{color:#fff !important;border-color:rgba(255,255,255,.72) !important;background:transparent !important;-webkit-text-fill-color:#fff}
.hero-buttons .secondary-btn.callback-open svg{color:#fff !important;stroke:#fff !important}
.hero-buttons .secondary-btn.callback-open:hover{background:#fff !important;color:#07111c !important;-webkit-text-fill-color:#07111c}
.hero-buttons .secondary-btn.callback-open:hover svg{color:#07111c !important;stroke:#07111c !important}

@media(max-width:700px){
    .callback-modal{padding:12px;align-items:flex-end}
    .callback-dialog{width:100%;max-height:92vh;border-radius:24px 24px 16px 16px;padding:26px 18px 20px}
    .callback-dialog-head{padding-right:46px;margin-bottom:21px}
    .callback-dialog-head h2{font-size:28px}
    .callback-grid{grid-template-columns:1fr}
    .callback-field--full{grid-column:auto}
    .callback-form-foot{flex-direction:column;align-items:stretch}
    .callback-form-foot p{text-align:center;max-width:none}
    .callback-submit{width:100%}
}


/* ===== TideSoft Floating WhatsApp ===== */
.tidesoft-whatsapp-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563ff 0%, #4938ff 100%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 12px 32px rgba(37,99,255,.34), 0 4px 14px rgba(0,0,0,.18);
    z-index: 9998;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tidesoft-whatsapp-float svg {
    width: 27px;
    height: 27px;
    fill: #fff;
}
.tidesoft-whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 17px 38px rgba(37,99,255,.42), 0 5px 16px rgba(0,0,0,.2);
}
.tidesoft-whatsapp-label {
    position: absolute;
    right: 70px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: #0b1729;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}
.tidesoft-whatsapp-float:hover .tidesoft-whatsapp-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
@media (max-width: 768px) {
    .tidesoft-whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }
    .tidesoft-whatsapp-float svg { width: 24px; height: 24px; }
    .tidesoft-whatsapp-label { display: none; }
}


/* Revize 10 - footer marka guncellemesi */
.footer-logo.footer-logo-new {
    gap: 10px;
    margin-bottom: 24px;
    text-decoration: none;
}
.footer-logo.footer-logo-new .brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}
.footer-logo.footer-logo-new .brand-word {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.8px;
}
.footer-logo.footer-logo-new .footer-logo-tide { color: #071426; }
.footer-logo.footer-logo-new .logo-blue { color: #4a6fff; }


/* Revize 11 - footer logosu navbar markasiyla ayni kimlige sabitlendi */
.site-footer .footer-logo.footer-logo-new {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: inherit !important;
    text-decoration: none !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #ffda3e, #ffbd20) !important;
    box-shadow: 0 8px 22px rgba(255,193,31,.18), inset 0 1px 0 rgba(255,255,255,.5) !important;
    color: #071426 !important;
    font-size: 0 !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-mark svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-mark svg path {
    fill: #071426 !important;
    stroke: #071426 !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-word {
    display: inline-flex !important;
    align-items: baseline !important;
    font-size: 27px !important;
    font-weight: 800 !important;
    letter-spacing: -.8px !important;
    line-height: 1 !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-tide {
    color: #071426 !important;
    font-size: inherit !important;
}
.site-footer .footer-logo.footer-logo-new .footer-brand-soft {
    color: #4a6fff !important;
    font-size: inherit !important;
}


/* Revize 12 - footer logosu navbar ile birebir */
.site-footer .footer-navbar-logo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    margin-bottom: 24px !important;
    border-radius: 8px !important;
    background: #10243d !important;
}
.site-footer .footer-navbar-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    min-width: 0 !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.site-footer .footer-navbar-logo .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #ffda3e, #ffbd20) !important;
    box-shadow: 0 8px 22px rgba(255,193,31,.18), inset 0 1px 0 rgba(255,255,255,.5) !important;
    color: #ffd12f !important;
}
.site-footer .footer-navbar-logo .brand-mark svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}
.site-footer .footer-navbar-logo .brand-mark svg path {
    fill: currentColor !important;
    stroke: #071426 !important;
}
.site-footer .footer-navbar-logo .brand-word {
    display: inline-flex !important;
    align-items: baseline !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -.8px !important;
    line-height: 1 !important;
}
.site-footer .footer-navbar-logo .logo-white { color: #f8fbff !important; }
.site-footer .footer-navbar-logo .logo-blue { color: #4a6fff !important; }


/* Revize 13 - footer marka logosu, navbar gorunumu */
.site-footer .footer-navbrand-v13 {
    display: inline-block !important;
    margin-bottom: 24px !important;
    background: #10243d !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
}
.site-footer .footer-navbrand-v13 > a {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    text-decoration: none !important; line-height: 1 !important;
}
.site-footer .footer-navbrand-mark {
    width: 42px !important; height: 42px !important; flex: 0 0 42px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(145deg,#ffda3e,#ffbd20) !important; border-radius: 12px !important;
    color: #071426 !important;
}
.site-footer .footer-navbrand-mark svg { width: 25px !important; height: 25px !important; display:block !important; }
.site-footer .footer-navbrand-mark svg path { fill: #ffd12f !important; stroke:#071426 !important; stroke-width:1.55 !important; stroke-linejoin:round !important; }
.site-footer .footer-navbrand-text { display:inline-flex !important; align-items:baseline !important; font-size:25px !important; font-weight:800 !important; letter-spacing:-.8px !important; font-family:inherit !important; }
.site-footer .footer-navbrand-tide { color:#ffffff !important; opacity:1 !important; visibility:visible !important; display:inline !important; }
.site-footer .footer-navbrand-soft { color:#4a6fff !important; opacity:1 !important; visibility:visible !important; display:inline !important; }

/* Revize 14 - footer logo kesin sabitleme */
.site-footer .footer-brand-logo-fixed,
.site-footer .footer-brand-logo-fixed * { box-sizing: border-box; }
.site-footer .footer-brand-logo-fixed svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    display: block !important;
    position: static !important;
    transform: none !important;
}
.site-footer .footer-brand-logo-fixed svg path {
    fill: currentColor !important;
    stroke: #071426 !important;
}

/* === TideSoft responsive hardening — 2026-09 === */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
img,picture,video,canvas,svg,iframe{max-width:100%}
img,picture,video,canvas{height:auto}
iframe{width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%;font:inherit}
textarea{resize:vertical}
table{max-width:100%}

@media(max-width:768px){
  body{min-width:0!important}
  main,section,article,aside,header,footer,nav,form{min-width:0}
  h1{font-size:clamp(2rem,10vw,3.25rem)!important;line-height:1.05!important;overflow-wrap:break-word}
  h2{font-size:clamp(1.65rem,7.5vw,2.5rem)!important;line-height:1.12!important;overflow-wrap:break-word}
  h3{overflow-wrap:break-word}
  p,li,a,span,strong,small{overflow-wrap:break-word}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;min-height:44px;font-size:16px!important}
  button,.btn,.btnx,[class*="button"],[class*="-btn"]{min-height:44px}
  .container,[class$="-container"],[class*=" container"],[class*="-wrap"],[class*="-inner"]{max-width:100%}
  [style*="grid-template-columns"]{min-width:0}
  .table-responsive,.table-wrap,[class*="table-wrap"],[class*="table-container"]{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
  h1{font-size:clamp(1.85rem,9vw,2.65rem)!important}
  h2{font-size:clamp(1.5rem,7vw,2.1rem)!important}
  button,.btn,.btnx,[class*="button"],[class*="-btn"]{max-width:100%}
}

/* =========================================================
   MOBILE HEADER HOTFIX — 01.09.2026
   Kampanya ve navbar mobilde kesilmeden, tam genişlikte görünür.
   ========================================================= */
@media (max-width: 760px) {
    .campaign-bar {
        width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        padding: 8px 0 !important;
        overflow: visible !important;
    }

    .campaign-inner {
        width: 100% !important;
        max-width: none !important;
        min-height: 36px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .campaign-text {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 6px !important;
        row-gap: 2px !important;
        text-align: center !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    .campaign-gift {
        flex: 0 0 auto !important;
        font-size: 14px !important;
    }

    .campaign-text > span:not(.campaign-gift) {
        flex: 0 1 auto !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .campaign-text strong {
        display: block !important;
        flex: 1 0 100% !important;
        max-width: 100% !important;
        margin-top: 1px !important;
        overflow-wrap: anywhere !important;
        color: rgba(233,239,248,.9) !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    .campaign-right {
        display: none !important;
    }

    .site-header,
    .site-header .navbar,
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .site-header .navbar,
    .navbar {
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .navbar-container {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .navbar-container .logo {
        min-width: 0 !important;
        max-width: calc(100% - 58px) !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 11px !important;
    }

    .brand-mark svg {
        width: 22px !important;
        height: 22px !important;
    }

    .brand-word {
        min-width: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .navbar-container .mobile-menu-btn {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex: 0 0 42px !important;
        margin: 0 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }

    .navbar-container .nav-menu.mobile-open {
        top: calc(100% + 6px) !important;
        left: 10px !important;
        right: 10px !important;
        max-height: calc(100dvh - 136px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

@media (max-width: 390px) {
    .campaign-inner { padding-left: 10px !important; padding-right: 10px !important; }
    .campaign-text strong { font-size: 10px !important; }
    .navbar-container { padding-left: 10px !important; padding-right: 10px !important; }
    .brand-word { font-size: 19px !important; }
}

/* =========================================================
   MOBILE HEADER FINAL FIX — 01.09.2026 v3
   Tam genişlik mobil menü + kampanya metni kesilme düzeltmesi.
   ========================================================= */
@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  body .campaign-bar {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 62px !important;
    padding: 8px 0 !important;
    overflow: visible !important;
  }
  body .campaign-bar .campaign-inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }
  body .campaign-bar .campaign-text {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 6px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
  }
  body .campaign-bar .campaign-gift {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  body .campaign-bar .campaign-text > span:not(.campaign-gift) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body .campaign-bar .campaign-text strong {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
  }
  body .campaign-bar .campaign-right { display: none !important; }

  body .site-header,
  body .site-header .navbar,
  body .navbar {
    width: 100% !important;
    max-width: 100% !important;
  }
  body .site-header .navbar,
  body .navbar {
    box-sizing: border-box !important;
    height: 68px !important;
    min-height: 68px !important;
    overflow: visible !important;
  }
  body .navbar .navbar-container {
    box-sizing: border-box !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  body .navbar .navbar-container .logo {
    height: 44px !important;
    max-width: calc(100% - 62px) !important;
  }
  body .navbar .navbar-container .mobile-menu-btn {
    box-sizing: border-box !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* Parent/container ölçüsünden bağımsız olarak ekranı doldurur. */
  body .navbar .navbar-container .nav-menu.mobile-open {
    box-sizing: border-box !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    max-height: calc(100dvh - 154px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    z-index: 12000 !important;
  }
  body .navbar .navbar-container .nav-menu.mobile-open > a,
  body .navbar .navbar-container .nav-menu.mobile-open .nav-item,
  body .navbar .navbar-container .nav-menu.mobile-open .nav-item > a,
  body .navbar .navbar-container .nav-menu.mobile-open .mobile-nav-actions,
  body .navbar .navbar-container .nav-menu.mobile-open .mobile-nav-actions a {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body .navbar .navbar-container .nav-menu.mobile-open > a,
  body .navbar .navbar-container .nav-menu.mobile-open .nav-item > a {
    min-height: 46px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 390px) {
  body .campaign-bar { min-height: 66px !important; }
  body .campaign-bar .campaign-inner { padding-left: 8px !important; padding-right: 8px !important; }
  body .campaign-bar .campaign-text strong { font-size: 9.5px !important; }
  body .navbar .navbar-container .nav-menu.mobile-open { width: calc(100vw - 16px) !important; }
}

/* =========================================================
   MOBILE FINAL CORRECTIONS — 01.09.2026 v4
   1) Kampanya metni başlangıç kesilmesi
   2) Mobil submenu accordion kapanması
   3) Neden TideSoft + Referanslar mobil düzeni
   ========================================================= */
@media (max-width: 760px) {
  /* Campaign: title and description are two explicit full-width rows. */
  body .campaign-bar {
    min-height: 0 !important;
    padding: 7px 0 8px !important;
    overflow: visible !important;
  }
  body .campaign-bar .campaign-inner {
    min-height: 0 !important;
    padding: 0 14px !important;
    overflow: visible !important;
  }
  body .campaign-bar .campaign-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    white-space: normal !important;
  }
  body .campaign-bar .campaign-title-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  body .campaign-bar .campaign-gift,
  body .campaign-bar .campaign-title {
    display: inline-block !important;
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
  }
  body .campaign-bar .campaign-title {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }
  body .campaign-bar .campaign-description {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }

  /* Dropdowns: closed state must win over desktop hover/focus rules. */
  body .navbar .nav-menu.mobile-open .dropdown .dropdown-menu {
    display: none !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  body .navbar .nav-menu.mobile-open .dropdown.mobile-dropdown-open .dropdown-menu {
    display: block !important;
    max-height: 500px !important;
    margin: 4px 0 7px !important;
    padding: 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Neden TideSoft: compact, edge-safe mobile layout. */
  body .why-hero {
    padding: 34px 0 44px !important;
  }
  body .why-hero-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    gap: 34px !important;
  }
  body .why-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  body .why-badge {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  body .why-hero-content h1 {
    max-width: 560px !important;
    margin: 0 auto 18px !important;
    font-size: clamp(34px, 9.3vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1.5px !important;
  }
  body .why-description {
    max-width: 560px !important;
    margin: 0 auto 24px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  body .why-benefits {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }
  body .why-benefit {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 12px !important;
  }
  body .why-start-form {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto 12px !important;
    gap: 10px !important;
  }
  body .why-start-form input,
  body .why-start-form button {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
  }
  body .why-form-note {
    display: block !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
  body .why-hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body .why-visual-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .why-visual-card,
  body .why-visual-card.card-large {
    min-width: 0 !important;
    min-height: 210px !important;
    height: auto !important;
    border-radius: 14px !important;
  }
  body .why-stats {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* References hero: remove desktop-sized empty space, make cards useful on mobile. */
  body .references-hero {
    padding: 34px 0 48px !important;
  }
  body .references-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    gap: 34px !important;
  }
  body .references-content {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  body .reference-ratings {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 24px !important;
    padding: 10px !important;
    gap: 6px !important;
  }
  body .rating-item {
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 10px !important;
  }
  body .references-content h1 {
    max-width: 560px !important;
    margin: 0 auto 18px !important;
    font-size: clamp(34px, 9.2vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1.4px !important;
  }
  body .references-content p {
    max-width: 540px !important;
    margin: 0 auto 24px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  body .references-start-btn {
    width: 100% !important;
    max-width: 380px !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
  }
  body .references-showcase {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  body .reference-showcase-card,
  body .reference-showcase-card:nth-child(3),
  body .reference-showcase-card:nth-child(4) {
    min-width: 0 !important;
    min-height: 190px !important;
    height: 190px !important;
    border-radius: 13px !important;
  }
  body .reference-brand-name {
    left: 15px !important;
    top: 16px !important;
    font-size: 17px !important;
    letter-spacing: 1.4px !important;
  }
  body .reference-person {
    right: 10px !important;
    bottom: 8px !important;
    font-size: 88px !important;
  }
  body .reference-product {
    right: 12px !important;
    bottom: 18px !important;
    font-size: 66px !important;
  }
  body .reference-read-more {
    left: 15px !important;
    bottom: 13px !important;
    font-size: 10px !important;
  }
  body .references-stats {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin: 34px auto 0 !important;
    padding: 16px !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }
  body .references-stat-intro,
  body .references-stat-item {
    min-height: 74px !important;
    padding: 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #edf0f5 !important;
  }
  body .references-stat-item:last-child {
    border-bottom: 0 !important;
  }
  body .references-stat-item strong {
    margin-bottom: 2px !important;
    font-size: 26px !important;
  }

  body .sector-reference-section {
    padding: 58px 0 64px !important;
  }
  body .sector-reference-head {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
    padding: 0 16px !important;
  }
  body .sector-reference-badge {
    max-width: 100% !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  body .sector-reference-head h2 {
    font-size: clamp(30px, 8vw, 40px) !important;
    letter-spacing: -1px !important;
  }
  body .sector-reference-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body .sector-reference-card {
    min-width: 0 !important;
    min-height: 210px !important;
    padding: 18px 12px !important;
  }
  body .sector-reference-cta {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 430px) {
  body .campaign-bar .campaign-inner { padding-left: 10px !important; padding-right: 10px !important; }
  body .campaign-bar .campaign-title { font-size: 12px !important; }
  body .campaign-bar .campaign-description { font-size: 9.5px !important; }

  body .why-hero-container,
  body .references-container { padding-left: 12px !important; padding-right: 12px !important; }
  body .why-visual-grid { grid-template-columns: 1fr !important; }
  body .why-visual-card,
  body .why-visual-card.card-large { min-height: 230px !important; }

  body .references-showcase { grid-template-columns: 1fr !important; }
  body .reference-showcase-card,
  body .reference-showcase-card:nth-child(3),
  body .reference-showcase-card:nth-child(4) {
    height: 176px !important;
    min-height: 176px !important;
  }
  body .reference-person { font-size: 82px !important; }
  body .reference-product { font-size: 62px !important; }
  body .sector-reference-grid { grid-template-columns: 1fr !important; padding: 0 12px !important; }
  body .sector-reference-card { min-height: 190px !important; }
}

/* =========================================================
   MOBILE CAMPAIGN COUNTDOWN RESTORE — 01.09.2026 v5
   Kampanya bandında mobilde gizlenen sayaç ve bağlantıyı geri getirir.
   ========================================================= */
@media (max-width: 760px) {
  body .campaign-bar {
    padding: 7px 0 9px !important;
  }

  body .campaign-bar .campaign-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  body .campaign-bar .campaign-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body .campaign-bar .countdown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body .campaign-bar .countdown span,
  body .campaign-bar .countdown .countdown-seconds {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .countdown span b {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  body .campaign-bar .campaign-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  body .campaign-bar .campaign-inner { padding-left: 7px !important; padding-right: 7px !important; }
  body .campaign-bar .countdown { gap: 3px !important; }
  body .campaign-bar .countdown span,
  body .campaign-bar .countdown .countdown-seconds {
    padding: 4px 5px !important;
    font-size: 7.8px !important;
  }
  body .campaign-bar .countdown span b { font-size: 9.2px !important; }
}


/* =========================================================
   MOBILE CAMPAIGN — reference layout v6
   Tek satır: solda kampanya metni, sağda Gün/Saat/Dakika.
   ========================================================= */
.campaign-mobile-copy { display: none; }
.countdown small { font: inherit; }

@media (max-width: 760px) {
  body .campaign-bar {
    width: 100% !important;
    min-height: 96px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(100deg, #3f82f5 0%, #19335d 43%, #03060c 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body .campaign-bar .campaign-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 14px 14px 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.62fr) minmax(132px, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
  }

  body .campaign-bar .campaign-text {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    color: #fff !important;
  }

  body .campaign-bar .campaign-title-row,
  body .campaign-bar .campaign-description {
    display: none !important;
  }

  body .campaign-bar .campaign-mobile-copy {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(12px, 3.55vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: -.15px !important;
    text-wrap: balance;
  }

  body .campaign-bar .campaign-mobile-copy strong {
    color: #fff !important;
    font: inherit !important;
    font-weight: 500 !important;
  }

  body .campaign-bar .campaign-right {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  body .campaign-bar .countdown {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
  }

  body .campaign-bar .countdown span {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  body .campaign-bar .countdown span b {
    display: block !important;
    color: #fff !important;
    font-size: clamp(17px, 5vw, 25px) !important;
    font-weight: 700 !important;
    line-height: .95 !important;
    letter-spacing: 0 !important;
  }

  body .campaign-bar .countdown span small {
    display: block !important;
    color: rgba(255,255,255,.96) !important;
    font-size: clamp(8px, 2.45vw, 11px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .countdown .countdown-seconds,
  body .campaign-bar .campaign-link {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body .campaign-bar { min-height: 88px !important; }
  body .campaign-bar .campaign-inner {
    min-height: 88px !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(122px, 1fr) !important;
    gap: 7px !important;
    padding: 11px 10px !important;
  }
  body .campaign-bar .campaign-mobile-copy {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  body .campaign-bar .countdown { gap: 2px !important; }
  body .campaign-bar .countdown span b { font-size: 18px !important; }
  body .campaign-bar .countdown span small { font-size: 8px !important; }
}


/* =========================================================
   MOBILE CAMPAIGN — polished layout v7
   ========================================================= */
@media (max-width: 760px) {
  body .campaign-bar {
    min-height: 82px !important;
    background: linear-gradient(105deg, #2f6fe4 0%, #17365f 44%, #07101e 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.08) !important;
  }

  body .campaign-bar .campaign-inner {
    min-height: 82px !important;
    padding: 12px 16px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
  }

  body .campaign-bar .campaign-mobile-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    text-align: left !important;
    text-wrap: initial !important;
  }

  body .campaign-bar .campaign-mobile-title {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -.2px !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .campaign-mobile-description {
    display: block !important;
    max-width: 280px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
    letter-spacing: -.06px !important;
    color: rgba(255,255,255,.94) !important;
  }

  body .campaign-bar .campaign-right {
    width: auto !important;
    min-width: 148px !important;
  }

  body .campaign-bar .countdown {
    width: auto !important;
    grid-template-columns: repeat(3, 44px) !important;
    gap: 8px !important;
  }

  body .campaign-bar .countdown span {
    position: relative !important;
    width: 44px !important;
    min-height: 52px !important;
    gap: 5px !important;
  }

  body .campaign-bar .countdown span:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: -4px !important;
    width: 1px !important;
    height: 34px !important;
    background: rgba(255,255,255,.16) !important;
  }

  body .campaign-bar .countdown span b {
    font-size: 22px !important;
    line-height: .92 !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.45px !important;
  }

  body .campaign-bar .countdown span small {
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .25px !important;
    opacity: .92 !important;
  }
}

@media (max-width: 430px) {
  body .campaign-bar .campaign-inner {
    padding: 11px 12px !important;
    gap: 10px !important;
  }
  body .campaign-bar .campaign-mobile-title { font-size: 14px !important; }
  body .campaign-bar .campaign-mobile-description {
    max-width: 225px !important;
    font-size: 10px !important;
    line-height: 1.32 !important;
  }
  body .campaign-bar .campaign-right { min-width: 132px !important; }
  body .campaign-bar .countdown {
    grid-template-columns: repeat(3, 38px) !important;
    gap: 6px !important;
  }
  body .campaign-bar .countdown span { width: 38px !important; min-height: 48px !important; }
  body .campaign-bar .countdown span b { font-size: 19px !important; }
  body .campaign-bar .countdown span small { font-size: 7.5px !important; }
  body .campaign-bar .countdown span:not(:last-child)::after { right: -3px !important; height: 31px !important; }
}

@media (max-width: 360px) {
  body .campaign-bar { min-height: 78px !important; }
  body .campaign-bar .campaign-inner {
    min-height: 78px !important;
    padding: 10px 9px !important;
    gap: 7px !important;
  }
  body .campaign-bar .campaign-mobile-title { font-size: 13px !important; }
  body .campaign-bar .campaign-mobile-description { max-width: 185px !important; font-size: 9px !important; }
  body .campaign-bar .campaign-right { min-width: 118px !important; }
  body .campaign-bar .countdown { grid-template-columns: repeat(3, 34px) !important; gap: 5px !important; }
  body .campaign-bar .countdown span { width: 34px !important; min-height: 44px !important; }
  body .campaign-bar .countdown span b { font-size: 17px !important; }
  body .campaign-bar .countdown span small { font-size: 7px !important; }
}


/* =========================================================
   MOBILE CAMPAIGN — v8 single-copy fix
   Kaynak metin yalnızca bir kez render edilir.
   ========================================================= */
@media (max-width: 760px) {
  body .campaign-bar .campaign-mobile-copy { display: none !important; }

  body .campaign-bar .campaign-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  body .campaign-bar .campaign-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .campaign-gift {
    display: none !important;
  }

  body .campaign-bar .campaign-title {
    display: block !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -.2px !important;
    color: #fff !important;
  }

  body .campaign-bar .campaign-description {
    display: block !important;
    max-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
    letter-spacing: -.05px !important;
    color: rgba(255,255,255,.94) !important;
  }
}

@media (max-width: 430px) {
  body .campaign-bar .campaign-title { font-size: 14px !important; }
  body .campaign-bar .campaign-description { max-width: 220px !important; font-size: 9.5px !important; }
}

@media (max-width: 360px) {
  body .campaign-bar .campaign-title { font-size: 13px !important; }
  body .campaign-bar .campaign-description { max-width: 180px !important; font-size: 8.7px !important; }
}

/* =========================================================
   MOBILE CAMPAIGN — v9 balanced redesign
   ========================================================= */
@media (max-width: 760px) {
  body .campaign-bar {
    height: auto !important;
    min-height: 84px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(105deg, #285fc5 0%, #17345c 46%, #07111f 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(0,0,0,.18) !important;
  }

  body .campaign-bar .campaign-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 84px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 14px !important;
    box-sizing: border-box !important;
  }

  body .campaign-bar .campaign-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body .campaign-bar .campaign-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .campaign-gift { display: none !important; }

  body .campaign-bar .campaign-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.28px !important;
  }

  body .campaign-bar .campaign-description {
    display: block !important;
    width: 100% !important;
    max-width: 310px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 10.5px !important;
    line-height: 1.32 !important;
    font-weight: 600 !important;
    letter-spacing: -.05px !important;
    text-align: left !important;
    text-wrap: balance !important;
  }

  body .campaign-bar .campaign-right {
    width: 150px !important;
    min-width: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .campaign-bar .countdown {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .campaign-bar .countdown span {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    color: #fff !important;
  }

  body .campaign-bar .countdown span:not(.countdown-seconds):not(:nth-child(3))::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    width: 1px !important;
    height: 33px !important;
    background: rgba(255,255,255,.18) !important;
  }

  body .campaign-bar .countdown span b {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: .9 !important;
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .campaign-bar .countdown span small {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .18px !important;
    white-space: nowrap !important;
  }

  body .campaign-bar .countdown-seconds,
  body .campaign-bar .campaign-link,
  body .campaign-bar .campaign-mobile-copy {
    display: none !important;
  }
}

@media (max-width: 430px) {
  body .campaign-bar { min-height: 82px !important; }
  body .campaign-bar .campaign-inner {
    min-height: 82px !important;
    padding: 12px 11px !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    column-gap: 9px !important;
  }
  body .campaign-bar .campaign-title { font-size: 14.5px !important; }
  body .campaign-bar .campaign-description {
    max-width: 230px !important;
    font-size: 9.4px !important;
    line-height: 1.28 !important;
  }
  body .campaign-bar .campaign-right {
    width: 132px !important;
    min-width: 132px !important;
  }
  body .campaign-bar .countdown span { min-height: 47px !important; padding: 4px 3px !important; gap: 5px !important; }
  body .campaign-bar .countdown span b { font-size: 19px !important; }
  body .campaign-bar .countdown span small { font-size: 7px !important; }
  body .campaign-bar .countdown span:not(.countdown-seconds):not(:nth-child(3))::after { top: 8px !important; height: 30px !important; }
}

@media (max-width: 360px) {
  body .campaign-bar { min-height: 78px !important; }
  body .campaign-bar .campaign-inner {
    min-height: 78px !important;
    padding: 10px 8px !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    column-gap: 6px !important;
  }
  body .campaign-bar .campaign-text { gap: 4px !important; }
  body .campaign-bar .campaign-title { font-size: 13.5px !important; }
  body .campaign-bar .campaign-description {
    max-width: 190px !important;
    font-size: 8.5px !important;
    line-height: 1.24 !important;
  }
  body .campaign-bar .campaign-right { width: 116px !important; min-width: 116px !important; }
  body .campaign-bar .countdown span { min-height: 44px !important; padding: 3px 2px !important; gap: 4px !important; }
  body .campaign-bar .countdown span b { font-size: 17px !important; }
  body .campaign-bar .countdown span small { font-size: 6.5px !important; }
  body .campaign-bar .countdown span:not(.countdown-seconds):not(:nth-child(3))::after { top: 7px !important; height: 28px !important; }
}

/* =================================
   MOBILE10 - flowing reference strip
================================= */
.brands {
  overflow: hidden;
}
.brands-track {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
}
.brands-track .brand-clone { display: none; }

@media (max-width: 650px) {
  body .brands {
    width: 100% !important;
    height: 104px !important;
    min-height: 104px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #07111c !important;
  }
  body .brands-track {
    width: max-content !important;
    height: 104px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    will-change: transform;
    animation: tidesoftMobileBrands 16s linear infinite;
  }
  body .brands-track .brand,
  body .brands-track .brand-clone {
    display: flex !important;
    flex: 0 0 50vw !important;
    width: 50vw !important;
    height: 104px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  body .brands-track .brand { font-size: 20px !important; }
  body .brands-track .brand span {
    font-size: 15px !important;
    letter-spacing: 3px !important;
    font-weight: 650 !important;
  }
  @keyframes tidesoftMobileBrands {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body .brands-track { animation-play-state: paused !important; }
}

/* V14 - Navbar scroll sırasında görünür kalsın */
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
}

@media (max-width: 650px) {
    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 10050 !important;
    }
}

/* V15 - fixed navbar runtime state */
.site-header.tidesoft-nav-fixed {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  z-index: 2147483000 !important;
  transform: translateZ(0);
}


/* V18 - PayTR / yasal footer linkleri */
.footer-legal-links{width:1180px;max-width:calc(100% - 50px);margin:0 auto;padding:22px 0;border-bottom:1px solid #e8e9f0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px}
.footer-legal-links a{font-size:11px;color:#697086;text-decoration:none;line-height:1.5;transition:.2s}
.footer-legal-links a:hover{color:#3043e8}
@media(max-width:600px){.footer-legal-links{max-width:calc(100% - 30px);padding:20px 0;justify-content:flex-start;gap:9px 14px}.footer-legal-links a{font-size:11px}}

/* =============================================
   V20 - Reference strip layout fix
   Desktop: 6 evenly distributed brands
   Mobile: 2 visible brands + continuous marquee
============================================= */
body .brands {
    display: block !important;
    width: 100% !important;
    height: 115px !important;
    min-height: 115px !important;
    padding: 0 40px !important;
    overflow: hidden !important;
    background: #07111c !important;
    box-sizing: border-box !important;
}
body .brands-track {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    transform: none;
}
body .brands-track > .brand:not(.brand-clone) {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
body .brands-track > .brand-clone {
    display: none !important;
}

@media (max-width: 650px) {
    body .brands {
        height: 104px !important;
        min-height: 104px !important;
        padding: 0 !important;
    }
    body .brands-track {
        width: max-content !important;
        height: 104px !important;
        justify-content: flex-start !important;
        animation: tidesoftMobileBrandsV20 18s linear infinite !important;
        will-change: transform;
    }
    body .brands-track > .brand:not(.brand-clone),
    body .brands-track > .brand-clone {
        display: flex !important;
        flex: 0 0 50vw !important;
        width: 50vw !important;
        min-width: 50vw !important;
        height: 104px !important;
        padding: 0 12px !important;
        border: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
    body .brands-track > .brand span {
        font-size: 15px !important;
        letter-spacing: 3px !important;
    }
    @keyframes tidesoftMobileBrandsV20 {
        from { transform: translate3d(0,0,0); }
        to   { transform: translate3d(-50%,0,0); }
    }
}