/* =========================================================
   WEBDIZAYN 2026
========================================================= */

:root {
    --wd26-red: #dc0005;
    --wd26-dark-red: #b90004;
    --wd26-black: #090909;
    --wd26-black-soft: #101010;
    --wd26-white: #ffffff;
    --wd26-gray: #8b8b8b;
    --wd26-border: rgba(255,255,255,.12);
}


/* =========================================================
   BASIC
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: "DM Sans", sans-serif;
}

body.wd26-menu-open {
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.wd26-header {
    width: 100%;
    height: 94px;

    background: #fff;

    position: relative;
    z-index: 9999;

    border-bottom: 1px solid rgba(0,0,0,.08);

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


.wd26-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;

    height: 76px;

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


.wd26-header-wrap {
    width: calc(100% - 80px);
    max-width: 1720px;

    height: 100%;

    margin: auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   LOGO
========================================================= */

.wd26-logo {
    display: flex;
    align-items: center;
    gap: 15px;

    text-decoration: none;

    flex-shrink: 0;
}


.wd26-logo-symbol {
    width: 38px;
    height: 38px;

    position: relative;

    display: block;
}


.wd26-logo-symbol > span:first-child {
    position: absolute;

    left: 0;
    top: 0;

    width: 20px;
    height: 38px;

    background: var(--wd26-red);
}


.wd26-logo-symbol > span:last-child {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 12px;
    height: 24px;

    background: #090909;
}


.wd26-logo-text {
    display: flex;
    flex-direction: column;
}


.wd26-logo-text strong {
    font-family: "Manrope", sans-serif;

    font-size: 23px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #090909;
}


.wd26-logo-text strong span {
    color: var(--wd26-red);
}


.wd26-logo-text small {
    margin-top: 6px;

    font-size: 7px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #999;
}


/* =========================================================
   NAV
========================================================= */

.wd26-nav {
    height: 100%;

    margin-left: auto;
    margin-right: 45px;

    display: flex;
    align-items: center;

    gap: 34px;
}


.wd26-nav-item {
    height: 100%;

    display: flex;
    align-items: center;
    gap: 6px;

    position: relative;

    text-decoration: none;

    font-family: "Manrope", sans-serif;

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

    color: #1a1a1a;

    transition: color .3s ease;
}


.wd26-nav-item > span {
    position: absolute;

    top: 19px;
    left: 0;

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

    color: #b8b8b8;

    letter-spacing: .6px;
}


.wd26-nav-item::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: 0;

    width: 0;
    height: 3px;

    background: var(--wd26-red);

    transition: width .35s cubic-bezier(.16,1,.3,1);
}


.wd26-nav-item:hover,
.wd26-nav-item.active {
    color: var(--wd26-red);
}


.wd26-nav-item:hover::after,
.wd26-nav-item.active::after {
    width: 100%;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.wd26-header-actions {
    display: flex;
    align-items: center;

    gap: 24px;
}


/* NETURK */

.wd26-neturk {
    display: flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;

    color: #111;
}


.wd26-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--wd26-red);

    position: relative;
}


.wd26-live-dot::before {
    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(220,0,5,.3);

    border-radius: 50%;

    animation: wd26Pulse 2s infinite;
}


@keyframes wd26Pulse {

    0% {
        transform: scale(.7);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }

}


.wd26-neturk-content {
    display: flex;
    flex-direction: column;
}


.wd26-neturk-content small {
    font-size: 7px;

    letter-spacing: 1.2px;

    color: #aaa;

    text-transform: uppercase;
}


.wd26-neturk-content strong {
    margin-top: 2px;

    font-family: "Manrope", sans-serif;

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


.wd26-neturk > i {
    font-size: 8px;

    color: #777;
}


/* =========================================================
   HEADER BUTTON
========================================================= */

.wd26-header-contact {
    height: 52px;

    padding-left: 22px;
    padding-right: 6px;

    display: flex;
    align-items: center;
    gap: 19px;

    text-decoration: none;

    color: #fff;

    background: #090909;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: .8px;

    transition: background .3s ease;
}


.wd26-header-contact:hover {
    background: var(--wd26-red);
    color: #fff;
}


.wd26-contact-circle {
    width: 40px;
    height: 40px;

    background: var(--wd26-red);

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

    overflow: hidden;

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


.wd26-header-contact:hover .wd26-contact-circle {
    background: #fff;
    color: var(--wd26-red);
}


.wd26-contact-circle i {
    font-size: 11px;

    transform: rotate(-45deg);
}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.wd26-menu-button {
    display: none;

    width: 52px;
    height: 52px;

    border: 0;

    padding: 0;

    position: relative;

    cursor: pointer;

    background: #090909;

    z-index: 10001;
}


.wd26-menu-button span {
    width: 21px;
    height: 1px;

    background: #fff;

    position: absolute;

    left: 15px;

    transition:
        top .3s ease,
        transform .3s ease,
        width .3s ease;
}


.wd26-menu-button span:first-child {
    top: 22px;
}


.wd26-menu-button span:last-child {
    top: 29px;
    width: 14px;
}


.wd26-menu-button.active span:first-child {
    top: 26px;
    transform: rotate(45deg);
}


.wd26-menu-button.active span:last-child {
    top: 26px;

    width: 21px;

    transform: rotate(-45deg);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.wd26-mobile-menu {
    position: fixed;

    inset: 0;

    background: #080808;

    z-index: 9998;

    visibility: hidden;
    opacity: 0;

    transform: translateY(-15px);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;

    overflow-y: auto;
}


.wd26-mobile-menu.active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.wd26-mobile-noise {
    position: absolute;
    inset: 0;

    opacity: .05;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}


.wd26-mobile-menu-wrap {
    width: 100%;
    min-height: 100%;

    padding: 125px 35px 40px;

    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
}
/* =========================================================
   WEBDIZAYN - REFERENCE DETAIL
========================================================= */

.wdr-ref-detail {
    --wdr-red: #e30613;
    --wdr-black: #141417;
    --wdr-text: #5f5f66;
    --wdr-soft: #f7f7f8;
    --wdr-border: #e9e9ec;
    width: 100%;
    color: var(--wdr-black);
    font-family: inherit;
  
}

/* Reference detail - refined intro */

.wdr-ref-statement {
    max-width: 650px;
    margin: 0 0 25px;
    color: #17171a;
    font-size: clamp(29px, 3.6vw, 49px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.055em;
}

.wdr-ref-lead-accent {
    color: #e30613;
}

.wdr-ref-block-head h2,
.wdr-ref-side-title h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.03em;
    color: #1b1b1e;
    line-height: 1.3;
}

.wdr-ref-side-title h2 {
    font-size: 19px;
}

.wdr-ref-detail .wdr-ref-visit-btn {
    color: #fff;
}

@media (max-width:767px) {
    .wdr-ref-statement {
        font-size: clamp(28px, 8vw, 39px);
        margin-bottom: 20px;
    }

    .wdr-ref-block-head h2 {
        font-size: 21px;
    }

    .wdr-ref-side-title h2 {
        font-size: 18px;
    }
}


    .wdr-ref-detail *,
    .wdr-ref-detail *::before,
    .wdr-ref-detail *::after {
        box-sizing: border-box;
    }

    .wdr-ref-detail h2,
    .wdr-ref-detail h3,
    .wdr-ref-detail p {
        margin-top: 0;
    }

    .wdr-ref-detail a {
        text-decoration: none;
    }

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

.wdr-ref-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    gap: 60px;
    align-items: center;
    padding-bottom: 65px;
}

.wdr-ref-left {
    min-width: 0;
}

.wdr-ref-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    color: #8a8a90;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.8px;
}

.wdr-ref-kicker-line {
    width: 28px;
    height: 2px;
    background: var(--wdr-red);
    flex-shrink: 0;
}

.wdr-ref-title {
    margin: 0 0 25px;
    color: var(--wdr-black);
    font-size: clamp(42px, 4.8vw, 74px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.07em;
}

    .wdr-ref-title span {
        color: var(--wdr-red);
    }

.wdr-ref-description {
    max-width: 620px;
    margin-bottom: 30px;
    color: var(--wdr-text);
    font-size: 15px;
    line-height: 1.95;
}

.wdr-ref-actions {
    margin-bottom: 28px;
}

.wdr-ref-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 26px;
    background: var(--wdr-red);
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .2px;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    box-shadow: 0 18px 35px rgba(227, 6, 19, .18);
}

    .wdr-ref-visit-btn i {
        font-size: 12px;
    }

    .wdr-ref-visit-btn:hover {
        background: var(--wdr-black);
        transform: translateY(-3px);
        box-shadow: 0 20px 35px rgba(0, 0, 0, .12);
    }

.wdr-ref-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .wdr-ref-tags span {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 8px 14px;
        background: #fff;
        border: 1px solid var(--wdr-border);
        color: #66666c;
        font-size: 11px;
        font-weight: 650;
    }

/* =========================================================
   IMAGE / BROWSER MOCKUP
========================================================= */

.wdr-ref-right {
    min-width: 0;
}

.wdr-ref-browser {
    background: #fff;
    border: 1px solid #e7e7ea;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.wdr-ref-browser-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: #f6f6f7;
    border-bottom: 1px solid #ececef;
}

    .wdr-ref-browser-top span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d4d4d8;
    }

        .wdr-ref-browser-top span:first-child {
            background: #ff5f57;
        }

        .wdr-ref-browser-top span:nth-child(2) {
            background: #febc2e;
        }

        .wdr-ref-browser-top span:nth-child(3) {
            background: #28c840;
        }

.wdr-ref-image-wrap {
    background: #f3f3f4;
}

.wdr-ref-image {
    display: block;
    width: 100%;
    height: 450px;
    object-fit:contain;
    padding:50px !important;
}

/* =========================================================
   CONTENT GRID
========================================================= */

.wdr-ref-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .55fr);
    gap: 30px;
    align-items: start;
}

.wdr-ref-main {
    min-width: 0;
}

.wdr-ref-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wdr-ref-block {
    margin-bottom: 38px;
}

    .wdr-ref-block:last-child {
        margin-bottom: 0;
    }

.wdr-ref-block-head,
.wdr-ref-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.wdr-ref-mini-line {
    width: 22px;
    height: 2px;
    background: var(--wdr-red);
    flex-shrink: 0;
}

.wdr-ref-block-head h3,
.wdr-ref-side-title h3 {
    margin: 0;
    color: #1b1b1e;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: -.03em;
}

.wdr-ref-block p {
    margin: 0 0 18px;
    color: var(--wdr-text);
    font-size: 15px;
    line-height: 1.95;
}

.wdr-ref-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .wdr-ref-list li {
        position: relative;
        padding: 14px 0 14px 25px;
        border-bottom: 1px solid #ededf0;
        color: #66666d;
        font-size: 14px;
        line-height: 1.8;
    }

        .wdr-ref-list li:first-child {
            border-top: 1px solid #ededf0;
        }

        .wdr-ref-list li::before {
            content: "";
            position: absolute;
            left: 4px;
            top: 23px;
            width: 8px;
            height: 8px;
            background: var(--wdr-red);
            transform: rotate(45deg);
        }

/* highlight */

.wdr-ref-highlight {
    padding: 32px;
    background: #17171a;
    color: #fff;
    border-left: 4px solid var(--wdr-red);
}

.wdr-ref-highlight-label {
    margin-bottom: 14px;
    color: #a5a5ab;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.6px;
}

.wdr-ref-highlight-text {
    font-size: 21px;
    line-height: 1.75;
    font-weight: 550;
    letter-spacing: -.02em;
}

/* =========================================================
   SIDEBAR
========================================================= */

.wdr-ref-side-card {
    padding: 26px;
    border: 1px solid var(--wdr-border);
    background: #fff;
}

.wdr-ref-meta-list {
    display: flex;
    flex-direction: column;
}

.wdr-ref-meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 0;
    border-bottom: 1px solid #efeff1;
}

    .wdr-ref-meta-item:first-child {
        padding-top: 0;
    }

    .wdr-ref-meta-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .wdr-ref-meta-item span {
        color: #95959a;
        font-size: 10px;
        letter-spacing: 1.2px;
        font-weight: 750;
        text-transform: uppercase;
    }

    .wdr-ref-meta-item strong {
        color: #252529;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 700;
    }

.wdr-ref-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .wdr-ref-feature-list span {
        padding: 10px 12px;
        background: var(--wdr-soft);
        color: #5f5f65;
        font-size: 11px;
        font-weight: 650;
        border: 1px solid #ededf0;
    }

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

@media (max-width: 1199px) {
    .wdr-ref-hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wdr-ref-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
  

    .wdr-ref-hero {
        gap: 28px;
        padding-bottom: 40px;
    }

    .wdr-ref-kicker {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .wdr-ref-title {
        margin-bottom: 18px;
        font-size: clamp(34px, 10vw, 48px);
    }

    .wdr-ref-description {
        margin-bottom: 22px;
        font-size: 13px;
        line-height: 1.85;
    }

    .wdr-ref-visit-btn {
        width: 100%;
        justify-content: space-between;
        padding: 16px 18px;
        font-size: 12px;
    }

    .wdr-ref-tags {
        gap: 8px;
    }

        .wdr-ref-tags span {
            min-height: 32px;
            font-size: 10px;
            padding: 7px 11px;
        }

    .wdr-ref-content-grid {
        gap: 16px;
    }

    .wdr-ref-block {
        margin-bottom: 28px;
    }

    .wdr-ref-block-head h3,
    .wdr-ref-side-title h3 {
        font-size: 21px;
    }

    .wdr-ref-block p,
    .wdr-ref-list li {
        font-size: 13px;
        line-height: 1.85;
    }

    .wdr-ref-highlight {
        padding: 22px 18px;
    }

    .wdr-ref-highlight-text {
        font-size: 17px;
        line-height: 1.7;
    }

    .wdr-ref-side-card {
        padding: 20px 18px;
    }

    .wdr-ref-meta-item strong {
        font-size: 13px;
    }
}

.wd26-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;

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

    font-size: 8px;

    letter-spacing: 2px;

    color: #777;
}


.wd26-mobile-nav {
    display: flex;
    flex-direction: column;
}


.wd26-mobile-nav > a {
    display: grid;

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

    align-items: center;

    min-height: 86px;

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

    text-decoration: none;

    color: #fff;
}


.wd26-mobile-nav small {
    align-self: start;

    margin-top: 25px;

    color: var(--wd26-red);

    font-size: 8px;
}


.wd26-mobile-nav span {
    font-family: "Manrope", sans-serif;

    font-size: clamp(27px, 7vw, 46px);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -2px;
}


.wd26-mobile-nav i {
    font-size: 10px;

    transform: rotate(-45deg);

    color: #666;
}


.wd26-mobile-nav a:hover span {
    color: var(--wd26-red);
}


.wd26-mobile-footer {
    margin-top: auto;

    padding-top: 40px;

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

    gap: 20px;
}


.wd26-mobile-footer p {
    margin: 0;

    max-width: 190px;

    color: #777;

    font-size: 11px;

    line-height: 1.7;
}


.wd26-mobile-footer a {
    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


.wd26-mobile-footer a i {
    margin-left: 8px;

    color: var(--wd26-red);
}


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

.wd26-hero {
    width: 100%;

    min-height: calc(100vh - 94px);

    background:
        #0a0a0a;

    color: #fff;

    position: relative;

    overflow: hidden;

    isolation: isolate;
}


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

.wd26-grid {
    position: absolute;

    inset: 0;

    z-index: -5;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,1),
            rgba(0,0,0,.5),
            transparent
        );
}


/* =========================================================
   LIGHT GLOWS
========================================================= */

.wd26-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    z-index: -3;
}


.wd26-glow-one {
    width: 560px;
    height: 560px;

    right: 4%;
    top: 10%;

    background: rgba(220,0,5,.16);
}


.wd26-glow-two {
    width: 380px;
    height: 380px;

    left: 20%;
    bottom: -220px;

    background: rgba(220,0,5,.10);
}


/* =========================================================
   CURSOR
========================================================= */

.wd26-cursor-light {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.045),
            transparent 68%
        );

    pointer-events: none;

    z-index: -2;

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

    transition:
        opacity .3s ease;
}


/* =========================================================
   BG TEXT
========================================================= */

.wd26-big-bg-text {
    position: absolute;

    left: -1.5vw;
    bottom: -6vw;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: clamp(130px, 20vw, 360px);

    line-height: .75;

    letter-spacing: -1.5vw;

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

    pointer-events: none;

    user-select: none;

    z-index: -2;
}


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

.wd26-hero-wrap {
    width: calc(100% - 120px);
    max-width: 1720px;

    min-height: calc(100vh - 170px);

    margin: auto;

    padding: 70px 0 75px;

    display: grid;

    grid-template-columns:
        minmax(0,1.14fr)
        minmax(480px,.86fr);

    gap: 70px;

    align-items: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.wd26-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 34px;

    font-size: 8px;

    letter-spacing: 2.5px;

    font-weight: 600;

    color: #777;
}


.wd26-eyebrow-line {
    width: 35px;
    height: 1px;

    background: var(--wd26-red);
}


.wd26-eyebrow strong {
    font-size: 8px;

    font-weight: 600;

    color: #bcbcbc;
}


.wd26-eyebrow-separator {
    color: var(--wd26-red);
}


/* =========================================================
   TITLE
========================================================= */

.wd26-title {
    position: relative;

    max-width: 920px;
}


.wd26-title-row {
    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 10px;
}


.wd26-title-small {
    font-family: "Manrope", sans-serif;

    font-size: clamp(14px,1.1vw,19px);

    color: #888;

    font-weight: 500;

    letter-spacing: -.4px;
}


.wd26-title-pill {
    height: 28px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 8px;

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

    border-radius: 50px;

    font-size: 8px;

    letter-spacing: 1.7px;

    font-weight: 600;

    color: #aaa;
}


.wd26-title-pill-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--wd26-red);
}


.wd26-title-line {
    position: relative;

    line-height: .85;

    overflow: hidden;
}


.wd26-title-word,
.wd26-outline-word {
    display: block;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(83px, 9vw, 168px);

    letter-spacing:
        clamp(-7px,-.5vw,-3px);
}


.wd26-title-word {
    color: #fff;
}


.wd26-outline-word {
    color: transparent;

    -webkit-text-stroke:
        1.5px rgba(255,255,255,.77);

    text-stroke:
        1.5px rgba(255,255,255,.77);

    transition:
        color .4s ease,
        -webkit-text-stroke .4s ease;
}


.wd26-title-line-last:hover
.wd26-outline-word {
    color: var(--wd26-red);

    -webkit-text-stroke:
        1.5px var(--wd26-red);
}


.wd26-title-line-last {
    display: flex;

    align-items: center;

    gap: 25px;
}


.wd26-title-arrow {
    color: var(--wd26-red);

    font-family: "Manrope", sans-serif;

    font-size: clamp(55px,6vw,100px);

    line-height: 1;

    font-weight: 300;

    transform: translateY(5px);
}


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

.wd26-hero-bottom {
    margin-top: 48px;

    display: grid;

    grid-template-columns:
        minmax(260px,430px)
        auto;

    gap: 55px;

    align-items: flex-end;
}


.wd26-hero-description p {
    margin: 0;

    color: #929292;

    font-size:
        clamp(12px,1vw,15px);

    line-height: 1.8;

    font-weight: 400;
}


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

.wd26-hero-buttons {
    display: flex;

    align-items: center;

    gap: 27px;
}


.wd26-primary-button {
    height: 62px;

    display: flex;

    align-items: center;

    text-decoration: none;

    background: var(--wd26-red);

    color: #fff;

    transition:
        background .3s ease;
}


.wd26-button-text {
    padding: 0 27px;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .4px;
}


.wd26-button-icon {
    width: 61px;
    height: 62px;

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

    border-left:
        1px solid rgba(255,255,255,.22);
}


.wd26-button-icon i {
    font-size: 12px;

    transition:
        transform .35s ease;
}


.wd26-primary-button:hover {
    color: #fff;

    background: #f10005;
}


.wd26-primary-button:hover
.wd26-button-icon i {
    transform:
        translate(3px,-3px);
}


.wd26-text-button {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}


.wd26-text-button i {
    color: var(--wd26-red);

    transition:
        transform .3s ease;
}


.wd26-text-button:hover {
    color: #fff;
}


.wd26-text-button:hover i {
    transform:
        translateX(5px);
}


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

.wd26-visual {
    position: relative;

    width: 100%;

    height: 610px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;
}


/* =========================================================
   ORBITS
========================================================= */

.wd26-visual-orbit {
    position: absolute;

    border-radius: 50%;

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


.orbit-one {
    width: 520px;
    height: 520px;

    animation:
        wd26Rotate 26s linear infinite;
}


.orbit-two {
    width: 400px;
    height: 400px;

    border-style: dashed;

    border-color:
        rgba(220,0,5,.20);

    animation:
        wd26RotateReverse 20s linear infinite;
}


@keyframes wd26Rotate {

    to {
        transform: rotate(360deg);
    }

}


@keyframes wd26RotateReverse {

    to {
        transform: rotate(-360deg);
    }

}


/* =========================================================
   BROWSER
========================================================= */

.wd26-browser {
    width: min(100%,560px);

    height: 430px;

    position: relative;

    z-index: 4;

    background: #f4f4f4;

    box-shadow:
        0 55px 100px rgba(0,0,0,.42);

    transform:
        rotateY(-5deg)
        rotateX(2deg);
}


.wd26-browser-top {
    height: 42px;

    padding: 0 15px;

    display: grid;

    grid-template-columns:
        70px
        1fr
        40px;

    align-items: center;

    background: #e9e9e9;

    border-bottom:
        1px solid #d8d8d8;
}


.wd26-browser-dots {
    display: flex;
    align-items: center;

    gap: 5px;
}


.wd26-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #b8b8b8;
}


.wd26-browser-dots span:first-child {
    background: var(--wd26-red);
}


.wd26-browser-url {
    height: 22px;

    max-width: 220px;

    margin: auto;

    padding: 0 15px;

    display: flex;
    align-items: center;

    justify-content: center;

    border-radius: 40px;

    background: #fff;

    color: #999;

    font-size: 7px;

    letter-spacing: .8px;
}


.wd26-browser-menu {
    color: #aaa;

    text-align: right;

    font-size: 10px;
}


/* =========================================================
   BROWSER SCREEN
========================================================= */

.wd26-browser-screen {
    height:
        calc(100% - 42px);

    background: #fff;

    color: #111;

    position: relative;

    overflow: hidden;

    padding: 25px 28px;
}


