/* ==================================================
   AYON - GLOBAL DESIGN SYSTEM
================================================== */

:root {
    --ayon-navy: #102030;
    --ayon-dark: #081525;

    --ayon-orange: #D45A12;
    --ayon-orange-hover: #B94C0F;

    --ayon-text: #344054;
    --ayon-muted: #667085;

    --ayon-border: #E4E7EC;
    --ayon-light: #F7F8FA;
    --ayon-white: #FFFFFF;

    --ayon-radius: 6px;
}


/* ==================================================
   GLOBAL BUTTONS
================================================== */

.ayon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 24px;

    border-radius: var(--ayon-radius);

    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.ayon-btn--primary {
    background: var(--ayon-orange);
    border: 1px solid var(--ayon-orange);
    color: var(--ayon-white) !important;
}

.ayon-btn--primary:hover {
    background: var(--ayon-orange-hover);
    border-color: var(--ayon-orange-hover);
    color: var(--ayon-white) !important;
    transform: translateY(-1px);
}

.ayon-btn--secondary {
    background: var(--ayon-white);
    border: 1px solid var(--ayon-border);
    color: var(--ayon-navy) !important;
}

.ayon-btn--secondary:hover {
    border-color: var(--ayon-orange);
    color: var(--ayon-orange) !important;
    transform: translateY(-1px);
}

/* ==================================================
   HOME - HERO
================================================== */

.ayon-hero {
    position: relative;
    width: 100%;
    min-height: 610px;
    overflow: hidden;

    background-image: url('/wp-content/uploads/2026/09/ayon-hero.webp');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.ayon-hero__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 30%,
        rgba(255,255,255,.94) 45%,
        rgba(255,255,255,.72) 58%,
        rgba(255,255,255,.20) 78%,
        rgba(255,255,255,.02) 100%
    );
}

.ayon-hero__container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1240px;
    min-height: 610px;

    margin: 0 auto;
    padding: 70px 24px;

    display: flex;
    align-items: center;
}

.ayon-hero__content {
    width: 57%;
    max-width: 690px;
}

.ayon-hero__eyebrow {
    margin-bottom: 14px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-hero__title {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 50px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -1.2px;

    color: var(--ayon-navy);
}

.ayon-hero__title span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-hero__text {
    max-width: 610px;
    margin: 22px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;

    color: var(--ayon-muted);
}

.ayon-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.ayon-btn__arrow {
    margin-left: 9px;
    font-size: 18px;
    line-height: 1;
}

.ayon-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 24px;
}

.ayon-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 7px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;

    color: var(--ayon-muted);
}

.ayon-hero__trust-icon {
    width: 20px;
    height: 20px;

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

    border-radius: 50%;

    background: #FFF3EC;
    color: var(--ayon-orange);

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


/* ==================================================
   HOME - HERO TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-hero {
        min-height: 550px;
        background-position: 65% center;
    }

    .ayon-hero__overlay {
        background: linear-gradient(
            90deg,
            rgba(255,255,255,.99) 0%,
            rgba(255,255,255,.96) 45%,
            rgba(255,255,255,.65) 75%,
            rgba(255,255,255,.25) 100%
        );
    }

    .ayon-hero__container {
        min-height: 550px;
        padding: 60px 30px;
    }

    .ayon-hero__content {
        width: 66%;
    }

    .ayon-hero__title {
        font-size: 40px;
        letter-spacing: -.8px;
    }

    .ayon-hero__text {
        font-size: 16px;
    }
}


/* ==================================================
   HOME - HERO MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-hero {
        min-height: 580px;
        background-position: center;
    }

    .ayon-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.84) 35%,
            rgba(255,255,255,.98) 70%,
            rgba(255,255,255,1) 100%
        );
    }

    .ayon-hero__container {
        min-height: 580px;
        padding: 45px 20px;
        align-items: flex-end;
    }

    .ayon-hero__content {
        width: 100%;
        max-width: 100%;
    }

    .ayon-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .ayon-hero__title {
        font-size: 34px;
        line-height: 1.14;
        letter-spacing: -.5px;
    }

    .ayon-hero__text {
        margin-top: 17px;
        font-size: 15px;
        line-height: 1.65;
    }

    .ayon-hero__actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .ayon-hero__actions .ayon-btn {
        width: 100%;
    }

    .ayon-hero__trust {
        flex-direction: column;
        gap: 8px;

        margin-top: 20px;
    }
}

/* ==================================================
   GLOBAL SECTION
================================================== */

.ayon-section-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.ayon-section-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.ayon-section-kicker {
    display: block;
    margin-bottom: 10px;

    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .9px;

    color: var(--ayon-orange);
}

.ayon-section-heading h2 {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-section-heading h2 span {
    color: var(--ayon-orange);
}

.ayon-section-heading p {
    max-width: 680px;
    margin: 16px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* ==================================================
   HOME - QUICK SERVICES
================================================== */

.ayon-services {
    padding: 90px 0;
    background: var(--ayon-white);
}


/* GRID */

.ayon-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}


/* CARD */

.ayon-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 325px;
    padding: 28px;

    background: var(--ayon-light);

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    text-decoration: none !important;

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

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

    background: var(--ayon-white);
    border-color: var(--ayon-orange);

    box-shadow:
        0 18px 40px rgba(16, 32, 48, .08);
}


/* TOP AREA */

.ayon-service-card__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* NUMBER */

.ayon-service-card__number {
    margin-bottom: 12px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* ICON */

.ayon-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 52px;
    height: 52px;

    margin-bottom: 20px;
}

.ayon-service-card__icon img {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


/* CONTENT */

.ayon-service-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ayon-service-card__content h3 {
    min-height: 55px;

    margin: 0 0 12px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-service-card__content p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* LINK */

.ayon-service-card__link {
    display: inline-flex;
    align-items: center;

    margin-top: auto;
    padding-top: 24px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--ayon-navy);

    transition: color .2s ease;
}

.ayon-service-card:hover .ayon-service-card__link {
    color: var(--ayon-orange);
}


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

@media (max-width: 1024px) {

    .ayon-services {
        padding: 75px 0;
    }

    .ayon-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .ayon-service-card {
        min-height: 310px;
    }

}


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

@media (max-width: 767px) {

    .ayon-services {
        padding: 55px 0;
    }

    .ayon-service-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-service-card {
        min-height: auto;
        padding: 24px;
    }

    .ayon-service-card__number {
        margin-bottom: 10px;
    }

    .ayon-service-card__icon {
        width: 46px;
        height: 46px;

        margin-bottom: 17px;
    }

    .ayon-service-card__icon img {
        width: 46px;
        height: 46px;
    }

    .ayon-service-card__content h3 {
        min-height: auto;

        margin-bottom: 10px;

        font-size: 19px;
    }

    .ayon-service-card__link {
        margin-top: 22px;
        padding-top: 0;
    }

}


/* ==================================================
   QUICK SERVICES - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-services {
        padding: 70px 0;
    }

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

    .ayon-section-heading h2 {
        font-size: 34px;
    }
}


/* ==================================================
   QUICK SERVICES - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ayon-services {
        padding: 55px 0;
    }

    .ayon-section-heading {
        margin-bottom: 30px;
    }

    .ayon-section-heading h2 {
        font-size: 29px;
    }

    .ayon-section-heading p {
        font-size: 15px;
    }

    .ayon-service-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-service-card {
        min-height: 250px;
        padding: 24px;
    }
}

/* ==================================================
   GLOBAL - CENTERED SECTION HEADING
================================================== */

.ayon-section-heading--center {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    text-align: center;
}

.ayon-section-heading--center p {
    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   HOME - PROCESS
================================================== */

.ayon-process {
    padding: 90px 0;
    background: var(--ayon-light);
}

.ayon-process-grid {
    position: relative;

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

.ayon-process-grid::before {
    content: "";
    position: absolute;

    top: 30px;
    left: 10%;
    right: 10%;

    height: 1px;

    background: var(--ayon-border);

    z-index: 0;
}

.ayon-process-item {
    position: relative;
    z-index: 1;

    padding: 0 14px;

    text-align: center;
}

.ayon-process-item__number {
    width: 60px;
    height: 60px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background: var(--ayon-white);
    border: 2px solid var(--ayon-orange);

    font-family: Manrope, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;

    color: var(--ayon-orange);

    box-shadow: 0 6px 18px rgba(16,32,48,.06);
}

.ayon-process-item h3 {
    margin: 0 0 10px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-process-item p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-process-cta {
    display: flex;
    justify-content: center;

    margin-top: 46px;
}


/* ==================================================
   PROCESS - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-process {
        padding: 70px 0;
    }

    .ayon-process-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 20px;
    }

    .ayon-process-grid::before {
        display: none;
    }
}


/* ==================================================
   PROCESS - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-process {
        padding: 55px 0;
    }

    .ayon-process-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ayon-process-item {
        display: grid;
        grid-template-columns: 54px 1fr;
        column-gap: 16px;

        padding: 0 0 28px;

        text-align: left;
    }

    .ayon-process-item__number {
        grid-row: 1 / 3;

        width: 50px;
        height: 50px;

        margin: 0;

        font-size: 13px;
    }

    .ayon-process-item h3 {
        margin-top: 2px;
        margin-bottom: 6px;

        font-size: 17px;
    }

    .ayon-process-item p {
        font-size: 14px;
    }

    .ayon-process-cta {
        margin-top: 12px;
    }

    .ayon-process-cta .ayon-btn {
        width: 100%;
    }
}

/* ==================================================
   HOME - PRODUCT CATEGORIES
================================================== */

.ayon-categories {
    padding: 90px 0;
    background: var(--ayon-white);
}


/* GRID */

.ayon-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 245px);
    gap: 20px;
}


/* BASE CARD */

.ayon-category-card {
    position: relative;
    overflow: hidden;

    min-height: 245px;
    padding: 32px;

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

    border-radius: 12px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-decoration: none !important;

    isolation: isolate;

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


/* DARK GRADIENT */

.ayon-category-card::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -1;

    background: linear-gradient(
        90deg,
        rgba(8,21,37,.92) 0%,
        rgba(8,21,37,.78) 48%,
        rgba(8,21,37,.22) 100%
    );

    transition: background .3s ease;
}

.ayon-category-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(16,32,48,.14);
}

.ayon-category-card:hover::before {
    background: linear-gradient(
        90deg,
        rgba(8,21,37,.96) 0%,
        rgba(8,21,37,.84) 48%,
        rgba(8,21,37,.28) 100%
    );
}


/* MAIN CARD */

.ayon-category-card--main {
    grid-row: span 2;

    min-height: 510px;

    padding: 42px;

    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-yerden-isitma.webp');
}


/* OTHER CATEGORY IMAGES */

.ayon-category-card--electric {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-elektrikli-yerden-isitma.webp');
}

.ayon-category-card--boiler {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-kazan-boyler.webp');
}

.ayon-category-card--pump {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-sirkulasyon-pompasi.webp');
}

.ayon-category-card--automation {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-otomasyon.webp');
}


/* CONTENT */

.ayon-category-card__content {
    position: relative;

    max-width: 430px;

    color: var(--ayon-white);
}

.ayon-category-card__tag {
    display: inline-flex;

    margin-bottom: 14px;
    padding: 7px 10px;

    border-radius: 4px;

    background: var(--ayon-orange);

    font-family: Inter, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;

    color: var(--ayon-white);
}

.ayon-category-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 700;

    color: var(--ayon-white);
}

.ayon-category-card--main h3 {
    font-size: 34px;
}

.ayon-category-card p {
    max-width: 380px;
    margin: 0 0 20px;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;

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


/* LINK */

.ayon-category-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--ayon-white);

    transition: color .2s ease;
}

.ayon-category-card__link span {
    font-size: 17px;

    transition: transform .2s ease;
}

.ayon-category-card:hover .ayon-category-card__link {
    color: #FFB17C;
}

.ayon-category-card:hover .ayon-category-card__link span {
    transform: translateX(4px);
}


