.hosting-bg-child {
    width: 40px;
    position: relative;
    border-radius: 6px;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}

.hosting-bg-text {
    width: 100%;
    position: relative;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    font-family: 'Albert Sans';
    color: #000;
    text-align: left;
    display: inline-block;
}

.hosting-bg-wrapper {
    width: 188px;
    /* allow shrinking on small screens */
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.hosting-bg {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    gap: 12px;
}

.hosting-bg-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.hosting-bg-frame-group {
    position: absolute;
    top: 0px;
    left: 0px;
    /* use responsive width instead of fixed value to prevent overflow */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.hosting-bg-frame-parent {
    width: 100%;
    position: relative;
    height: 204px;
    text-align: left;
    font-size: 14px;
    color: #000;
    font-family: 'Albert Sans';
}

/* Hosting Fiyatları */
.zmlerimiz {
    width: 638px;
    position: relative;
    letter-spacing: 1.28px;
    line-height: 24px;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-block;
}

.htiyacnza-uygun-hostingler {
    align-self: stretch;
    position: relative;
    font-size: 54px;
    letter-spacing: -1.62px;
    font-weight: 600;
    color: #212121;
    margin: 0px;
}

.htiyacnzn-ne-olduunu {
    margin: 0;
}

.htiyacnzn-ne-olduunu-container {
    align-self: stretch;
    position: relative;
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 32px;
    font-weight: 500;
    color: #4b5563;
}

.heading {
    width: 858px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.hosting-paketleri-caption-text {
    flex: 1;
    position: relative;
    letter-spacing: 2px;
    line-height: 16px;
    text-transform: uppercase;
}

.hosting-paketleri-caption {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.hosting-paketleri-mini-hosting {
    position: relative;
    letter-spacing: -0.5px;
    line-height: 32px;
}

.hosting-paketleri-badge-text {
    position: relative;
    line-height: 16px;
}

.hosting-paketleri-badge-text {
    background-color: #fff8f2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #ff4b0e;
}

.hosting-paketleri-heading-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 24px;
    color: #171717;
}

.hosting-paketleri-heading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.hosting-paketleri-div {
    position: relative;
    letter-spacing: -1.5px;
    line-height: 56px;
    font-weight: 500;
}

.hosting-paketleri-div1 {
    align-self: stretch;
    position: relative;
    text-decoration: line-through;
    line-height: 24px;
}

.hosting-paketleri-ay {
    align-self: stretch;
    position: relative;
    line-height: 24px;
    color: #404040;
}

.hosting-paketleri-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0px;
    font-size: 16px;
    color: #e8294d;
}

.hosting-paketleri-pricing1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 40px;
    color: #171717;
}

.hosting-paketleri-content {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hosting-paketleri-pricing {
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 32px;
}

/* Selectable pricing cards */
.hosting-paketleri-pricing[role="button"] {
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.06s ease;
}

.hosting-paketleri-pricing[role="button"]:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border-color: #ddd;
}

.hosting-paketleri-pricing.selected {
    background-color: #F5F4F2;
}

.hosting-paketleri-badge-bold-text {
    border-radius: 6px;
    background-color: #ff4b0e;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #fff;
}

.hosting-paketleri-pricing-parent {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

.professional-parent {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.zellik-bir {
    position: relative;
    line-height: 20px;
}

.information-fill-icon {
    width: 24px;
    position: relative;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

.label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.checkbox-circle-fill-icon {
    width: 24px;
    position: relative;
    height: 24px;
}

.content7 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
}

.label5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: #262626;
}

.content6 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #6b6b6b;
}

.hosting-paketleri-lorem-ipsum {
    align-self: stretch;
    position: relative;
    line-height: 24px;
}

.hosting-paketleri-lorem-ipsum-dolor {
    align-self: stretch;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #526077;
}

.text6 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.content13 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 0px;
    gap: 12px;
    font-size: 16px;
    color: #23272e;
}

.hosting-paketleri-button {
    align-self: stretch;
    box-shadow: 0px 1px 2px rgba(143, 36, 0, 0.56), 0px 0px 0px 1px #ff4b0e;
    border-radius: 8px;
    background-color: #ff4b0e;
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-sizing: border-box;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    gap: 8px;
    font-size: 18px;
    color: #fff;
    text-decoration-line: none;
}

.table {
    align-self: stretch;
    width: 592px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 32px;
    box-sizing: border-box;
    gap: 20px;
    font-size: 24px;
    color: #171717;
}