.wd26-screen-nav {
    position: relative;
    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.wd26-screen-nav strong {
    font-family: "Archivo Black", sans-serif;

    font-size: 17px;

    letter-spacing: -1px;
}


.wd26-screen-nav strong span {
    color: var(--wd26-red);
}


.wd26-screen-nav > div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.wd26-screen-nav > div span {
    width: 19px;
    height: 1px;

    background: #111;
}


.wd26-screen-nav > div span:last-child {
    width: 12px;

    margin-left: auto;
}


/* =========================================================
   SCREEN CONTENT
========================================================= */

.wd26-screen-content {
    position: absolute;

    left: 28px;

    bottom: 32px;

    z-index: 5;
}


.wd26-screen-content > small {
    font-size: 6px;

    letter-spacing: 2px;

    font-weight: 600;

    color: #aaa;
}


.wd26-screen-title {
    margin-top: 13px;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: clamp(34px,3.3vw,48px);

    line-height: .9;

    letter-spacing: -3px;

    color: #111;
}


.wd26-screen-title span {
    color: var(--wd26-red);
}


.wd26-screen-bottom {
    margin-top: 22px;

    display: flex;

    gap: 15px;
}


.wd26-screen-bottom span {
    font-size: 6px;

    padding-bottom: 4px;

    border-bottom:
        1px solid #d9d9d9;

    color: #777;
}


/* =========================================================
   RED SHAPE
========================================================= */

.wd26-screen-red-shape {
    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: var(--wd26-red);

    right: -72px;
    top: 60px;

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


.wd26-screen-red-shape > span {
    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 58px;

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

    transform: rotate(90deg);
}


.wd26-shape-ring {
    width: 155px;
    height: 155px;

    position: absolute;

    border-radius: 50%;

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


.wd26-shape-ring::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    background: #fff;

    border-radius: 50%;

    top: 7px;
    left: 38px;
}


/* =========================================================
   FLOAT LABEL
========================================================= */

.wd26-float-label {
    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;
}


.wd26-float-one {
    right: -10px;

    top: 45px;
}


.wd26-float-label > span {
    color: var(--wd26-red);

    font-size: 24px;
}


.wd26-float-label p {
    margin: 0;

    font-size: 7px;

    line-height: 1.5;

    letter-spacing: 1.5px;

    color: #888;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.wd26-floating-card {
    position: absolute;

    z-index: 8;

    box-shadow:
        0 20px 55px rgba(0,0,0,.28);
}


.wd26-card-black {
    width: 156px;
    min-height: 175px;

    left: -20px;
    bottom: 32px;

    padding: 21px;

    background: #111;

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

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.wd26-card-black small {
    font-size: 6px;

    letter-spacing: 1.7px;

    color: #666;
}


.wd26-card-black strong {
    display: block;

    margin-top: 16px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 22px;

    line-height: 1.18;

    letter-spacing: -1px;

    font-weight: 600;
}


.wd26-card-black > i {
    margin-top: 20px;

    color: var(--wd26-red);

    font-size: 10px;
}


.wd26-card-white {
    right: -15px;

    bottom: 72px;

    min-width: 190px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: #fff;

    color: #111;
}


.wd26-card-icon {
    width: 38px;
    height: 38px;

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

    background: var(--wd26-red);

    color: #fff;

    font-size: 11px;
}


.wd26-card-white > div {
    display: flex;
    flex-direction: column;
}


.wd26-card-white strong {
    font-size: 10px;

    font-weight: 700;
}


.wd26-card-white small {
    margin-top: 4px;

    color: #999;

    font-size: 7px;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.wd26-hero-bar {
    width: calc(100% - 120px);
    max-width: 1720px;

    height: 76px;

    margin: auto;

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

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.wd26-hero-bar-left {
    display: flex;

    align-items: center;

    gap: 45px;
}


.wd26-bar-label {
    font-size: 7px;

    letter-spacing: 2px;

    color: #555;
}


.wd26-bar-services {
    display: flex;

    align-items: center;

    gap: 19px;
}


.wd26-bar-services span {
    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.1px;

    color: #888;
}


.wd26-bar-services i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--wd26-red);
}


/* =========================================================
   SCROLL
========================================================= */

.wd26-scroll-indicator {
    display: flex;

    align-items: center;

    gap: 13px;
}


.wd26-scroll-indicator > span {
    font-size: 7px;

    letter-spacing: 2px;

    color: #555;
}


.wd26-scroll-line {
    width: 70px;

    height: 1px;

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

    overflow: hidden;
}


.wd26-scroll-line span {
    display: block;

    width: 25px;
    height: 1px;

    background: var(--wd26-red);

    animation:
        wd26ScrollLine 1.8s
        cubic-bezier(.7,0,.3,1)
        infinite;
}


@keyframes wd26ScrollLine {

    0% {
        transform: translateX(-30px);
    }

    100% {
        transform: translateX(80px);
    }

}


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

@media(max-width:1450px) {

    .wd26-header-wrap {
        width:
            calc(100% - 50px);
    }


    .wd26-nav {
        gap: 24px;

        margin-right: 28px;
    }


    .wd26-neturk {
        display: none;
    }


    .wd26-hero-wrap {
        width:
            calc(100% - 80px);

        grid-template-columns:
            minmax(0,1.08fr)
            minmax(440px,.92fr);

        gap: 40px;
    }


    .wd26-hero-bar {
        width:
            calc(100% - 80px);
    }


    .wd26-card-black {
        left: 0;
    }


    .wd26-card-white {
        right: 0;
    }

}


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

@media(max-width:1180px) {

    .wd26-nav {
        display: none;
    }


    .wd26-header-actions {
        margin-left: auto;
    }


    .wd26-neturk {
        display: flex;
    }


    .wd26-menu-button {
        display: block;
    }


    .wd26-header-contact {
        display: none;
    }


    .wd26-hero-wrap {
        grid-template-columns:
            minmax(0,1fr)
            minmax(390px,.75fr);
    }


    .wd26-title-word,
    .wd26-outline-word {
        font-size:
            clamp(76px,9vw,120px);
    }


    .wd26-hero-bottom {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .wd26-visual {
        height: 520px;
    }


    .wd26-browser {
        height: 370px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px) {

    .wd26-header {
        height: 78px;
    }


    .wd26-header-wrap {
        width:
            calc(100% - 36px);
    }


    .wd26-neturk {
        display: none;
    }


    .wd26-hero {
        min-height: auto;
    }


    .wd26-hero-wrap {
        width:
            calc(100% - 50px);

        min-height: auto;

        padding:
            70px 0 40px;

        display: flex;

        flex-direction: column;

        align-items: stretch;
    }


    .wd26-hero-content {
        width: 100%;
    }


    .wd26-title-word,
    .wd26-outline-word {
        font-size:
            clamp(86px,16vw,135px);
    }


    .wd26-visual {
        width: min(100%,650px);

        height: 560px;

        margin: 0 auto;
    }


    .wd26-browser {
        width: min(88%,530px);

        height: 410px;
    }


    .wd26-hero-bar {
        width:
            calc(100% - 50px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd26-header {
        height: 70px;
    }


    .wd26-header.is-sticky {
        height: 70px;
    }


    .wd26-header-wrap {
        width:
            calc(100% - 28px);
    }


    .wd26-logo {
        gap: 10px;
    }


    .wd26-logo-symbol {
        width: 30px;
        height: 30px;
    }


    .wd26-logo-symbol > span:first-child {
        width: 16px;
        height: 30px;
    }


    .wd26-logo-symbol > span:last-child {
        width: 10px;
        height: 19px;
    }


    .wd26-logo-text strong {
        font-size: 19px;
    }


    .wd26-logo-text small {
        font-size: 5px;

        letter-spacing: 2.3px;

        margin-top: 4px;
    }


    .wd26-menu-button {
        width: 44px;
        height: 44px;
    }


    .wd26-menu-button span {
        left: 12px;
    }


    .wd26-menu-button span:first-child {
        top: 18px;
    }


    .wd26-menu-button span:last-child {
        top: 25px;
    }


    .wd26-menu-button.active span:first-child,
    .wd26-menu-button.active span:last-child {
        top: 22px;
    }


    /* HERO */

    .wd26-hero-wrap {
        width:
            calc(100% - 34px);

        padding:
            52px 0 25px;

        gap: 20px;
    }


    .wd26-grid {
        background-size:
            45px 45px;
    }


    .wd26-eyebrow {
        margin-bottom: 24px;

        gap: 8px;

        font-size: 6px;

        letter-spacing: 1.5px;
    }


    .wd26-eyebrow-line {
        width: 20px;
    }


    .wd26-eyebrow strong {
        font-size: 6px;
    }


    .wd26-title-row {
        min-height: 25px;

        gap: 10px;

        margin-bottom: 8px;
    }


    .wd26-title-small {
        font-size: 11px;
    }


    .wd26-title-pill {
        height: 24px;

        padding: 0 10px;

        font-size: 6px;

        letter-spacing: 1.2px;
    }


    .wd26-title-word,
    .wd26-outline-word {
        font-size:
            clamp(63px,20vw,105px);

        letter-spacing:
            -4px;
    }


    .wd26-title-arrow {
        font-size: 40px;
    }


    .wd26-title-line-last {
        gap: 10px;
    }


    .wd26-hero-bottom {
        margin-top: 30px;

        gap: 24px;
    }


    .wd26-hero-description p {
        font-size: 11px;

        line-height: 1.75;

        max-width: 420px;
    }


    .wd26-hero-buttons {
        width: 100%;

        gap: 20px;
    }


    .wd26-primary-button {
        height: 56px;
    }


    .wd26-button-text {
        padding: 0 20px;

        font-size: 9px;
    }


    .wd26-button-icon {
        width: 54px;
        height: 56px;
    }


    .wd26-text-button {
        font-size: 8px;
    }


    /* VISUAL */

    .wd26-visual {
        height: 445px;

        margin-top: 10px;
    }


    .wd26-browser {
        width: 91%;

        height: 305px;

        transform: none;
    }


    .wd26-browser-top {
        height: 34px;

        grid-template-columns:
            45px 1fr 25px;

        padding:
            0 9px;
    }


    .wd26-browser-url {
        height: 18px;

        font-size: 5px;
    }


    .wd26-browser-screen {
        height:
            calc(100% - 34px);

        padding: 18px;
    }


    .wd26-screen-content {
        left: 18px;

        bottom: 20px;
    }


    .wd26-screen-title {
        font-size: 34px;

        letter-spacing: -2px;
    }


    .wd26-screen-red-shape {
        width: 180px;
        height: 180px;

        right: -65px;

        top: 45px;
    }


    .wd26-shape-ring {
        width: 105px;
        height: 105px;
    }


    .wd26-card-black {
        width: 125px;

        min-height: 137px;

        left: 0;

        bottom: 20px;

        padding: 15px;
    }


    .wd26-card-black strong {
        font-size: 16px;
    }


    .wd26-card-white {
        min-width: 158px;

        right: 0;

        bottom: 42px;

        padding: 10px;
    }


    .wd26-card-icon {
        width: 32px;
        height: 32px;
    }


    .wd26-card-white strong {
        font-size: 8px;
    }


    .wd26-float-one {
        right: 0;

        top: 25px;
    }


    .orbit-one {
        width: 340px;
        height: 340px;
    }


    .orbit-two {
        width: 275px;
        height: 275px;
    }


    /* BOTTOM */

    .wd26-hero-bar {
        width:
            calc(100% - 34px);

        height: auto;

        min-height: 72px;

        padding: 20px 0;
    }


    .wd26-hero-bar-left {
        gap: 15px;
    }


    .wd26-bar-label {
        display: none;
    }


    .wd26-bar-services {
        gap: 9px;

        flex-wrap: wrap;
    }


    .wd26-bar-services span {
        font-size: 6px;
    }


    .wd26-scroll-indicator {
        display: none;
    }


    /* MOBILE MENU */

    .wd26-mobile-menu-wrap {
        padding:
            100px 20px 28px;
    }


    .wd26-mobile-nav > a {
        min-height: 68px;
    }


    .wd26-mobile-nav small {
        margin-top: 18px;
    }


    .wd26-mobile-nav span {
        font-size: 27px;

        letter-spacing: -1.4px;
    }


    .wd26-mobile-footer {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media(max-width:380px) {

    .wd26-title-word,
    .wd26-outline-word {
        font-size: 59px;
    }


    .wd26-hero-buttons {
        flex-direction: column;

        align-items: flex-start;
    }


    .wd26-primary-button {
        width: 100%;

        justify-content: space-between;
    }


    .wd26-visual {
        height: 390px;
    }


    .wd26-card-white {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


}

/* =========================================================
   WEB TASARIM ÇÖZÜMLERİ
========================================================= */

.wd-services {
    width: 100%;

    position: relative;

    background: #f6f6f4;

    color: #111;

    overflow: hidden;
}


.wd-services::before {
    content: "WD";

    position: absolute;

    right: -2vw;
    bottom: -5vw;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(180px, 27vw, 480px);

    line-height: .7;

    letter-spacing: -25px;

    color:
        rgba(0, 0, 0, .018);

    pointer-events: none;
}


.wd-services-inner {
    width: calc(100% - 110px);
    max-width: 1680px;

    margin: auto;

    position: relative;

    z-index: 2;

    padding:
        clamp(80px, 8vw, 130px)
        0
        clamp(70px, 7vw, 110px);
}


/* =========================================================
   HEADER
========================================================= */

.wd-services-head {
    margin-bottom:
        clamp(55px, 6vw, 90px);

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, .55fr);

    gap:
        clamp(50px, 7vw, 120px);

    align-items: end;
}


.wd-services-eyebrow {
    margin-bottom: 22px;

    display: flex;
    align-items: center;

    gap: 12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2.2px;

    color: #8d8d8d;
}


.wd-services-eyebrow span {
    width: 36px;
    height: 2px;

    background: #dc0005;
}


.wd-services-head h3 {
    margin: 0;

    max-width: 900px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(42px, 5.1vw, 88px);

    line-height: .98;

    font-weight: 700;

    letter-spacing:
        clamp(-4px, -.25vw, -2px);

    color: #111;
}


.wd-services-head h3 span {
    color: #dc0005;
}


.wd-services-head-right {
    padding-bottom: 8px;
}


.wd-services-head-right p {
    margin: 0;

    max-width: 470px;

    color: #777;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;

    line-height: 1.8;
}


.wd-services-head-right > a {
    margin-top: 25px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

    color: #111;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.wd-services-head-right > a i {
    color: #dc0005;

    transition:
        transform .3s ease;
}


.wd-services-head-right > a:hover i {
    transform:
        translateX(6px);
}


/* =========================================================
   GRID
========================================================= */

.wd-services-grid {
    display: grid;

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

    border-top:
        1px solid rgba(0, 0, 0, .11);

    border-left:
        1px solid rgba(0, 0, 0, .11);
}


/* =========================================================
   CARD
========================================================= */

.wd-service-card {
    min-height: 480px;

    padding:
        clamp(25px, 2.3vw, 38px);

    position: relative;

    display: flex;

    flex-direction: column;

    background: transparent;

    color: #111;

    text-decoration: none;

    border-right:
        1px solid rgba(0, 0, 0, .11);

    border-bottom:
        1px solid rgba(0, 0, 0, .11);

    overflow: hidden;

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


.wd-service-card::before {
    content: "";

    width: 100%;
    height: 100%;

    position: absolute;

    left: 0;
    bottom: -100%;

    background: #0a0a0a;

    transition:
        bottom .55s
        cubic-bezier(.16, 1, .3, 1);

    z-index: 0;
}


.wd-service-card > * {
    position: relative;

    z-index: 2;
}


.wd-service-card:hover::before {
    bottom: 0;
}


.wd-service-card:hover {
    color: #fff;
}


/* =========================================================
   TOP
========================================================= */

.wd-service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.wd-service-number {
    color: #aaa;

    font-size: 8px;

    letter-spacing: 1.3px;
}


.wd-service-arrow {
    width: 35px;
    height: 35px;

    border:
        1px solid rgba(0, 0, 0, .13);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #888;

    transition:
        all .3s ease;
}


.wd-service-arrow i {
    font-size: 8px;
}


.wd-service-card:hover
.wd-service-arrow {
    border-color:
        rgba(255,255,255,.25);

    background: #dc0005;

    color: #fff;

    transform: rotate(45deg);
}


/* =========================================================
   ICON
========================================================= */

.wd-service-icon {
    width: 60px;
    height: 60px;

    margin-top:
        clamp(55px, 5vw, 80px);

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(220, 0, 5, .07);

    color: #dc0005;

    font-size: 18px;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}


.wd-service-card:hover
.wd-service-icon {
    background: #dc0005;

    color: #fff;

    transform: translateY(-5px);
}


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

.wd-service-content {
    margin-top: 30px;
}


.wd-service-content h4 {
    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(23px, 1.7vw, 31px);

    line-height: 1.08;

    letter-spacing: -1.4px;

    font-weight: 700;
}


.wd-service-content p {
    margin:
        20px 0 0;

    max-width: 285px;

    color: #888;

    font-size: 10px;

    line-height: 1.8;

    transition:
        color .4s ease;
}


.wd-service-card:hover
.wd-service-content p {
    color: #888;
}


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

.wd-service-bottom {
    margin-top: auto;

    padding-top: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid rgba(0, 0, 0, .09);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    transition:
        border-color .4s ease;
}


.wd-service-bottom i {
    color: #dc0005;

    font-size: 9px;

    transition:
        transform .3s ease;
}


.wd-service-card:hover
.wd-service-bottom {
    border-color:
        rgba(255,255,255,.1);
}


.wd-service-card:hover
.wd-service-bottom i {
    transform: translateX(6px);
}


/* =========================================================
   ALT ALAN
========================================================= */

.wd-services-footer {
    margin-top: 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.wd-services-neturk {
    display: flex;

    align-items: center;

    gap: 14px;
}


.wd-services-neturk-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #dc0005;

    color: #fff;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size: 16px;
}


.wd-services-neturk > div {
    display: flex;

    flex-direction: column;
}


.wd-services-neturk small {
    margin-bottom: 4px;

    color: #aaa;

    font-size: 6px;

    letter-spacing: 1.5px;
}


.wd-services-neturk strong {
    font-size: 11px;

    font-weight: 700;
}


.wd-services-footer > p {
    margin: 0;

    max-width: 360px;

    color: #999;

    font-size: 9px;

    line-height: 1.7;

    text-align: right;
}


/* =========================================================
   1250 PX
========================================================= */

@media(max-width:1250px) {

    .wd-services-inner {
        width:
            calc(100% - 70px);
    }


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


    .wd-service-card {
        min-height: 430px;
    }


    .wd-service-icon {
        margin-top: 45px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px) {

    .wd-services-inner {
        width:
            calc(100% - 44px);

        padding:
            75px 0;
    }


    .wd-services-head {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 50px;
    }


    .wd-services-head h3 {
        max-width: 650px;

        font-size:
            clamp(43px, 8vw, 65px);
    }


    .wd-services-head-right p {
        max-width: 550px;
    }


    .wd-services-footer {
        align-items: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-services-inner {
        width:
            calc(100% - 30px);

        padding:
            62px 0;
    }


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


    .wd-services-eyebrow {
        margin-bottom: 17px;

        font-size: 6px;

        letter-spacing: 1.5px;
    }


    .wd-services-eyebrow span {
        width: 23px;
    }


    .wd-services-head {
        margin-bottom: 38px;

        gap: 22px;
    }


    .wd-services-head h3 {
        font-size:
            clamp(36px, 11vw, 52px);

        letter-spacing: -2.4px;
    }


    .wd-services-head-right p {
        font-size: 10px;

        line-height: 1.7;
    }


    .wd-services-head-right > a {
        margin-top: 18px;

        font-size: 7px;
    }


    /* GRID */

    .wd-services-grid {
        grid-template-columns: 1fr;
    }


    .wd-service-card {
        min-height: 340px;

        padding: 22px;
    }


    .wd-service-icon {
        width: 48px;
        height: 48px;

        margin-top: 30px;

        font-size: 14px;
    }


    .wd-service-content {
        margin-top: 23px;
    }


    .wd-service-content h4 {
        font-size: 25px;

        line-height: 1.05;
    }


    .wd-service-content p {
        margin-top: 13px;

        max-width: 310px;

        font-size: 9px;
    }


    .wd-service-bottom {
        padding-top: 22px;

        font-size: 7px;
    }


    /* FOOTER */

    .wd-services-footer {
        margin-top: 32px;

        flex-direction: column;

        gap: 20px;
    }


    .wd-services-footer > p {
        max-width: 290px;

        text-align: left;
    }

}

/* =========================================================
   NETÜRK GÜVENCESİYLE
========================================================= */

.wd-trust {
    width: 100%;

    position: relative;

    overflow: hidden;

    background: #0a0a0a;

    color: #fff;
}


.wd-trust-inner {
    width: calc(100% - 110px);
    max-width: 1680px;

    margin: auto;

    padding:
        clamp(85px, 8vw, 130px)
        0;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(500px, 1.18fr);

    gap:
        clamp(70px, 9vw, 150px);

    position: relative;

    z-index: 3;
}


/* =========================================================
   SOL
========================================================= */

.wd-trust-left {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    justify-content: center;
}


.wd-trust-eyebrow {
    margin-bottom: 24px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #777;

    font-family: "Manrope", sans-serif;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;
}


.wd-trust-eyebrow span {
    width: 34px;
    height: 2px;

    background: #dc0005;
}


.wd-trust-left h3 {
    margin: 0;

    max-width: 650px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(40px, 4.6vw, 76px);

    line-height: 1;

    letter-spacing:
        clamp(-4px, -.25vw, -2px);

    font-weight: 700;
}


.wd-trust-left h3 span {
    display: block;

    color: #dc0005;
}


.wd-trust-left > p {
    margin:
        30px 0 0;

    max-width: 520px;

    color: #888;

    font-size:
        clamp(10px, .85vw, 13px);

    line-height: 1.85;
}


.wd-trust-link {
    margin-top: 32px;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #fff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;
}


.wd-trust-link i {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #dc0005;

    font-size: 8px;

    transition:
        transform .3s ease;
}


.wd-trust-link:hover {
    color: #fff;
}


.wd-trust-link:hover i {
    transform:
        translate(4px, -4px);
}


/* =========================================================
   SAĞ GRID
========================================================= */

.wd-trust-right {
    display: grid;

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

    border-top:
        1px solid rgba(255,255,255,.11);

    border-left:
        1px solid rgba(255,255,255,.11);
}


/* =========================================================
   ITEM
========================================================= */

.wd-trust-item {
    min-height: 245px;

    padding:
        clamp(23px, 2.4vw, 38px);

    position: relative;

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

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

    transition:
        background .35s ease;
}


.wd-trust-item:hover {
    background: #111;
}


.wd-trust-number {
    position: absolute;

    right: 20px;
    top: 18px;

    color: #444;

    font-size: 7px;

    letter-spacing: 1px;
}


.wd-trust-icon {
    width: 46px;
    height: 46px;

    margin-bottom: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(220,0,5,.1);

    color: #dc0005;

    font-size: 14px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.wd-trust-item:hover
.wd-trust-icon {
    background: #dc0005;

    color: #fff;

    transform: translateY(-4px);
}


.wd-trust-item-content strong {
    display: block;

    color: #fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(15px, 1.25vw, 20px);

    font-weight: 600;

    letter-spacing: -.6px;
}


.wd-trust-item-content p {
    margin:
        11px 0 0;

    max-width: 260px;

    color: #727272;

    font-size: 9px;

    line-height: 1.75;
}


/* =========================================================
   BACKGROUND BRAND
========================================================= */

.wd-trust-brand {
    position: absolute;

    left: -1.5vw;
    bottom: -4vw;

    pointer-events: none;

    user-select: none;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(120px, 18vw, 330px);

    line-height: .75;

    letter-spacing:
        clamp(-17px, -1vw, -8px);

    color:
        rgba(255,255,255,.017);
}


.wd-trust-brand span {
    color:
        rgba(220,0,5,.035);
}


/* =========================================================
   1100 PX
========================================================= */

@media(max-width:1100px) {

    .wd-trust-inner {
        width:
            calc(100% - 70px);

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .wd-trust-left {
        max-width: 750px;
    }


    .wd-trust-left h3 {
        max-width: 750px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:750px) {

    .wd-trust-inner {
        width:
            calc(100% - 42px);

        padding:
            75px 0;
    }


    .wd-trust-left h3 {
        font-size:
            clamp(39px, 8.5vw, 60px);
    }


    .wd-trust-right {
        grid-template-columns: 1fr 1fr;
    }


    .wd-trust-item {
        min-height: 215px;

        padding: 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px) {

    .wd-trust-inner {
        width:
            calc(100% - 30px);

        padding:
            62px 0;

        gap: 43px;
    }


    .wd-trust-eyebrow {
        margin-bottom: 18px;

        font-size: 5.7px;

        letter-spacing: 1.4px;
    }


    .wd-trust-eyebrow span {
        width: 23px;
    }


    .wd-trust-left h3 {
        font-size:
            clamp(36px, 11vw, 49px);

        letter-spacing: -2.4px;
    }


    .wd-trust-left > p {
        margin-top: 22px;

        font-size: 10px;

        line-height: 1.7;
    }


    .wd-trust-link {
        margin-top: 24px;

        font-size: 7px;
    }


    /* CARDS */

    .wd-trust-right {
        grid-template-columns: 1fr;
    }


    .wd-trust-item {
        min-height: auto;

        padding: 22px;

        display: grid;

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

        gap: 17px;

        align-items: center;
    }


    .wd-trust-icon {
        width: 42px;
        height: 42px;

        margin: 0;

        font-size: 12px;
    }


    .wd-trust-item-content strong {
        font-size: 15px;
    }


    .wd-trust-item-content p {
        margin-top: 6px;

        max-width: 270px;

        font-size: 8px;
    }


    .wd-trust-number {
        top: 11px;
        right: 13px;

        font-size: 5px;
    }


    .wd-trust-brand {
        display: none;
    }

}

/* =========================================================
   REFERANSLAR
========================================================= */

.wd-reference {
    width: 100%;
    overflow: hidden;

    background: #f6f6f4;

    color: #101010;
}


.wd-reference-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(80px, 7vw, 120px)
        0;
}


/* =========================================================
   HEADER
========================================================= */

.wd-reference-header {
    margin-bottom: 60px;

    display: grid;

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

    align-items: end;

    gap: 70px;
}


.wd-reference-eyebrow {
    margin-bottom: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #777;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.7px;
}


.wd-reference-eyebrow > span {
    width: 34px;
    height: 2px;

    flex-shrink: 0;

    background: #dc0005;
}


.wd-reference-header h3 {
    margin: 0;

    max-width: 900px;

    font-family: "Manrope", sans-serif;

    font-size: clamp(46px, 5vw, 78px);

    line-height: 1;

    letter-spacing: -3.5px;

    font-weight: 700;
}


.wd-reference-header h3 > span {
    display: block;

    margin-top: 5px;

    color: #dc0005;
}


.wd-reference-intro p {
    margin: 0;

    color: #696969;

    font-size: 15px;

    line-height: 1.75;
}


.wd-reference-intro > a {
    margin-top: 25px;

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

    gap: 13px;

    color: #111;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.wd-reference-intro > a i {
    color: #dc0005;

    transition: transform .3s ease;
}


.wd-reference-intro > a:hover i {
    transform: translateX(6px);
}


/* =========================================================
   GRID
========================================================= */

.wd-reference-grid {
    display: grid;

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

    gap:
        clamp(28px, 2.4vw, 40px)
        clamp(22px, 2vw, 32px);
}


/* =========================================================
   CARD
========================================================= */

.wd-reference-card {
    min-width: 0;

    background: #fff;

    border: 1px solid rgba(0,0,0,.08);

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.wd-reference-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(220,0,5,.18);

    box-shadow:
        0 25px 60px rgba(0,0,0,.09);
}


/* =========================================================
   IMAGE
========================================================= */

.wd-reference-image {
    width: 100%;

    aspect-ratio: 1 / .92;

    position: relative;

    overflow: hidden;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #eeeeec,
            #f8f8f7
        );
}


.wd-reference-image::before {
    content: "";

    position: absolute;

    width: 70%;
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border:
        1px solid rgba(220,0,5,.07);

    background:
        rgba(220,0,5,.025);
}


.wd-reference-image img {
    width: 100%;
    height: 100%;

    padding:
        clamp(15px, 1.5vw, 26px);

    position: relative;

    z-index: 2;

    display: block;

    object-fit: contain;

    transition:
        transform .75s
        cubic-bezier(.16,1,.3,1);
}


.wd-reference-card:hover
.wd-reference-image img {
    transform: scale(1.04);
}


/* =========================================================
   NUMBER
========================================================= */

.wd-reference-number {
    min-width: 44px;
    height: 44px;

    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 4;

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

    background: #fff;

    color: #777;

    font-size: 12px;

    font-weight: 700;

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


/* =========================================================
   ACTION
========================================================= */

.wd-reference-image-action {
    width: 52px;
    height: 52px;

    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 5;

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

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 13px;

    transform: rotate(-45deg);

    transition:
        background .3s ease,
        transform .4s cubic-bezier(.16,1,.3,1);
}


.wd-reference-card:hover
.wd-reference-image-action {
    background: #dc0005;

    transform: rotate(0);
}


/* =========================================================
   CARD BODY
========================================================= */

.wd-reference-card-body {
    padding: 25px 25px 23px;
}


/* CATEGORY */

.wd-reference-category {
    margin-bottom: 17px;

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

    gap: 15px;

    color: #8b8b8b;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .8px;
}


/* =========================================================
   TITLE
========================================================= */

.wd-reference-card-title {
    min-height: 94px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.wd-reference-card-title > div {
    min-width: 0;
}


.wd-reference-card-title h4 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(23px, 1.6vw, 30px);

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1.2px;
}


.wd-reference-card-title p {
    margin: 10px 0 0;

    max-width: 320px;

    color: #777;

    font-size: 13px;

    line-height: 1.6;
}


.wd-reference-card-title > a {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

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

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

    color: #dc0005;

    text-decoration: none;

    font-size: 12px;

    transition:
        all .3s ease;
}


.wd-reference-card:hover
.wd-reference-card-title > a {
    background: #dc0005;

    border-color: #dc0005;

    color: #fff;
}


/* =========================================================
   TAGS
========================================================= */

.wd-reference-tags {
    margin-top: 23px;

    padding-top: 18px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    border-top:
        1px solid rgba(0,0,0,.08);
}


.wd-reference-tags span {
    min-height: 30px;

    padding: 0 11px;

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

    background: #f5f5f3;

    color: #666;

    font-size: 11px;

    font-weight: 500;
}


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

.wd-reference-footer {
    margin-top: 65px;

    padding-top: 28px;

    border-top:
        1px solid rgba(0,0,0,.12);

    display: flex;

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

    gap: 30px;
}


.wd-reference-neturk {
    display: flex;

    align-items: center;

    gap: 10px;
}


.wd-reference-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #dc0005;

    box-shadow:
        0 0 0 5px
        rgba(220,0,5,.09);
}


.wd-reference-neturk p {
    margin: 0;

    color: #858585;

    font-size: 13px;
}


.wd-reference-neturk strong {
    color: #111;
}


.wd-reference-all {
    min-height: 54px;

    padding-left: 20px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: #111;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        background .3s ease;
}


.wd-reference-all > i {
    width: 54px;
    height: 54px;

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

    background: #dc0005;

    color: #fff;

    transition:
        transform .3s ease;
}


.wd-reference-all:hover {
    background: #dc0005;

    color: #fff;
}


.wd-reference-all:hover > i {
    transform: translateX(3px);
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1250px) {

    .wd-reference-wrap {
        width: calc(100% - 70px);
    }


    .wd-reference-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .wd-reference-card-title {
        min-height: 90px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px) {

    .wd-reference-wrap {
        width: calc(100% - 44px);

        padding:
            75px 0;
    }


    .wd-reference-header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 45px;
    }


    .wd-reference-title-area {
        max-width: 700px;
    }


    .wd-reference-intro {
        max-width: 540px;
    }


    .wd-reference-header h3 {
        font-size:
            clamp(42px, 8vw, 64px);
    }


    .wd-reference-footer {
        align-items: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-reference-wrap {
        width: calc(100% - 30px);

        padding:
            62px 0;
    }


    /* HEADER */

    .wd-reference-header {
        margin-bottom: 35px;
    }


    .wd-reference-eyebrow {
        margin-bottom: 15px;

        font-size: 10px;

        letter-spacing: 1.2px;
    }


    .wd-reference-eyebrow > span {
        width: 24px;
    }


    .wd-reference-header h3 {
        font-size:
            clamp(36px, 10.5vw, 49px);

        letter-spacing: -2.3px;
    }


    .wd-reference-intro p {
        font-size: 13px;

        line-height: 1.7;
    }


    .wd-reference-intro > a {
        margin-top: 18px;

        font-size: 12px;
    }


    /* GRID */

    .wd-reference-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .wd-reference-image {
        aspect-ratio: 1 / .95;
    }


    .wd-reference-image img {
        padding: 13px;
    }


    .wd-reference-number {
        min-width: 38px;
        height: 38px;

        left: 13px;
        top: 13px;

        font-size: 11px;
    }


    .wd-reference-image-action {
        width: 46px;
        height: 46px;

        right: 13px;
        bottom: 13px;
    }


    .wd-reference-card-body {
        padding:
            21px 18px 19px;
    }


    .wd-reference-category {
        margin-bottom: 13px;

        font-size: 10px;
    }


    .wd-reference-card-title {
        min-height: auto;
    }


    .wd-reference-card-title h4 {
        font-size: 24px;
    }


    .wd-reference-card-title p {
        font-size: 12px;
    }


    .wd-reference-tags {
        margin-top: 20px;

        padding-top: 15px;
    }


    .wd-reference-tags span {
        min-height: 28px;

        font-size: 10px;
    }


    /* FOOTER */

    .wd-reference-footer {
        margin-top: 45px;

        flex-direction: column;

        gap: 24px;
    }


    .wd-reference-neturk p {
        font-size: 12px;
    }


    .wd-reference-all {
        width: 100%;

        justify-content: space-between;
    }

}

/* =========================================================
   ÇALIŞMA SÜRECİ
========================================================= */

.wd-process {
    width: 100%;

    position: relative;

    overflow: hidden;

    background: #0a0a0a;

    color: #fff;
}


.wd-process-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(80px, 7vw, 120px)
        0;
}


/* =========================================================
   HEADER
========================================================= */

.wd-process-header {
    margin-bottom: 60px;

    display: grid;

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

    gap: 70px;

    align-items: end;
}


.wd-process-eyebrow {
    margin-bottom: 20px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #777;

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

    letter-spacing: 1.7px;
}


.wd-process-eyebrow > span {
    width: 34px;
    height: 2px;

    flex-shrink: 0;

    background: #dc0005;
}


.wd-process-header h3 {
    margin: 0;

    max-width: 920px;

    font-size: clamp(46px, 5vw, 78px);

    line-height: 1;

    letter-spacing: -3.5px;

    font-weight: 700;
}


.wd-process-header h3 > span {
    display: block;

    margin-top: 4px;

    color: #dc0005;
}


.wd-process-intro p {
    margin: 0;

    color: #8b8b8b;

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   GRID
========================================================= */

.wd-process-grid {
    position: relative;

    display: grid;

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

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

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


/* =========================================================
   CARD
========================================================= */

.wd-process-card {
    min-height: 330px;

    padding:
        clamp(25px, 2.3vw, 36px);

    position: relative;

    display: flex;

    flex-direction: column;

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

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

    transition:
        background .35s ease;
}


.wd-process-card:hover {
    background: #111;
}


/* =========================================================
   TOP
========================================================= */

.wd-process-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.wd-process-number {
    color: #555;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


.wd-process-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    background:
        rgba(220,0,5,.1);

    color: #dc0005;

    font-size: 15px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.wd-process-card:hover
.wd-process-icon {
    background: #dc0005;

    color: #fff;

    transform: translateY(-4px);
}


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

.wd-process-content {
    margin-top: auto;

    padding-top: 70px;
}


.wd-process-content h4 {
    margin: 0;

    font-size:
        clamp(25px, 1.8vw, 31px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}


.wd-process-content p {
    margin: 13px 0 0;

    max-width: 280px;

    color: #7c7c7c;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   RED LINE
========================================================= */

.wd-process-line {
    width: 100%;

    height: 2px;

    margin-top: 27px;

    overflow: hidden;

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


.wd-process-line span {
    display: block;

    width: 0;
    height: 100%;

    background: #dc0005;

    transition:
        width .55s
        cubic-bezier(.16,1,.3,1);
}


.wd-process-card:hover
.wd-process-line span {
    width: 100%;
}


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

.wd-process-footer {
    margin-top: 42px;

    padding-top: 27px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.wd-process-footer-left {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #777;

    font-size: 12px;
}


.wd-process-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #dc0005;

    box-shadow:
        0 0 0 5px
        rgba(220,0,5,.09);
}


.wd-process-footer-left i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #444;
}


/* BUTTON */

.wd-process-footer > a {
    min-height: 54px;

    padding-left: 21px;

    display: flex;

    align-items: center;

    gap: 22px;

    background: #fff;

    color: #111;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

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


.wd-process-footer > a > span {
    width: 54px;
    height: 54px;

    display: flex;

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

    background: #dc0005;

    color: #fff;
}


.wd-process-footer > a:hover {
    background: #dc0005;

    color: #fff;
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px) {

    .wd-process-wrap {
        width:
            calc(100% - 70px);
    }


    .wd-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .wd-process-card {
        min-height: 290px;
    }


    .wd-process-content {
        padding-top: 50px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:800px) {

    .wd-process-wrap {
        width:
            calc(100% - 44px);

        padding:
            75px 0;
    }


    .wd-process-header {
        grid-template-columns: 1fr;

        gap: 26px;

        margin-bottom: 45px;
    }


    .wd-process-header h3 {
        font-size:
            clamp(42px, 8vw, 62px);
    }


    .wd-process-intro {
        max-width: 540px;
    }


    .wd-process-footer {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-process-wrap {
        width:
            calc(100% - 30px);

        padding:
            62px 0;
    }


    /* HEADER */

    .wd-process-header {
        margin-bottom: 34px;
    }


    .wd-process-eyebrow {
        margin-bottom: 15px;

        font-size: 10px;

        letter-spacing: 1.2px;
    }


    .wd-process-eyebrow > span {
        width: 24px;
    }


    .wd-process-header h3 {
        font-size:
            clamp(36px, 10.5vw, 49px);

        letter-spacing: -2.3px;
    }


    .wd-process-intro p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* GRID */

    .wd-process-grid {
        grid-template-columns: 1fr;
    }


    .wd-process-card {
        min-height: auto;

        padding: 22px;
    }


    .wd-process-card-top {
        margin-bottom: 28px;
    }


    .wd-process-number {
        font-size: 11px;
    }


    .wd-process-icon {
        width: 43px;
        height: 43px;

        font-size: 13px;
    }


    .wd-process-content {
        padding-top: 0;
    }


    .wd-process-content h4 {
        font-size: 24px;
    }


    .wd-process-content p {
        margin-top: 9px;

        max-width: 320px;

        font-size: 12px;
    }


    .wd-process-line {
        margin-top: 21px;
    }


    /* FOOTER */

    .wd-process-footer {
        margin-top: 32px;

        gap: 22px;
    }


    .wd-process-footer-left {
        width: 100%;

        flex-wrap: wrap;

        font-size: 11px;
    }


    .wd-process-footer > a {
        width: 100%;

        justify-content: space-between;
    }

}

/* =========================================================
   FINAL CTA
========================================================= */

.wd-final-cta {
    width: 100%;
    position: relative;
    overflow: hidden;

    background: #0a0a0a;
    color: #fff;
}


/* =========================================================
   BACKGROUND TEXT
========================================================= */

.wd-final-cta-bg {
    position: absolute;

    right: -3vw;
    bottom: -6vw;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(180px, 28vw, 520px);

    line-height: .7;

    letter-spacing: -25px;

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

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   WRAP
========================================================= */

.wd-final-cta-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(80px, 8vw, 130px)
        0
        45px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   TOP
========================================================= */

.wd-final-cta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(45px, 5vw, 70px);
}


.wd-final-cta-eyebrow,
.wd-final-cta-brand {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #777;

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

    letter-spacing: 1.7px;
}


.wd-final-cta-eyebrow > span {
    width: 34px;
    height: 2px;

    background: #dc0005;
}


.wd-final-cta-brand > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #dc0005;

    box-shadow:
        0 0 0 5px
        rgba(220,0,5,.10);
}


/* =========================================================
   MAIN
========================================================= */

.wd-final-cta-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .55fr);

    gap:
        clamp(50px, 7vw, 120px);

    align-items: end;
}


/* =========================================================
   TITLE
========================================================= */

.wd-final-cta-title h3 {
    margin: 0;

    max-width: 1000px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(58px, 7vw, 115px);

    line-height: .94;

    letter-spacing:
        clamp(-6px, -.45vw, -3px);

    font-weight: 700;
}


.wd-final-cta-title h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.5px rgba(255,255,255,.7);

    transition:
        color .35s ease,
        -webkit-text-stroke .35s ease;
}


.wd-final-cta:hover
.wd-final-cta-title h3 span {
    color: #dc0005;

    -webkit-text-stroke:
        1.5px #dc0005;
}


/* =========================================================
   SIDE
========================================================= */

.wd-final-cta-side {
    padding-bottom: 10px;
}


.wd-final-cta-side p {
    margin: 0;

    max-width: 430px;

    color: #8b8b8b;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   BUTTON
========================================================= */

.wd-final-cta-button {
    width: fit-content;

    min-height: 62px;

    margin-top: 30px;

    display: flex;
    align-items: center;

    background: #dc0005;

    color: #fff;

    text-decoration: none;

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

    transition:
        background .3s ease;
}


.wd-final-cta-button > span {
    padding: 0 26px;
}


.wd-final-cta-button > i {
    width: 62px;
    height: 62px;

    border-left:
        1px solid rgba(255,255,255,.22);

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

    font-size: 13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.wd-final-cta-button:hover {
    color: #fff;

    background: #ef0005;
}


.wd-final-cta-button:hover > i {
    background: #fff;

    color: #dc0005;

    transform: translate(3px,-3px);
}


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

.wd-final-cta-bottom {
    margin-top:
        clamp(70px, 7vw, 110px);

    padding-top: 30px;

    border-top:
        1px solid rgba(255,255,255,.11);

    display: grid;

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

    gap:
        clamp(20px, 2vw, 35px);

    align-items: center;
}


/* =========================================================
   FEATURE
========================================================= */

.wd-final-cta-feature {
    display: flex;

    align-items: center;

    gap: 14px;
}


.wd-final-cta-feature-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

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

    background:
        rgba(220,0,5,.1);

    color: #dc0005;

    font-size: 14px;
}


.wd-final-cta-feature > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.wd-final-cta-feature strong {
    color: #fff;

    font-size: 13px;

    font-weight: 700;
}


.wd-final-cta-feature > div > span {
    color: #666;

    font-size: 11px;
}


.wd-final-cta-separator {
    width: 1px;
    height: 35px;

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


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px) {

    .wd-final-cta-wrap {
        width:
            calc(100% - 70px);
    }


    .wd-final-cta-main {
        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.55fr);

        gap: 55px;
    }


    .wd-final-cta-title h3 {
        font-size:
            clamp(55px, 7vw, 90px);
    }


    .wd-final-cta-bottom {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px;
    }


    .wd-final-cta-separator {
        display: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:850px) {

    .wd-final-cta-wrap {
        width:
            calc(100% - 44px);

        padding-top: 80px;
    }


    .wd-final-cta-top {
        margin-bottom: 45px;
    }


    .wd-final-cta-main {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .wd-final-cta-title h3 {
        max-width: 750px;

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


    .wd-final-cta-side {
        max-width: 520px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-final-cta-wrap {
        width:
            calc(100% - 30px);

        padding:
            62px 0
            30px;
    }


    .wd-final-cta-bg {
        display: none;
    }


    /* TOP */

    .wd-final-cta-top {
        margin-bottom: 32px;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .wd-final-cta-eyebrow,
    .wd-final-cta-brand {
        font-size: 10px;

        letter-spacing: 1.2px;
    }


    .wd-final-cta-eyebrow > span {
        width: 24px;
    }


    /* TITLE */

    .wd-final-cta-title h3 {
        font-size:
            clamp(44px, 12vw, 61px);

        line-height: .96;

        letter-spacing: -3px;
    }


    .wd-final-cta-title h3 span {
        -webkit-text-stroke:
            1px rgba(255,255,255,.7);
    }


    /* TEXT */

    .wd-final-cta-side p {
        max-width: 390px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* BUTTON */

    .wd-final-cta-button {
        width: 100%;

        min-height: 56px;

        justify-content: space-between;

        margin-top: 24px;

        font-size: 13px;
    }


    .wd-final-cta-button > span {
        padding: 0 20px;
    }


    .wd-final-cta-button > i {
        width: 56px;
        height: 56px;
    }


    /* FEATURES */

    .wd-final-cta-bottom {
        margin-top: 55px;

        grid-template-columns: 1fr;

        gap: 0;

        padding-top: 0;

        border-top:
            1px solid rgba(255,255,255,.11);
    }


    .wd-final-cta-feature {
        min-height: 76px;

        padding: 15px 0;

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


    .wd-final-cta-feature-icon {
        width: 40px;
        height: 40px;

        font-size: 12px;
    }


    .wd-final-cta-feature strong {
        font-size: 12px;
    }


    .wd-final-cta-feature > div > span {
        font-size: 10px;
    }

}


/* =========================================================
   LIGHT PREMIUM FOOTER
========================================================= */

.wd-footer {
    width: 100%;
    overflow: hidden;

    background: #f7f7f5;

    color: #111;

    border-top: 1px solid rgba(0,0,0,.08);
}


.wd-footer-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(70px, 6vw, 100px)
        0
        28px;
}


/* =========================================================
   TOP
========================================================= */

.wd-footer-top {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.3fr)
        minmax(170px, .55fr)
        minmax(150px, .45fr)
        minmax(260px, .8fr);

    gap:
        clamp(40px, 5vw, 85px);

    align-items: start;
}


/* =========================================================
   BRAND
========================================================= */

.wd-footer-brand {
    max-width: 450px;
}


.wd-footer-logo {
    display: inline-block;

    color: #111;

    text-decoration: none;

    font-family: "Manrope", sans-serif;

    font-size: clamp(30px, 2.5vw, 40px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


.wd-footer-logo span {
    color: #dc0005;
}


.wd-footer-brand > p {
    margin: 25px 0 0;

    max-width: 390px;

    color: #757575;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   PROJECT CTA
========================================================= */

.wd-footer-project {
    margin-top: 30px;

    min-height: 50px;

    padding: 0 6px 0 18px;

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    background: #111;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        background .3s ease,
        transform .3s ease;
}


.wd-footer-project > i {
    width: 38px;
    height: 38px;

    display: flex;

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

    background: #dc0005;

    color: #fff;

    font-size: 11px;

    transition:
        transform .3s ease;
}


.wd-footer-project:hover {
    background: #dc0005;

    color: #fff;

    transform: translateY(-2px);
}


.wd-footer-project:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   COLUMNS
========================================================= */

.wd-footer-column-title {
    display: block;

    margin-bottom: 24px;

    color: #9b9b9b;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.wd-footer-column nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}


.wd-footer-column nav a {
    position: relative;

    color: #4c4c4c;

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    transition:
        color .25s ease,
        transform .25s ease;
}


.wd-footer-column nav a::before {
    content: "";

    width: 0;
    height: 1px;

    position: absolute;

    left: 0;
    bottom: -4px;

    background: #dc0005;

    transition: width .3s ease;
}


.wd-footer-column nav a:hover {
    color: #dc0005;

    transform: translateX(3px);
}


.wd-footer-column nav a:hover::before {
    width: 100%;
}


/* =========================================================
   NETURK CARD
========================================================= */

.wd-footer-neturk-card {
    min-height: 230px;

    padding: 25px;

    position: relative;

    display: flex;

    flex-direction: column;

    background: #fff;

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

    color: #111;

    text-decoration: none;

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

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


.wd-footer-neturk-card:hover {
    color: #111;

    border-color: rgba(220,0,5,.28);

    transform: translateY(-5px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.08);
}


.wd-footer-neturk-head {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #999;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.wd-footer-neturk-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #dc0005;

    box-shadow:
        0 0 0 5px
        rgba(220,0,5,.08);
}


.wd-footer-neturk-card > strong {
    margin-top: 29px;

    font-family: "Manrope", sans-serif;

    font-size: 31px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #111;
}


.wd-footer-neturk-card > p {
    margin:
        15px 0 25px;

    max-width: 270px;

    color: #757575;

    font-size: 12px;

    line-height: 1.65;
}


.wd-footer-neturk-bottom {
    margin-top: auto;

    padding-top: 17px;

    border-top: 1px solid rgba(0,0,0,.08);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    font-size: 12px;

    font-weight: 600;
}


.wd-footer-neturk-bottom i {
    color: #dc0005;

    font-size: 10px;

    transition: transform .3s ease;
}


.wd-footer-neturk-card:hover
.wd-footer-neturk-bottom i {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   LINE
========================================================= */

.wd-footer-line {
    width: 100%;
    height: 1px;

    margin-top:
        clamp(65px, 6vw, 95px);

    background: rgba(0,0,0,.09);
}


/* =========================================================
   BIG BRAND
========================================================= */

.wd-footer-big-brand {
    padding:
        clamp(35px, 4vw, 60px)
        0;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    border-bottom: 1px solid rgba(0,0,0,.09);
}


.wd-footer-big-text {
    font-family: "Archivo Black", sans-serif;

    font-size:
        clamp(70px, 10.5vw, 190px);

    line-height: .8;

    letter-spacing:
        clamp(-10px, -.7vw, -5px);

    color: #111;
}


.wd-footer-big-text span {
    color: #dc0005;
}


.wd-footer-big-index {
    padding-bottom: 7px;

    color: #aaa;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;
}


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

.wd-footer-bottom {
    padding-top: 26px;

    display: grid;

    grid-template-columns:
        1fr   1fr;

    align-items: center;

    gap: 30px;
}


.wd-footer-copyright {
    color: #888;

    font-size: 11px;
}


.wd-footer-bottom-links {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;
}


.wd-footer-bottom-links a {
    color: #777;

    text-decoration: none;

    font-size: 11px;

    transition: color .25s ease;
}


.wd-footer-bottom-links a:hover {
    color: #dc0005;
}


.wd-footer-neturk-signature {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    text-decoration: none;

    font-size: 11px;

    color: #888;
}


.wd-footer-neturk-signature strong {
    color: #111;

    font-size: 12px;

    letter-spacing: .5px;
}


.wd-footer-neturk-signature:hover {
    color: #dc0005;
}


/* =========================================================
   1200 PX
========================================================= */

@media(max-width:1200px) {

    .wd-footer-wrap {
        width: calc(100% - 70px);
    }


    .wd-footer-top {
        grid-template-columns:
            1.2fr
            .7fr
            .7fr;

        gap:
            50px 35px;
    }


    .wd-footer-neturk {
        grid-column: 1 / -1;
    }


    .wd-footer-neturk-card {
        min-height: auto;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 15px 35px;
    }


    .wd-footer-neturk-card > strong {
        margin-top: 20px;
    }


    .wd-footer-neturk-card > p {
        margin: 20px 0 0;
    }


    .wd-footer-neturk-bottom {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:800px) {

    .wd-footer-wrap {
        width: calc(100% - 44px);

        padding-top: 75px;
    }


    .wd-footer-top {
        grid-template-columns:
            1fr 1fr;

        gap:
            50px 35px;
    }


    .wd-footer-brand {
        grid-column: 1 / -1;
    }


    .wd-footer-neturk {
        grid-column: 1 / -1;
    }


    .wd-footer-big-text {
        font-size:
            clamp(68px, 14vw, 120px);
    }


    .wd-footer-bottom {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .wd-footer-bottom-links {
        justify-content: flex-start;

        flex-wrap: wrap;
    }


    .wd-footer-neturk-signature {
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-footer-wrap {
        width: calc(100% - 30px);

        padding:
            60px 0
            24px;
    }


    .wd-footer-top {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .wd-footer-brand {
        grid-column: auto;
    }


    .wd-footer-logo {
        font-size: 30px;
    }


    .wd-footer-brand > p {
        margin-top: 19px;

        max-width: 350px;

        font-size: 13px;
    }


    .wd-footer-project {
        width: 100%;

        min-height: 52px;

        justify-content: space-between;
    }


    .wd-footer-column-title {
        margin-bottom: 18px;

        font-size: 10px;
    }


    .wd-footer-column nav {
        gap: 13px;
    }


    .wd-footer-column nav a {
        font-size: 13px;
    }


    .wd-footer-neturk {
        grid-column: auto;
    }


    .wd-footer-neturk-card {
        min-height: 225px;

        padding: 21px;

        display: flex;
    }


    .wd-footer-neturk-card > strong {
        font-size: 27px;
    }


    .wd-footer-neturk-card > p {
        margin:
            14px 0 24px;
    }


    .wd-footer-line {
        margin-top: 55px;
    }


    .wd-footer-big-brand {
        padding:
            38px 0 32px;

        align-items: flex-end;
    }


    .wd-footer-big-text {
        font-size:
            clamp(54px, 16vw, 83px);

        letter-spacing: -4px;
    }


    .wd-footer-big-index {
        font-size: 9px;
    }


    .wd-footer-bottom {
        padding-top: 22px;

        gap: 16px;
    }


    .wd-footer-copyright,
    .wd-footer-bottom-links a,
    .wd-footer-neturk-signature {
        font-size: 10px;
    }


    .wd-footer-bottom-links {
        gap:
            10px 18px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media(max-width:380px) {

    .wd-footer-big-text {
        font-size: 52px;

        letter-spacing: -3px;
    }


    .wd-footer-big-index {
        display: none;
    }

}

/* =========================================================
   BLOG
========================================================= */

.wd-blog {
    width: 100%;
    overflow: hidden;

    background: #ffffff;

    color: #111111;

    border-top: 1px solid rgba(0,0,0,.06);
}


.wd-blog-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(80px, 7vw, 120px)
        0;
}


/* =========================================================
   HEAD
========================================================= */

.wd-blog-head {
    margin-bottom: 55px;

    display: grid;

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

    gap: 70px;

    align-items: end;
}


.wd-blog-eyebrow {
    margin-bottom: 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #858585;

    font-family: "Manrope", sans-serif;

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

    letter-spacing: 1.6px;
}


.wd-blog-eyebrow > span {
    width: 34px;
    height: 2px;

    flex-shrink: 0;

    background: #dc0005;
}


.wd-blog-head h3 {
    margin: 0;

    max-width: 900px;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(44px, 5vw, 78px);

    line-height: .98;

    font-weight: 700;

    letter-spacing:
        clamp(-4px, -.3vw, -2px);
}


.wd-blog-head h3 > span {
    display: block;

    color: #dc0005;
}


.wd-blog-intro p {
    margin: 0;

    color: #6f6f6f;

    font-size: 14px;

    line-height: 1.75;
}


.wd-blog-intro > a {
    margin-top: 23px;

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

    gap: 13px;

    color: #111;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}


.wd-blog-intro > a i {
    color: #dc0005;

    transition: transform .3s ease;
}


.wd-blog-intro > a:hover i {
    transform: translateX(6px);
}


/* =========================================================
   GRID
========================================================= */

.wd-blog-grid {
    display: grid;

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

    gap:
        clamp(24px, 2vw, 34px);
}


/* =========================================================
   CARD
========================================================= */

.wd-blog-card {
    min-width: 0;

    background: #f7f7f5;

    border: 1px solid rgba(0,0,0,.07);

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.wd-blog-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(220,0,5,.18);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.08);
}


/* =========================================================
   IMAGE
========================================================= */

.wd-blog-image {
    width: 100%;

    aspect-ratio: 16 / 10;

    position: relative;

    overflow: hidden;

    display: block;

    background: #e9e9e7;
}


.wd-blog-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s
        cubic-bezier(.16,1,.3,1);
}


.wd-blog-card:hover
.wd-blog-image img {
    transform: scale(1.055);
}


.wd-blog-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            transparent 55%
        );
}


/* =========================================================
   CATEGORY
========================================================= */

.wd-blog-category {
    position: absolute;

    left: 18px;
    top: 18px;

    min-height: 32px;

    padding: 0 12px;

    display: flex;
    align-items: center;

    background: #fff;

    color: #222;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;
}


/* =========================================================
   ARROW
========================================================= */

.wd-blog-arrow {
    width: 48px;
    height: 48px;

    position: absolute;

    right: 18px;
    bottom: 18px;

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

    border-radius: 50%;

    background: #dc0005;

    color: #fff;

    font-size: 12px;

    transform: rotate(-45deg);

    transition:
        transform .4s
        cubic-bezier(.16,1,.3,1),
        background .3s ease;
}


.wd-blog-card:hover
.wd-blog-arrow {
    transform: rotate(0);

    background: #111;
}


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

.wd-blog-content {
    padding:
        25px 24px 24px;
}


.wd-blog-meta {
    display: flex;

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

    gap: 15px;

    color: #929292;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .6px;
}


.wd-blog-content h4 {
    margin:
        18px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(22px, 1.6vw, 28px);

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -1px;
}


.wd-blog-content > p {
    margin:
        15px 0 0;

    color: #717171;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   READ LINK
========================================================= */

.wd-blog-read {
    margin-top: 23px;

    padding-top: 18px;

    border-top:
        1px solid rgba(0,0,0,.08);

    display: flex;

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

    gap: 20px;

    color: #111;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;
}


.wd-blog-read i {
    color: #dc0005;

    transition:
        transform .3s ease;
}


.wd-blog-read:hover {
    color: #111;
}


.wd-blog-read:hover i {
    transform:
        translateX(5px);
}


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

.wd-blog-bottom {
    margin-top: 50px;

    padding-top: 25px;

    border-top:
        1px solid rgba(0,0,0,.09);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.wd-blog-bottom-note {
    display: flex;

    align-items: center;

    gap: 12px;
}


.wd-blog-bottom-note > span {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #dc0005;

    box-shadow:
        0 0 0 5px
        rgba(220,0,5,.08);
}


.wd-blog-bottom-note p {
    margin: 0;

    max-width: 390px;

    color: #858585;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   ALL BLOG BUTTON
========================================================= */

.wd-blog-all {
    min-height: 50px;

    padding-left: 19px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: #111;

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        background .3s ease;
}


.wd-blog-all > i {
    width: 50px;
    height: 50px;

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

    background: #dc0005;

    color: #fff;

    transition:
        transform .3s ease;
}


.wd-blog-all:hover {
    background: #dc0005;

    color: #fff;
}


.wd-blog-all:hover > i {
    transform:
        translateX(3px);
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px) {

    .wd-blog-wrap {
        width:
            calc(100% - 70px);
    }


    .wd-blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:800px) {

    .wd-blog-wrap {
        width:
            calc(100% - 44px);

        padding:
            75px 0;
    }


    .wd-blog-head {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 42px;
    }


    .wd-blog-title {
        max-width: 700px;
    }


    .wd-blog-intro {
        max-width: 540px;
    }


    .wd-blog-head h3 {
        font-size:
            clamp(42px, 8vw, 62px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-blog-wrap {
        width:
            calc(100% - 30px);

        padding:
            62px 0;
    }


    /* HEADER */

    .wd-blog-head {
        margin-bottom: 32px;
    }


    .wd-blog-eyebrow {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 1.1px;
    }


    .wd-blog-eyebrow > span {
        width: 24px;
    }


    .wd-blog-head h3 {
        font-size:
            clamp(36px, 10.5vw, 48px);

        letter-spacing: -2.2px;
    }


    .wd-blog-intro p {
        font-size: 13px;
    }


    .wd-blog-intro > a {
        margin-top: 17px;

        font-size: 12px;
    }


    /* GRID */

    .wd-blog-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .wd-blog-content {
        padding:
            21px 18px 20px;
    }


    .wd-blog-category {
        left: 13px;
        top: 13px;

        min-height: 29px;

        padding: 0 10px;

        font-size: 9px;
    }


    .wd-blog-arrow {
        width: 44px;
        height: 44px;

        right: 13px;
        bottom: 13px;
    }


    .wd-blog-meta {
        font-size: 9px;
    }


    .wd-blog-content h4 {
        margin-top: 15px;

        font-size: 23px;
    }


    .wd-blog-content > p {
        font-size: 12px;
    }


    .wd-blog-read {
        font-size: 11px;
    }


    /* BOTTOM */

    .wd-blog-bottom {
        margin-top: 40px;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }


    .wd-blog-bottom-note p {
        font-size: 11px;
    }


    .wd-blog-all {
        width: 100%;

        justify-content: space-between;
    }

}

/* =========================================================
   CATEGORY BREADCRUMB
========================================================= */

.wd-cat-hero {
    width: 100%;
    position: relative;
    overflow: hidden;

    background: #f7f7f5;

    border-bottom: 1px solid rgba(0,0,0,.08);
}


.wd-cat-hero-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding: 90px 0px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.wd-cat-hero-bg {
    position: absolute;

    right: -1vw;
    bottom: -4vw;

    font-family: "Archivo Black", sans-serif;

    font-size: clamp(150px, 21vw, 360px);

    line-height: .7;

    letter-spacing: -18px;

    color: rgba(0,0,0,.022);

    pointer-events: none;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.wd-cat-breadcrumb {
    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(50px, 5vw, 75px);

    font-size: 12px;
}


.wd-cat-breadcrumb a {
    color: #858585;

    text-decoration: none;

    transition: color .25s ease;
}


.wd-cat-breadcrumb a:hover {
    color: #dc0005;
}


.wd-cat-breadcrumb i {
    color: #bbb;

    font-size: 7px;
}


.wd-cat-breadcrumb span {
    color: #111;

    font-weight: 600;
}


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

.wd-cat-hero-content {
    display: grid;

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

    gap: 70px;

    align-items: end;
}


.wd-cat-eyebrow {
    margin-bottom: 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #808080;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.wd-cat-eyebrow > span {
    width: 34px;
    height: 2px;

    background: #dc0005;
}


.wd-cat-hero h1 {
    margin: 0;

    max-width: 100%;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(48px, 5.5vw, 44px);

    line-height: .96;

    letter-spacing:
        clamp(-4px, -.3vw, -2px);

    font-weight: 700;
}


.wd-cat-hero h1 > span {
    display: block;

    color: #dc0005;
}


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

.wd-cat-hero-right {
    padding-bottom: 5px;
}


.wd-cat-index {
    display: block;

    margin-bottom: 17px;

    color: #b1b1b1;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}


.wd-cat-hero-right p {
    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   CATEGORY SECTION
========================================================= */

.wd-category-list {
    width: 100%;

    background: #fff;

    color: #111;
}


.wd-category-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;

    margin: 0 auto;

    padding:
        clamp(70px, 6vw, 100px)
        0
        clamp(80px, 7vw, 120px);
}


/* =========================================================
   CATEGORY HEAD
========================================================= */

.wd-category-head {
    margin-bottom: 45px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;
}


.wd-category-small {
    display: block;

    margin-bottom: 12px;

    color: #999;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.wd-category-head h3 {
    margin: 0;

    max-width: 720px;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(32px, 3.3vw, 52px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 700;
}


.wd-category-head h3 span {
    display: block;

    color: #dc0005;
}


.wd-category-head > p {
    margin: 0;

    max-width: 420px;

    color: #777;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   GRID
========================================================= */

.wd-category-grid {
    display: grid;

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

    border-top: 1px solid rgba(0,0,0,.10);

    border-left: 1px solid rgba(0,0,0,.10);
}


/* =========================================================
   CARD
========================================================= */

.wd-category-card {
    min-height: 390px;

    padding:
        clamp(25px, 2.3vw, 36px);

    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: #111;

    text-decoration: none;

    background: #fff;

    border-right:
        1px solid rgba(0,0,0,.10);

    border-bottom:
        1px solid rgba(0,0,0,.10);

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


.wd-category-card::before {
    content: "";

    position: absolute;

    inset: auto 0 0 0;

    height: 0;

    background: #0c0c0c;

    transition:
        height .55s
        cubic-bezier(.16,1,.3,1);

    z-index: 0;
}


.wd-category-card:hover::before {
    height: 100%;
}


.wd-category-card > * {
    position: relative;

    z-index: 2;
}


.wd-category-card:hover {
    color: #fff;
}


/* =========================================================
   TOP
========================================================= */

.wd-category-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.wd-category-number {
    color: #aaa;

    font-size: 12px;

    font-weight: 700;
}


.wd-category-arrow {
    width: 40px;
    height: 40px;

    border:
        1px solid rgba(0,0,0,.12);

    border-radius: 50%;

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

    color: #777;

    font-size: 10px;

    transition:
        all .35s ease;
}


.wd-category-card:hover
.wd-category-arrow {
    background: #dc0005;

    border-color: #dc0005;

    color: #fff;

    transform: rotate(45deg);
}


/* =========================================================
   ICON
========================================================= */

.wd-category-icon {
    width: 55px;
    height: 55px;

    margin-top: 45px;

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

    background:
        rgba(220,0,5,.07);

    color: #dc0005;

    font-size: 17px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.wd-category-card:hover
.wd-category-icon {
    background: #dc0005;

    color: #fff;

    transform: translateY(-4px);
}


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

.wd-category-card-content {
    margin-top: 27px;
}


.wd-category-card-content h4 {
    margin: 0;

    max-width: 280px;

    font-family: "Manrope", sans-serif;

    font-size:
        clamp(23px, 1.7vw, 29px);

    line-height: 1.1;

    letter-spacing: -1.2px;

    font-weight: 700;
}


.wd-category-card-content p {
    margin: 14px 0 0;

    max-width: 315px;

    color: #777;

    font-size: 13px;

    line-height: 1.65;

    transition: color .35s ease;
}


.wd-category-card:hover
.wd-category-card-content p {
    color: #858585;
}


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

.wd-category-card-bottom {
    margin-top: auto;

    padding-top: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(0,0,0,.08);

    font-size: 12px;

    font-weight: 700;

    transition:
        border-color .35s ease;
}


.wd-category-card-bottom i {
    color: #dc0005;

    font-size: 10px;

    transition: transform .3s ease;
}


.wd-category-card:hover
.wd-category-card-bottom {
    border-color:
        rgba(255,255,255,.10);
}


.wd-category-card:hover
.wd-category-card-bottom i {
    transform: translateX(5px);
}


/* =========================================================
   SPECIAL LAST CARD
========================================================= */

.wd-category-card-special {
    background: #f7f7f5;
}


.wd-category-card-special
.wd-category-icon {
    background: #dc0005;

    color: #fff;
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1200px) {

    .wd-cat-hero-wrap,
    .wd-category-wrap {
        width: calc(100% - 70px);
    }


    .wd-category-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:800px) {

    .wd-cat-hero-wrap,
    .wd-category-wrap {
        width: calc(100% - 44px);
    }


    .wd-cat-hero-wrap {
        padding-bottom: 65px;
    }


    .wd-cat-breadcrumb {
        margin-bottom: 45px;
    }


    .wd-cat-hero-content {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .wd-cat-hero-right {
        max-width: 520px;
    }


    .wd-cat-hero h1 {
        font-size:
            clamp(43px, 9vw, 68px);
    }


    .wd-category-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px) {

    .wd-cat-hero-wrap,
    .wd-category-wrap {
        width: calc(100% - 30px);
    }


    /* BREADCRUMB */

    .wd-cat-hero-wrap {
        padding:
            23px 0
            52px;
    }


    .wd-cat-breadcrumb {
        margin-bottom: 38px;

        font-size: 11px;
    }


    .wd-cat-hero-bg {
        display: none;
    }


    .wd-cat-eyebrow {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 1.2px;
    }


    .wd-cat-eyebrow > span {
        width: 24px;
    }


    .wd-cat-hero h1 {
        font-size:
            clamp(39px, 12vw, 54px);

        letter-spacing: -2.4px;
    }


    .wd-cat-index {
        font-size: 10px;
    }


    .wd-cat-hero-right p {
        font-size: 13px;
    }


    /* CATEGORY */

    .wd-category-wrap {
        padding:
            55px 0
            70px;
    }


    .wd-category-head {
        margin-bottom: 30px;
    }


    .wd-category-small {
        font-size: 10px;
    }


    .wd-category-head h3 {
        font-size:
            clamp(31px, 9vw, 42px);

        letter-spacing: -1.7px;
    }


    .wd-category-head > p {
        font-size: 13px;
    }


    .wd-category-grid {
        grid-template-columns: 1fr;
    }


    .wd-category-card {
        min-height: 335px;

        padding: 22px;
    }


    .wd-category-arrow {
        width: 37px;
        height: 37px;
    }


    .wd-category-icon {
        width: 48px;
        height: 48px;

        margin-top: 30px;

        font-size: 14px;
    }


    .wd-category-card-content {
        margin-top: 22px;
    }


    .wd-category-card-content h4 {
        max-width: 300px;

        font-size: 24px;
    }


    .wd-category-card-content p {
        max-width: 320px;

        font-size: 12px;
    }


    .wd-category-card-bottom {
        font-size: 11px;
    }

}

/* =========================================================
   RESİMLİ KATEGORİLER
========================================================= */

.wd-category-list-image {
    width: 100%;
    background: #ffffff;
    color: #111;
}

.wd-category-wrap {
    width: calc(100% - 100px);
    max-width: 1680px;
    margin: 0 auto;
    padding:
        clamp(70px, 6vw, 100px)
        0
        clamp(80px, 7vw, 120px);
}


/* =========================================================
   HEAD
========================================================= */

.wd-category-head {
    margin-bottom: 48px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 430px);

    gap: 60px;
    align-items: end;
}

.wd-category-small {
    display: block;
    margin-bottom: 13px;

    color: #9a9a9a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.wd-category-head h3 {
    margin: 0;
    max-width: 760px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: 1.04;
    letter-spacing: -2px;
    font-weight: 700;
    color: #111;
}

.wd-category-head h3 span {
    display: block;
    color: #dc0005;
}

.wd-category-head > p {
    margin: 0;
    max-width: 420px;

    color: #737373;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   GRID
========================================================= */

.wd-category-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}


/* =========================================================
   CARD
========================================================= */

.wd-category-image-card {
    display: block;
    text-decoration: none;
    color: #111;

    background: #fff;
    border: 1px solid rgba(0,0,0,.08);

    overflow: hidden;

    box-shadow: 0 14px 35px rgba(0,0,0,.035);

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.wd-category-image-card:hover {
    transform: translateY(-8px);
    border-color: rgba(220,0,5,.18);
    box-shadow: 0 24px 55px rgba(0,0,0,.09);
}


/* =========================================================
   IMAGE TOP
========================================================= */

.wd-category-image-top {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #ececea;
}

.wd-category-image-top img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}

.wd-category-image-card:hover
.wd-category-image-top img {
    transform: scale(1.06);
}

.wd-category-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.38),
            rgba(0,0,0,.08) 45%,
            transparent 75%
        );
}


/* =========================================================
   NUMBER
========================================================= */

.wd-category-image-number {
    position: absolute;
    left: 18px;
    top: 18px;

    min-width: 42px;
    height: 42px;

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

    background: rgba(255,255,255,.94);
    color: #444;

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

    z-index: 3;
}


/* =========================================================
   ICON
========================================================= */

.wd-category-image-icon {
    width: 50px;
    height: 50px;

    position: absolute;
    right: 18px;
    bottom: 18px;

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

    border-radius: 50%;

    background: #dc0005;
    color: #fff;

    font-size: 15px;

    z-index: 3;

    transition:
        transform .35s ease,
        background .35s ease;
}

.wd-category-image-card:hover
.wd-category-image-icon {
    background: #111;
    transform: rotate(10deg) scale(1.05);
}


/* =========================================================
   BODY
========================================================= */

.wd-category-image-body {
    padding: 25px 24px 22px;
}

.wd-category-image-meta {
    margin-bottom: 15px;

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

    color: #959595;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
}

.wd-category-image-body h4 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(24px, 1.8vw, 30px);
    line-height: 1.15;
    letter-spacing: -1px;
    font-weight: 700;
    color: #111;
}

.wd-category-image-body p {
    margin: 14px 0 0;
    max-width: 340px;

    color: #727272;
    font-size: 13px;
    line-height: 1.7;
}


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

.wd-category-image-bottom {
    margin-top: 22px;
    padding-top: 18px;

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

    border-top: 1px solid rgba(0,0,0,.08);

    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.wd-category-image-bottom i {
    color: #dc0005;
    font-size: 11px;

    transition: transform .3s ease;
}

.wd-category-image-card:hover
.wd-category-image-bottom i {
    transform: translateX(5px);
}


/* =========================================================
   SPECIAL CARD
========================================================= */

.wd-category-image-card-special {
    background: linear-gradient(180deg, #ffffff 0%, #faf7f7 100%);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .wd-category-wrap {
        width: calc(100% - 70px);
    }

    .wd-category-image-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wd-category-wrap {
        width: calc(100% - 44px);
    }

    .wd-category-head {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 38px;
    }

    .wd-category-head h3 {
        font-size: clamp(34px, 8vw, 50px);
    }

    .wd-category-head > p {
        max-width: 540px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wd-category-wrap {
        width: calc(100% - 30px);
        padding:
            55px 0
            70px;
    }

    .wd-category-head {
        margin-bottom: 30px;
    }

    .wd-category-small {
        font-size: 10px;
    }

    .wd-category-head h3 {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -1.6px;
    }

    .wd-category-head > p {
        font-size: 13px;
    }

    .wd-category-image-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .wd-category-image-number {
        min-width: 38px;
        height: 38px;
        left: 13px;
        top: 13px;
        font-size: 11px;
    }

    .wd-category-image-icon {
        width: 44px;
        height: 44px;
        right: 13px;
        bottom: 13px;
        font-size: 13px;
    }

    .wd-category-image-body {
        padding: 20px 18px 18px;
    }

    .wd-category-image-meta {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .wd-category-image-body h4 {
        font-size: 24px;
    }

    .wd-category-image-body p {
        font-size: 12px;
    }

    .wd-category-image-bottom {
        margin-top: 18px;
        padding-top: 15px;
        font-size: 11px;
    }

}


/* ========================================
   WEBDIZAYN / ELEGANT PAGE HERO
======================================== */

.wdb-hero {
    --wdb-red: #e30613;
    --wdb-black: #111114;
    position: relative;
    overflow: hidden;
    background: #f8f8f7;
    border-bottom: 1px solid #eaeaea;
    isolation: isolate;
}

    /* Soft atmospheric background */

    .wdb-hero::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        right: -220px;
        top: -390px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(227,6,19,.065) 0%, rgba(227,6,19,.018) 45%, transparent 72% );
        pointer-events: none;
    }

    .wdb-hero::after {
        content: "";
        position: absolute;
        width: 440px;
        height: 440px;
        right: -170px;
        bottom: -340px;
        border: 1px solid rgba(227,6,19,.11);
        border-radius: 50%;
        pointer-events: none;
    }

/* Main container */

.wdb-hero-container {
    position: relative;
    z-index: 2;
    width: 88%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 42px 0 76px;
}

/* ========================================
   BREADCRUMB NAVIGATION
======================================== */

.wdb-path {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 65px;
    font-size: 12px;
    font-weight: 500;
}

    .wdb-path a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #858589;
        text-decoration: none;
        transition: color .25s ease;
    }

        .wdb-path a:hover {
            color: var(--wdb-red);
        }

        .wdb-path a i {
            font-size: 11px;
        }

.wdb-path-divider {
    display: flex;
    align-items: center;
    color: #bfc0c3;
    font-size: 9px;
}

.wdb-path > span:last-child {
    color: var(--wdb-black);
    font-weight: 700;
}

/* ========================================
   MAIN LAYOUT
======================================== */

.wdb-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr);
    align-items: end;
    gap: 90px;
}

/* Left title */

.wdb-hero-main {
    min-width: 0;
}

.wdb-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color: #77777c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.wdb-hero-eyebrow-line {
    display: block;
    width: 31px;
    height: 2px;
    flex-shrink: 0;
    background: var(--wdb-red);
}

.wdb-hero-main h1 {
    margin: 0;
    padding: 0;
    color: var(--wdb-black);
    font-size: 56px;
    font-weight: 800;
 
    line-height: 1.08;
}

    .wdb-hero-main h1 span {
        color: var(--wdb-red);
    }

.wdb-hero-main > p {
    max-width: 100%;
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.95;
    font-weight: 400;
    color: #77777b;
}

/* ========================================
   RIGHT EDITORIAL AREA
======================================== */

.wdb-hero-aside {
    position: relative;
    padding: 8px 0 8px 38px;
    border-left: 1px solid #dedee0;
}

.wdb-aside-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 23px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: #8a8a8e;
}

.wdb-aside-spark {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--wdb-red);
    transform: rotate(45deg);
}

.wdb-aside-content h2 {
    margin: 0 0 27px;
    font-size: clamp(24px, 2.3vw, 35px);
    line-height: 1.38;
    letter-spacing: -.045em;
    font-weight: 650;
    color: var(--wdb-black);
}

    .wdb-aside-content h2 em {
        font-style: normal;
        color: var(--wdb-red);
    }

/* Link */

.wdb-aside-link {
    display: inline-flex;
    align-items: center;
    gap: 21px;
    color: var(--wdb-black);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color .25s ease;
}

    .wdb-aside-link > span:first-child {
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(0,0,0,.25);
        transition: border-color .25s ease;
    }

.wdb-aside-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--wdb-red);
    color: #fff;
    font-size: 12px;
    transition: background .3s ease, transform .3s ease;
}

.wdb-aside-link:hover {
    color: var(--wdb-red);
}

    .wdb-aside-link:hover > span:first-child {
        border-color: var(--wdb-red);
    }

    .wdb-aside-link:hover .wdb-aside-arrow {
        background: #111114;
        transform: translate(3px, -3px);
    }

/* ========================================
   BOTTOM ACCENT
======================================== */

.wdb-hero-bottom {
    position: absolute;
    bottom: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: rgba(0,0,0,.055);
}

    .wdb-hero-bottom span {
        position: absolute;
        left: 0;
        top: -1px;
        display: block;
        width: 78px;
        height: 3px;
        background: var(--wdb-red);
    }

/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

    .wdb-hero-layout {
        gap: 45px;
        grid-template-columns: minmax(0, 1.3fr) minmax(250px, .8fr);
    }

    .wdb-hero-main h1 {
        font-size: 80px;
    }

    .wdb-hero-aside {
        padding-left: 25px;
    }

    .wdb-aside-content h2 {
        font-size: 27px;
    }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .wdb-hero-container {
        width: calc(100% - 40px);
        padding: 28px 0 48px;
    }

    .wdb-path {
        margin-bottom: 47px;
        gap: 12px;
        font-size: 11px;
    }

    .wdb-hero-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .wdb-hero-eyebrow {
        font-size: 9px;
        letter-spacing: 1.3px;
        gap: 10px;
        margin-bottom: 19px;
    }

    .wdb-hero-eyebrow-line {
        width: 23px;
    }

    .wdb-hero-main h1 {
        font-size: clamp(54px, 13vw, 76px);
     
    }

    .wdb-hero-main > p {
        font-size: 13px;
        line-height: 1.85;
        margin-top: 18px;
    }

    .wdb-hero-aside {
        border-left: none;
        border-top: 1px solid #dedee0;
        padding: 25px 0 0;
    }

    .wdb-aside-heading {
        font-size: 9px;
        margin-bottom: 15px;
    }

    .wdb-aside-content h2 {
        font-size: 25px;
        margin-bottom: 19px;
    }

    .wdb-aside-link {
        font-size: 12px;
    }

    .wdb-hero-bottom {
        left: 20px;
        right: 20px;
    }
}



/* ============================================
   WEBDIZAYN - ABOUT PAGE
============================================ */

.wba-about {
    --wba-red: #e30613;
    --wba-black: #151518;
    --wba-gray: #717178;
    --wba-border: #e9e9eb;
    width: 100%;
    color: var(--wba-black);
    font-family: inherit;
}

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

    .wba-about h2,
    .wba-about h3,
    .wba-about p {
        margin-top: 0;
    }

    .wba-about img {
        max-width: 100%;
    }


/* ============================================
   COMMON KICKER
============================================ */

.wba-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #77777c;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 2px;
    line-height: 1.5;
}

.wba-kicker-line {
    display: inline-block;
    width: 29px;
    height: 2px;
    flex-shrink: 0;
    background: var(--wba-red);
}


/* ============================================
   INTRO
============================================ */

.wba-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(35px, 6vw, 110px);
    padding: 35px 0 85px;
}

.wba-intro-content {
    min-width: 0;
}

.wba-intro-title {
    margin: 29px 0 28px;
    font-size: clamp(39px, 4.4vw, 70px);
    font-weight: 800;
    letter-spacing: -.065em;
    line-height: 1.13;
    color: var(--wba-black);
}

    .wba-intro-title span {
        color: var(--wba-red);
    }

.wba-intro-lead {
    max-width: 560px;
    margin-bottom: 24px;
    font-size: clamp(17px, 1.45vw, 21px);
    font-weight: 550;
    line-height: 1.65;
    letter-spacing: -.025em;
    color: #29292e;
}

.wba-intro-description {
    max-width: 600px;
}

    .wba-intro-description p {
        margin-bottom: 17px;
        color: var(--wba-gray);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.95;
    }


/* Parent company link */

.wba-parent-link {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 490px;
    margin-top: 36px;
    padding: 18px 0;
    border-top: 1px solid var(--wba-border);
    border-bottom: 1px solid var(--wba-border);
    text-decoration: none;
    color: var(--wba-black);
    transition: border-color .3s ease;
}

    .wba-parent-link:hover {
        border-color: var(--wba-red);
    }

.wba-parent-link-icon {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--wba-red);
    background: #fff0f1;
    border-radius: 12px;
    font-size: 14px;
}

.wba-parent-link > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wba-parent-link small {
    color: #99999f;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 700;
}

.wba-parent-link strong {
    color: #222226;
    font-size: 13px;
    font-weight: 700;
}

.wba-parent-arrow {
    margin-left: auto;
    font-size: 13px;
    color: #96969a;
    transition: transform .25s ease, color .25s ease;
}

.wba-parent-link:hover .wba-parent-arrow {
    color: var(--wba-red);
    transform: translateX(4px);
}


/* ============================================
   INTRO IMAGE
============================================ */

.wba-intro-visual {
    position: relative;
    min-width: 0;
    padding: 0 18px 30px 0;
}

.wba-image-wrap {
    position: relative;
    height: clamp(410px, 42vw, 590px);
    overflow: hidden;
    background: #242427;
    border-radius: 3px 85px 3px 3px;
}

    .wba-image-wrap img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .8s ease;
    }

    .wba-image-wrap:hover img {
        transform: scale(1.045);
    }

.wba-image-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 45%, rgba(0,0,0,.65) 100% );
    pointer-events: none;
}

.wba-image-caption {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    bottom: 29px;
    left: 29px;
    right: 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #fff;
}

.wba-caption-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--wba-red);
}

.wba-image-accent {
    position: absolute;
    z-index: -1;
    width: 58%;
    height: 65%;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    border-radius: 0 0 3px 3px;
}

.wba-image-note {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px 30px;
    min-width: 225px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0,0,0,.08);
}

    .wba-image-note > span {
        font-size: 9px;
        letter-spacing: 2px;
        font-weight: 750;
        color: #99999e;
    }

    .wba-image-note strong {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -.045em;
        line-height: 1.22;
    }

        .wba-image-note strong span {
            color: var(--wba-red);
        }


/* ============================================
   FACTS
============================================ */

.wba-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--wba-border);
    border-bottom: 1px solid var(--wba-border);
    padding: 35px 0;
}

.wba-fact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 35px;
    border-right: 1px solid var(--wba-border);
}

    .wba-fact:first-child {
        padding-left: 0;
    }

.wba-fact-last {
    border-right: none;
}

.wba-fact strong {
    color: var(--wba-black);
    font-size: clamp(21px, 2.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.2;
}

.wba-fact span {
    color: #85858c;
    font-size: 12px;
    line-height: 1.5;
}


/* ============================================
   COMMON SECTION
============================================ */

.wba-section {
    padding: 110px 0;
}

.wba-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 45px;
}

    .wba-section-head h2,
    .wba-approach-heading h2 {
        margin: 23px 0 0;
        font-size: clamp(32px, 3.35vw, 49px);
        font-weight: 800;
        line-height: 1.22;
        letter-spacing: -.055em;
        color: var(--wba-black);
    }

        .wba-section-head h2 span,
        .wba-approach-heading h2 span {
            color: #a1a1a7;
        }

    .wba-section-head > p {
        max-width: 360px;
        flex-shrink: 0;
        margin-bottom: 5px;
        color: var(--wba-gray);
        font-size: 13px;
        line-height: 1.9;
    }


/* ============================================
   SERVICES
============================================ */

.wba-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.wba-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 315px;
    padding: 29px 25px 25px;
    background: #fafafa;
    border: 1px solid #ededed;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}

    .wba-service-card::before {
        content: "";
        position: absolute;
        height: 3px;
        width: 0;
        left: 0;
        top: 0;
        background: var(--wba-red);
        transition: width .35s ease;
    }

    .wba-service-card:hover {
        background: #fff;
        border-color: #e1e1e3;
        transform: translateY(-5px);
        box-shadow: 0 22px 50px rgba(0,0,0,.055);
    }

        .wba-service-card:hover::before {
            width: 100%;
        }

.wba-service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 43px;
}

.wba-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    color: var(--wba-red);
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 13px;
    font-size: 21px;
}

.wba-service-arrow {
    color: #bdbdc2;
    font-size: 11px;
    transition: color .3s ease, transform .3s ease;
}

.wba-service-card:hover .wba-service-arrow {
    color: var(--wba-red);
    transform: translate(2px, -2px);
}

.wba-service-card h3 {
    margin-bottom: 13px;
    font-size: 19px;
    letter-spacing: -.045em;
    font-weight: 750;
    color: #18181a;
}

.wba-service-card > p {
    margin-bottom: 28px;
    font-size: 12px;
    line-height: 1.9;
    color: #85858a;
}

.wba-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
}

    .wba-service-tags span {
        padding: 7px 9px;
        font-size: 9px;
        font-weight: 650;
        color: #68686d;
        background: #fff;
        border: 1px solid #ebebeb;
        border-radius: 3px;
    }

.wba-services-extra {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 23px 0 0;
    color: #77777c;
    font-size: 12px;
    line-height: 1.7;
}

    .wba-services-extra i {
        margin-top: 3px;
        color: var(--wba-red);
        font-size: 14px;
    }


/* ============================================
   TECHNOLOGY / DARK PANEL
============================================ */

.wba-technology {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(35px, 6vw, 100px);
    padding: clamp(45px, 6vw, 90px);
    background: #171719;
    border-radius: 5px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

    .wba-technology::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 550px;
        height: 550px;
        left: -300px;
        top: -310px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(227,6,19,.17), transparent 70% );
        pointer-events: none;
    }

.wba-kicker-light {
    color: #aaaab0;
}

.wba-tech-content {
    min-width: 0;
}

    .wba-tech-content h2 {
        margin: 27px 0 29px;
        font-size: clamp(35px, 3.7vw, 57px);
        font-weight: 800;
        line-height: 1.17;
        letter-spacing: -.06em;
        color: #fff;
    }

        .wba-tech-content h2 span {
            color: var(--wba-red);
        }

    .wba-tech-content > p {
        max-width: 515px;
        margin-bottom: 18px;
        color: #a6a6ac;
        font-size: 13px;
        line-height: 2;
    }

.wba-tech-signature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    color: #b8b8be;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.25px;
    line-height: 1.6;
}

    .wba-tech-signature span {
        width: 28px;
        height: 2px;
        flex-shrink: 0;
        background: var(--wba-red);
    }

/* Technology feature list */

.wba-tech-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.wba-tech-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

    .wba-tech-feature:first-child {
        padding-top: 0;
    }

    .wba-tech-feature:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.wba-tech-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    background: rgba(227,6,19,.1);
    border: 1px solid rgba(227,6,19,.2);
    border-radius: 10px;
    color: #ff3541;
    font-size: 16px;
}

.wba-tech-feature h3 {
    margin: 2px 0 8px;
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 700;
}

.wba-tech-feature p {
    max-width: 340px;
    margin-bottom: 0;
    color: #98989e;
    font-size: 12px;
    line-height: 1.8;
}


/* ============================================
   APPROACH
============================================ */

.wba-approach {
    padding-bottom: 100px;
}

.wba-approach-heading {
    margin-bottom: 48px;
}

.wba-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.wba-approach-item {
    padding: 28px 5px 0 0;
    border-top: 1px solid #dedee1;
    transition: border-color .3s ease;
}

    .wba-approach-item:hover {
        border-color: var(--wba-red);
    }

.wba-approach-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--wba-red);
    font-size: 17px;
}

.wba-approach-item h3 {
    margin-bottom: 13px;
    color: #1b1b1e;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.wba-approach-item p {
    max-width: 280px;
    margin-bottom: 0;
    color: #828288;
    font-size: 12px;
    line-height: 1.95;
}


/* ============================================
   MISSION & VISION
============================================ */

.wba-purpose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 45px;
    background: #f8f8f8;
    border: 1px solid #ededed;
    border-radius: 4px;
    overflow: hidden;
}

.wba-purpose-item {
    display: flex;
    flex-direction: column;
    gap: 45px;
    min-width: 0;
    padding: clamp(32px, 4vw, 60px);
}

    .wba-purpose-item:first-child {
        border-right: 1px solid #e6e6e6;
    }

.wba-purpose-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #8a8a90;
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 750;
}

.wba-purpose-mark {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    transform: rotate(45deg);
    background: var(--wba-red);
}

.wba-purpose-body h2 {
    margin-bottom: 25px;
    color: #17171a;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.2;
}

    .wba-purpose-body h2 span {
        color: var(--wba-red);
    }

.wba-purpose-body p {
    max-width: 520px;
    margin-bottom: 16px;
    color: #79797e;
    font-size: 13px;
    line-height: 2;
}

    .wba-purpose-body p:last-child {
        margin-bottom: 0;
    }


/* ============================================
   RESPONSIVE - LAPTOP
============================================ */

@media (max-width: 1199px) {

    .wba-intro {
        gap: 40px;
    }

    .wba-intro-title {
        font-size: clamp(36px, 4.5vw, 55px);
    }

    .wba-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wba-service-card {
        min-height: 280px;
    }

    .wba-approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }

    .wba-fact {
        padding: 10px 20px;
    }
}


/* ============================================
   RESPONSIVE - TABLET
============================================ */

@media (max-width: 991px) {

    .wba-intro {
        grid-template-columns: 1fr;
        gap: 45px;
        padding-top: 25px;
    }

    .wba-intro-content {
        max-width: 750px;
    }

    .wba-intro-title {
        font-size: 58px;
    }

    .wba-intro-visual {
        max-width: 750px;
    }

    .wba-image-wrap {
        height: 480px;
    }

    .wba-facts {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .wba-fact {
        padding: 25px;
        border-bottom: 1px solid var(--wba-border);
    }

        .wba-fact:nth-child(2) {
            border-right: none;
        }

        .wba-fact:nth-child(3),
        .wba-fact:nth-child(4) {
            border-bottom: none;
        }

        .wba-fact:first-child,
        .wba-fact:nth-child(3) {
            padding-left: 0;
        }

    .wba-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

        .wba-section-head > p {
            max-width: 650px;
        }

    .wba-technology {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .wba-tech-content > p {
        max-width: 690px;
    }

    .wba-tech-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .wba-tech-feature,
    .wba-tech-feature:first-child,
    .wba-tech-feature:last-child {
        padding: 18px 0;
        border-top: 1px solid rgba(255,255,255,.12);
        border-bottom: none;
    }
}


/* ============================================
   RESPONSIVE - MOBILE
============================================ */

@media (max-width: 767px) {

    .wba-intro {
        padding: 15px 0 55px;
        gap: 35px;
    }

    .wba-kicker {
        font-size: 9px;
        letter-spacing: 1.35px;
    }

    .wba-kicker-line {
        width: 24px;
    }

    .wba-intro-title {
        margin: 22px 0;
        font-size: clamp(35px, 8.8vw, 49px);
        line-height: 1.15;
    }

    .wba-intro-lead {
        font-size: 16px;
    }

    .wba-intro-description p {
        font-size: 13px;
        line-height: 1.85;
    }

    .wba-parent-link {
        margin-top: 25px;
        gap: 12px;
    }

        .wba-parent-link small {
            font-size: 8px;
        }

        .wba-parent-link strong {
            font-size: 12px;
        }

    .wba-intro-visual {
        padding: 0 10px 20px 0;
    }

    .wba-image-wrap {
        height: 360px;
        border-radius: 3px 50px 3px 3px;
    }

    .wba-image-caption {
        left: 18px;
        bottom: 25px;
        font-size: 9px;
    }

    .wba-image-note {
        min-width: 160px;
        padding: 17px 20px;
    }

        .wba-image-note strong {
            font-size: 16px;
        }

        .wba-image-note > span {
            font-size: 8px;
        }

    .wba-facts {
        padding: 10px 0;
    }

    .wba-fact {
        gap: 7px;
        padding: 20px 14px;
    }

        .wba-fact strong {
            font-size: 24px;
        }

        .wba-fact span {
            font-size: 10px;
        }

    .wba-section {
        padding: 72px 0;
    }

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

        .wba-section-head h2,
        .wba-approach-heading h2 {
            font-size: clamp(29px, 7vw, 38px);
        }

        .wba-section-head > p {
            font-size: 12px;
        }

    .wba-services-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wba-service-card {
        min-height: auto;
        padding: 25px;
    }

    .wba-service-top {
        margin-bottom: 29px;
    }

    .wba-service-card > p {
        margin-bottom: 25px;
    }

    .wba-technology {
        padding: 38px 25px;
        gap: 35px;
    }

    .wba-tech-content h2 {
        font-size: clamp(32px, 7.5vw, 42px);
    }

    .wba-tech-content > p {
        font-size: 12px;
        line-height: 1.85;
    }

    .wba-tech-signature {
        margin-top: 28px;
        font-size: 8px;
    }

    .wba-tech-features {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wba-tech-feature {
        gap: 13px;
        padding: 19px 0;
    }

        .wba-tech-feature h3 {
            font-size: 13px;
        }

        .wba-tech-feature p {
            font-size: 11px;
        }

    .wba-approach-heading {
        margin-bottom: 30px;
    }

    .wba-approach-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .wba-approach-item {
        padding-top: 22px;
    }

    .wba-approach-icon {
        margin-bottom: 17px;
    }

    .wba-purpose {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .wba-purpose-item {
        padding: 32px 25px;
        gap: 28px;
    }

        .wba-purpose-item:first-child {
            border-right: none;
            border-bottom: 1px solid #e6e6e6;
        }

    .wba-purpose-body h2 {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .wba-purpose-body p {
        font-size: 12px;
        line-height: 1.9;
    }
}

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



/* ============================================================
   WEBDIZAYN / HIZMET DETAY SAYFALARI
   Kullanım: mevcut .container içine HTML fragmentini yerleştirin.
   Mevcut breadcrumb ve h1 dış sayfada kalır.
   Font Awesome 6.x ikonlarının projede yüklü olduğu varsayılır.
============================================================ */
.wbs-service {
    --wbs-accent: #e30613;
    --wbs-ink: #17171a;
    --wbs-muted: #717179;
    --wbs-border: #e7e7ea;
    --wbs-soft: #f8f8f9;
    width: 100%;
    min-width: 0;
    color: var(--wbs-ink);
    padding: 26px 0 80px;
    font-family: inherit;
}

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

    .wbs-service h2, .wbs-service h3, .wbs-service h4, .wbs-service p {
        margin-top: 0;
    }

    .wbs-service h2, .wbs-service h3, .wbs-service h4 {
        color: inherit;
    }

.wbs-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #77777e;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.9px;
    line-height: 1.6;
}

    .wbs-kicker::before {
        content: '';
        width: 28px;
        height: 2px;
        flex: 0 0 28px;
        background: var(--wbs-accent);
    }

.wbs-kicker--light {
    color: #aaaab1;
}

.wbs-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr);
    align-items: center;
    gap: clamp(38px, 6vw, 90px);
    padding: 22px 0 80px;
}

.wbs-intro-copy {
    min-width: 0;
}

    .wbs-intro-copy h2 {
        max-width: 790px;
        margin: 26px 0 25px;
        font-size: clamp(42px, 4.4vw, 67px);
        line-height: 1.13;
        font-weight: 800;
        letter-spacing: -.065em;
    }

        .wbs-intro-copy h2 em {
            color: var(--wbs-accent);
            font-style: normal;
        }

.wbs-lead {
    max-width: 680px;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.65;
    font-weight: 550;
    color: #303036;
    margin-bottom: 19px;
}

.wbs-intro-copy > p:not(.wbs-lead) {
    max-width: 660px;
    color: var(--wbs-muted);
    font-size: 14px;
    line-height: 1.93;
    margin-bottom: 13px;
}

.wbs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

    .wbs-pills span {
        padding: 9px 13px;
        border: 1px solid #e8e8eb;
        background: #fafafa;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 650;
        color: #63636a;
    }
/* UI tasarım illüstrasyonu: dış kaynak görsel gerekmez. */
.wbs-visual {
    min-width: 0;
    position: relative;
    padding: 33px 18px 28px 0;
    isolation: isolate;
}

    .wbs-visual::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 4% 0 0 8%;
        background: linear-gradient(135deg, #f7f7f8 0%, #eeeeef 100%);
        border-radius: 4px 74px 4px 4px;
    }

    .wbs-visual::after {
        content: '';
        z-index: -1;
        position: absolute;
        width: 165px;
        height: 165px;
        right: -15px;
        top: 2px;
        border: 1px solid rgba(227,6,19,.16);
        border-radius: 50%;
    }

.wbs-browser {
    position: relative;
    min-height: 345px;
    background: #fff;
    border: 1px solid #e8e8ea;
    box-shadow: 0 32px 80px rgba(22,22,28,.13);
    border-radius: 10px;
    overflow: hidden;
}

.wbs-browser-top {
    height: 38px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ededee;
    background: #fcfcfc;
}

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

    .wbs-browser-dots i {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #c9c9cd;
    }

        .wbs-browser-dots i:first-child {
            background: var(--wbs-accent);
        }

.wbs-browser-domain {
    color: #a8a8ae;
    font-size: 9px;
    letter-spacing: .6px;
}

.wbs-browser-body {
    position: relative;
    padding: 27px;
    min-height: 307px;
    background: linear-gradient(147deg, #fff 52%, #f7f7f8);
}

.wbs-mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 35px;
}

.wbs-mock-mark {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: -.5px;
    color: #19191b;
}

    .wbs-mock-mark i {
        display: block;
        width: 10px;
        height: 10px;
        background: var(--wbs-accent);
        border-radius: 2px;
        transform: rotate(-18deg);
    }

.wbs-mock-navlines {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .wbs-mock-navlines i {
        width: 23px;
        height: 3px;
        display: block;
        border-radius: 5px;
        background: #dedee0;
    }

        .wbs-mock-navlines i:last-child {
            width: 35px;
            background: var(--wbs-accent);
        }

.wbs-mock-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--wbs-accent);
    margin-bottom: 13px;
}

.wbs-mock-title {
    display: block;
    max-width: 275px;
    font-size: clamp(23px, 2.25vw, 32px);
    letter-spacing: -.06em;
    line-height: 1.19;
    font-weight: 800;
}

    .wbs-mock-title span {
        color: var(--wbs-accent);
    }

.wbs-mock-description {
    margin-top: 15px;
    max-width: 235px;
    color: #8a8a90;
    font-size: 10px;
    line-height: 1.85;
}

.wbs-mock-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 18px;
}

    .wbs-mock-lines i {
        display: block;
        width: 55%;
        height: 5px;
        border-radius: 8px;
        background: #e6e6e9;
    }

        .wbs-mock-lines i:nth-child(2) {
            width: 42%;
        }

        .wbs-mock-lines i:nth-child(3) {
            width: 47%;
        }

.wbs-mock-button {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 13px;
    background: var(--wbs-accent);
    color: white;
    font-size: 9px;
    font-weight: 800;
    border-radius: 3px;
}

.wbs-visual-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 174px;
    padding: 15px 17px;
    background: #1b1b1e;
    border-left: 3px solid var(--wbs-accent);
    box-shadow: 0 14px 35px rgba(0,0,0,.12);
}

    .wbs-visual-caption small {
        display: block;
        margin-bottom: 6px;
        color: #a9a9af;
        font-size: 8px;
        letter-spacing: 1.35px;
        font-weight: 750;
    }

    .wbs-visual-caption strong {
        color: #fff;
        font-size: 13px;
        font-weight: 750;
    }
/* Varyantlara göre örnek ekranlar */
.wbs-browser--mobile {
    max-width: 400px;
    margin-left: auto;
    min-height: 355px;
    background: #f1f1f2;
}

    .wbs-browser--mobile .wbs-browser-body {
        display: flex;
        justify-content: center;
        min-height: 315px;
        padding: 12px;
    }

.wbs-phone {
    width: 172px;
    min-height: 295px;
    padding: 11px 10px 16px;
    background: #fff;
    border: 5px solid #242427;
    border-radius: 25px;
    box-shadow: 13px 10px 30px rgba(0,0,0,.18);
}

.wbs-phone-notch {
    width: 54px;
    height: 7px;
    border-radius: 30px;
    background: #242427;
    margin: 0 auto 15px;
}

.wbs-phone .wbs-mock-nav {
    margin-bottom: 23px;
}

.wbs-phone .wbs-mock-mark {
    font-size: 10px;
}

.wbs-phone .wbs-mock-navlines i {
    width: 13px;
}

.wbs-phone .wbs-mock-title {
    font-size: 19px;
}

.wbs-phone .wbs-mock-description {
    font-size: 8px;
}

.wbs-phone .wbs-mock-button {
    padding: 8px 9px;
    font-size: 8px;
}

.wbs-browser--ux .wbs-browser-body {
    background: #f8f8f9;
}

.wbs-wire-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.wbs-wire {
    padding: 13px;
    background: white;
    border: 1px solid #e5e5e8;
    border-radius: 7px;
}

.wbs-wire-icon {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #ffe5e7;
    margin-bottom: 14px;
}

.wbs-wire-line {
    display: block;
    height: 5px;
    background: #e8e8ea;
    border-radius: 5px;
    margin-bottom: 7px;
}

    .wbs-wire-line:last-child {
        width: 60%;
    }

.wbs-browser--landing .wbs-browser-body {
    background: linear-gradient(105deg, #fff 63%, #f8e9ea);
}

.wbs-form-mock {
    position: absolute;
    right: 16px;
    bottom: 25px;
    width: 135px;
    padding: 15px 12px;
    background: white;
    border: 1px solid #e8e8e9;
    border-radius: 5px;
    box-shadow: 0 15px 27px rgba(0,0,0,.11);
}

    .wbs-form-mock span {
        display: block;
        margin-bottom: 9px;
        height: 13px;
        border: 1px solid #e7e7e9;
        border-radius: 2px;
        background: #fafafa;
    }

        .wbs-form-mock span:first-child {
            height: 8px;
            width: 76%;
            border: none;
            background: #dddde0;
        }

        .wbs-form-mock span:last-child {
            margin-bottom: 0;
            height: 21px;
            background: var(--wbs-accent);
            border-color: var(--wbs-accent);
        }

.wbs-browser--personal .wbs-browser-body {
    background: linear-gradient(130deg, #fafafa 30%, #f0f0f1);
}

.wbs-portrait-mock {
    position: absolute;
    width: 108px;
    height: 152px;
    right: 18px;
    bottom: 21px;
    background: #e2e2e4;
    border-radius: 70px 70px 4px 4px;
    overflow: hidden;
}

    .wbs-portrait-mock::before {
        content: '';
        position: absolute;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        top: 35px;
        left: 30px;
        background: #acacb1;
    }

    .wbs-portrait-mock::after {
        content: '';
        position: absolute;
        width: 96px;
        height: 100px;
        border-radius: 50% 50% 0 0;
        bottom: -36px;
        left: 6px;
        background: #88888e;
    }

.wbs-browser--renewal .wbs-browser-body {
    background: #fafafa;
}

.wbs-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 20px;
}

.wbs-compare-panel {
    min-height: 115px;
    padding: 13px;
    border: 1px solid #e4e4e7;
    border-radius: 5px;
    background: #efeff0;
}

    .wbs-compare-panel:last-child {
        background: white;
        border-color: rgba(227,6,19,.32);
    }

    .wbs-compare-panel > strong {
        display: block;
        color: #85858b;
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: 1px;
    }

    .wbs-compare-panel:last-child > strong {
        color: var(--wbs-accent);
    }

.wbs-compare-line {
    display: block;
    height: 6px;
    margin-bottom: 9px;
    background: #d0d0d4;
    border-radius: 4px;
}

.wbs-compare-panel:last-child .wbs-compare-line {
    background: #dedee1;
}

    .wbs-compare-panel:last-child .wbs-compare-line:nth-of-type(2) {
        width: 65%;
        background: var(--wbs-accent);
    }

.wbs-compare-line:nth-of-type(2) {
    width: 80%;
}

.wbs-compare-line:nth-of-type(3) {
    width: 60%;
}

.wbs-browser--speed .wbs-browser-body {
    background: #17171a;
    color: white;
}

.wbs-browser--speed .wbs-mock-mark, .wbs-browser--speed .wbs-mock-title {
    color: white;
}

.wbs-browser--speed .wbs-mock-description {
    color: #b0b0b7;
}

.wbs-browser--speed .wbs-mock-navlines i {
    background: #55555a;
}

.wbs-speed-meter {
    position: absolute;
    right: 21px;
    bottom: 27px;
    width: 121px;
    height: 121px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 10px solid #3c3c41;
    border-top-color: var(--wbs-accent);
    border-right-color: var(--wbs-accent);
    transform: rotate(-25deg);
}

    .wbs-speed-meter i {
        transform: rotate(25deg);
        font-size: 36px;
        color: #f3f3f4;
    }
/* Kurumsal bilgi satırı */
.wbs-highlights {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-top: 1px solid var(--wbs-border);
    border-bottom: 1px solid var(--wbs-border);
    padding: 24px 0;
}

.wbs-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 11px 29px;
    border-right: 1px solid var(--wbs-border);
}

    .wbs-highlight:first-child {
        padding-left: 0;
    }

    .wbs-highlight:last-child {
        border-right: 0;
    }

    .wbs-highlight > i {
        color: var(--wbs-accent);
        font-size: 19px;
        flex-shrink: 0;
    }

    .wbs-highlight strong {
        display: block;
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 5px;
        font-weight: 750;
    }

    .wbs-highlight span {
        font-size: 11px;
        line-height: 1.6;
        color: #85858c;
    }
/* Hizmet kapsamı */
.wbs-section {
    padding: 106px 0 93px;
}

.wbs-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 45px;
    margin-bottom: 36px;
}

    .wbs-section-head h2, .wbs-process h2, .wbs-faq h2 {
        margin: 20px 0 0;
       
        font-size: clamp(31px, 3.25vw, 47px);
        font-weight: 800;
        letter-spacing: -.055em;
        line-height: 1.21;
    }

        .wbs-section-head h2 em, .wbs-process h2 em, .wbs-faq h2 em {
            color: var(--wbs-accent);
            font-style: normal;
        }

    .wbs-section-head > p {
        max-width: 335px;
        margin: 0 0 4px;
        font-size: 13px;
        line-height: 1.9;
        color: var(--wbs-muted);
    }

.wbs-features {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.wbs-feature {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 270px;
    padding: 25px 23px 27px;
    background: #fafafa;
    border: 1px solid #ebebed;
    border-radius: 4px;
    position: relative;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

    .wbs-feature::before {
        content: '';
        height: 3px;
        width: 0;
        top: -1px;
        left: 0;
        background: var(--wbs-accent);
        position: absolute;
        transition: width .28s ease;
    }

    .wbs-feature:hover {
        background: white;
        transform: translateY(-4px);
        box-shadow: 0 18px 48px rgba(0,0,0,.055);
    }

        .wbs-feature:hover::before {
            width: 100%;
        }

.wbs-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #fff0f1;
    border-radius: 12px;
    color: var(--wbs-accent);
    font-size: 20px;
    margin-bottom: 31px;
}

.wbs-feature h3 {
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.03em;
    line-height: 1.37;
    margin-bottom: 11px;
}

.wbs-feature p {
    color: #77777e;
    font-size: 12px;
    line-height: 1.84;
    margin: 0;
}
/* Koyu vurgu bloğu */
.wbs-dark {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px,5vw,75px);
    padding: clamp(38px,5.2vw,76px);
    background: #18181b;
    color: #fff;
    border-radius: 5px;
    overflow: hidden;
    isolation: isolate;
}

    .wbs-dark::before {
        content: '';
        position: absolute;
        z-index: -1;
        width: 460px;
        height: 460px;
        left: -260px;
        top: -270px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(227,6,19,.2),transparent 70%);
    }

    .wbs-dark h2 {
        margin: 22px 0;
        color: #fff;
        font-size: clamp(30px,3.4vw,49px);
        font-weight: 800;
        letter-spacing: -.06em;
        line-height: 1.2;
    }

        .wbs-dark h2 em {
            color: #ff3340;
            font-style: normal;
        }

.wbs-dark-copy p {
    max-width: 520px;
    color: #adaeb3;
    font-size: 13px;
    line-height: 1.96;
    margin: 0;
}

.wbs-dark-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.wbs-dark-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
}

    .wbs-dark-item:last-child {
        border-bottom: 0;
    }

    .wbs-dark-item > i {
        margin-top: 3px;
        color: #ff3744;
        font-size: 17px;
        flex-shrink: 0;
    }

    .wbs-dark-item strong {
        display: block;
        color: #fff;
        font-size: 14px;
        font-weight: 740;
        margin-bottom: 7px;
    }

    .wbs-dark-item span {
        display: block;
        color: #a9a9af;
        font-size: 12px;
        line-height: 1.8;
    }
/* Süreç */
.wbs-process {
    padding: 104px 0 95px;
}

.wbs-process-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 30px;
    margin-top: 38px;
}

.wbs-process-item {
    min-width: 0;
    padding: 26px 6px 0 0;
    border-top: 1px solid #dcdce0;
}

    .wbs-process-item > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background: #fff0f1;
        color: var(--wbs-accent);
        font-size: 17px;
        margin-bottom: 22px;
    }

    .wbs-process-item h3 {
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 750;
        letter-spacing: -.035em;
    }

    .wbs-process-item p {
        margin: 0;
        max-width: 350px;
        font-size: 12px;
        line-height: 1.9;
        color: #7b7b82;
    }
/* SSS */
.wbs-faq {
    display: grid;
    grid-template-columns: minmax(230px,.65fr) minmax(0,1.35fr);
    gap: clamp(30px,5vw,85px);
    padding: clamp(32px,4vw,60px);
    background: #f7f7f8;
    border: 1px solid #ededee;
    border-radius: 4px;
}

.wbs-faq-intro > p {
    margin: 20px 0 0;
    color: #818187;
    font-size: 12px;
    line-height: 1.8;
}

.wbs-faq-list {
    min-width: 0;
}

    .wbs-faq-list details {
        border-bottom: 1px solid #dedee2;
        padding: 16px 0;
    }

        .wbs-faq-list details:first-child {
            padding-top: 0;
        }

        .wbs-faq-list details:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

    .wbs-faq-list summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        cursor: pointer;
        list-style: none;
        font-size: 14px;
        font-weight: 720;
        line-height: 1.55;
    }

        .wbs-faq-list summary::-webkit-details-marker {
            display: none;
        }

        .wbs-faq-list summary::after {
            content: '+';
            font-size: 23px;
            font-weight: 400;
            flex-shrink: 0;
            color: var(--wbs-accent);
        }

    .wbs-faq-list details[open] summary::after {
        content: '−';
    }

    .wbs-faq-list details p {
        color: #727279;
        margin: 12px 35px 2px 0;
        font-size: 12px;
        line-height: 1.9;
    }