/* ==================================================
   PRODUCT CATEGORIES - DESKTOP LAYOUT
================================================== */

@media (min-width: 1025px) {

    .ayon-category-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
        grid-template-rows: repeat(2, 245px);
    }

    .ayon-category-card--main {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
}


/* ==================================================
   PRODUCT CATEGORIES - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-categories {
        padding: 70px 0;
    }

    .ayon-category-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .ayon-category-card,
    .ayon-category-card--main {
        min-height: 300px;
        grid-row: auto;
    }

    .ayon-category-card--main {
        grid-column: span 2;
    }

    .ayon-category-card--main h3 {
        font-size: 30px;
    }
}


/* ==================================================
   PRODUCT CATEGORIES - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-categories {
        padding: 55px 0;
    }

    .ayon-category-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-category-card,
    .ayon-category-card--main {
        grid-column: auto;

        min-height: 290px;
        padding: 26px;
    }

    .ayon-category-card--main {
        min-height: 350px;
    }

    .ayon-category-card h3,
    .ayon-category-card--main h3 {
        font-size: 25px;
    }

    .ayon-category-card p {
        font-size: 14px;
    }
}

/* ==================================================
   HOME - EXPERTISE / UNDERFLOOR HEATING
================================================== */

.ayon-expertise {
    padding: 100px 0;
    background: var(--ayon-light);
}

.ayon-expertise__grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;
}


/* VISUAL */

.ayon-expertise__visual {
    position: relative;

    min-height: 590px;

    border-radius: 14px;
    overflow: hidden;

    background-image:
        url('/wp-content/uploads/2026/09/ayon-kategori-yerden-isitma.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 24px 55px rgba(16,32,48,.12);
}

.ayon-expertise__visual::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(8,21,37,.02) 40%,
        rgba(8,21,37,.80) 100%
    );
}


/* IMAGE BADGE */

.ayon-expertise__badge {
    position: absolute;
    z-index: 2;

    left: 28px;
    right: 28px;
    bottom: 28px;

    padding: 20px 22px;

    display: flex;
    flex-direction: column;
    gap: 4px;

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

    background: rgba(8,21,37,.80);
    backdrop-filter: blur(8px);
}

.ayon-expertise__badge strong {
    font-family: Manrope, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    color: #FFFFFF;
}

.ayon-expertise__badge span {
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;

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


/* CONTENT */

.ayon-expertise__content h2 {
    margin: 0;

    max-width: 620px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-expertise__content h2 span {
    color: var(--ayon-orange);
}

.ayon-expertise__lead {
    max-width: 650px;
    margin: 20px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* FEATURES */

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

    gap: 24px 26px;

    margin-top: 34px;
}

.ayon-expertise__feature {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
}

.ayon-expertise__icon {
    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: #FFF3EC;
    color: var(--ayon-orange);

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.ayon-expertise__feature h3 {
    margin: 3px 0 6px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-expertise__feature p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;

    color: var(--ayon-muted);
}


/* ACTIONS */

.ayon-expertise__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 36px;
}


/* ==================================================
   EXPERTISE - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-expertise {
        padding: 75px 0;
    }

    .ayon-expertise__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ayon-expertise__visual {
        min-height: 500px;
    }

    .ayon-expertise__content h2 {
        font-size: 35px;
    }
}


/* ==================================================
   EXPERTISE - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-expertise {
        padding: 55px 0;
    }

    .ayon-expertise__grid {
        gap: 34px;
    }

    .ayon-expertise__visual {
        min-height: 400px;
        border-radius: 10px;
    }

    .ayon-expertise__badge {
        left: 18px;
        right: 18px;
        bottom: 18px;

        padding: 16px 18px;
    }

    .ayon-expertise__content h2 {
        font-size: 29px;
    }

    .ayon-expertise__lead {
        font-size: 15px;
    }

    .ayon-expertise__features {
        grid-template-columns: 1fr;
        gap: 20px;

        margin-top: 28px;
    }

    .ayon-expertise__actions {
        flex-direction: column;
        margin-top: 30px;
    }

    .ayon-expertise__actions .ayon-btn {
        width: 100%;
    }
}

/* ==================================================
   HOME - SOLUTIONS
================================================== */

.ayon-solutions {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* CARD */

.ayon-solution-card {
    position: relative;
    isolation: isolate;

    min-height: 390px;
    padding: 34px;

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

    overflow: hidden;

    border-radius: 12px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-decoration: none !important;

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

.ayon-solution-card::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -1;

    background: linear-gradient(
        180deg,
        rgba(8,21,37,.03) 15%,
        rgba(8,21,37,.30) 48%,
        rgba(8,21,37,.94) 100%
    );

    transition: background .3s ease;
}

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

    box-shadow:
        0 22px 45px rgba(16,32,48,.15);
}

.ayon-solution-card:hover::before {
    background: linear-gradient(
        180deg,
        rgba(8,21,37,.08) 10%,
        rgba(8,21,37,.40) 45%,
        rgba(8,21,37,.97) 100%
    );
}


/* IMAGES */

.ayon-solution-card--villa {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-villa.webp');
}

.ayon-solution-card--home {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-konut.webp');
}

.ayon-solution-card--renovation {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-tadilat.webp');
}

.ayon-solution-card--mechanical {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-villa-kazan-boyler.webp');
}


/* CONTENT */

.ayon-solution-card__content {
    max-width: 500px;
}

.ayon-solution-card__label {
    display: inline-flex;

    margin-bottom: 12px;
    padding: 6px 9px;

    border-radius: 4px;

    background: rgba(212,90,18,.94);

    font-family: Inter, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;

    color: #FFFFFF;
}

.ayon-solution-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 27px;
    line-height: 1.25;
    font-weight: 700;

    color: #FFFFFF;
}

.ayon-solution-card p {
    max-width: 470px;
    margin: 0 0 19px;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;

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

.ayon-solution-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #FFFFFF;
}

.ayon-solution-card__link span {
    font-size: 17px;

    transition: transform .2s ease;
}

.ayon-solution-card:hover
.ayon-solution-card__link span {
    transform: translateX(4px);
}


/* BOTTOM CTA */

.ayon-solutions__footer {
    margin-top: 42px;
    padding: 26px 30px;

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

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-solutions__footer p {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;

    color: var(--ayon-navy);
}


/* ==================================================
   SOLUTIONS - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-solutions {
        padding: 70px 0;
    }

    .ayon-solution-card {
        min-height: 350px;
    }

}


/* ==================================================
   SOLUTIONS - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-solutions {
        padding: 55px 0;
    }

    .ayon-solutions-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-solution-card {
        min-height: 340px;
        padding: 25px;
    }

    .ayon-solution-card h3 {
        font-size: 24px;
    }

    .ayon-solutions__footer {
        margin-top: 28px;
        padding: 24px;

        flex-direction: column;
        align-items: flex-start;
    }

    .ayon-solutions__footer .ayon-btn {
        width: 100%;
    }
}

/* ==================================================
   HOME - WHY AYON
================================================== */

.ayon-why {
    padding: 95px 0;
    background: var(--ayon-light);
}


/* GRID */

.ayon-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
    margin-top: 46px;
}


/* CARD */

.ayon-why-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 275px;
    padding: 28px;

    background: var(--ayon-white);

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

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

.ayon-why-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212, 90, 18, .45);

    box-shadow:
        0 16px 36px rgba(16, 32, 48, .07);
}


/* TOP */

.ayon-why-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 24px;
}


/* NUMBER */

.ayon-why-card__number {
    padding-top: 4px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* ICON */

.ayon-why-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;
}

.ayon-why-card__icon img {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


/* CONTENT */

.ayon-why-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ayon-why-card__content h3 {
    min-height: 52px;

    margin: 0 0 12px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-why-card__content p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* ICON HOVER */

.ayon-why-card__icon img {
    transition: transform .25s ease;
}

.ayon-why-card:hover .ayon-why-card__icon img {
    transform: scale(1.05);
}


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

@media (max-width: 1024px) {

    .ayon-why {
        padding: 75px 0;
    }

    .ayon-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;
        margin-top: 38px;
    }

    .ayon-why-card {
        min-height: 260px;
    }

}


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

@media (max-width: 767px) {

    .ayon-why {
        padding: 55px 0;
    }

    .ayon-why-grid {
        grid-template-columns: 1fr;

        gap: 14px;
        margin-top: 30px;
    }

    .ayon-why-card {
        min-height: auto;
        padding: 24px;
    }

    .ayon-why-card__top {
        margin-bottom: 20px;
    }

    .ayon-why-card__icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .ayon-why-card__icon img {
        width: 46px;
        height: 46px;
    }

    .ayon-why-card__content h3 {
        min-height: auto;

        margin-bottom: 10px;

        font-size: 19px;
    }

}

/* ==================================================
   HOME - BRANDS
================================================== */

.ayon-brands {
    padding: 90px 0;
    background: var(--ayon-white);
}

/* SLIDER */

.ayon-brands-slider {
    width: 100%;
    overflow: hidden;
}

.ayon-brands-track {
    display: flex;
    gap: 18px;
    will-change: transform;
    transition: transform .55s ease;
}

/* HOME BRAND CARD - scoped to prevent conflict with Brands page */

.ayon-brands .ayon-brand-card {
    flex: 0 0 calc((100% - 54px) / 4);
    min-height: 145px;
    padding: 28px;

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

    background: var(--ayon-white);
    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    text-decoration: none !important;

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

.ayon-brands .ayon-brand-card:hover {
    border-color: rgba(212,90,18,.45);
    box-shadow: 0 14px 35px rgba(16,32,48,.07);
}

.ayon-brands .ayon-brand-card img {
    display: block;
    width: auto;
    max-width: 170px;
    max-height: 58px;
    object-fit: contain;

    filter: grayscale(100%);
    opacity: .78;

    transition:
        filter .25s ease,
        opacity .25s ease,
        transform .25s ease;
}

.ayon-brands .ayon-brand-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.03);
}

/* TABLET */

@media (max-width: 1024px) {

    .ayon-brands {
        padding: 70px 0;
    }

    .ayon-brands .ayon-brand-card {
        flex: 0 0 calc((100% - 18px) / 2);
    }
}

/* MOBILE */

@media (max-width: 767px) {

    .ayon-brands {
        padding: 55px 0;
    }

    .ayon-brands-track {
        gap: 12px;
    }

    .ayon-brands .ayon-brand-card {
        flex: 0 0 calc((100% - 12px) / 2);
        min-height: 110px;
        padding: 20px;
    }

    .ayon-brands .ayon-brand-card img {
        max-width: 115px;
        max-height: 45px;
    }
}

/* ==================================================
   HOME - PROJECT CTA
================================================== */

.ayon-project-cta {
    padding: 90px 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(212,90,18,.18),
            transparent 32%
        ),
        var(--ayon-dark);
}

.ayon-project-cta__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: center;
}


/* CONTENT */

.ayon-project-cta__kicker {
    display: block;
    margin-bottom: 14px;

    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .9px;

    color: #FF9A58;
}

.ayon-project-cta__content h2 {
    max-width: 700px;
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 700;

    color: #FFFFFF;
}

.ayon-project-cta__content h2 span {
    color: #F49A61;
}