.hosting-paketleri-frame-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    font-size: 12px;
    color: #737373;
}

.title-child {
    align-self: stretch;
    position: relative;
    border-top: 1px solid #e9e9e9;
    box-sizing: border-box;
    height: 1px;
}

.div12 {
    flex: 1;
    position: relative;
    line-height: 24px;
    font-weight: 600;
    opacity: 0;
}

.mini {
    flex: 1;
    position: relative;
    line-height: 24px;
    font-weight: 600;
}

.title2 {
    width: 778px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* Icon-only feature rows: use a 6-col grid and left-align each cell */
.feature>.title2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: start;
    align-items: center;
    gap: 24px;
}

.title1 {
    align-self: stretch;
    border-radius: 8px;
    background-color: #f6f7f9;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
    gap: 24px;
}

.web-sitesi-barndrma {
    position: relative;
    line-height: 24px;
    font-weight: 500;
}

.question-line-icon {
    width: 16px;
    position: relative;
    height: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.feature1 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.feature3 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.ayarlanabilir {
    flex: 1;
    position: relative;
    line-height: 24px;
    font-weight: 500;
}

.feature2 {
    width: 778px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: Inter;
}

.feature {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.feature-icon {
    flex: 1;
    max-width: 100%;
    overflow: hidden;
    height: 24px;
}

.data {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
    gap: 16px;
    font-family: 'Albert Sans';
}

.content15 {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.content14 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    font-size: 16px;
    color: #23272e;
    font-family: Inter;
}

.hosting-paketleri-title {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 1;
}

.hosting-paketleri-section {
    width: 100%;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 150px;
    box-sizing: border-box;
    gap: 10px;
    text-align: left;
    font-size: 14px;
    color: #6b6b6b;
    font-family: 'Albert Sans';
}

/* ===== Responsive: Web Hosting Pricing/Table ===== */
@media (max-width: 1200px) {
    .hosting-paketleri-section {
        padding: 72px 60px;
    }
}

@media (max-width: 992px) {
    .hosting-paketleri-frame-parent {
        flex-direction: column;
        gap: 24px;
    }

    .hosting-paketleri-pricing-parent {
        width: 100%;
    }

    .table {
        width: 100%;
        max-width: 100%;
        padding: 24px;
    }

    .title2,
    .feature2 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hosting-paketleri-section {
        padding: 48px 20px;
    }

    .hosting-paketleri-pricing {
        padding: 12px 16px;
    }

    .hosting-paketleri-pricing1 {
        font-size: 32px;
    }

    .title1 {
        padding: 12px 16px;
        gap: 16px;
    }

    .data {
        padding: 12px 16px;
        gap: 12px;
    }

    .table {
        padding: 20px;
    }

    /* Icon rows: 3-column on tablet */
    .feature>.title2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Match index mobile heading styles */
    .heading {
        width: 100%;
    }

    .htiyacnza-uygun-hostingler {
        font-size: 36px;
        line-height: 44px;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .hosting-paketleri-pricing1 {
        font-size: 24px;
    }

    .hosting-paketleri-heading-title {
        font-size: 20px;
    }

    .hosting-paketleri-mini-hosting {
        line-height: 28px;
    }

    .table {
        padding: 16px;
    }

    /* Icon rows: 2-column on mobile */
    .feature>.title2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Match index small-mobile heading styles */
    .heading {
        width: 100%;
    }

    .zmlerimiz {
        width: auto;
        font-size: 12px;
        line-height: 18px;
    }

    .htiyacnza-uygun-hostingler {
        font-size: 28px;
        line-height: 36px;
    }

    .htiyacnzn-ne-olduunu-container {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 320px) {
    .htiyacnza-uygun-hostingler {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ===== Mobile horizontal scroll for comparison table ===== */
@media (max-width: 992px) {

    /* Enable horizontal scrolling for the comparison block */
    .content15 {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep six columns and force a wider layout to allow scrolling */
    .title1,
    .data {
        min-width: 1205px;
    }

    .title2,
    .feature2 {
        width: auto;
        min-width: 980px;
    }

    .feature>.title2 {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;
    }
}

/* ===== Responsive: Hero 4'lü özellik bloğu ===== */
@media (max-width: 992px) {

    /* keep the group within its parent */
    .hosting-bg-frame-group {
        width: 100%;
    }
}

@media (max-width: 768px) {

    /* stack items to avoid horizontal overflow */
    .hosting-bg-parent {
        /* flatten rows into a single vertical flow so spacing and start edge are uniform */
        display: contents;
    }

    .hosting-bg-wrapper {
        width: auto;
    }

    /* let the block take natural height and flow */
    .hosting-bg-frame-group {
        position: static;
        gap: 8px;
        align-items: flex-start;
    }

    .hosting-bg-frame-parent {
        height: auto;
    }

    .frame-container {
        margin-bottom: 0px;
    }

    /* make each row fill the width and align texts from the same left edge */
    .hosting-bg {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ===== Responsive: Logos and Features sections under Hosting ===== */
@media (max-width: 992px) {
    .hosting-logolar .hosting-logolar-title-parent {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .hosting-logolar .hosting-logolar-title,
    .hosting-logolar .hosting-logolar-logo {
        width: 100%;
    }

    .hosting-logolar-logo {
        width: 100%;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .hosting-logolar-logo1 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hosting-logolar {
        padding: 32px 16px;
    }

    .ozellikler {
        padding: 48px 20px;
    }

    .ozellikler-frame-parent {
        flex-direction: column;
        gap: 16px;
    }

    .hosting-logolar-logo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    .hosting-logolar-logo1 {
        width: 100%;
    }

    .hosting-logolar-logo1 img {
        width: auto;
        max-width: 80%;
        height: auto;
    }

    /* Reduce heading sizes and align to start to avoid overflow */
    .hosting-logolar-heading {
        align-items: flex-start;
    }

    .hosting-logolar-heading1 {
        align-items: flex-start;
    }

    .hosting-logolar-heading1-title-text {
        font-size: 32px;
        line-height: 40px;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 28px;
        line-height: 36px;
    }

    .hosting-logolar-heading1-title-text-1-container {
        font-size: 16px;
        line-height: 24px;
    }

    .hosting-logolar-heading1-title {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hosting-logolar {
        padding: 24px 12px;
    }

    .hosting-logolar-heading1-title-text {
        font-size: 28px;
        line-height: 36px;
    }
}

/* --- Mobile overrides for Ozellikler placed AFTER base rules to win cascade --- */
@media (max-width: 768px) {
    /* Section spacing */
    .ozellikler {
        padding: 48px 20px !important;
        overflow: visible;
    }

    /* Title block structure */
    .ozellikler-title-parent {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .ozellikler-title-parent > .ozellikler-title {
        width: 100% !important;
        align-items: center;
    }

    .ozellikler-heading,
    .ozellikler-heading1 {
        align-items: center;
    }

    .ozellikler-heading1 .ozellikler-title {
        display: block;
        width: auto;
        text-align: center;
    }

    .ozellikler-title-text {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ozellikler-title-description {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    /* Horizontal card row */
    .ozellikler-logo {
        display: flex;
        flex-direction: row !important;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 8px 2px;
    }

    .ozellikler-frame-parent {
        display: contents;
    }

    .ozellikler-frame-wrapper,
    .ozellikler-frame-container,
    .ozellikler-frame-div,
    .ozellikler-frame-wrapper1 {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
    }

    .ozellikler-frame-wrapper-item-text {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ozellikler-title-text {
        font-size: 28px !important;
        line-height: 36px;
    }
}

/* --- Tablet (<=992px) safe defaults to avoid overflow before mobile rules --- */
@media (max-width: 992px) {
    .ozellikler {
        padding: 56px 32px;
    }

    .ozellikler-title-parent {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .ozellikler-title-parent > .ozellikler-title {
        width: 100%;
        align-items: center;
    }

    .ozellikler-heading,
    .ozellikler-heading1 {
        align-items: center;
    }

    .ozellikler-heading1 .ozellikler-title {
        display: block;
        width: auto;
        text-align: center;
    }

    .ozellikler-title-text {
        font-size: 40px;
        line-height: 48px;
        text-align: center;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ozellikler-title-description {
        font-size: 18px;
        line-height: 28px;
        text-align: center;
    }
}

/* --- FINAL mobile layout: stack all feature cards vertically (no horizontal scroll) --- */
@media (max-width: 768px) {
    .ozellikler-logo {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory !important;
        padding: 8px 2px !important;
    }

    .ozellikler-frame-parent {
        display: contents !important;
    }

    .ozellikler-frame-wrapper,
    .ozellikler-frame-container,
    .ozellikler-frame-div,
    .ozellikler-frame-wrapper1 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        scroll-snap-align: center !important;
    }
}

/* ===== Responsive: Ozellikler section titles (prevent overflow, center) ===== */
@media (max-width: 768px) {
    .ozellikler-title-parent {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    /* Outer title wrapper width and alignment */
    .ozellikler-title-parent > .ozellikler-title {
        width: 100%;
        align-items: center;
    }

    /* Inner small title text uses same class name; normalize for mobile */
    .ozellikler-heading1 .ozellikler-title {
        display: block;
        width: auto;
        text-align: center;
    }

    .ozellikler-title-text {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ozellikler-title-description {
        font-size: 16px !important;
        line-height: 24px !important;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ozellikler-title-text {
        font-size: 28px;
        line-height: 36px;
    }
}

/* ===== Responsive: Ozellikler section horizontal cards on mobile ===== */
@media (max-width: 768px) {

    /* Ensure section does not clip content on small screens */
    .ozellikler {
        overflow: visible;
    }

    /* Make the features row horizontally scrollable */
    .ozellikler-logo {
        display: flex;
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        padding-left: 2px;
        padding-right: 2px;
    }

    /* Flatten inner row wrappers so each card becomes a direct flex item */
    .ozellikler-frame-parent {
        display: contents;
    }

    /* Each feature card takes most of the viewport width and snaps into view */
    .ozellikler-frame-wrapper,
    .ozellikler-frame-container,
    .ozellikler-frame-div,
    .ozellikler-frame-wrapper1 {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
    }

    /* Center texts inside cards for better look on mobile */
    .ozellikler-frame-wrapper-item-text {
        text-align: center;
    }
}

/* Logolar */
.hosting-logolar-heading1-title {
    align-self: stretch;
    position: relative;
    letter-spacing: 1.28px;
    line-height: 24px;
    text-transform: uppercase;
    font-weight: 500;
}

.hosting-logolar-heading1-title-text-1 {
    margin: 0;
}

.hosting-logolar-heading1-title-text-2 {
    margin: 0;
    font-size: 54px;
    letter-spacing: -1.62px;
    font-weight: 600;
}

.hosting-logolar-heading1-title-text {
    align-self: stretch;
    position: relative;
    font-size: 54px;
    letter-spacing: -1.62px;
    font-weight: 600;
    color: #212121;
}

.hosting-logolar-heading1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.hosting-logolar-heading1-title-text-1-container {
    align-self: stretch;
    position: relative;
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 32px;
    font-weight: 500;
    color: #4b5563;
}

.hosting-logolar-heading {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hosting-logolar-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.image-43-icon {
    width: 56px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.hosting-logolar-logo1 {
    width: 282px;
    border-radius: 12px;
    background-color: #f6f6f6;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.image-44-icon {
    width: 62px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.image-45-icon {
    width: 60px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.image-46-icon {
    width: 52px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.image-48-icon {
    width: 112px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.image-49-icon {
    width: 66px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.image-50-icon {
    width: 50px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.hosting-logolar-logo {
    width: 588px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    gap: 24px;
}

.hosting-logolar-title-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.hosting-logolar {
    width: 100%;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 150px;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    color: #6b6b6b;
    font-family: 'Albert Sans';
}

/* Özellikler */

.ozellikler-title {
    align-self: stretch;
    position: relative;
    letter-spacing: 1.28px;
    line-height: 24px;
    font-weight: 500;
}

.ozellikler-title-text {
    align-self: stretch;
    position: relative;
    font-size: 54px;
    letter-spacing: -1.62px;
    font-weight: 600;
    color: #212121;
}

.ozellikler-heading1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.ozellikler-title-description {
    align-self: stretch;
    position: relative;
    font-size: 20px;
    letter-spacing: -0.32px;
    line-height: 32px;
    font-weight: 500;
    color: #4b5563;
}

.ozellikler-heading {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ozellikler-title {
    width: 530px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ozellikler-frame-wrapper-item-image {
    width: 50px;
    position: relative;
    max-height: 100%;
    object-fit: cover;
}

.ozellikler-frame-wrapper-item-text-title {
    margin: 0;
}

.ozellikler-frame-wrapper-item-text {
    position: relative;
    letter-spacing: -0.32px;
    line-height: 32px;
    font-weight: 500;
}

.ozellikler-frame-wrapper-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.ozellikler-frame-wrapper {
    flex: 1;
    border-radius: 8px;
    border-right: 1px dashed #b5bbc4;
    border-bottom: 1px dashed #b5bbc4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
}

.ozellikler-frame-container {
    flex: 1;
    border-radius: 8px;
    border-bottom: 1px dashed #b5bbc4;
    border-left: 1px dashed #b5bbc4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
}

.ozellikler-frame-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.ozellikler-frame-div {
    flex: 1;
    border-radius: 8px;
    border-top: 1px dashed #b5bbc4;
    border-right: 1px dashed #b5bbc4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
}

.ozellikler-frame-wrapper1 {
    flex: 1;
    border-radius: 8px;
    border-top: 1px dashed #b5bbc4;
    border-left: 1px dashed #b5bbc4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
}

.ozellikler-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 20px;
    color: #000;
}

.ozellikler-title-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    z-index: 0;
}

.bg-line-icon {
    width: 700.9px;
    position: absolute;
    margin: 0 !important;
    top: 246px;
    right: -0.41px;
    height: 695.3px;
    object-fit: contain;
    opacity: 0.3;
    z-index: 1;
}

.ozellikler {
    width: 100%;
    position: relative;
    background-color: #f5f4f2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 150px;
    box-sizing: border-box;
    gap: 10px;
    text-align: left;
    font-size: 14px;
    color: #6b6b6b;
    font-family: 'Albert Sans';
}

/* --- Mobile overrides for logos section placed AFTER base rules to win cascade --- */
@media (max-width: 992px) {
    .hosting-logolar-title-parent {
        flex-direction: column !important;
        align-items: stretch;
        gap: 16px;
    }

    .hosting-logolar-title {
        width: 100%;
    }

    .hosting-logolar-logo {
        width: 100% !important;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .hosting-logolar-logo1 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .hosting-logolar {
        padding: 32px 16px;
    }

    .hosting-logolar-logo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Center headings and texts on mobile */
    .hosting-logolar-heading,
    .hosting-logolar-heading1 {
        align-items: center;
    }

    .hosting-logolar-heading1-title-text,
    .hosting-logolar-heading1-title-text-1-container {
        text-align: center;
    }

    .hosting-logolar-heading1-title-text {
        font-size: 32px;
        line-height: 40px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .hosting-logolar-heading1-title-text-2 {
        font-size: 32px;
        line-height: 40px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .hosting-logolar-heading1-title-text-1-container {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 480px) {
    .hosting-logolar {
        padding: 24px 12px;
    }

    .hosting-logolar-heading1-title-text {
        font-size: 28px;
        line-height: 36px;
    }

    .hosting-logolar-heading1-title-text-2 {
        font-size: 28px;
        line-height: 36px;
    }
}

/* === Mobile: Ozellikler stacked layout (final override) === */
@media (max-width: 768px) {

    /* Başlık ve açıklamayı tamamen dikey hizala */
    .ozellikler-title-parent {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    /* Özellik kartlarını 2 sütun grid yap, yatay kaydırmayı kapat */
    .ozellikler-logo {
        display: grid !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* İçteki satır sarmalayıcıları düzleştir; her kart grid öğesi olsun */
    .ozellikler-frame-parent {
        display: contents !important;
    }

    /* Her kartı hücre içinde tam genişlikte göster; snap davranışlarını kaldır */
    .ozellikler-frame-wrapper,
    .ozellikler-frame-container,
    .ozellikler-frame-div,
    .ozellikler-frame-wrapper1 {
        flex: initial !important;
        max-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: unset !important;
        border: none !important;
        padding: 25px 0px;
    }

    .ozellikler-title-text,
    .ozellikler-title-description,
    .ozellikler-frame-wrapper-item-text {
        text-align: center !important;
    }
}

.three-card-set-span {
    color: #ff4b0e;
}

.three-card-set-content-title {
    position: relative;
    letter-spacing: -0.24px;
    line-height: 24px;
}

.three-card-set-text {
    align-self: stretch;
    position: relative;
    font-size: 16px;
    letter-spacing: -0.18px;
    line-height: 28px;
    color: #4d4c4b;
}

.three-card-set-icon {
    width: 132px;
    position: relative;
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.three-card-set-content {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.three-card-set-item {
    align-self: stretch;
    flex: 1;
    border-radius: 24px;
    background-color: #f0edea;
    border: 0.5px solid #d7d4d2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 32px;
    gap: 32px;
}

.three-card-set-div {
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.three-card-set-bg {
    align-self: stretch;
    position: relative;
    border-radius: 20px;
    max-width: 100%;
    overflow: hidden;
    height: 422px;
    flex-shrink: 0;
    object-fit: cover;
}

.three-card-set {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    text-align: left;
    font-size: 24px;
    color: #4e4e4e;
    font-family: 'Albert Sans';
}

/* Mobile: Kartları alt alta diz ve görseli en sonda göster */
@media (max-width: 768px) {
    .three-card-set {
        gap: 16px;
    }

    .three-card-set-div {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
    }

    .three-card-set-item {
        width: 100%;
        padding: 20px;
        gap: 16px;
    }

    .three-card-set-icon {
        width: 96px;
        height: 88px;
    }

    .three-card-set-bg {
        width: 100%;
        height: auto;
        object-fit: contain;
        overflow: visible;
        border-radius: 16px;
        display: block;
    }
}

.mail-card-set-icon {
    width: 48px;
    position: relative;
    border-radius: 96px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}

.mail-card-set-container-title {
    margin: 0;
}

.mail-card-set-container {
    align-self: stretch;
    position: relative;
    letter-spacing: -0.18px;
    line-height: 32px;
    font-weight: 600;
}

.mail-card-set-container-text {
    align-self: stretch;
    position: relative;
    font-size: 16px;
    letter-spacing: -0.18px;
    line-height: 32px;
    color: #4b5563;
}

.mail-card-set-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.mail-card-set-item1 {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 407px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.mail-card-set-bg-image {
    position: absolute;
    top: 200px;
    left: -73px;
    width: 616px;
    height: 291px;
    object-fit: cover;
}

.mail-card-set-item {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 407px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.mail-card-set-text1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}

.mail-card-set-item4 {
    flex: 1;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeef0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 10px;
}

.mail-card-set-item3 {
    align-self: stretch;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.mail-card-set-item6 {
    align-self: stretch;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eeeef0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    gap: 10px;
}

.mail-card-set-item2 {
    width: 638px;
    border-radius: 20px;
    background-color: #fcfcfc;
    border: 1px solid #eeeef0;
    box-sizing: border-box;
    height: 444px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    gap: 10px;
}

.mail-card-set {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
    font-size: 18px;
    color: #030712;
    font-family: 'Albert Sans';
}

.mail-card-set-content {
    flex: 1;
    width: 100%;
    position: relative;
    box-shadow: 0px 1px 2px -1px rgba(26, 25, 37, 0.04), 0px 1px 1px rgba(26, 25, 37, 0.06), 0px 0.5px 0.5px rgba(26, 25, 37, 0.06);
    border-radius: 20px;
    background-color: #f7f7f8;
    height: 444px;
    overflow: hidden;
    flex-shrink: 0;
    text-align: left;
    font-size: 18px;
    color: #030712;
    font-family: 'Albert Sans';
}

/* Very wide screens: cap hero card width and center the row to avoid large empty areas */
@media (min-width: 1540px) {
    .mail-card-set {
        justify-content: center;
    }

    .mail-card-set-content {
        flex: 0 1 880px; /* preferred width for laptop-like layout */
        max-width: 920px;
    }

    /* Anchor the illustration to the bottom-right so it scales nicely in the capped card */
    .mail-card-set-bg-image {
        left: auto;
        right: -24px;
        top: auto;
        bottom: 0;
        width: 560px;
        height: auto;
    }
}

/* ===== Mobile layout: stack heading and mail cards vertically ===== */
@media (max-width: 992px) {
    .mail-card-set {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .mail-card-set-content {
        height: auto;
        min-height: 0;
        padding: 16px;
        flex: initial;
        width: 100%;
        max-width: 100%;
    }

    /* Remove absolute positioning so texts flow naturally inside the card */
    .mail-card-set-item,
    .mail-card-set-item1 {
        position: static;
        width: 100%;
        justify-content: flex-start;
    }

    .mail-card-set-bg-image {
        position: static;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        margin-top: 12px;
        display: block;
    }

    .mail-card-set-item2 {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Inner two-up cards become a single column on mobile */
    .mail-card-set-item3 {
        flex-direction: column;
        gap: 10px;
    }

    .mail-card-set-item4,
    .mail-card-set-item6 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Make the bottom card look like the upper cards */
    .mail-card-set-item6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mail-card-set-item6 .mail-card-set-text {
        gap: 4px;
    }
}