@media (max-width: 1199px) {
    .wbs-intro {
        gap: 35px;
    }

    .wbs-intro-copy h2 {
        font-size: clamp(38px,4.5vw,57px);
    }

    .wbs-features {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .wbs-feature {
        min-height: 235px;
    }
}

@media (max-width: 991px) {
    .wbs-intro {
        grid-template-columns: 1fr;
    }

    .wbs-intro-copy {
        max-width: 790px;
    }

    .wbs-visual {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .wbs-browser {
        min-height: 350px;
    }

    .wbs-browser--mobile {
        margin: 0 auto;
    }

    .wbs-highlights {
        grid-template-columns: 1fr;
        padding: 12px 0;
    }

    .wbs-highlight, .wbs-highlight:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--wbs-border);
        padding: 14px 0;
    }

        .wbs-highlight:last-child {
            border-bottom: none;
        }

    .wbs-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

        .wbs-section-head > p {
            max-width: 650px;
        }

    .wbs-dark {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

@media (max-width: 767px) {
    .wbs-service {
        padding: 15px 0 55px;
    }

    .wbs-kicker {
        font-size: 9px;
        letter-spacing: 1.1px;
        gap: 10px;
    }

        .wbs-kicker::before {
            width: 23px;
            flex-basis: 23px;
        }

    .wbs-intro {
        padding: 13px 0 58px;
        gap: 25px;
    }

    .wbs-intro-copy h2 {
        font-size: clamp(34px, 9vw, 49px);
        margin: 20px 0;
    }

    .wbs-lead {
        font-size: 16px;
    }

    .wbs-intro-copy > p:not(.wbs-lead) {
        font-size: 12px;
        line-height: 1.85;
    }

    .wbs-pills {
        margin-top: 22px;
    }

        .wbs-pills span {
            font-size: 10px;
            padding: 8px 10px;
        }

    .wbs-visual {
        padding: 18px 12px 24px 0;
    }

    .wbs-browser {
        min-height: 315px;
    }

    .wbs-browser-body {
        min-height: 275px;
        padding: 20px;
    }

    .wbs-mock-title {
        font-size: 24px;
    }

    .wbs-visual-caption {
        min-width: 150px;
        padding: 12px;
    }

    .wbs-browser--landing .wbs-mock-title, .wbs-browser--personal .wbs-mock-title {
        max-width: 175px;
        font-size: 22px;
    }

    .wbs-form-mock {
        width: 110px;
        right: 12px;
    }

    .wbs-portrait-mock {
        right: 10px;
        width: 88px;
    }

    .wbs-speed-meter {
        right: 10px;
        bottom: 36px;
        width: 95px;
        height: 95px;
    }

    .wbs-section {
        padding: 73px 0;
    }

    .wbs-section-head h2, .wbs-process h2, .wbs-faq h2 {
        font-size: clamp(28px,7.5vw,38px);
    }

    .wbs-section-head > p {
        font-size: 12px;
    }

    .wbs-features {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .wbs-feature {
        min-height: auto;
        padding: 23px 22px;
    }

    .wbs-feature-icon {
        margin-bottom: 20px;
    }

    .wbs-dark {
        padding: 33px 25px;
    }

        .wbs-dark h2 {
            font-size: clamp(29px,7vw,38px);
        }

    .wbs-dark-copy p {
        font-size: 12px;
    }

    .wbs-process {
        padding: 72px 0;
    }

    .wbs-process-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .wbs-process-item {
        padding-top: 21px;
    }

    .wbs-faq {
        padding: 30px 22px;
        gap: 25px;
    }

    .wbs-faq-list summary {
        font-size: 13px;
    }
}

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



/* ============================================================
   WEBDIZAYN — WEB YAZILIMI ARAYÜZ GÖRSELLERİ
   wbs-service.css ortak sınıflarının devamı. Renkler mevcut
   temadan gelir; gerçek müşteri verisi kullanılmaz.
============================================================ */
.wbs-browser--software {
    min-height: 375px;
}

.wbs-software-app {
    min-height: 336px;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    background: #f6f6f8;
}

.wbs-app-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #1a1a20;
    padding: 16px 6px;
    color: #7c7d86;
}

.wbs-rail-logo {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    background: var(--wbs-accent);
    color: white;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 850;
    margin-bottom: 5px;
}

.wbs-rail-icon {
    font-size: 17px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: #777982;
}

    .wbs-rail-icon.active {
        color: #fff;
        background: #37373f;
        border-radius: 6px;
    }

.wbs-rail-bottom {
    margin-top: auto;
    font-size: 11px;
    color: #ef3340;
}

.wbs-app-main {
    min-width: 0;
    padding: 19px 19px 22px;
}

.wbs-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 19px;
    gap: 12px;
}

    .wbs-app-head small {
        display: block;
        color: #a0a0a7;
        letter-spacing: 1.3px;
        font-size: 8px;
        font-weight: 750;
        margin-bottom: 5px;
    }

    .wbs-app-head strong {
        display: block;
        color: #25252b;
        font-weight: 820;
        font-size: 19px;
        letter-spacing: -.06em;
    }

.wbs-app-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fce5e7;
    color: var(--wbs-accent);
    font-size: 10px;
    font-weight: 800;
}