.ayon-project-cta__content p {
    max-width: 680px;
    margin: 20px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;

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


/* ACTIONS */

.ayon-project-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.ayon-btn--cta-light {
    background: var(--ayon-orange);
    border: 1px solid var(--ayon-orange);
    color: #FFFFFF !important;
}

.ayon-btn--cta-light:hover {
    background: var(--ayon-orange-hover);
    border-color: var(--ayon-orange-hover);
    color: #FFFFFF !important;
}

.ayon-btn--whatsapp {
    background: transparent;
    border: 1px solid rgba(255,255,255,.30);
    color: #FFFFFF !important;
}

.ayon-btn--whatsapp:hover {
    background: rgba(255,255,255,.08);
    border-color: #25D366;
    color: #FFFFFF !important;
}


/* RIGHT INFO */

.ayon-project-cta__info {
    padding: 12px 0;

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

.ayon-project-cta__info-item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;

    padding: 22px 0 22px 32px;
}

.ayon-project-cta__info-item +
.ayon-project-cta__info-item {
    border-top: 1px solid rgba(255,255,255,.10);
}

.ayon-project-cta__info-number {
    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: rgba(212,90,18,.16);
    border: 1px solid rgba(212,90,18,.45);

    font-family: Manrope, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: #F49A61;
}

.ayon-project-cta__info-item strong {
    display: block;

    margin-bottom: 5px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;

    color: #FFFFFF;
}

.ayon-project-cta__info-item div > span {
    display: block;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;

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


/* ==================================================
   PROJECT CTA - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-project-cta {
        padding: 70px 0;
    }

    .ayon-project-cta__inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ayon-project-cta__content h2 {
        font-size: 36px;
    }

    .ayon-project-cta__info {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .ayon-project-cta__info-item {
        padding-left: 0;
    }
}


/* ==================================================
   PROJECT CTA - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-project-cta {
        padding: 55px 0;
    }

    .ayon-project-cta__inner {
        gap: 34px;
    }

    .ayon-project-cta__content h2 {
        font-size: 30px;
    }

    .ayon-project-cta__content p {
        font-size: 15px;
    }

    .ayon-project-cta__actions {
        flex-direction: column;
    }

    .ayon-project-cta__actions .ayon-btn {
        width: 100%;
    }

    .ayon-project-cta__info-item {
        grid-template-columns: 42px 1fr;
        padding: 18px 0;
    }

}

/* ==================================================
   GLOBAL - SPLIT SECTION HEADING
================================================== */

.ayon-section-heading--split {
    max-width: none;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.ayon-section-heading--split > div {
    max-width: 760px;
}


/* ==================================================
   HOME - TECHNICAL KNOWLEDGE
================================================== */

.ayon-knowledge {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* CARD */

.ayon-knowledge-card {
    overflow: hidden;

    border: 1px solid var(--ayon-border);
    border-radius: 11px;

    background: var(--ayon-white);

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

.ayon-knowledge-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212,90,18,.35);

    box-shadow:
        0 18px 42px rgba(16,32,48,.08);
}


/* IMAGE */

.ayon-knowledge-card__image {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform .35s ease;
}

.ayon-knowledge-card:hover .ayon-knowledge-card__image {
    transform: scale(1.015);
}


/* ARTICLE IMAGES */

.ayon-knowledge-card__image--heating {
    background-image:
        url('/wp-content/uploads/2026/09/teknik-bilgi-yerden-isitma.webp');
}

.ayon-knowledge-card__image--pipe {
    background-image:
        url('/wp-content/uploads/2026/09/teknik-bilgi-yerden-isitma-borusu.webp');
}

.ayon-knowledge-card__image--manifold {
    background-image:
        url('/wp-content/uploads/2026/09/teknik-bilgi-kollektor.webp');
}


/* CONTENT */

.ayon-knowledge-card__content {
    padding: 26px;
}

.ayon-knowledge-card__category {
    display: block;

    margin-bottom: 11px;

    font-family: Inter, Arial, sans-serif;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-knowledge-card h3 {
    margin: 0 0 12px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}

.ayon-knowledge-card h3 a {
    color: var(--ayon-navy) !important;
    text-decoration: none !important;

    transition: color .2s ease;
}

.ayon-knowledge-card:hover h3 a {
    color: var(--ayon-orange) !important;
}

.ayon-knowledge-card p {
    margin: 0 0 20px;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* ARTICLE LINK */

.ayon-knowledge-card__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--ayon-navy) !important;
    text-decoration: none !important;
}

.ayon-knowledge-card__link span {
    font-size: 17px;

    transition: transform .2s ease;
}

.ayon-knowledge-card:hover
.ayon-knowledge-card__link {
    color: var(--ayon-orange) !important;
}

.ayon-knowledge-card:hover
.ayon-knowledge-card__link span {
    transform: translateX(4px);
}


/* ==================================================
   KNOWLEDGE - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-knowledge {
        padding: 70px 0;
    }

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

    .ayon-section-heading--split {
        align-items: flex-start;
    }

}


/* ==================================================
   KNOWLEDGE - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-knowledge {
        padding: 55px 0;
    }

    .ayon-section-heading--split {
        display: block;
    }

    .ayon-section-heading--split > .ayon-text-link {
        margin-top: 18px;
    }

    .ayon-knowledge-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ayon-knowledge-card__content {
        padding: 22px;
    }

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

/* ==================================================
   HOME - FAQ
================================================== */

.ayon-faq {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.ayon-faq-item {
    margin-bottom: 12px;

    border: 1px solid var(--ayon-border);
    border-radius: 9px;

    background: var(--ayon-white);

    overflow: hidden;

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

.ayon-faq-item[open] {
    border-color: rgba(212,90,18,.40);

    box-shadow:
        0 10px 28px rgba(16,32,48,.05);
}


/* QUESTION */

.ayon-faq-item summary {
    position: relative;

    padding: 21px 62px 21px 24px;

    cursor: pointer;

    list-style: none;

    font-family: Manrope, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;

    color: var(--ayon-navy);

    transition: color .2s ease;
}

.ayon-faq-item summary::-webkit-details-marker {
    display: none;
}

.ayon-faq-item summary:hover {
    color: var(--ayon-orange);
}


/* ICON */

.ayon-faq-icon {
    position: absolute;

    top: 50%;
    right: 22px;

    width: 30px;
    height: 30px;

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

    transform: translateY(-50%);

    border-radius: 50%;

    background: #FFF3EC;

    font-family: Inter, Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;

    color: var(--ayon-orange);

    transition:
        transform .25s ease,
        background .25s ease;
}

.ayon-faq-item[open] .ayon-faq-icon {
    transform:
        translateY(-50%)
        rotate(45deg);

    background: var(--ayon-orange);
    color: #FFFFFF;
}


/* ANSWER */

.ayon-faq-answer {
    padding: 0 64px 22px 24px;
}

.ayon-faq-answer p {
    max-width: 760px;
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* FOOTER */

.ayon-faq-footer {
    margin-top: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    text-align: center;
}

.ayon-faq-footer p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;

    color: var(--ayon-muted);
}


/* ==================================================
   FAQ - MOBILE
================================================== */

@media (max-width: 767px) {

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

    .ayon-faq-item summary {
        padding: 18px 55px 18px 20px;

        font-size: 15px;
    }

    .ayon-faq-icon {
        right: 17px;

        width: 28px;
        height: 28px;
    }

    .ayon-faq-answer {
        padding:
            0 20px
            19px;
    }

    .ayon-faq-answer p {
        font-size: 14px;
    }

    .ayon-faq-footer {
        flex-direction: column;
        gap: 6px;
    }
}

/* ==================================================
   HOME - FINAL CTA
================================================== */

.ayon-final-cta {
    padding: 75px 0;
    background:
        linear-gradient(
            135deg,
            #D45A12 0%,
            #B94C0F 100%
        );
}

.ayon-final-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}


/* CONTENT */

.ayon-final-cta__content {
    max-width: 760px;
}

.ayon-final-cta__kicker {
    display: block;

    margin-bottom: 12px;

    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;

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

.ayon-final-cta__content h2 {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;

    color: #FFFFFF;
}

.ayon-final-cta__content h2 span {
    display: block;

    color: #FFFFFF;
}

.ayon-final-cta__content p {
    max-width: 650px;

    margin: 17px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;

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


/* ACTIONS */

.ayon-final-cta__actions {
    display: flex;
    align-items: center;
    gap: 12px;

    flex-shrink: 0;
}

.ayon-btn--final-primary {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;

    color: var(--ayon-navy) !important;
}

.ayon-btn--final-primary:hover {
    background: var(--ayon-navy);
    border-color: var(--ayon-navy);

    color: #FFFFFF !important;
}

.ayon-btn--final-secondary {
    background: transparent;

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

    color: #FFFFFF !important;
}

.ayon-btn--final-secondary:hover {
    background: rgba(255,255,255,.10);

    border-color: #FFFFFF;

    color: #FFFFFF !important;
}


/* ==================================================
   FINAL CTA - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-final-cta {
        padding: 65px 0;
    }

    .ayon-final-cta__inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 30px;
    }

    .ayon-final-cta__content h2 {
        font-size: 34px;
    }

}


/* ==================================================
   FINAL CTA - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-final-cta {
        padding: 50px 0;
    }

    .ayon-final-cta__content h2 {
        font-size: 28px;
    }

    .ayon-final-cta__content p {
        font-size: 14px;
    }

    .ayon-final-cta__actions {
        width: 100%;

        flex-direction: column;
    }

    .ayon-final-cta__actions .ayon-btn {
        width: 100%;
    }

}

/* ==================================================
   PRODUCT ARCHIVE - STOCK STATUS
================================================== */

/* Ürün gridinde stok bilgisini gizle */
.wd-products .wd-product .stock,
.wd-products .product-grid-item .stock {
    display: none !important;
}

/* ==================================================
   PRODUCT ARCHIVE - ACTION BUTTONS
================================================== */

/*
 * Keep archive action buttons scoped to the product grid.
 * Covers normal WooCommerce buttons and all YITH quote states.
 */
.wd-products .wd-product .button,
.wd-products .wd-product .add-request-quote-button,
.wd-products .wd-product .yith-ywraq-add-to-quote a,
.wd-products .wd-product .yith_ywraq_add_item_browse_message a {
    width: 100%;
    min-height: 43px;

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

    padding: 10px 16px;

    border: 0 !important;
    border-radius: 6px !important;

    background: var(--ayon-navy) !important;
    color: #FFFFFF !important;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;
    text-decoration: none !important;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.wd-products .wd-product .button:hover,
.wd-products .wd-product .add-request-quote-button:hover,
.wd-products .wd-product .yith-ywraq-add-to-quote a:hover,
.wd-products .wd-product .yith_ywraq_add_item_browse_message a:hover {
    background: var(--ayon-orange) !important;
    color: #FFFFFF !important;
}

/* ==================================================
   PRODUCT ARCHIVE - KEEP ACTION BUTTON TEXT ON HOVER
================================================== */

.wd-products .wd-add-btn-replace .add-to-cart-loop::before {
    content: none !important;
    display: none !important;
}

.wd-products .wd-add-btn-replace .add-to-cart-loop > span,
.wd-products .wd-add-btn-replace .add-to-cart-loop:hover > span {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.wd-products .wd-add-btn-replace .add-to-cart-loop {
    background: var(--ayon-navy) !important;
    color: #FFFFFF !important;
}

.wd-products .wd-add-btn-replace .add-to-cart-loop:hover {
    background: var(--ayon-orange) !important;
    color: #FFFFFF !important;
}

/* ==================================================
   INNER PAGE HERO
================================================== */

.ayon-inner-hero {
    padding: 95px 0 85px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-hakkimizda-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.ayon-inner-hero__content {
    max-width: 760px;
}

.ayon-inner-hero h1 {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-inner-hero h1 span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-inner-hero p {
    max-width: 680px;
    margin: 20px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - INTRO
================================================== */

.ayon-about-intro {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-about-intro__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}

.ayon-about-intro__content h2 {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-about-intro__content h2 span {
    color: var(--ayon-orange);
}

.ayon-about-intro__content p {
    margin: 18px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}


/* STATS */

.ayon-about-intro__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-about-stat {
    min-height: 150px;
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-about-stat strong {
    display: block;

    margin-bottom: 9px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-about-stat span {
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - EXPERTISE
================================================== */

.ayon-about-expertise {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-about-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ayon-about-expertise-card {
    min-height: 230px;
    padding: 28px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);

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

.ayon-about-expertise-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212,90,18,.40);

    box-shadow:
        0 16px 36px rgba(16,32,48,.07);
}

.ayon-about-expertise-card > span {
    display: block;

    margin-bottom: 28px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-about-expertise-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-about-expertise-card p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-inner-hero {
        padding: 75px 0 70px;
    }

    .ayon-inner-hero h1 {
        font-size: 39px;
    }

    .ayon-about-intro {
        padding: 75px 0;
    }

    .ayon-about-intro__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ayon-about-expertise {
        padding: 75px 0;
    }

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

}


/* ==================================================
   ABOUT - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-inner-hero {
        padding: 60px 0;

        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-hakkimizda-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-inner-hero h1 {
        font-size: 31px;
    }

    .ayon-inner-hero p {
        font-size: 15px;
    }

    .ayon-about-intro {
        padding: 55px 0;
    }

    .ayon-about-intro__content h2 {
        font-size: 29px;
    }

    .ayon-about-intro__stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ayon-about-stat {
        min-height: auto;
    }

    .ayon-about-expertise {
        padding: 55px 0;
    }

    .ayon-about-expertise-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-about-expertise-card {
        min-height: auto;
        padding: 24px;
    }
}

/* ==================================================
   ABOUT - PROCESS
================================================== */

.ayon-about-process {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-about-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.ayon-about-process-item {
    padding: 26px;
    border: 1px solid var(--ayon-border);
    border-radius: 10px;
    background: var(--ayon-light);
}

.ayon-about-process-item > span {
    display: block;
    margin-bottom: 24px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ayon-orange);
}

.ayon-about-process-item h3 {
    margin: 0 0 9px;
    font-family: Manrope, sans-serif;
    font-size: 17px;
    color: var(--ayon-navy);
}

.ayon-about-process-item p {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - VALUES
================================================== */

.ayon-about-values {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-about-values__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-about-values__content h2 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;
    color: var(--ayon-navy);
}

.ayon-about-values__content h2 span {
    color: var(--ayon-orange);
}

.ayon-about-values__content p {
    margin: 18px 0 0;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ayon-muted);
}

.ayon-about-values__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-about-value {
    padding: 24px;
    border: 1px solid var(--ayon-border);
    border-radius: 10px;
    background: var(--ayon-white);
}

.ayon-about-value strong {
    display: block;
    margin-bottom: 7px;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    color: var(--ayon-navy);
}

.ayon-about-value span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - REGION
================================================== */

.ayon-about-region {
    padding: 80px 0;
    background: var(--ayon-white);
}

.ayon-about-region__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.ayon-about-region h2 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 36px;
    line-height: 1.22;
    color: var(--ayon-navy);
}

.ayon-about-region h2 span {
    color: var(--ayon-orange);
}

.ayon-about-region p {
    margin: 17px 0 0;
    max-width: 650px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ayon-muted);
}

.ayon-about-region__items {
    display: grid;
    gap: 14px;
}

.ayon-about-region__items > div {
    padding: 22px 24px;
    border-left: 3px solid var(--ayon-orange);
    background: var(--ayon-light);
}

.ayon-about-region__items strong {
    display: block;
    margin-bottom: 4px;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    color: var(--ayon-navy);
}

.ayon-about-region__items span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--ayon-muted);
}


/* ==================================================
   ABOUT - FINAL CTA
================================================== */

.ayon-about-final {
    padding: 75px 0;
    background: var(--ayon-dark);
}

.ayon-about-final__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ayon-about-final__kicker {
    display: block;
    margin-bottom: 12px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    color: #F49A61;
}

.ayon-about-final h2 {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 36px;
    line-height: 1.2;
    color: #FFFFFF;
}

.ayon-about-final h2 span {
    display: block;
    color: #F49A61;
}

.ayon-about-final p {
    margin: 16px 0 0;
    max-width: 650px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
}

.ayon-about-final__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}


/* ==================================================
   ABOUT - RESPONSIVE
================================================== */

@media (max-width: 1024px) {

    .ayon-about-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ayon-about-values__grid,
    .ayon-about-region__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ayon-about-final__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {

    .ayon-about-process,
    .ayon-about-values,
    .ayon-about-region {
        padding: 55px 0;
    }

    .ayon-about-process-grid,
    .ayon-about-values__list {
        grid-template-columns: 1fr;
    }

    .ayon-about-values__content h2,
    .ayon-about-region h2 {
        font-size: 29px;
    }

    .ayon-about-final {
        padding: 50px 0;
    }

    .ayon-about-final h2 {
        font-size: 29px;
    }

    .ayon-about-final__actions {
        width: 100%;
        flex-direction: column;
    }

    .ayon-about-final__actions .ayon-btn {
        width: 100%;
    }
}
/* ==================================================
   SERVICES - HERO
================================================== */

.ayon-inner-hero--services {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-hizmetler-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
   SERVICES PAGE
================================================== */

.ayon-services-page {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-services-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* SERVICE CARD */

.ayon-service-detail {
    position: relative;

    min-height: 410px;
    padding: 32px;

    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;

    border: 1px solid var(--ayon-border);
    border-radius: 11px;

    background: var(--ayon-light);

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

.ayon-service-detail:hover {
    transform: translateY(-4px);

    border-color: rgba(212,90,18,.40);

    box-shadow:
        0 18px 42px rgba(16,32,48,.07);
}

.ayon-service-detail--wide {
    grid-column: 1 / -1;

    min-height: auto;
}


/* NUMBER */

.ayon-service-detail__number {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    background: #FFF3EC;

    font-family: Manrope, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* CONTENT */

.ayon-service-detail__label {
    display: block;

    margin: 3px 0 9px;

    font-family: Inter, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-service-detail h3 {
    margin: 0 0 13px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-service-detail p {
    max-width: 620px;

    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* LIST */

.ayon-service-detail ul {
    margin: 22px 0 0;
    padding: 0;

    list-style: none;
}

.ayon-service-detail li {
    position: relative;

    margin: 9px 0;
    padding-left: 22px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55;

    color: var(--ayon-text);
}

.ayon-service-detail li::before {
    content: "✓";

    position: absolute;
    left: 0;

    font-weight: 700;

    color: var(--ayon-orange);
}


/* ==================================================
   SERVICES - MATERIAL SUPPLY
================================================== */

.ayon-services-supply {
    padding: 80px 0;
    background: var(--ayon-light);
}

.ayon-services-supply__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;
}

.ayon-services-supply__inner > div:first-child {
    max-width: 720px;
}

.ayon-services-supply h2 {
    margin: 0;

    font-family: Manrope, Arial, sans-serif;
    font-size: 36px;
    line-height: 1.22;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-services-supply h2 span {
    color: var(--ayon-orange);
}

.ayon-services-supply p {
    max-width: 650px;

    margin: 17px 0 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;

    color: var(--ayon-muted);
}

.ayon-services-supply__actions {
    display: flex;
    gap: 12px;

    flex-shrink: 0;
}


/* ==================================================
   SERVICES - RESPONSIVE
================================================== */

@media (max-width: 1024px) {

    .ayon-services-page {
        padding: 75px 0;
    }

    .ayon-services-supply__inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 30px;
    }

}


@media (max-width: 767px) {

    .ayon-inner-hero--services {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-hizmetler-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-services-page {
        padding: 55px 0;
    }

    .ayon-services-page-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-service-detail,
    .ayon-service-detail--wide {
        grid-column: auto;

        min-height: auto;

        padding: 24px;

        grid-template-columns: 44px 1fr;
        gap: 14px;
    }

    .ayon-service-detail__number {
        width: 40px;
        height: 40px;
    }

    .ayon-service-detail h3 {
        font-size: 20px;
    }

    .ayon-services-supply {
        padding: 55px 0;
    }

    .ayon-services-supply h2 {
        font-size: 29px;
    }

    .ayon-services-supply__actions {
        width: 100%;

        flex-direction: column;
    }

    .ayon-services-supply__actions .ayon-btn {
        width: 100%;
    }
}

/* ==================================================
   SOLUTIONS - HERO
================================================== */

.ayon-inner-hero--solutions {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-cozumler-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
   SOLUTIONS PAGE
================================================== */

.ayon-solutions-page {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-solutions-page-grid {
    display: grid;
    gap: 28px;
}

.ayon-solution-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 430px;

    overflow: hidden;

    border: 1px solid var(--ayon-border);
    border-radius: 12px;

    background: var(--ayon-light);
}

.ayon-solution-detail--reverse .ayon-solution-detail__image {
    order: 2;
}

.ayon-solution-detail--reverse .ayon-solution-detail__content {
    order: 1;
}


/* IMAGE */

.ayon-solution-detail__image {
    min-height: 430px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ayon-solution-detail__image--villa {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-villa.webp');
}

.ayon-solution-detail__image--home {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-konut.webp');
}

.ayon-solution-detail__image--renovation {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-tadilat.webp');
}

.ayon-solution-detail__image--mechanical {
    background-image:
        url('/wp-content/uploads/2026/09/ayon-cozum-villa-kazan-boyler.webp');
}


/* CONTENT */

.ayon-solution-detail__content {
    padding: 46px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ayon-solution-detail__label {
    margin-bottom: 10px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-solution-detail h3 {
    margin: 0 0 14px;

    font-family: Manrope, sans-serif;
    font-size: 28px;
    line-height: 1.25;

    color: var(--ayon-navy);
}

.ayon-solution-detail p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}

.ayon-solution-detail ul {
    margin: 22px 0;
    padding: 0;

    list-style: none;
}

.ayon-solution-detail li {
    position: relative;

    margin: 9px 0;
    padding-left: 22px;

    font-family: Inter, sans-serif;
    font-size: 13px;

    color: var(--ayon-text);
}

.ayon-solution-detail li::before {
    content: "✓";

    position: absolute;
    left: 0;

    font-weight: 700;

    color: var(--ayon-orange);
}


/* ==================================================
   SOLUTIONS - METHOD
================================================== */

.ayon-solution-method {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-solution-method__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    gap: 70px;
    align-items: center;
}

.ayon-solution-method h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-solution-method h2 span {
    color: var(--ayon-orange);
}

.ayon-solution-method > div p,
.ayon-solution-method__grid > div:first-child > p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-solution-method__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-solution-method__items > div {
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-solution-method__items > div > span {
    display: block;

    margin-bottom: 18px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-solution-method__items strong {
    display: block;

    margin-bottom: 7px;

    font-family: Manrope, sans-serif;
    font-size: 17px;

    color: var(--ayon-navy);
}

.ayon-solution-method__items p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* ==================================================
   SOLUTIONS - RESPONSIVE
================================================== */

@media (max-width: 1024px) {

    .ayon-solutions-page,
    .ayon-solution-method {
        padding: 75px 0;
    }

    .ayon-solution-method__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 767px) {

    .ayon-inner-hero--solutions {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-cozumler-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-solutions-page,
    .ayon-solution-method {
        padding: 55px 0;
    }

    .ayon-solution-detail {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .ayon-solution-detail--reverse .ayon-solution-detail__image,
    .ayon-solution-detail--reverse .ayon-solution-detail__content {
        order: initial;
    }

    .ayon-solution-detail__image {
        min-height: 280px;
    }

    .ayon-solution-detail__content {
        padding: 27px;
    }

    .ayon-solution-detail h3 {
        font-size: 23px;
    }

    .ayon-solution-method h2 {
        font-size: 29px;
    }

    .ayon-solution-method__items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}

/* ==================================================
   BRANDS - HERO
================================================== */

.ayon-inner-hero--brands {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-markalar-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


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

.ayon-brands-page {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Scoped so these rules never alter the homepage brand slider */

.ayon-brands-page .ayon-brand-card {
    padding: 28px;
    min-height: 310px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;
    background: var(--ayon-white);

    text-decoration: none;

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

.ayon-brands-page .ayon-brand-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212,90,18,.38);
    box-shadow: 0 16px 38px rgba(16,32,48,.07);
}

.ayon-brands-page .ayon-brand-card__logo {
    height: 105px;

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

    margin-bottom: 24px;
}

.ayon-brands-page .ayon-brand-card__logo img {
    width: auto;
    max-width: 170px;
    max-height: 75px;
    object-fit: contain;

    filter: grayscale(100%);
    opacity: .78;

    transition:
        filter .25s ease,
        opacity .25s ease,
        transform .25s ease;
}

.ayon-brands-page .ayon-brand-card:hover .ayon-brand-card__logo img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.03);
}

.ayon-brands-page .ayon-brand-card h3 {
    margin: 0 0 8px;

    font-family: Manrope, sans-serif;
    font-size: 19px;

    color: var(--ayon-navy);
}

.ayon-brands-page .ayon-brand-card p {
    margin: 0 0 20px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-brands-page .ayon-brand-card > span {
    margin-top: auto;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}

/* ==================================================
   BRAND APPROACH
================================================== */

.ayon-brand-approach {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-brand-approach__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    gap: 70px;
    align-items: center;
}

.ayon-brand-approach h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-brand-approach h2 span {
    color: var(--ayon-orange);
}

.ayon-brand-approach__grid > div:first-child > p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-brand-approach__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-brand-approach__items > div {
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-brand-approach__items span {
    display: block;

    margin-bottom: 18px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-brand-approach__items strong {
    display: block;

    margin-bottom: 6px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-brand-approach__items p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.6;

    color: var(--ayon-muted);
}


/* ==================================================
   BRANDS - RESPONSIVE
================================================== */

@media (max-width: 1024px) {

    .ayon-brands-page,
    .ayon-brand-approach {
        padding: 75px 0;
    }

    .ayon-brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ayon-brand-approach__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}

@media (max-width: 767px) {

    .ayon-inner-hero--brands {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-markalar-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-brands-page,
    .ayon-brand-approach {
        padding: 55px 0;
    }

    .ayon-brand-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ayon-brands-page .ayon-brand-card {
        min-height: 250px;
        padding: 20px;
    }

    .ayon-brands-page .ayon-brand-card__logo {
        height: 80px;
    }

    .ayon-brands-page .ayon-brand-card__logo img {
        max-width: 125px;
        max-height: 60px;
    }

    .ayon-brands-page .ayon-brand-card h3 {
        font-size: 16px;
    }

    .ayon-brands-page .ayon-brand-card p {
        font-size: 12px;
    }

    .ayon-brand-approach h2 {
        font-size: 29px;
    }

    .ayon-brand-approach__items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}

/* ==================================================
   KNOWLEDGE - HERO
================================================== */

.ayon-inner-hero--knowledge {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-teknik-bilgi-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
   KNOWLEDGE CATEGORIES
================================================== */

.ayon-knowledge-categories {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-knowledge-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ayon-knowledge-category {
    min-height: 255px;
    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);

    text-decoration: none;

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

.ayon-knowledge-category:hover {
    transform: translateY(-4px);

    border-color: rgba(212,90,18,.40);

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

.ayon-knowledge-category > span {
    margin-bottom: 26px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-knowledge-category h3 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 19px;

    color: var(--ayon-navy);
}

.ayon-knowledge-category p {
    margin: 0 0 20px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: var(--ayon-muted);
}

.ayon-knowledge-category strong {
    margin-top: auto;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* ==================================================
   KNOWLEDGE POSTS
================================================== */

.ayon-knowledge-posts-head {
    padding: 90px 0 25px;
    background: var(--ayon-light);
}


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

@media (max-width: 1024px) {

    .ayon-knowledge-categories {
        padding: 75px 0;
    }

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

}


@media (max-width: 767px) {

    .ayon-inner-hero--knowledge {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-teknik-bilgi-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-knowledge-categories {
        padding: 55px 0;
    }

    .ayon-knowledge-category-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ayon-knowledge-category {
        min-height: auto;
        padding: 24px;
    }

    .ayon-knowledge-posts-head {
        padding: 55px 0 20px;
    }
}

/* ==================================================
   TECHNICAL ARTICLE - SINGLE POST
================================================== */

.ayon-article-hero {
    padding: 75px 20px 45px;
    background: var(--ayon-light);
}

.ayon-article-hero > .e-con-inner,
.ayon-article-featured > .e-con-inner,
.ayon-article-layout > .e-con-inner {
    max-width: 900px;
    margin: 0 auto;
}

.ayon-article-meta {
    margin-bottom: 14px;
}

.ayon-article-meta,
.ayon-article-meta a {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ayon-orange);
}

.ayon-article-hero h1 {
    max-width: 900px;
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-article-excerpt {
    max-width: 760px;
    margin-top: 20px;

    font-family: Inter, sans-serif;
    font-size: 17px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* FEATURED IMAGE */

.ayon-article-featured {
    padding: 45px 20px 0;
    background: var(--ayon-white);
}

.ayon-article-featured img {
    width: 100%;
    border-radius: 12px;
}


/* ARTICLE CONTENT */

.ayon-article-layout {
    padding: 55px 20px 90px;
    background: var(--ayon-white);
}

.ayon-article-content {
    max-width: 860px;
    margin: 0 auto;
}

.ayon-article-content p {
    margin: 0 0 20px;

    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.85;

    color: var(--ayon-text);
}

.ayon-article-content h2 {
    margin: 46px 0 18px;

    font-family: Manrope, sans-serif;
    font-size: 30px;
    line-height: 1.25;

    color: var(--ayon-navy);
}

.ayon-article-content h3 {
    margin: 34px 0 14px;

    font-family: Manrope, sans-serif;
    font-size: 23px;

    color: var(--ayon-navy);
}

.ayon-article-content ul,
.ayon-article-content ol {
    margin: 20px 0 26px;
    padding-left: 25px;
}

.ayon-article-content li {
    margin-bottom: 9px;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;

    color: var(--ayon-text);
}

.ayon-article-content strong {
    color: var(--ayon-navy);
}


/* ARTICLE CTA */

.ayon-article-cta {
    margin-top: 65px;
    padding: 36px;

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

    gap: 35px;

    border-radius: 12px;

    background: var(--ayon-light);
    border: 1px solid var(--ayon-border);
}

.ayon-article-cta__content {
    max-width: 570px;
}

.ayon-article-cta__content > span {
    display: block;
    margin-bottom: 8px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-article-cta h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 25px;
    line-height: 1.25;

    color: var(--ayon-navy);
}

.ayon-article-cta h2 strong {
    color: var(--ayon-orange);
}

.ayon-article-cta p {
    margin: 12px 0 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: var(--ayon-muted);
}

.ayon-article-cta__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}


/* RESPONSIVE */

@media (max-width: 1024px) {

    .ayon-article-hero h1 {
        font-size: 39px;
    }

    .ayon-article-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {

    .ayon-article-hero {
        padding: 55px 20px 35px;
    }

    .ayon-article-hero h1 {
        font-size: 31px;
    }

    .ayon-article-excerpt {
        font-size: 15px;
    }

    .ayon-article-featured {
        padding-top: 30px;
    }

    .ayon-article-layout {
        padding-top: 40px;
        padding-bottom: 60px;
    }

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

    .ayon-article-content h2 {
        margin-top: 38px;
        font-size: 25px;
    }

    .ayon-article-content h3 {
        font-size: 20px;
    }

    .ayon-article-cta {
        margin-top: 45px;
        padding: 25px;
    }

    .ayon-article-cta h2 {
        font-size: 22px;
    }

    .ayon-article-cta__actions {
        width: 100%;
        flex-direction: column;
    }

    .ayon-article-cta__actions .ayon-btn {
        width: 100%;
    }
}

/* ==================================================
   RELATED TECHNICAL ARTICLES
================================================== */

.ayon-related-title {
    margin: 70px 0 28px;

    font-family: Manrope, sans-serif;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;

    color: var(--ayon-navy);
}

@media (max-width: 767px) {

    .ayon-related-title {
        margin-top: 50px;
        font-size: 24px;
    }

}

.ayon-article-content table {
    width: 100%;
    margin: 28px 0 32px;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: 14px;
}

.ayon-article-content th {
    padding: 14px 16px;
    text-align: left;
    background: var(--ayon-navy);
    color: #fff;
    font-weight: 600;
}

.ayon-article-content td {
    padding: 14px 16px;
    border: 1px solid var(--ayon-border);
    line-height: 1.6;
    color: var(--ayon-text);
}

.ayon-article-content tbody tr:nth-child(even) {
    background: var(--ayon-light);
}

@media (max-width: 767px) {
    .ayon-article-content table {
        font-size: 12px;
    }

    .ayon-article-content th,
    .ayon-article-content td {
        padding: 11px;
    }
}

/* ==================================================
   CONTACT - HERO
================================================== */

.ayon-inner-hero--contact {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.90) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-iletisim-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
   CONTACT CARDS
================================================== */

.ayon-contact-cards {
    padding: 70px 0;
    background: var(--ayon-white);
}

.ayon-contact-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ayon-contact-card {
    min-height: 220px;
    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);

    text-decoration: none;

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

a.ayon-contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212,90,18,.4);
    box-shadow: 0 15px 35px rgba(16,32,48,.07);
}

.ayon-contact-card > span {
    margin-bottom: 22px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-contact-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 18px;
    line-height: 1.3;

    color: var(--ayon-navy);
}

.ayon-contact-card p {
    margin: 0 0 18px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-contact-card strong {
    margin-top: auto;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* ==================================================
   CONTACT MAIN
================================================== */

.ayon-contact-main {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-contact-main__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: start;
}

.ayon-contact-main__content h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-contact-main__content h2 span {
    color: var(--ayon-orange);
}

.ayon-contact-main__content > p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-contact-info {
    display: grid;
    gap: 14px;

    margin-top: 35px;
}

.ayon-contact-info > div {
    padding: 18px 20px;

    border-left: 3px solid var(--ayon-orange);

    background: var(--ayon-white);
}

.ayon-contact-info strong {
    display: block;

    margin-bottom: 4px;

    font-family: Manrope, sans-serif;
    font-size: 15px;

    color: var(--ayon-navy);
}

.ayon-contact-info span {
    font-family: Inter, sans-serif;
    font-size: 12px;

    color: var(--ayon-muted);
}


/* FORM BOX */

.ayon-contact-form-box {
    padding: 38px;

    border: 1px solid var(--ayon-border);
    border-radius: 12px;

    background: var(--ayon-white);
}

.ayon-contact-form-head {
    margin-bottom: 30px;
}

.ayon-contact-form-head > span {
    display: block;

    margin-bottom: 7px;

    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;

    color: var(--ayon-orange);
}

.ayon-contact-form-head h3 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 25px;

    color: var(--ayon-navy);
}

.ayon-contact-form-head p {
    margin: 10px 0 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* ==================================================
   CONTACT SCOPE
================================================== */

.ayon-contact-scope {
    padding: 75px 0;

    background: var(--ayon-white);
}

.ayon-contact-scope__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.ayon-contact-scope__inner > div {
    max-width: 720px;
}

.ayon-contact-scope h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 35px;
    line-height: 1.25;

    color: var(--ayon-navy);
}

.ayon-contact-scope h2 span {
    color: var(--ayon-orange);
}

.ayon-contact-scope p {
    margin: 16px 0 0;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* ==================================================
   CONTACT - RESPONSIVE
================================================== */

@media (max-width: 1024px) {

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

    .ayon-contact-main__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


@media (max-width: 767px) {

    .ayon-inner-hero--contact {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-iletisim-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-contact-cards {
        padding: 50px 0;
    }

    .ayon-contact-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ayon-contact-card {
        min-height: auto;
        padding: 23px;
    }

    .ayon-contact-main {
        padding: 55px 0;
    }

    .ayon-contact-main__content h2 {
        font-size: 29px;
    }

    .ayon-contact-form-box {
        padding: 25px;
    }

    .ayon-contact-scope {
        padding: 55px 0;
    }

    .ayon-contact-scope__inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 28px;
    }

    .ayon-contact-scope h2 {
        font-size: 29px;
    }

}

/* ==================================================
   FLUENT FORMS - AYON CONTACT
================================================== */

.ayon-contact-form-box .fluentform {
    margin: 0;
}

.ayon-contact-form-box .ff-el-group {
    margin-bottom: 17px;
}

.ayon-contact-form-box .ff-el-input--label label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--ayon-navy);
}

.ayon-contact-form-box .ff-el-form-control {
    min-height: 46px;
    padding: 11px 13px;

    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;

    background: #FFFFFF;

    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--ayon-text);

    box-shadow: none !important;
}

.ayon-contact-form-box textarea.ff-el-form-control {
    min-height: 145px;
}

.ayon-contact-form-box .ff-el-form-control:focus {
    border-color: var(--ayon-orange) !important;
    box-shadow: 0 0 0 3px rgba(212,90,18,.08) !important;
}

.ayon-contact-form-box .ff-el-form-control::placeholder {
    color: #98A2B3;
}

/* Native Fluent Forms checkbox styling */

.ayon-contact-form-box .ff-el-form-check-label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ayon-muted);
}

.ayon-contact-form-box input[type="checkbox"] {
    accent-color: var(--ayon-orange);
}

/* Submit button - one canonical rule set */

.ayon-contact-form-box .ff-btn-submit,
.ayon-contact-main .ff-btn-submit,
.ayon-contact-main button.ff-btn-submit {
    min-height: 46px;
    padding: 0 22px !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: var(--ayon-orange) !important;
    color: #FFFFFF !important;

    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;

    box-shadow: none !important;

    transition:
        background .2s ease,
        transform .2s ease;
}

.ayon-contact-form-box .ff-btn-submit:hover,
.ayon-contact-main .ff-btn-submit:hover,
.ayon-contact-main button.ff-btn-submit:hover {
    background: var(--ayon-orange-hover) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Validation */

.ayon-contact-form-box .text-danger,
.ayon-contact-form-box .ff-el-is-error .error {
    font-family: Inter, sans-serif;
    font-size: 11px;
}

/* Current KVKK information text (Custom HTML field) */

.ayon-contact-form-box .ayon-kvkk-text {
    margin: 0 0 18px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.5;

    color: var(--ayon-muted);
}

.ayon-contact-form-box .ayon-kvkk-text p {
    margin: 0;
}

.ayon-contact-form-box .ayon-kvkk-text a {
    color: var(--ayon-orange);
    font-weight: 600;
    text-decoration: none;
}

.ayon-contact-form-box .ayon-kvkk-text a:hover {
    color: var(--ayon-orange-hover);
    text-decoration: underline;
}

@media (max-width: 767px) {

    .ayon-contact-form-box .ff-btn-submit,
    .ayon-contact-main .ff-btn-submit,
    .ayon-contact-main button.ff-btn-submit {
        width: 100%;
    }
}

/* ==================================================
   FAQ - HERO
================================================== */

.ayon-inner-hero--faq {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.48) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-sss-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


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

.ayon-faq-page {
    padding: 95px 0;
    background: var(--ayon-white);
}

/* Scoped to the dedicated FAQ page so homepage FAQ styles stay independent */

.ayon-faq-page .ayon-faq-list {
    max-width: 940px;
    margin: 0 auto;
}

.ayon-faq-page .ayon-faq-item {
    margin-bottom: 12px;

    border: 1px solid var(--ayon-border);
    border-radius: 8px;

    background: var(--ayon-white);
    overflow: hidden;

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

.ayon-faq-page .ayon-faq-item:hover,
.ayon-faq-page .ayon-faq-item[open] {
    border-color: rgba(212,90,18,.35);
}

.ayon-faq-page .ayon-faq-item[open] {
    box-shadow: 0 12px 28px rgba(16,32,48,.05);
}

/* QUESTION */

.ayon-faq-page .ayon-faq-item summary {
    position: relative;
    padding: 20px 55px 20px 22px;

    cursor: pointer;
    list-style: none;

    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-faq-page .ayon-faq-item summary::-webkit-details-marker {
    display: none;
}

.ayon-faq-page .ayon-faq-item summary::after {
    content: "+";

    position: absolute;
    right: 22px;
    top: 50%;

    transform: translateY(-50%);

    font-family: Manrope, sans-serif;
    font-size: 24px;
    font-weight: 400;

    color: var(--ayon-orange);
}

.ayon-faq-page .ayon-faq-item[open] summary::after {
    content: "−";
}

/* ANSWER */

.ayon-faq-page .ayon-faq-answer {
    padding: 0 55px 20px 22px;
}

.ayon-faq-page .ayon-faq-answer p {
    max-width: 800px;
    margin: 0 0 10px;

    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}

.ayon-faq-page .ayon-faq-answer p:last-child {
    margin-bottom: 0;
}

/* GROUPS */

.ayon-faq-group-title {
    margin-top: 85px;
}

/* RESPONSIVE */

@media (max-width: 767px) {

    .ayon-inner-hero--faq {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-sss-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-faq-page {
        padding: 55px 0;
    }

    .ayon-faq-group-title {
        margin-top: 60px;
    }

    .ayon-faq-page .ayon-faq-item summary {
        padding: 18px 48px 18px 18px;
        font-size: 15px;
    }

    .ayon-faq-page .ayon-faq-item summary::after {
        right: 18px;
    }

    .ayon-faq-page .ayon-faq-answer {
        padding: 0 18px 18px;
    }

    .ayon-faq-page .ayon-faq-answer p {
        font-size: 13px;
    }
}

/* ==================================================
   KVKK & PRIVACY
================================================== */

.ayon-policy-hero {
    padding: 80px 0 70px;
    background: var(--ayon-light);
}

.ayon-policy-hero h1 {
    max-width: 850px;
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-policy-hero h1 span {
    color: var(--ayon-orange);
}

.ayon-policy-hero p {
    max-width: 720px;
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.75;

    color: var(--ayon-muted);
}


/* CONTENT */

.ayon-policy-page {
    padding: 80px 0 100px;
    background: #fff;
}

.ayon-policy-content {
    max-width: 900px;
    margin: 0 auto;
}

.ayon-policy-content h2 {
    margin: 48px 0 17px;

    font-family: Manrope, sans-serif;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-policy-content p,
.ayon-policy-content li {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: var(--ayon-text);
}

.ayon-policy-content p {
    margin: 0 0 16px;
}

.ayon-policy-content ul {
    margin: 18px 0 25px;
    padding-left: 22px;
}

.ayon-policy-content li {
    margin-bottom: 8px;
}


/* DATE */

.ayon-policy-note {
    display: flex;
    gap: 7px;

    padding: 14px 17px;

    border-left: 3px solid var(--ayon-orange);

    background: var(--ayon-light);

    font-family: Inter, sans-serif;
    font-size: 12px;

    color: var(--ayon-muted);
}

.ayon-policy-note strong {
    color: var(--ayon-navy);
}


/* COMPANY */

.ayon-policy-company {
    margin: 22px 0;
    padding: 22px 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 8px;

    background: var(--ayon-light);
}

.ayon-policy-company p {
    margin: 6px 0;
}


/* CONTACT */

.ayon-policy-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 22px;
    padding: 24px;

    border: 1px solid var(--ayon-border);
    border-radius: 8px;

    background: var(--ayon-light);

    font-family: Inter, sans-serif;
    font-size: 14px;

    color: var(--ayon-text);
}

.ayon-policy-contact strong {
    margin-bottom: 4px;

    font-family: Manrope, sans-serif;
    font-size: 17px;

    color: var(--ayon-navy);
}

.ayon-policy-contact a {
    color: var(--ayon-navy);
    font-weight: 600;
}

.ayon-policy-contact a:hover {
    color: var(--ayon-orange);
}


/* MOBILE */

@media (max-width: 767px) {

    .ayon-policy-hero {
        padding: 55px 0 50px;
    }

    .ayon-policy-hero h1 {
        font-size: 31px;
    }

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

    .ayon-policy-page {
        padding: 50px 0 70px;
    }

    .ayon-policy-content h2 {
        margin-top: 38px;
        font-size: 22px;
    }

    .ayon-policy-content p,
    .ayon-policy-content li {
        font-size: 13px;
    }

    .ayon-policy-note {
        flex-direction: column;
        gap: 2px;
    }
}
/* ==================================================
   CORPORATE - HERO
================================================== */

.ayon-inner-hero--corporate {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-kurumsal-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.ayon-corporate-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}


/* ==================================================
   CORPORATE - APPROACH
================================================== */

.ayon-corporate-approach {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-corporate-approach__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-corporate-approach__content h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-corporate-approach__content h2 span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-corporate-approach__content p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-corporate-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-corporate-value {
    min-height: 190px;
    padding: 26px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);

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

.ayon-corporate-value:hover {
    transform: translateY(-4px);
    border-color: rgba(212,90,18,.38);
    box-shadow: 0 16px 38px rgba(16,32,48,.07);
}

.ayon-corporate-value > span {
    display: block;
    margin-bottom: 24px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-corporate-value strong {
    display: block;
    margin-bottom: 8px;

    font-family: Manrope, sans-serif;
    font-size: 17px;

    color: var(--ayon-navy);
}

.ayon-corporate-value p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* ==================================================
   CORPORATE - PROCESS
================================================== */

.ayon-corporate-process {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-corporate-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ayon-corporate-process-item {
    min-height: 205px;
    padding: 28px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-corporate-process-item > span {
    display: block;
    margin-bottom: 28px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-corporate-process-item h3 {
    margin: 0 0 9px;

    font-family: Manrope, sans-serif;
    font-size: 19px;

    color: var(--ayon-navy);
}

.ayon-corporate-process-item p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* ==================================================
   CORPORATE - AREAS
================================================== */

.ayon-corporate-areas {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-corporate-area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ayon-corporate-area {
    min-height: 290px;
    padding: 28px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);

    text-decoration: none !important;

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

.ayon-corporate-area:hover {
    transform: translateY(-4px);
    border-color: rgba(212,90,18,.4);
    box-shadow: 0 16px 38px rgba(16,32,48,.07);
}

.ayon-corporate-area > span {
    margin-bottom: 30px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-corporate-area h3 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 19px;
    line-height: 1.35;

    color: var(--ayon-navy);
}

.ayon-corporate-area p {
    margin: 0 0 22px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: var(--ayon-muted);
}

.ayon-corporate-area strong {
    margin-top: auto;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-orange);
}


/* ==================================================
   CORPORATE - PROJECTS
================================================== */

.ayon-corporate-projects {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-corporate-projects__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 70px;
    align-items: center;
}

.ayon-corporate-projects h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-corporate-projects h2 span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-corporate-projects__grid > div:first-child > p {
    margin: 18px 0 28px;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-corporate-project-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-corporate-project-list > div {
    min-height: 155px;
    padding: 24px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-corporate-project-list strong {
    display: block;
    margin-bottom: 8px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-corporate-project-list span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-corporate-region {
    margin-top: 45px;
    padding: 22px 25px;

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

    border-left: 3px solid var(--ayon-orange);

    background: var(--ayon-white);
}

.ayon-corporate-region strong {
    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-corporate-region span {
    font-family: Inter, sans-serif;
    font-size: 13px;

    color: var(--ayon-muted);
}


/* ==================================================
   CORPORATE - LINKS
================================================== */

.ayon-corporate-links {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-corporate-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ayon-corporate-link-card {
    min-height: 245px;
    padding: 27px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);

    text-decoration: none !important;

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

.ayon-corporate-link-card:hover {
    transform: translateY(-4px);

    border-color: rgba(212,90,18,.4);

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

.ayon-corporate-link-card > span {
    margin-bottom: 28px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-corporate-link-card h3 {
    margin: 0 0 9px;

    font-family: Manrope, sans-serif;
    font-size: 19px;

    color: var(--ayon-navy);
}

.ayon-corporate-link-card p {
    margin: 0 0 20px;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-corporate-link-card strong {
    margin-top: auto;

    font-family: Inter, sans-serif;
    font-size: 12px;

    color: var(--ayon-orange);
}


/* ==================================================
   CORPORATE - FINAL CTA
================================================== */

.ayon-corporate-final {
    padding: 75px 0;
    background: var(--ayon-dark);
}

.ayon-corporate-final__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 55px;
}

.ayon-corporate-final__inner > div:first-child {
    max-width: 760px;
}

.ayon-corporate-final__kicker {
    display: block;

    margin-bottom: 12px;

    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;

    color: #F49A61;
}

.ayon-corporate-final h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 36px;
    line-height: 1.2;

    color: #FFFFFF;
}

.ayon-corporate-final h2 span {
    display: block;
    color: #F49A61;
}

.ayon-corporate-final p {
    margin: 17px 0 0;

    max-width: 680px;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.75;

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

.ayon-corporate-final__actions {
    display: flex;
    gap: 12px;

    flex-shrink: 0;
}


/* ==================================================
   CORPORATE - TABLET
================================================== */

@media (max-width: 1024px) {

    .ayon-corporate-approach,
    .ayon-corporate-process,
    .ayon-corporate-areas,
    .ayon-corporate-projects,
    .ayon-corporate-links {
        padding: 75px 0;
    }

    .ayon-corporate-approach__grid,
    .ayon-corporate-projects__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

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

    .ayon-corporate-final__inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* ==================================================
   CORPORATE - MOBILE
================================================== */

@media (max-width: 767px) {

    .ayon-inner-hero--corporate {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-kurumsal-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-corporate-hero__actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .ayon-corporate-hero__actions .ayon-btn {
        width: 100%;
    }

    .ayon-corporate-approach,
    .ayon-corporate-process,
    .ayon-corporate-areas,
    .ayon-corporate-projects,
    .ayon-corporate-links {
        padding: 55px 0;
    }

    .ayon-corporate-approach__content h2,
    .ayon-corporate-projects h2 {
        font-size: 29px;
    }

    .ayon-corporate-values,
    .ayon-corporate-process-grid,
    .ayon-corporate-area-grid,
    .ayon-corporate-project-list,
    .ayon-corporate-links-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ayon-corporate-value,
    .ayon-corporate-process-item,
    .ayon-corporate-area,
    .ayon-corporate-link-card {
        min-height: auto;
        padding: 24px;
    }

    .ayon-corporate-region {
        flex-direction: column;
        align-items: flex-start;

        gap: 6px;

        margin-top: 30px;
    }

    .ayon-corporate-final {
        padding: 50px 0;
    }

    .ayon-corporate-final h2 {
        font-size: 29px;
    }

    .ayon-corporate-final__actions {
        width: 100%;

        flex-direction: column;
    }

    .ayon-corporate-final__actions .ayon-btn {
        width: 100%;
    }

}

/* ==================================================
   SERVICE DETAIL PAGES
================================================== */

.ayon-inner-hero--project-design {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-projelendirme-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.ayon-service-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}


/* INTRO */

.ayon-service-intro {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-service-intro__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-service-intro h2,
.ayon-service-project-types h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-service-intro h2 span,
.ayon-service-project-types h2 span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-service-intro__grid > div:first-child > p,
.ayon-service-project-types__grid > div:first-child > p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-service-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-service-feature-list > div {
    min-height: 180px;
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-service-feature-list > div > span {
    display: block;
    margin-bottom: 22px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-service-feature-list strong {
    display: block;
    margin-bottom: 7px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-service-feature-list p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* SCOPE */

.ayon-service-scope {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-service-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ayon-service-scope-card {
    min-height: 235px;
    padding: 27px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-service-scope-card > span {
    display: block;
    margin-bottom: 27px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-service-scope-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 18px;
    line-height: 1.35;

    color: var(--ayon-navy);
}

.ayon-service-scope-card p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* PROCESS */

.ayon-service-process {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-service-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 17px;
}

.ayon-service-process-grid > div {
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-service-process-grid > div > span {
    display: block;
    margin-bottom: 25px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-service-process-grid h3 {
    margin: 0 0 8px;

    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 1.4;

    color: var(--ayon-navy);
}

.ayon-service-process-grid p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* PROJECT TYPES */

.ayon-service-project-types {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-service-project-types__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-service-project-types__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-service-project-types__list > div {
    min-height: 145px;
    padding: 24px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-service-project-types__list strong {
    display: block;
    margin-bottom: 7px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-service-project-types__list span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* WHY */

.ayon-service-why {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-service-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ayon-service-why-grid > div {
    min-height: 180px;
    padding: 25px;

    border-left: 3px solid var(--ayon-orange);

    background: var(--ayon-light);
}

.ayon-service-why-grid strong {
    display: block;
    margin-bottom: 9px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-service-why-grid p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* TABLET */

@media (max-width: 1024px) {

    .ayon-service-intro,
    .ayon-service-scope,
    .ayon-service-process,
    .ayon-service-project-types,
    .ayon-service-why {
        padding: 75px 0;
    }

    .ayon-service-intro__grid,
    .ayon-service-project-types__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .ayon-service-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

}


/* MOBILE */

@media (max-width: 767px) {

    .ayon-inner-hero--project-design {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-projelendirme-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-service-page-actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .ayon-service-page-actions .ayon-btn {
        width: 100%;
    }

    .ayon-service-intro,
    .ayon-service-scope,
    .ayon-service-process,
    .ayon-service-project-types,
    .ayon-service-why {
        padding: 55px 0;
    }

    .ayon-service-intro h2,
    .ayon-service-project-types h2 {
        font-size: 29px;
    }

    .ayon-service-feature-list,
    .ayon-service-scope-grid,
    .ayon-service-process-grid,
    .ayon-service-project-types__list,
    .ayon-service-why-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ayon-service-feature-list > div,
    .ayon-service-scope-card,
    .ayon-service-project-types__list > div,
    .ayon-service-why-grid > div {
        min-height: auto;
    }

}

/* ==================================================
   SERVICE - UNDERFLOOR HEATING APPLICATION HERO
================================================== */

.ayon-inner-hero--ufh-application {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-yerden-isitma-uygulamasi-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.ayon-corporate-region-section {
    padding: 0 0 95px;
    background: var(--ayon-white);
}

@media (max-width: 767px) {

    .ayon-inner-hero--ufh-application {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-yerden-isitma-uygulamasi-hero.webp');

        background-size: cover;
        background-position: center;
    }

    .ayon-corporate-region-section {
        padding-bottom: 55px;
    }

}

/* ==================================================
   SERVICE - ELECTRIC UNDERFLOOR HEATING HERO
================================================== */

.ayon-inner-hero--electric-ufh {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-elektrikli-yerden-isitma-uygulamasi-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--electric-ufh {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-elektrikli-yerden-isitma-uygulamasi-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SERVICE - AUTOMATION & CONTROL HERO
================================================== */

.ayon-inner-hero--automation-service {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-otomasyon-kontrol-uygulamalari-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--automation-service {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-otomasyon-kontrol-uygulamalari-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SERVICE - TECHNICAL SUPPORT HERO
================================================== */

.ayon-inner-hero--service-support {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-servis-teknik-destek-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--service-support {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-servis-teknik-destek-hero.webp');

        background-size: cover;
        background-position: center;
    }

}
/* ==================================================
   SERVICE - MATERIAL SUPPLY HERO
================================================== */

.ayon-inner-hero--material-supply {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-malzeme-tedarigi-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--material-supply {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-malzeme-tedarigi-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SOLUTION DETAIL PAGES
================================================== */

.ayon-solution-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}


/* INTRO */

.ayon-solution-intro {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-solution-intro__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-solution-intro h2,
.ayon-solution-system h2 {
    margin: 0;

    font-family: Manrope, sans-serif;
    font-size: 38px;
    line-height: 1.2;

    color: var(--ayon-navy);
}

.ayon-solution-intro h2 span,
.ayon-solution-system h2 span {
    display: block;
    color: var(--ayon-orange);
}

.ayon-solution-intro__grid > div:first-child > p,
.ayon-solution-system__grid > div:first-child > p {
    margin: 18px 0 0;

    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: var(--ayon-muted);
}

.ayon-solution-feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-solution-feature-list > div {
    min-height: 180px;
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-solution-feature-list > div > span {
    display: block;
    margin-bottom: 22px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-solution-feature-list strong {
    display: block;
    margin-bottom: 7px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-solution-feature-list p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* SCOPE */

.ayon-solution-scope {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-solution-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ayon-solution-scope-card {
    min-height: 235px;
    padding: 27px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-solution-scope-card > span {
    display: block;
    margin-bottom: 27px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-solution-scope-card h3 {
    margin: 0 0 10px;

    font-family: Manrope, sans-serif;
    font-size: 18px;
    line-height: 1.35;

    color: var(--ayon-navy);
}

.ayon-solution-scope-card p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* PROCESS */

.ayon-solution-process {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-solution-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 17px;
}

.ayon-solution-process-grid > div {
    padding: 25px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-light);
}

.ayon-solution-process-grid > div > span {
    display: block;
    margin-bottom: 25px;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-solution-process-grid h3 {
    margin: 0 0 8px;

    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 1.4;

    color: var(--ayon-navy);
}

.ayon-solution-process-grid p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* SYSTEM */

.ayon-solution-system {
    padding: 95px 0;
    background: var(--ayon-light);
}

.ayon-solution-system__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.ayon-solution-system__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ayon-solution-system__list > div {
    min-height: 150px;
    padding: 24px;

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

    background: var(--ayon-white);
}

.ayon-solution-system__list strong {
    display: block;
    margin-bottom: 7px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-solution-system__list span {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}


/* BENEFITS */

.ayon-solution-benefits {
    padding: 95px 0;
    background: var(--ayon-white);
}

.ayon-solution-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ayon-solution-benefits-grid > div {
    min-height: 180px;
    padding: 25px;

    border-left: 3px solid var(--ayon-orange);

    background: var(--ayon-light);
}

.ayon-solution-benefits-grid strong {
    display: block;
    margin-bottom: 9px;

    font-family: Manrope, sans-serif;
    font-size: 16px;

    color: var(--ayon-navy);
}

.ayon-solution-benefits-grid p {
    margin: 0;

    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: var(--ayon-muted);
}

.ayon-solution-region {
    padding: 0 0 95px;
    background: var(--ayon-white);
}


/* TABLET */

@media (max-width: 1024px) {

    .ayon-solution-intro,
    .ayon-solution-scope,
    .ayon-solution-process,
    .ayon-solution-system,
    .ayon-solution-benefits {
        padding: 75px 0;
    }

    .ayon-solution-intro__grid,
    .ayon-solution-system__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

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

    .ayon-solution-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

}


/* MOBILE */

@media (max-width: 767px) {

    .ayon-solution-page-actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .ayon-solution-page-actions .ayon-btn {
        width: 100%;
    }

    .ayon-solution-intro,
    .ayon-solution-scope,
    .ayon-solution-process,
    .ayon-solution-system,
    .ayon-solution-benefits {
        padding: 55px 0;
    }

    .ayon-solution-intro h2,
    .ayon-solution-system h2 {
        font-size: 29px;
    }

    .ayon-solution-feature-list,
    .ayon-solution-scope-grid,
    .ayon-solution-process-grid,
    .ayon-solution-system__list,
    .ayon-solution-benefits-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ayon-solution-feature-list > div,
    .ayon-solution-scope-card,
    .ayon-solution-system__list > div,
    .ayon-solution-benefits-grid > div {
        min-height: auto;
    }

    .ayon-solution-region {
        padding-bottom: 55px;
    }

}

/* ==================================================
   SOLUTION - HOME / APARTMENT UNDERFLOOR HEATING HERO
================================================== */

.ayon-inner-hero--home-ufh {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-konut-yerden-isitma-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--home-ufh {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-konut-yerden-isitma-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SOLUTION - RENOVATION UNDERFLOOR HEATING HERO
================================================== */

.ayon-inner-hero--renovation-ufh {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-tadilatta-yerden-isitma-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--renovation-ufh {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-tadilatta-yerden-isitma-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SOLUTION - VILLA BOILER & HOT WATER HERO
================================================== */

.ayon-inner-hero--villa-boiler {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.91) 58%,
            rgba(255,255,255,.42) 100%
        ),
        url('/wp-content/uploads/2026/09/ayon-villa-kazan-boyler-hero.webp');

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {

    .ayon-inner-hero--villa-boiler {
        background:
            linear-gradient(
                rgba(255,255,255,.88),
                rgba(255,255,255,.96)
            ),
            url('/wp-content/uploads/2026/09/ayon-villa-kazan-boyler-hero.webp');

        background-size: cover;
        background-position: center;
    }

}

/* ==================================================
   SINGLE PRODUCT - TRUST / QUOTE INFO
================================================== */

.ayon-product-trust {
    margin-top: 22px;

    font-family: Inter, Arial, sans-serif;
}


/* MAIN BOX */

.ayon-product-trust__main {
    overflow: hidden;

    background: var(--ayon-white);

    border: 1px solid var(--ayon-border);
    border-radius: 10px;
}


/* ROW */

.ayon-product-trust__row {
    display: grid;
    grid-template-columns: 1.45fr .85fr;
    align-items: center;

    min-height: 82px;
    padding: 14px 18px;

    border-bottom: 1px solid var(--ayon-border);
}

.ayon-product-trust__row:last-child {
    border-bottom: 0;
}


/* LEFT */

.ayon-product-trust__left {
    display: flex;
    align-items: center;
    gap: 15px;
}


/* ICON */

.ayon-product-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 10px;

    color: var(--ayon-orange);
    background: rgba(212, 90, 18, .08);
}

.ayon-product-trust__icon svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
}


/* TITLES */

.ayon-product-trust__left h3 {
    margin: 0 0 5px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-product-trust__left p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.55;

    color: var(--ayon-muted);
}


/* RIGHT BENEFIT */

.ayon-product-trust__benefit {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 48px;
    padding-left: 18px;

    border-left: 1px solid var(--ayon-border);
}

.ayon-product-trust__check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    border-radius: 50%;

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

    color: var(--ayon-orange);
    background: rgba(212, 90, 18, .08);
}

.ayon-product-trust__benefit strong {
    display: block;

    margin-bottom: 2px;

    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--ayon-navy);
}

.ayon-product-trust__benefit span:not(.ayon-product-trust__check) {
    display: block;

    font-size: 10.5px;
    line-height: 1.4;

    color: var(--ayon-muted);
}


/* ==================================================
   BOTTOM TRUST CARDS
================================================== */

.ayon-product-trust__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin-top: 14px;

    overflow: hidden;

    background: var(--ayon-white);

    border: 1px solid var(--ayon-border);
    border-radius: 10px;
}

.ayon-product-trust__mini {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 82px;
    padding: 16px 18px;
}

.ayon-product-trust__mini + .ayon-product-trust__mini {
    border-left: 1px solid var(--ayon-border);
}


/* MINI ICON */

.ayon-product-trust__mini-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 10px;

    color: var(--ayon-success, #2E7D32);
    background: rgba(46, 125, 50, .08);
}

.ayon-product-trust__mini-icon svg {
    width: 24px;
    height: 24px;

    fill: currentColor;
}


/* MINI TEXT */

.ayon-product-trust__mini h4 {
    margin: 0 0 5px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-product-trust__mini p {
    margin: 0;

    font-size: 11px;
    line-height: 1.55;

    color: var(--ayon-muted);
}


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

@media (max-width: 1024px) {

    .ayon-product-trust__row {
        grid-template-columns: 1.2fr .8fr;
    }

}


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

@media (max-width: 767px) {

    .ayon-product-trust {
        margin-top: 18px;
    }

    .ayon-product-trust__row {
        grid-template-columns: 1fr;

        padding: 17px;
    }

    .ayon-product-trust__benefit {
        margin-top: 14px;
        padding-top: 13px;
        padding-left: 0;

        border-top: 1px solid var(--ayon-border);
        border-left: 0;
    }

    .ayon-product-trust__icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .ayon-product-trust__icon svg {
        width: 23px;
        height: 23px;
    }


    /* Bottom cards */

    .ayon-product-trust__footer {
        grid-template-columns: 1fr;
    }

    .ayon-product-trust__mini {
        min-height: auto;
    }

    .ayon-product-trust__mini + .ayon-product-trust__mini {
        border-top: 1px solid var(--ayon-border);
        border-left: 0;
    }

}

/* ==================================================
   SINGLE PRODUCT - QUOTE GUIDE
================================================== */

.ayon-quote-guide {
    margin-top: 14px;
    padding: 15px 16px;

    background: var(--ayon-light);

    border: 1px solid var(--ayon-border);
    border-radius: 8px;
}

.ayon-quote-guide__title {
    margin-bottom: 12px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    color: var(--ayon-navy);
}


/* STEPS */

.ayon-quote-guide__steps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ayon-quote-guide__step {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;
}

.ayon-quote-guide__step span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    border-radius: 50%;

    font-family: Inter, Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;

    color: var(--ayon-orange);
    background: rgba(212, 90, 18, .10);
}

.ayon-quote-guide__step strong {
    font-family: Inter, Arial, sans-serif;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 600;

    color: var(--ayon-navy);
}

.ayon-quote-guide__arrow {
    flex: 0 0 auto;

    font-size: 12px;

    color: var(--ayon-muted);
}


/* NOTE */

.ayon-quote-guide__note {
    margin: 11px 0 0;
    padding-top: 10px;

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

    font-family: Inter, Arial, sans-serif;
    font-size: 10.5px;
    line-height: 1.5;

    color: var(--ayon-muted);
}


/* MOBILE */

@media (max-width: 767px) {

    .ayon-quote-guide__steps {
        flex-direction: column;
        align-items: flex-start;

        gap: 9px;
    }

    .ayon-quote-guide__arrow {
        display: none;
    }

}

/* ==================================================
   QUOTE PAGE
================================================== */


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

.ayon-quote-hero {
    padding: 70px 0 55px;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F7F8FA 100%
        );

    border-bottom: 1px solid var(--ayon-border);
}

.ayon-quote-hero__content {
    max-width: 780px;
}

.ayon-quote-hero h1 {
    margin: 8px 0 18px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-quote-hero h1 span {
    color: var(--ayon-orange);
}

.ayon-quote-hero p {
    max-width: 690px;

    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;

    color: var(--ayon-muted);
}

.ayon-quote-hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

    margin-top: 26px;
}

.ayon-quote-hero__features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--ayon-navy);
}

.ayon-quote-hero__features strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    font-size: 11px;

    color: var(--ayon-white);
    background: var(--ayon-orange);
}


/* ==================================================
   YITH QUOTE AREA
================================================== */

.woocommerce .yith-ywraq-mail-form-wrapper,
.yith-ywraq-mail-form-wrapper,
.yith_ywraq_add_item_response_message,
.yith-ywraq-before-table {
    font-family: Inter, Arial, sans-serif;
}

/* Boş liste ana alanı */

.yith-ywraq-mail-form-wrapper,
.ywraq-form-table-wrapper {
    margin-top: 30px;
    margin-bottom: 40px;
}


/* ==================================================
   PROCESS
================================================== */

.ayon-quote-process {
    padding: 85px 0;

    background: var(--ayon-light);
}

.ayon-quote-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
    margin-top: 44px;
}

.ayon-quote-process__card {
    min-height: 245px;
    padding: 28px;

    background: var(--ayon-white);

    border: 1px solid var(--ayon-border);
    border-radius: 10px;

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

.ayon-quote-process__card:hover {
    transform: translateY(-4px);

    border-color: rgba(212, 90, 18, .35);

    box-shadow:
        0 16px 36px rgba(16, 32, 48, .07);
}

.ayon-quote-process__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;
}

.ayon-quote-process__number {
    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;

    color: var(--ayon-orange);
}

.ayon-quote-process__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 10px;

    color: var(--ayon-orange);
    background: rgba(212, 90, 18, .08);
}

.ayon-quote-process__icon svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
}

.ayon-quote-process__card h3 {
    margin: 0 0 11px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-quote-process__card p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--ayon-muted);
}


/* ==================================================
   SUPPORT CTA
================================================== */

.ayon-quote-support {
    padding: 85px 0;

    background: var(--ayon-white);
}

.ayon-quote-support__inner {
    display: grid;
    grid-template-columns: 220px 1fr;

    align-items: center;
    gap: 45px;

    padding: 38px 46px;

    border: 1px solid var(--ayon-border);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #F7F8FA 0%,
            #FFFFFF 100%
        );
}

.ayon-quote-support__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayon-quote-support__avatar img {
    display: block;

    width: 180px;
    height: 180px;

    object-fit: contain;
}

.ayon-quote-support__content h2 {
    margin: 6px 0 14px;

    font-family: Manrope, Arial, sans-serif;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;

    color: var(--ayon-navy);
}

.ayon-quote-support__content h2 span {
    color: var(--ayon-orange);
}

.ayon-quote-support__content p {
    max-width: 700px;

    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.75;

    color: var(--ayon-muted);
}

.ayon-quote-support__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 24px;
}


/* ==================================================
   QUOTE SCOPE
================================================== */

.ayon-quote-scope {
    padding: 85px 0 95px;

    background: var(--ayon-light);
}

.ayon-quote-scope__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
    margin-top: 42px;
}

.ayon-quote-scope__item {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 74px;
    padding: 18px;

    background: var(--ayon-white);

    border: 1px solid var(--ayon-border);
    border-radius: 8px;

    text-decoration: none !important;

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

.ayon-quote-scope__item:hover {
    transform: translateY(-2px);

    border-color: var(--ayon-orange);

    box-shadow:
        0 10px 24px rgba(16, 32, 48, .06);
}

.ayon-quote-scope__item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    font-family: Manrope, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    color: var(--ayon-orange);
    background: rgba(212, 90, 18, .08);
}

.ayon-quote-scope__item strong {
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--ayon-navy);
}


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

@media (max-width: 1024px) {

    .ayon-quote-hero {
        padding: 60px 0 50px;
    }

    .ayon-quote-hero h1 {
        font-size: 38px;
    }

    .ayon-quote-process,
    .ayon-quote-support,
    .ayon-quote-scope {
        padding: 70px 0;
    }

    .ayon-quote-support__inner {
        grid-template-columns: 170px 1fr;

        gap: 32px;
        padding: 32px;
    }

    .ayon-quote-support__avatar img {
        width: 150px;
        height: 150px;
    }

    .ayon-quote-scope__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .ayon-quote-hero {
        padding: 45px 0 40px;
    }

    .ayon-quote-hero h1 {
        font-size: 31px;
    }

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

    .ayon-quote-hero__features {
        flex-direction: column;

        gap: 10px;
        margin-top: 20px;
    }


    /* PROCESS */

    .ayon-quote-process,
    .ayon-quote-support,
    .ayon-quote-scope {
        padding: 55px 0;
    }

    .ayon-quote-process__grid {
        grid-template-columns: 1fr;

        gap: 14px;
        margin-top: 30px;
    }

    .ayon-quote-process__card {
        min-height: auto;
        padding: 24px;
    }


    /* SUPPORT */

    .ayon-quote-support__inner {
        grid-template-columns: 1fr;

        gap: 20px;
        padding: 26px 22px;

        text-align: center;
    }

    .ayon-quote-support__avatar img {
        width: 130px;
        height: 130px;
    }

    .ayon-quote-support__content h2 {
        font-size: 27px;
    }

    .ayon-quote-support__actions {
        flex-direction: column;
    }

    .ayon-quote-support__actions .ayon-btn {
        width: 100%;
    }


    /* SCOPE */

    .ayon-quote-scope__grid {
        grid-template-columns: 1fr;

        gap: 10px;
        margin-top: 30px;
    }

}