/*
 * Domain Transfer Page - Responsive Design
 * Alan adı transfer sayfası için responsive iyileştirmeler
 */

/* Banner Section Responsive */
.banner-1 .custom-form-group {
    display: flex;
    gap: 0;
}

.banner-1 .custom-form-group input {
    flex: 1;
    border-radius: 8px 0 0 8px !important;
}

.banner-1 .custom-form-group .custom-form-btn {
    border-radius: 0 8px 8px 0 !important;
    white-space: nowrap;
}

/* Domain Extension Cards - Better Responsive */
.banner-1 .d-sm-flex {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

.banner-1 .d-sm-flex > div {
    flex: 1 1 auto;
    min-width: 100px;
    margin: 0 !important;
}

/* Transfer Form Responsive */
.domain-transfer-form .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 0;
}

/* Tablet Breakpoint */
@media (max-width: 991px) {
    /* Banner Content */
    .banner-1 .content-1 {
        font-size: 1.5rem !important;
    }

    .banner-1 .content-2 {
        font-size: 1rem !important;
    }

    /* Form Buttons */
    .banner-1 .col-xxl-3 {
        text-align: center;
    }

    .banner-1 .exchange-icon {
        display: none;
    }

    /* Domain Cards */
    .banner-1 .d-sm-flex > div {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }
}

/* Mobile Breakpoint */
@media (max-width: 767px) {
    /* Banner Spacing */
    .banner-1 {
        padding: 60px 0 !important;
    }

    .banner-1 .content-1 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .banner-1 .content-2 {
        font-size: 0.9375rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Price Display */
    .banner-1 .tx-18 {
        font-size: 1rem !important;
    }

    .banner-1 .h2 {
        font-size: 1.75rem !important;
    }

    /* Form Styling */
    .banner-1 .custom-form-group {
        flex-direction: column;
    }

    .banner-1 .custom-form-group input {
        border-radius: 8px !important;
        margin-bottom: 8px;
    }

    .banner-1 .custom-form-group .custom-form-btn {
        border-radius: 8px !important;
        width: 100%;
    }

    /* Transfer Button Row */
    .banner-1 .col-xxl-3 .custom-form-btn {
        width: 100%;
        margin-top: 12px;
    }

    /* Domain Extension Cards - Full Width on Mobile */
    .banner-1 .d-sm-flex {
        flex-direction: column;
    }

    .banner-1 .d-sm-flex > div {
        flex: 1 1 100%;
        min-width: 100%;
        text-align: center;
    }

    /* Transfer Form */
    .domain-transfer-form .col-lg-4,
    .domain-transfer-form .col-lg-2,
    .domain-transfer-form .col-lg-3 {
        width: 100%;
    }

    .domain-transfer-form .form-label {
        margin-top: 12px;
    }

    .domain-transfer-form .mt-auto {
        margin-top: 0 !important;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .banner-1 .content-1 {
        font-size: 1.125rem !important;
    }

    .banner-1 .h2 {
        font-size: 1.5rem !important;
    }

    /* Domain Cards Stack Vertically */
    .banner-1 .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .banner-1 .py-2 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Form Elements */
    .form-control {
        font-size: 0.9375rem !important;
    }

    .custom-form-btn {
        font-size: 0.9375rem !important;
        padding: 0.75rem 1.5rem !important;
    }
}

/* Transfer Steps Section Responsive */
@media (max-width: 767px) {
    .transfer-steps .col-md-4 {
        margin-bottom: 2rem;
    }

    .transfer-steps .card {
        margin-bottom: 0;
    }
}

/* Price Cards Responsive */
@media (max-width: 991px) {
    .pricing-card {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767px) {
    .pricing-card .btn {
        font-size: 0.9375rem;
        padding: 0.625rem 1.25rem;
    }
}

/* Image Responsive */
.banner-1 img.img-fluid {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .banner-1 .text-lg-end {
        text-align: center !important;
        margin-top: 2rem !important;
    }

    .banner-1 img.img-fluid {
        max-width: 80%;
    }
}

@media (max-width: 576px) {
    .banner-1 img.img-fluid {
        max-width: 100%;
    }
}

/* Services Section - Gradient Border Cards */
.feature-card-15.feature-card-16 {
    position: relative;
    border: 3px solid transparent !important;
    background: white;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

/* Gradient Borders for Each Card */
.feature-card-15.feature-card-16::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.feature-card-15.feature-card-16.secondary::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.feature-card-15.feature-card-16.success::before {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.feature-card-15.feature-card-16.danger::before {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.feature-card-15.feature-card-16.info::before {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.feature-card-15.feature-card-16.warning::before {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

/* Remove Hover Effects - Keep Cards Always Visible */
.feature-card-15.feature-card-16:hover {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Card Shadow - Always Visible */
.feature-card-15.feature-card-16 {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}