.wbs-app-stats {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

    .wbs-app-stats > div {
        background: #fff;
        border: 1px solid #eaeaec;
        border-radius: 6px;
        padding: 11px 13px;
    }

    .wbs-app-stats span {
        display: block;
        font-size: 9px;
        color: #7d7e86;
    }

    .wbs-app-stats strong {
        display: block;
        font-size: 23px;
        font-weight: 850;
        color: #26262c;
        line-height: 1.1;
        margin-top: 6px;
        letter-spacing: -.06em;
    }

    .wbs-app-stats small {
        display: block;
        margin-top: 5px;
        font-size: 8px;
        color: #9a9aa1;
    }

.wbs-app-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 0 11px;
    color: #292930;
    font-size: 10px;
    font-weight: 800;
}

    .wbs-app-subtitle span {
        font-size: 8px;
        color: var(--wbs-accent);
        font-weight: 700;
    }

.wbs-kanban {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
}

.wbs-kanban-col {
    padding: 8px;
    border-radius: 5px;
    background: #ededf0;
    min-width: 0;
}

    .wbs-kanban-col b {
        display: block;
        color: #797982;
        font-size: 9px;
        margin-bottom: 9px;
    }

    .wbs-kanban-col > div {
        padding: 9px 7px;
        background: white;
        box-shadow: 0 2px 7px rgba(0,0,0,.025);
        border-left: 2px solid #eb3340;
        border-radius: 3px;
        margin-bottom: 6px;
        font-size: 9px;
        font-weight: 780;
        color: #313138;
        white-space: nowrap;
    }

        .wbs-kanban-col > div small {
            display: block;
            font-weight: 450;
            color: #9b9ba0;
            font-size: 8px;
            margin-top: 5px;
        }

.wbs-admin-table {
    background: white;
    border: 1px solid #e9e9ec;
    border-radius: 5px;
    overflow: hidden;
}

.wbs-admin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 31px;
    padding: 7px 12px;
    border-bottom: 1px solid #ededf0;
    color: #4f4f56;
    font-size: 10px;
}

    .wbs-admin-row:last-child {
        border-bottom: none;
    }

    .wbs-admin-row.heading {
        background: #f9f9fb;
        color: #91919a;
        font-size: 8px;
        font-weight: 800;
    }

    .wbs-admin-row em {
        background: #e8f6ee;
        color: #279664;
        font-size: 8px;
        font-weight: 800;
        font-style: normal;
        padding: 4px 6px;
        border-radius: 3px;
    }

        .wbs-admin-row em.draft {
            background: #f0f0f3;
            color: #7e7e85;
        }

.wbs-api-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 27px;
}

.wbs-api-node {
    min-width: 0;
    flex: 1 1 0;
    background: white;
    border: 1px solid #e6e6e9;
    padding: 14px 7px;
    border-radius: 6px;
    text-align: center;
}

    .wbs-api-node > span {
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        margin: 0 auto 10px;
        border-radius: 8px;
        background: #eeeef0;
        color: #4d4d55;
        font-size: 10px;
        font-weight: 850;
    }

    .wbs-api-node.center {
        border-color: #f5c2c6;
        background: #fffafa;
    }

        .wbs-api-node.center > span {
            background: var(--wbs-accent);
            color: white;
        }

    .wbs-api-node strong {
        display: block;
        font-size: 9px;
        font-weight: 850;
        color: #37373c;
        white-space: nowrap;
    }

    .wbs-api-node small {
        display: block;
        margin-top: 7px;
        font-size: 8px;
        color: #9999a0;
    }

.wbs-api-connect {
    color: var(--wbs-accent);
    font-size: 15px;
    font-weight: 800;
}

.wbs-api-code {
    background: #1d1d23;
    color: #d8d8df;
    border-radius: 6px;
    padding: 11px 12px;
    margin-top: 20px;
}

    .wbs-api-code > div {
        font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
        font-size: 8px;
        padding: 6px 0;
        border-bottom: 1px solid #36363e;
    }

        .wbs-api-code > div:last-child {
            border-bottom: none;
        }

    .wbs-api-code span {
        display: inline-block;
        color: #ff5360;
        font-weight: 850;
        min-width: 38px;
    }

    .wbs-api-code em {
        color: #83d1ad;
        float: right;
        font-size: 7px;
        font-style: normal;
    }

.wbs-pay-layout {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 27px;
}

.wbs-pay-card {
    display: flex;
    flex-direction: column;
    padding: 17px 14px;
    border-radius: 10px;
    min-height: 143px;
    background: linear-gradient(135deg,#28282f,#54545e);
    box-shadow: 0 12px 27px rgba(0,0,0,.15);
    color: white;
}

.wbs-pay-chip {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    background: #dfd5a2;
    opacity: .9;
    margin-bottom: 16px;
}

.wbs-pay-card span {
    color: #c3c3cb;
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.wbs-pay-card strong {
    font-size: 12px;
    letter-spacing: .8px;
    white-space: nowrap;
}

.wbs-pay-card small {
    margin-top: auto;
    color: #a8a9b4;
    font-size: 7px;
}

.wbs-pay-details {
    min-width: 0;
    background: white;
    border: 1px solid #e9e9ec;
    border-radius: 7px;
    padding: 13px;
}

    .wbs-pay-details > small {
        font-size: 8px;
        font-weight: 850;
        color: #a0a0a9;
        letter-spacing: .8px;
    }

    .wbs-pay-details > div:not(.wbs-pay-secure) {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        font-size: 8px;
        color: #777880;
        margin-top: 13px;
    }

    .wbs-pay-details b {
        color: #25252b;
        white-space: nowrap;
        font-size: 9px;
    }

.wbs-pay-secure {
    padding: 9px 5px;
    margin-top: 15px;
    background: #fce9eb;
    color: #ae1523;
    border-radius: 4px;
    text-align: center;
    font-size: 8px;
    font-weight: 800;
}

.wbs-pay-steps {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 7px;
    margin-top: 19px;
    padding: 12px 4px;
    background: white;
    border: 1px solid #ebebed;
    border-radius: 5px;
    color: #aaabb1;
    font-size: 8px;
    font-weight: 750;
}

    .wbs-pay-steps span.active {
        color: #e30613;
    }

.wbs-support-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 5px;
    background: white;
    border: 1px solid #eaeaec;
}

.wbs-live-dot {
    display: block;
    width: 11px;
    height: 11px;
    background: #31b878;
    border: 3px solid #d3f3e2;
    border-radius: 50%;
    flex-shrink: 0;
}

.wbs-support-status > div {
    flex: 1;
}

.wbs-support-status strong {
    display: block;
    font-size: 11px;
    color: #29292e;
}

.wbs-support-status small {
    display: block;
    font-size: 8px;
    margin-top: 4px;
    color: #9898a0;
}

.wbs-support-status > span:last-child {
    color: #32996b;
    background: #e8f7ef;
    border-radius: 3px;
    padding: 5px 6px;
    font-size: 8px;
    font-weight: 850;
}

.wbs-ticket {
    display: flex;
    align-items: center;
    gap: 9px;
    background: white;
    border: 1px solid #e9e9ed;
    padding: 9px 10px;
    margin-top: 6px;
    border-radius: 5px;
}

    .wbs-ticket > i {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e7f5ee;
        color: #239467;
        font-size: 12px;
        font-style: normal;
        display: grid;
        place-items: center;
    }

    .wbs-ticket > div {
        min-width: 0;
        flex: 1;
    }

    .wbs-ticket strong {
        display: block;
        color: #404047;
        font-size: 9px;
    }

    .wbs-ticket small {
        display: block;
        color: #a1a1a8;
        font-size: 8px;
        margin-top: 4px;
    }

    .wbs-ticket b {
        padding: 4px 6px;
        color: #21946b;
        background: #e6f6ed;
        font-size: 8px;
        border-radius: 4px;
    }

        .wbs-ticket b.progress {
            color: #c18322;
            background: #fff5df;
        }

@media (max-width: 767px) {
    .wbs-browser--software {
        min-height: 330px;
    }

    .wbs-software-app {
        min-height: 291px;
        grid-template-columns: 33px minmax(0,1fr);
    }

    .wbs-app-rail {
        padding: 12px 3px;
        gap: 13px;
    }

    .wbs-rail-logo {
        width: 23px;
        height: 23px;
        font-size: 12px;
    }

    .wbs-rail-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .wbs-app-main {
        padding: 12px 10px;
    }

    .wbs-app-head {
        margin-bottom: 11px;
    }

        .wbs-app-head strong {
            font-size: 16px;
        }

        .wbs-app-head small {
            font-size: 7px;
        }

    .wbs-app-stats > div {
        padding: 8px;
    }

    .wbs-app-stats strong {
        font-size: 18px;
    }

    .wbs-app-subtitle {
        margin: 12px 0 8px;
    }

    .wbs-kanban-col {
        padding: 5px;
    }

        .wbs-kanban-col > div {
            padding: 7px 4px;
            font-size: 8px;
        }

            .wbs-kanban-col > div small {
                font-size: 7px;
            }

    .wbs-api-flow {
        margin-top: 20px;
        gap: 2px;
    }

    .wbs-api-node {
        padding: 11px 3px;
    }

        .wbs-api-node strong {
            font-size: 7px;
        }

        .wbs-api-node small {
            font-size: 7px;
        }

    .wbs-api-connect {
        font-size: 11px;
    }

    .wbs-api-code {
        padding: 7px;
        margin-top: 14px;
    }

        .wbs-api-code > div {
            font-size: 7px;
        }

        .wbs-api-code em {
            font-size: 6px;
        }

    .wbs-pay-layout {
        gap: 5px;
        margin-top: 17px;
    }

    .wbs-pay-card {
        min-height: 140px;
        padding: 12px 9px;
    }

        .wbs-pay-card strong {
            font-size: 9px;
        }

    .wbs-pay-details {
        padding: 9px 7px;
    }

        .wbs-pay-details > div:not(.wbs-pay-secure) {
            display: block;
            margin-top: 9px;
        }

        .wbs-pay-details b {
            display: block;
            margin-top: 3px;
        }

    .wbs-pay-secure {
        margin-top: 8px;
        font-size: 7px;
    }

    .wbs-pay-steps {
        margin-top: 12px;
    }
}

@media (max-width: 365px) {
    .wbs-rail-icon {
        display: none;
    }

    .wbs-api-code em {
        display: none;
    }

    .wbs-pay-card strong {
        font-size: 8px;
    }

    .wbs-kanban {
        gap: 4px;
    }
}



/* ==========================================
   WEBDIZAYN — PREMIUM BENTO SERVICES
========================================== */

.wd-showcase-grid {
    display: grid;
    grid-template-columns: 1.16fr 1fr;
    grid-auto-rows: minmax(265px, auto);
    gap: 18px;
    width: 100%;
    align-items: stretch;
}

/* CARD BASE */

.wd-showcase-card {
    --wd-card-bg: #f2f3f5;
    --wd-card-text: #101115;
    --wd-card-muted: #727783;
    --wd-card-line: rgba(18, 20, 25, .11);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 265px;
    padding: 28px 30px 25px;
    background: var(--wd-card-bg);
    color: var(--wd-card-text);
    text-decoration: none !important;
    border: 1px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}

    .wd-showcase-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 55px rgba(12, 14, 20, .11);
    }

    /* ACCENT EDGE */

    .wd-showcase-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
        height: 3px;
        background: #e60012;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    }

    .wd-showcase-card:hover::before {
        transform: scaleX(1);
    }

    /* LARGE FIRST CARD */

    .wd-showcase-card:first-child {
        --wd-card-bg: #111318;
        --wd-card-text: #ffffff;
        --wd-card-muted: #a5a9b3;
        --wd-card-line: rgba(255, 255, 255, .16);
        grid-row: span 2;
        min-height: 548px;
        padding: 35px 37px 30px;
        background: radial-gradient( circle at 95% 68%, rgba(229, 0, 18, .10), transparent 47% ), #111318;
    }

    .wd-showcase-card:nth-child(3n + 3) {
        --wd-card-bg: #e9ebef;
    }

    /* BACKGROUND DECORATION */

    .wd-showcase-card:first-child::after {
        content: "";
        position: absolute;
        right: -145px;
        bottom: 50px;
        width: 430px;
        height: 430px;
        border: 1px solid rgba(255,255,255,.065);
        border-radius: 50%;
        box-shadow: 0 0 0 75px rgba(255,255,255,.018), 0 0 0 150px rgba(255,255,255,.012);
        pointer-events: none;
    }

/* TOP ROW */

.wd-showcase-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wd-showcase-index {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    color: var(--wd-card-muted);
}

.wd-showcase-index-separator {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--wd-card-line);
}

.wd-showcase-top-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    color: #e60012;
    font-size: 16px;
    border: 1px solid var(--wd-card-line);
    border-radius: 50%;
    flex-shrink: 0;
}

/* CONTENT */

.wd-showcase-info {
    position: relative;
    z-index: 2;
    width: 62%;
    margin-top: 22px;
}

.wd-showcase-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--wd-card-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    line-height: 1.5;
}

.wd-showcase-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: #e60012;
    transform: rotate(45deg);
}

.wd-showcase-info h3 {
    margin: 13px 0 10px;
    padding: 0;
    color: var(--wd-card-text);
    font-size: clamp(25px, 2.4vw, 35px);
    font-weight: 750;
    letter-spacing: -1.5px;
    line-height: 1.13;
    overflow-wrap: break-word;
    transition: color .35s ease;
}

.wd-showcase-info p {
    margin: 0;
    color: var(--wd-card-muted);
    font-size: 12px;
    line-height: 1.75;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* FIRST CARD TYPOGRAPHY */

.wd-showcase-card:first-child .wd-showcase-info {
    width: 100%;
    max-width: 485px;
    margin-top: 56px;
}

.wd-showcase-card:first-child .wd-showcase-eyebrow {
    color: #aeb1bc;
    font-size: 10px;
}

.wd-showcase-card:first-child .wd-showcase-info h3 {
    margin-top: 17px;
    margin-bottom: 18px;
    font-size: clamp(39px, 4vw, 59px);
    line-height: 1.06;
    letter-spacing: -2.9px;
}

.wd-showcase-card:first-child .wd-showcase-info p {
    max-width: 380px;
    color: #9da1ae;
    font-size: 13px;
    line-height: 1.85;
}

/* VISUAL AREA */

.wd-showcase-visual {
    position: absolute;
    z-index: 1;
    right: -4%;
    top: 17%;
    width: 43%;
    height: 64%;
    pointer-events: none;
    transform: rotate(-4deg);
    transform-origin: center center;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}

.wd-showcase-browser {
    width: 100%;
    height: 100%;
    padding: 5px;
    background: #ffffff;
    border: 1px solid rgba(18,20,26,.12);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 45px rgba(13,15,21,.16);
}

.wd-showcase-browser-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    height: 24px;
    padding: 0 6px;
    background: #f6f6f8;
    color: #9b9da5;
    border-radius: 4px 4px 0 0;
}

.wd-showcase-browser-dots {
    display: flex;
    gap: 3px;
}

    .wd-showcase-browser-dots i {
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ccd0d5;
    }

        .wd-showcase-browser-dots i:first-child {
            background: #e60012;
        }

.wd-showcase-browser-top > span {
    font-size: 5px;
    font-weight: 800;
    letter-spacing: .45px;
    white-space: nowrap;
}

.wd-showcase-browser-top > i {
    font-size: 7px;
}

.wd-showcase-browser-screen {
    position: relative;
    width: 100%;
    height: calc(100% - 24px);
    overflow: hidden;
    background: radial-gradient( circle at 75% 25%, #37404b, transparent 55% ), linear-gradient(145deg, #151820, #050609);
}

    .wd-showcase-browser-screen img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: saturate(.85);
        transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
    }

/* PLACEHOLDER — NO IMAGE REQUIRED */

.wd-showcase-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background: linear-gradient( 90deg, rgba(255,255,255,.035) 1px, transparent 1px ), linear-gradient( 0deg, rgba(255,255,255,.035) 1px, transparent 1px ), #101218;
    background-size: 28px 28px;
}

    .wd-showcase-placeholder > span {
        font-size: clamp(42px, 5vw, 83px);
        font-weight: 850;
        letter-spacing: -6px;
        line-height: 1;
    }

        .wd-showcase-placeholder > span span {
            color: #e60012;
        }

    .wd-showcase-placeholder small {
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2px;
        color: #b3b6bf;
    }

/* FIRST CARD: LARGE FLOATING SCREEN */

.wd-showcase-card:first-child .wd-showcase-visual {
    top: auto;
    right: -5%;
    bottom: 79px;
    width: 79%;
    height: 42%;
    transform: rotate(-5deg);
}

.wd-showcase-card:first-child .wd-showcase-browser {
    padding: 7px;
    border-radius: 10px;
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 35px 70px rgba(0,0,0,.38);
}

/* BOTTOM ACTION */

.wd-showcase-bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid var(--wd-card-line);
}

    .wd-showcase-bottom > span:first-child {
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 1.6px;
        color: var(--wd-card-text);
    }

.wd-showcase-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    background: #101115;
    color: #ffffff;
    font-size: 12px;
    border-radius: 50%;
    transform: rotate(-45deg);
    transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease;
}

.wd-showcase-card:first-child .wd-showcase-link-icon {
    background: #e60012;
}

.wd-showcase-card:hover .wd-showcase-link-icon {
    background: #e60012;
    transform: rotate(0deg);
}

.wd-showcase-card:hover .wd-showcase-visual {
    transform: rotate(-1deg) translateY(-7px);
}

.wd-showcase-card:first-child:hover .wd-showcase-visual {
    transform: rotate(-2deg) translateY(-9px);
}

.wd-showcase-card:hover .wd-showcase-browser-screen img {
    transform: scale(1.07);
    filter: saturate(1);
}

/* FOCUS */

.wd-showcase-card:focus-visible {
    outline: 3px solid #e60012;
    outline-offset: 4px;
}

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

@media (max-width: 1050px) {

    .wd-showcase-grid {
        grid-template-columns: 1fr 1fr;
    }

    .wd-showcase-card {
        padding: 25px;
    }

        .wd-showcase-card:first-child {
            padding: 30px;
        }

            .wd-showcase-card:first-child .wd-showcase-info h3 {
                font-size: 43px;
            }

    .wd-showcase-info {
        width: 70%;
    }

        .wd-showcase-info h3 {
            font-size: 27px;
        }
}

@media (max-width: 760px) {

    .wd-showcase-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 15px;
    }

    .wd-showcase-card,
    .wd-showcase-card:first-child {
        grid-column: auto;
        grid-row: auto;
        min-height: 370px;
        padding: 25px;
    }

        .wd-showcase-card:first-child {
            min-height: 480px;
        }

            .wd-showcase-info,
            .wd-showcase-card:first-child .wd-showcase-info {
                width: 72%;
                margin-top: 36px;
            }

                .wd-showcase-card:first-child .wd-showcase-info h3 {
                    font-size: clamp(36px, 8vw, 48px);
                    letter-spacing: -2px;
                }

    .wd-showcase-visual {
        width: 43%;
        height: 53%;
        top: 26%;
    }

    .wd-showcase-card:first-child .wd-showcase-visual {
        right: -5%;
        bottom: 73px;
        width: 79%;
        height: 38%;
    }
}

@media (max-width: 480px) {

    .wd-showcase-card,
    .wd-showcase-card:first-child {
        padding: 23px;
    }

    .wd-showcase-card {
        min-height: 390px;
    }

        .wd-showcase-card:first-child {
            min-height: 475px;
        }

            .wd-showcase-info,
            .wd-showcase-card:first-child .wd-showcase-info {
                width: 100%;
                margin-top: 24px;
            }

                .wd-showcase-info h3 {
                    font-size: 30px;
                }

                .wd-showcase-info p {
                    max-width: 78%;
                    -webkit-line-clamp: 2;
                }

                .wd-showcase-card:first-child .wd-showcase-info p {
                    max-width: 90%;
                    -webkit-line-clamp: 3;
                }

    .wd-showcase-visual {
        top: auto;
        bottom: 74px;
        right: -6%;
        width: 57%;
        height: 40%;
        opacity: .76;
    }

    .wd-showcase-card:first-child .wd-showcase-visual {
        bottom: 75px;
        width: 83%;
        height: 36%;
        opacity: 1;
    }

    .wd-showcase-bottom > span:first-child {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-showcase-card,
    .wd-showcase-card::before,
    .wd-showcase-visual,
    .wd-showcase-browser-screen img,
    .wd-showcase-link-icon {
        transition: none !important;
    }
}




/* ===========================================================
   WEBDIZAYN / SEO HIZMET SAYFALARI — ARAYÜZ ÖRNEKLERİ
   Ortak wbs-service.css ile birlikte kullanılmaktadır.
=========================================================== */
.wbs-browser--seo {
    min-height: 375px;
}

.wbs-seo-app {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    min-height: 336px;
    background: #f7f7f9;
}

.wbs-seo-sidebar {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 15px 5px;
    gap: 16px;
    background: #1b1b20;
}

.wbs-seo-logo {
    width: 30px;
    height: 30px;
    background: #e30613;
    color: white;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-weight: 850;
    font-size: 15px;
}

    .wbs-seo-logo span {
        display: none;
    }

.wbs-seo-side-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #8c8c96;
    border-radius: 6px;
}

    .wbs-seo-side-icon.is-active {
        background: #35353d;
        color: #fff;
    }

.wbs-seo-appbody {
    min-width: 0;
    padding: 20px 19px 17px;
}

.wbs-seo-overline {
    color: #a0a0a7;
    font-size: 8px;
    letter-spacing: 1.2px;
    font-weight: 800;
}

.wbs-seo-app-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    color: #25252b;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.045em;
    font-weight: 850;
}

    .wbs-seo-app-title > span {
        display: grid;
        place-items: center;
        color: #e30613;
        background: #fff0f1;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        font-size: 11px;
    }

.wbs-seo-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 21px;
    padding: 13px 12px;
    background: #fff;
    border: 1px solid #ebebed;
    border-radius: 7px;
}

.wbs-seo-summary-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    color: #c71626;
    background: #fde8ea;
}

.wbs-seo-summary strong {
    display: block;
    font-size: 11px;
    color: #33333a;
    margin-bottom: 5px;
}

.wbs-seo-summary small {
    display: block;
    font-size: 8px;
    color: #9b9ba3;
}

.wbs-seo-mini-title {
    margin: 0 0 9px;
    color: #9c9ca4;
    letter-spacing: 1.05px;
    font-size: 8px;
    font-weight: 850;
}

.wbs-seo-rowlist {
    border: 1px solid #ececee;
    border-radius: 6px;
    background: white;
    overflow: hidden;
}

.wbs-seo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 33px;
    padding: 8px 11px;
    border-bottom: 1px solid #eeeef0;
    font-size: 9px;
    color: #565660;
}

    .wbs-seo-row:last-child {
        border-bottom: 0;
    }

.wbs-seo-check {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    font-size: 8px;
    background: #fce8ea;
    color: #c61724;
    border-radius: 50%;
}

.wbs-seo-row > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.wbs-seo-row > small {
    flex-shrink: 0;
    font-size: 8px;
    color: #b30f1e;
    border: 1px solid #f7dade;
    background: #fffbfb;
    padding: 4px 6px;
    border-radius: 3px;
}

.wbs-seo-footer-note {
    margin-top: 12px;
    color: #a8a8af;
    font-size: 8px;
    text-align: right;
}

@media (max-width: 767px) {
    .wbs-browser--seo {
        min-height: 330px;
    }

    .wbs-seo-app {
        grid-template-columns: 35px minmax(0,1fr);
        min-height: 291px;
    }

    .wbs-seo-sidebar {
        gap: 12px;
        padding: 13px 3px;
    }

    .wbs-seo-logo {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .wbs-seo-side-icon {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .wbs-seo-appbody {
        padding: 14px 11px 10px;
    }

    .wbs-seo-app-title {
        font-size: 16px;
    }

    .wbs-seo-summary {
        margin: 12px 0 12px;
        padding: 10px;
    }

    .wbs-seo-summary-mark {
        width: 28px;
        height: 28px;
    }

    .wbs-seo-row {
        gap: 5px;
        padding: 7px;
        font-size: 8px;
        min-height: 31px;
    }

        .wbs-seo-row > small {
            font-size: 7px;
        }
}

@media (max-width: 365px) {
    .wbs-seo-side-icon {
        display: none;
    }

    .wbs-seo-row > small {
        display: none;
    }
}

/* ==========================================
   WEBDIZAYN EDITORIAL SERVICES
========================================== */

.wd-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 26px;
    width: 100%;
    align-items: stretch;
}

/* CARD RESET */

.wd-editorial-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #101115;
    text-decoration: none !important;
}

/* ==========================================
   COVER IMAGE
========================================== */

.wd-editorial-visual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    overflow: hidden;
    background: #eceef0;
    isolation: isolate;
}

    .wd-editorial-visual > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1);
        transition: transform .85s cubic-bezier(.22, 1, .36, 1);
    }

.wd-editorial-item:hover .wd-editorial-visual > img {
    transform: scale(1.065);
}

/* SUBTLE IMAGE GRADIENT */

.wd-editorial-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 180deg, rgba(0, 0, 0, .25) 0%, transparent 36%, transparent 100% );
    pointer-events: none;
}

/* ANIMATED RED LINE */

.wd-editorial-visual::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #e60012;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.wd-editorial-item:hover .wd-editorial-visual::after {
    transform: scaleX(1);
}

/* IMAGE NUMBER */

.wd-editorial-index {
    position: absolute;
    z-index: 2;
    top: 21px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.5;
}

    .wd-editorial-index > span {
        display: block;
        width: 18px;
        height: 1px;
        background: #ffffff;
        opacity: .7;
    }

/* IMAGE CORNER ARROW */

.wd-editorial-image-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: #e60012;
    color: #ffffff;
    font-size: 16px;
    transform: translateY(0);
    transition: background .3s ease;
}

    .wd-editorial-image-arrow i {
        transform: rotate(-45deg);
        transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    }

.wd-editorial-item:hover .wd-editorial-image-arrow {
    background: #111318;
}

    .wd-editorial-item:hover .wd-editorial-image-arrow i {
        transform: rotate(0deg);
    }

/* ==========================================
   TEXT AREA — NO BOX
========================================== */

.wd-editorial-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* CATEGORY LABEL */

.wd-editorial-category {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    color: #80848e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.5;
    text-transform: uppercase;
}

    .wd-editorial-category > span {
        display: block;
        width: 20px;
        height: 2px;
        flex: 0 0 20px;
        background: #e60012;
        transition: width .3s ease, flex-basis .3s ease;
    }

.wd-editorial-item:hover .wd-editorial-category > span {
    width: 30px;
    flex-basis: 30px;
}

/* TITLE */

.wd-editorial-detail h3 {
    margin: 0 0 12px;
    padding: 0;
    color: #101115;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 750;
    line-height: 1.22;
    letter-spacing: -1.05px;
    transition: color .3s ease;
}

.wd-editorial-item:hover .wd-editorial-detail h3 {
    color: #d90012;
}

/* DESCRIPTION */

.wd-editorial-detail p {
    margin: 0 0 28px;
    padding: 0;
    color: #737985;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ==========================================
   BOTTOM LINK
========================================== */

.wd-editorial-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin-top: auto;
    padding-top: 19px;
    border-top: 1px solid #e7e8eb;
    transition: border-color .3s ease;
}

    .wd-editorial-action > span {
        color: #17191e;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        transition: color .3s ease;
    }

    .wd-editorial-action > i {
        color: #e60012;
        font-size: 16px;
        transform: rotate(-45deg);
        transition: transform .35s ease;
    }

.wd-editorial-item:hover .wd-editorial-action {
    border-color: #e60012;
}

    .wd-editorial-item:hover .wd-editorial-action > span {
        color: #e60012;
    }

    .wd-editorial-item:hover .wd-editorial-action > i {
        transform: rotate(0deg) translateX(3px);
    }

/* ACCESSIBILITY */

.wd-editorial-item:focus-visible {
    outline: 2px solid #e60012;
    outline-offset: 6px;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {

    .wd-editorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 22px;
    }

    .wd-editorial-detail h3 {
        font-size: 27px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 680px) {

    .wd-editorial-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .wd-editorial-visual {
        aspect-ratio: 1.48 / 1;
    }

    .wd-editorial-index {
        top: 18px;
        left: 18px;
    }

    .wd-editorial-image-arrow {
        width: 47px;
        height: 47px;
    }

    .wd-editorial-detail {
        padding-top: 23px;
    }

        .wd-editorial-detail h3 {
            font-size: 27px;
        }

        .wd-editorial-detail p {
            font-size: 13px;
            margin-bottom: 22px;
        }

    .wd-editorial-action {
        padding-top: 16px;
    }
}

/* MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .wd-editorial-item *,
    .wd-editorial-visual::after {
        transition: none !important;
    }
}



/* ==========================================================
   GOOGLE ADS HİZMET SAYFALARI - GÖRSELSİZ ÖRNEK ARAYÜZ
   Var olan .wbs-service ile aynı şablon ve sınıf sistemindedir.
========================================================== */
.wbs-browser--ads {
    min-height: 385px;
}

.wbs-ads-app {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    min-height: 345px;
    background: #f6f6f8;
}

.wbs-ads-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 14px 7px;
    border-right: 1px solid #ededf0;
    background: #fff;
}

.wbs-ads-logo {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 19px;
    letter-spacing: -.08em;
    font-weight: 900;
    color: #171719;
    margin-bottom: 12px;
}

    .wbs-ads-logo span {
        color: var(--wbs-accent);
    }

.wbs-ads-menu, .wbs-ads-menu-active {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 12px;
    color: #9b9ba3;
}

.wbs-ads-menu-active {
    background: #fff0f1;
    color: var(--wbs-accent);
}

.wbs-ads-main {
    min-width: 0;
    padding: 20px 19px 14px;
}

.wbs-ads-overline {
    color: var(--wbs-accent);
    font-size: 8px;
    letter-spacing: 1.45px;
    font-weight: 850;
}

.wbs-ads-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    margin: 6px 0 14px;
}

    .wbs-ads-heading strong {
        color: #25252b;
        font-size: clamp(14px, 1.6vw, 19px);
        letter-spacing: -.05em;
        line-height: 1.26;
        font-weight: 850;
    }

.wbs-ads-heading-icon {
    flex: 0 0 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--wbs-accent);
    background: #ffe9ea;
    font-size: 12px;
}

.wbs-ads-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 13px;
}

    .wbs-ads-tabs span {
        padding: 6px 9px;
        border: 1px solid #ececef;
        border-radius: 3px;
        background: #fff;
        color: #73737b;
        font-size: 8px;
        font-weight: 700;
    }

        .wbs-ads-tabs span:first-child {
            color: var(--wbs-accent);
            border-color: #f4d5d7;
            background: #fff6f6;
        }

.wbs-ads-chart {
    padding: 12px 12px 7px;
    border: 1px solid #ececef;
    border-radius: 7px;
    background: #fff;
}

.wbs-ads-chart-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: #777780;
    letter-spacing: .8px;
    font-size: 8px;
    font-weight: 750;
}

.wbs-ads-legend {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

    .wbs-ads-legend i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--wbs-accent);
        margin-right: 3px;
    }

.wbs-ads-chart-body {
    margin-top: 10px;
    height: 69px;
    background: repeating-linear-gradient(to bottom, #f1f1f2 0 1px, transparent 1px 22px);
}

.wbs-ads-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    height: 100%;
    padding: 0 9px;
}

    .wbs-ads-bars i {
        width: 10%;
        height: var(--wbs-bar);
        max-width: 26px;
        min-width: 7px;
        border-radius: 3px 3px 0 0;
        background: #d9d9de;
    }

        .wbs-ads-bars i:nth-child(3n+1), .wbs-ads-bars i:last-child {
            background: var(--wbs-accent);
        }

.wbs-ads-check-title {
    margin: 14px 0 6px;
    color: #8a8a91;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 8px;
}

.wbs-ads-tasks {
    border: 1px solid #ececef;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.wbs-ads-task {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 27px;
    padding: 5px 9px;
    border-bottom: 1px solid #f0f0f2;
    font-size: 9px;
    font-weight: 600;
    color: #5d5d65;
}

    .wbs-ads-task:last-child {
        border-bottom: 0;
    }

.wbs-ads-task-check {
    display: grid;
    place-items: center;
    flex: 0 0 15px;
    height: 15px;
    background: #fceced;
    color: var(--wbs-accent);
    border-radius: 50%;
    font-size: 7px;
}

.wbs-ads-task-next {
    margin-left: auto;
    color: #c0c0c5;
    font-size: 9px;
}

.wbs-ads-smallnote {
    margin-top: 7px;
    font-size: 7px;
    color: #9999a1;
}

@media (max-width: 767px) {
    .wbs-browser--ads {
        min-height: 350px;
    }

    .wbs-ads-app {
        grid-template-columns: 35px minmax(0,1fr);
        min-height: 311px;
    }

    .wbs-ads-sidebar {
        gap: 10px;
        padding: 11px 3px;
    }

    .wbs-ads-logo {
        width: 25px;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .wbs-ads-menu, .wbs-ads-menu-active {
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .wbs-ads-main {
        padding: 14px 10px 11px;
    }

    .wbs-ads-heading strong {
        font-size: 15px;
    }

    .wbs-ads-tabs span {
        font-size: 7px;
        padding: 5px 6px;
    }

    .wbs-ads-chart {
        padding: 9px 8px 5px;
    }

    .wbs-ads-bars {
        gap: 5px;
        padding: 0 5px;
    }

    .wbs-ads-chart-body {
        height: 65px;
    }

    .wbs-ads-task {
        font-size: 8px;
        min-height: 26px;
    }
}


/* ================================================
   WEBDIZAYN - PREMIUM CONTACT PAGE
================================================ */

.wdc-contact {
    --wdc-red: #e30613;
    --wdc-black: #121214;
    --wdc-text: #202023;
    --wdc-muted: #77777e;
    --wdc-border: #e9e9eb;
    --wdc-soft: #f8f8f8;
    width: 100%;
    color: var(--wdc-text);
    font-family: inherit;
    padding: 35px 0 35px;
}

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

    .wdc-contact h2,
    .wdc-contact h3,
    .wdc-contact p {
        margin-top: 0;
    }

    .wdc-contact a {
        text-decoration: none;
    }

        .wdc-contact a:focus-visible {
            outline: 2px solid var(--wdc-red);
            outline-offset: 4px;
        }


/* ================================================
   INTRO
================================================ */

.wdc-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
    gap: 65px;
    align-items: end;
    padding-bottom: 70px;
}

.wdc-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #808086;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 2px;
}

.wdc-eyebrow-line {
    display: block;
    width: 32px;
    height: 2px;
    flex-shrink: 0;
    background: var(--wdc-red);
}

.wdc-intro-left h2 {
    margin: 28px 0 27px;
    color: var(--wdc-black);
    font-size: clamp(44px, 5.3vw, 82px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.075em;
}

    .wdc-intro-left h2 em {
        font-style: normal;
        color: var(--wdc-red);
    }

.wdc-red-dot {
    color: var(--wdc-red);
}

.wdc-intro-left > p {
    max-width: 590px;
    margin-bottom: 0;
    color: var(--wdc-muted);
    font-size: 14px;
    line-height: 2;
}


/* Intro right */

.wdc-intro-right {
    padding: 0 0 8px 29px;
    border-left: 1px solid #e2e2e4;
}

.wdc-intro-right-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: #828288;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.2px;
}

.wdc-online-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--wdc-red);
    box-shadow: 0 0 0 4px rgba(227,6,19,.08);
}

.wdc-intro-right > p {
    margin-bottom: 28px;
    color: #77777c;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.5;
    letter-spacing: -.045em;
}

    .wdc-intro-right > p strong {
        color: var(--wdc-black);
        font-weight: 750;
    }

.wdc-intro-mail {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    color: var(--wdc-black);
    font-size: 13px;
    font-weight: 700;
    transition: color .25s ease;
}

    .wdc-intro-mail > span:first-child {
        overflow-wrap: anywhere;
    }


/* ============================================
   WEBDIZAYN - BLOG DETAIL CONTENT
   No outer container / No max-width
============================================ */

.wdn-lead,
.wdn-text,
.wdn-heading,
.wdn-subheading,
.wdn-list,
.wdn-steps,
.wdn-note,
.wdn-quote,
.wdn-divider {
    box-sizing: border-box;
}

/* Intro paragraph */

.wdn-lead {
    margin: 10px 0 35px;
    padding: 8px 0 8px 24px;
    border-left: 3px solid #e30613;
    color: #1b1b1e;
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.65;
    font-weight: 550;
    letter-spacing: -.025em;
}

/* Standard text */

.wdn-text {
    margin: 0 0 22px;
    color: #65656c;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
}

    .wdn-text strong {
        color: #242427;
        font-weight: 700;
    }

/* Section headings */

.wdn-heading {
    position: relative;
    margin: 48px 0 20px;
    padding-bottom: 19px;
    border-bottom: 1px solid #e8e8eb;
    color: #17171a;
    font-size: clamp(25px, 2.7vw, 36px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.3;
}

    .wdn-heading::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 65px;
        height: 3px;
        background: #e30613;
    }

.wdn-subheading {
    margin: 31px 0 13px;
    color: #252529;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: -.025em;
}

/* Lists */

.wdn-list {
    list-style: none;
    padding: 0;
    margin: 23px 0 30px;
}

    .wdn-list li {
        position: relative;
        padding: 14px 12px 14px 30px;
        border-bottom: 1px solid #eeeeef;
        color: #66666d;
        font-size: 14px;
        line-height: 1.8;
    }

        .wdn-list li:first-child {
            border-top: 1px solid #eeeeef;
        }

        .wdn-list li::before {
            content: "";
            position: absolute;
            top: 25px;
            left: 4px;
            width: 8px;
            height: 8px;
            background: #e30613;
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .wdn-list li strong {
            color: #222226;
            font-weight: 750;
        }

/* Numbered steps */

.wdn-steps {
    list-style: none;
    counter-reset: wdn-counter;
    padding: 0;
    margin: 23px 0 32px;
}

    .wdn-steps li {
        position: relative;
        counter-increment: wdn-counter;
        padding: 21px 15px 21px 67px;
        border-bottom: 1px solid #eaeaec;
        color: #68686e;
        font-size: 14px;
        line-height: 1.8;
    }

        .wdn-steps li:first-child {
            border-top: 1px solid #eaeaec;
        }

        .wdn-steps li::before {
            content: counter(wdn-counter, decimal-leading-zero);
            position: absolute;
            top: 22px;
            left: 0;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #171719;
            color: #fff;
            font-size: 13px;
            font-weight: 750;
        }

        .wdn-steps li strong {
            display: block;
            margin-bottom: 5px;
            color: #202024;
            font-size: 15px;
            font-weight: 750;
        }

/* Highlighted information */

.wdn-note {
    margin: 35px 0;
    padding: 27px 32px;
    background: #f8f8f8;
    border-left: 3px solid #e30613;
    color: #5d5d63;
    font-size: 14px;
    line-height: 1.9;
}

    .wdn-note strong {
        color: #1e1e21;
        font-weight: 750;
    }

/* Premium dark quotation */

.wdn-quote {
    position: relative;
    margin: 37px 0;
    padding: 36px 43px;
    background: #18181b;
    color: #fff;
    font-size: clamp(19px, 2.1vw, 26px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.65;
    border-left: 4px solid #e30613;
}

    .wdn-quote strong {
        color: #ff4a53;
        font-weight: 750;
    }

/* Divider */

.wdn-divider {
    border: 0;
    height: 1px;
    margin: 38px 0;
    background: #e8e8eb;
}

/* ============================================
   MOBILE
============================================ */

@media (max-width: 767px) {
    .wdn-lead {
        margin: 5px 0 26px;
        padding-left: 17px;
        font-size: 18px;
        line-height: 1.7;
    }

    .wdn-text {
        font-size: 13px;
        line-height: 1.85;
        margin-bottom: 17px;
    }

    .wdn-heading {
        margin: 35px 0 17px;
        padding-bottom: 15px;
        font-size: 25px;
    }

    .wdn-subheading {
        font-size: 18px;
        margin-top: 25px;
    }

    .wdn-list li,
    .wdn-steps li {
        font-size: 13px;
    }

    .wdn-steps li {
        padding-left: 57px;
    }

        .wdn-steps li::before {
            width: 39px;
            height: 39px;
        }

    .wdn-note {
        margin: 27px 0;
        padding: 22px 19px;
        font-size: 13px;
    }

    .wdn-quote {
        margin: 27px 0;
        padding: 28px 22px;
        font-size: 19px;
    }
}


.wdc-intro-mail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    background: var(--wdc-red);
    font-size: 11px;
    transition: background .3s ease, transform .3s ease;
}

.wdc-intro-mail:hover {
    color: var(--wdc-red);
}

    .wdc-intro-mail:hover .wdc-intro-mail-icon {
        background: var(--wdc-black);
        transform: translate(3px, -3px);
    }


/* ================================================
   CONTACT GRID
================================================ */

.wdc-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.wdc-phone-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 485px;
    padding: clamp(28px, 3vw, 48px);
    color: #fff;
    background: #151517;
    overflow: hidden;
    isolation: isolate;
}

    .wdc-phone-panel::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: 500px;
        height: 500px;
        top: -330px;
        right: -280px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(227,6,19,.2), transparent 70% );
    }

    .wdc-phone-panel::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 75px;
        height: 3px;
        background: var(--wdc-red);
    }

.wdc-phone-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.wdc-panel-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #b6b6bb;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.7px;
    line-height: 1.5;
}

.wdc-small-red-line {
    width: 23px;
    height: 2px;
    flex-shrink: 0;
    background: var(--wdc-red);
}

.wdc-dark-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.17);
    color: #fff;
    font-size: 17px;
}

.wdc-phone-panel-main {
    padding: 55px 0 35px;
}

.wdc-phone-caption {
    display: block;
    margin-bottom: 15px;
    color: #a5a5ad;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 2px;
}

.wdc-phone-panel-main h3 {
    margin-bottom: 30px;
    color: #fff;
    font-size: clamp(30px, 3.4vw, 50px);
    font-weight: 750;
    letter-spacing: -.06em;
    line-height: 1.18;
}

    .wdc-phone-panel-main h3 span {
        color: #96969b;
    }

.wdc-main-number {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    color: #fff;
    font-size: clamp(19px, 2vw, 29px);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.4;
    transition: color .25s ease;
}

    .wdc-main-number i {
        flex-shrink: 0;
        font-size: 13px;
        color: var(--wdc-red);
        transition: transform .25s ease;
    }

    .wdc-main-number:hover {
        color: #ff4852;
    }

        .wdc-main-number:hover i {
            transform: translate(3px, -3px);
        }


/* Bottom phone numbers */

.wdc-phone-panel-bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.wdc-other-phones-label {
    display: block;
    margin-bottom: 16px;
    color: #898990;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.5px;
}

.wdc-other-phones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
}

    .wdc-other-phones a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #dedee2;
        font-size: 12px;
        font-weight: 550;
        transition: color .25s ease;
    }

        .wdc-other-phones a i {
            color: #77777d;
            font-size: 9px;
        }

        .wdc-other-phones a:hover,
        .wdc-other-phones a:hover i {
            color: #ff3542;
        }


/* ================================================
   CONTACT RIGHT
================================================ */

.wdc-contact-right {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    min-width: 0;
}


/* ================================================
   WHATSAPP
================================================ */

.wdc-whatsapp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: 30px 33px 25px;
    background: #f7f7f7;
    border: 1px solid #ededed;
    color: var(--wdc-black);
    transition: background .3s ease, border-color .3s ease;
}

    .wdc-whatsapp:hover {
        background: #f1f1f1;
        border-color: #ddd;
    }

.wdc-whatsapp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wdc-whatsapp .wdc-panel-label {
    color: #8a8a8f;
}

.wdc-whatsapp-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid #dedee0;
    color: #363639;
    font-size: 11px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.wdc-whatsapp:hover .wdc-whatsapp-arrow {
    background: var(--wdc-black);
    color: #fff;
    transform: translate(3px, -3px);
}

.wdc-whatsapp-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 25px 0;
}

.wdc-whatsapp-text {
    min-width: 0;
}

    .wdc-whatsapp-text > span {
        display: block;
        margin-bottom: 12px;
        color: var(--wdc-red);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.8px;
    }

    .wdc-whatsapp-text h3 {
        margin-bottom: 13px;
        color: #18181b;
        font-size: clamp(29px, 3.2vw, 44px);
        line-height: 1.16;
        font-weight: 800;
        letter-spacing: -.065em;
    }

    .wdc-whatsapp-text p {
        margin-bottom: 0;
        color: #77777c;
        font-size: 13px;
    }

.wdc-whatsapp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    color: #252529;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    font-size: 38px;
    transition: color .3s ease, transform .3s ease;
}

.wdc-whatsapp:hover .wdc-whatsapp-icon {
    color: #25d366;
    transform: rotate(-9deg);
}

.wdc-whatsapp-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e2e2;
    color: #515156;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 1.1px;
}

    .wdc-whatsapp-bottom i {
        color: var(--wdc-red);
        font-size: 12px;
    }


/* ================================================
   SMALL CARDS
================================================ */

.wdc-small-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.wdc-small-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 175px;
    padding: 25px;
    border: 1px solid var(--wdc-border);
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}

    .wdc-small-card:hover {
        border-color: #d7d7da;
        box-shadow: 0 14px 35px rgba(0,0,0,.035);
    }

.wdc-small-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
}

.wdc-small-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: var(--wdc-red);
    background: #fff0f1;
    font-size: 13px;
}

.wdc-small-card-head > span:last-child {
    color: #96969b;
    font-size: 9px;
    letter-spacing: 1.4px;
    font-weight: 750;
}

.wdc-small-card h3 {
    margin-bottom: 12px;
    color: #212124;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.wdc-small-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

    .wdc-small-links a {
        max-width: 100%;
        color: #68686e;
        font-size: 12px;
        font-weight: 550;
        line-height: 1.5;
        overflow-wrap: anywhere;
        transition: color .25s ease;
    }

        .wdc-small-links a:hover {
            color: var(--wdc-red);
        }

.wdc-small-hint {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    color: #a2a2a6;
    font-size: 10px;
    line-height: 1.5;
}


/* ================================================
   LOCATION
================================================ */

.wdc-location {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(35px, 5vw, 80px);
    align-items: center;
    margin-top: 85px;
    padding: clamp(30px, 4.5vw, 65px);
    background: #f8f8f8;
    border: 1px solid #f0f0f0;
}

.wdc-location-info {
    min-width: 0;
}

    .wdc-location-info h2 {
        margin: 25px 0 22px;
        color: #19191b;
        font-size: clamp(32px, 3.5vw, 49px);
        line-height: 1.17;
        font-weight: 800;
        letter-spacing: -.06em;
    }

        .wdc-location-info h2 span {
            color: var(--wdc-red);
        }

.wdc-location-description {
    max-width: 440px;
    margin-bottom: 34px;
    color: #7a7a81;
    font-size: 13px;
    line-height: 1.95;
}


/* Address */

.wdc-address-block {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: 27px 0;
    border-top: 1px solid #e3e3e5;
    border-bottom: 1px solid #e3e3e5;
}

.wdc-address-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    background: #fff;
    color: var(--wdc-red);
    font-size: 16px;
}

.wdc-address-content > span {
    display: block;
    margin-bottom: 13px;
    color: #8b8b90;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.5px;
}

.wdc-address-content address {
    margin: 0;
    font-style: normal;
    color: #303035;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.85;
}


/* Directions button */

.wdc-directions {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    color: #18181b;
    font-size: 12px;
    font-weight: 750;
    transition: color .25s ease;
}

.wdc-directions-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--wdc-red);
    color: #fff;
    font-size: 12px;
    transition: background .25s ease, transform .25s ease;
}

.wdc-directions:hover {
    color: var(--wdc-red);
}

    .wdc-directions:hover .wdc-directions-icon {
        background: var(--wdc-black);
        transform: translate(3px, -3px);
    }


/* ================================================
   MAP
================================================ */

.wdc-map-area {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid #ebebeb;
}

.wdc-map-frame {
    width: 100%;
    height: 390px;
    overflow: hidden;
    background: #efefef;
}

    .wdc-map-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

.wdc-map-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 19px 23px;
}

    .wdc-map-bottom > span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #818187;
        font-size: 10px;
        letter-spacing: 1.3px;
        font-weight: 700;
    }

        .wdc-map-bottom > span i {
            color: var(--wdc-red);
            font-size: 12px;
        }

    .wdc-map-bottom > a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #252529;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 1px;
        transition: color .25s ease;
    }

        .wdc-map-bottom > a i {
            color: var(--wdc-red);
            font-size: 10px;
        }

        .wdc-map-bottom > a:hover {
            color: var(--wdc-red);
        }


/* ================================================
   CORPORATE IDENTITY
================================================ */

.wdc-corporate {
    display: flex;
    align-items: center;
    gap: 21px;
    margin-top: 45px;
    padding: 25px 0;
    border-top: 1px solid var(--wdc-border);
    border-bottom: 1px solid var(--wdc-border);
}

.wdc-corporate-symbol {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    width: 33px;
    height: 35px;
}

    .wdc-corporate-symbol span:first-child {
        display: block;
        width: 18px;
        height: 35px;
        background: var(--wdc-red);
    }

    .wdc-corporate-symbol span:last-child {
        display: block;
        width: 10px;
        height: 22px;
        background: var(--wdc-black);
    }

.wdc-corporate-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .wdc-corporate-text > span {
        color: #a0a0a6;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.4px;
    }

    .wdc-corporate-text strong {
        max-width: 650px;
        color: #4e4e53;
        font-size: 12px;
        line-height: 1.6;
        font-weight: 600;
    }

.wdc-corporate > a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-left: auto;
    white-space: nowrap;
    color: #303034;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: color .25s ease;
}

    .wdc-corporate > a i {
        color: var(--wdc-red);
        font-size: 11px;
    }

    .wdc-corporate > a:hover {
        color: var(--wdc-red);
    }


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

@media (max-width: 1199px) {

    .wdc-intro {
        gap: 40px;
    }

    .wdc-intro-left h2 {
        font-size: clamp(44px, 5.1vw, 68px);
    }

    .wdc-phone-panel {
        padding: 32px;
    }

    .wdc-small-card {
        padding: 20px;
    }

    .wdc-location {
        gap: 40px;
        padding: 40px;
    }
}


@media (max-width: 991px) {

    .wdc-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wdc-intro-left h2 {
        font-size: clamp(44px, 7vw, 75px);
    }

    .wdc-intro-right {
        max-width: 550px;
    }

    .wdc-contact-grid {
        grid-template-columns: 1fr;
    }

    .wdc-phone-panel {
        min-height: 430px;
    }

    .wdc-contact-right {
        grid-template-rows: auto auto;
    }

    .wdc-whatsapp {
        min-height: 275px;
    }

    .wdc-location {
        grid-template-columns: 1fr;
    }

    .wdc-location-description {
        max-width: 650px;
    }
}


@media (max-width: 767px) {

    .wdc-contact {
        padding: 15px 0 45px;
    }

    .wdc-intro {
        padding-bottom: 45px;
        gap: 35px;
    }

    .wdc-eyebrow {
        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .wdc-eyebrow-line {
        width: 25px;
    }

    .wdc-intro-left h2 {
        margin: 23px 0;
        font-size: clamp(37px, 9.5vw, 54px);
        line-height: 1.13;
        letter-spacing: -.065em;
    }

    .wdc-intro-left > p {
        font-size: 13px;
        line-height: 1.85;
    }

    .wdc-intro-right {
        padding-left: 21px;
    }

    .wdc-intro-right-top {
        margin-bottom: 19px;
        font-size: 9px;
    }

    .wdc-intro-right > p {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .wdc-contact-grid {
        gap: 12px;
    }

    .wdc-phone-panel {
        min-height: 410px;
        padding: 27px 23px;
    }

    .wdc-phone-panel-main {
        padding: 40px 0 30px;
    }

        .wdc-phone-panel-main h3 {
            font-size: clamp(32px, 8vw, 43px);
            margin-bottom: 25px;
        }

    .wdc-main-number {
        font-size: clamp(17px, 5vw, 25px);
        gap: 10px;
    }

    .wdc-other-phones {
        gap: 13px;
    }

        .wdc-other-phones a {
            font-size: 12px;
        }

    .wdc-contact-right {
        gap: 12px;
    }

    .wdc-whatsapp {
        min-height: 285px;
        padding: 24px;
    }

    .wdc-whatsapp-body {
        gap: 12px;
    }

    .wdc-whatsapp-text h3 {
        font-size: clamp(29px, 8vw, 40px);
    }

    .wdc-whatsapp-icon {
        width: 58px;
        height: 58px;
        font-size: 30px;
    }

    .wdc-small-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wdc-small-card {
        min-height: 160px;
        padding: 23px;
    }

    .wdc-small-card-head {
        margin-bottom: 14px;
    }

    .wdc-location {
        margin-top: 55px;
        padding: 30px 22px;
        gap: 32px;
    }

    .wdc-location-info h2 {
        font-size: clamp(32px, 8vw, 43px);
    }

    .wdc-location-description {
        font-size: 12px;
        line-height: 1.85;
    }

    .wdc-address-block {
        gap: 13px;
    }

    .wdc-address-content address {
        font-size: 12px;
    }

    .wdc-directions {
        font-size: 11px;
        gap: 12px;
    }

    .wdc-map-frame {
        height: 300px;
    }

    .wdc-map-bottom {
        padding: 16px;
    }

    .wdc-corporate {
        flex-wrap: wrap;
        gap: 15px;
        padding: 23px 0;
        margin-top: 35px;
    }

    .wdc-corporate-text {
        flex: 1;
    }

    .wdc-corporate > a {
        width: 100%;
        margin-left: 0;
        padding-top: 15px;
        border-top: 1px solid #ededed;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wdc-contact *,
    .wdc-contact *::before,
    .wdc-contact *::after {
        transition: none !important;
    }
}