/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('responsive.css');

a {text-decoration: none;color:inherit;display: inline;}
a:hover {color: #EF9255;}
a.hlink {display: inline;position: relative;overflow: hidden;}
a.hlink:hover {color: #EF9255}
a.active {color: #EF9255}
a.hlink:before {content: "";position: absolute;z-index: -1;right: 0;width: 0;bottom: -5px;background: #EF9255;height: 4px;transition-property: width;transition-duration: 0.3s;transition-timing-function: ease-out;}
a.hlink:hover:before,a.hlink:focus:before,a.hlink:active:before {left: 0;right: auto;width: 100%;}
ul , li {list-style-type: none;margin:0px;padding:0px;}

html {font-size: 17px;}

body {
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    font-family: 'Poppins';
    font-weight:500;
    color: #000;
} 

a.no-hover:hover {
    color: #fff; /* or specify the default or desired color */
}
.progress, .progress-stacked {background-color: #A29980;}

.vdscard {
    border: 1px solid #ee7633;
    border-radius: 10px;
    height: 95%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Bg gradient */
.bg-g-purple {background: rgb(216,216,216);background: linear-gradient(270deg, rgba(216,216,216,1) 45%, rgba(244,123,61,1.1601015406162464) 100%);}
/*.bg-g-purple-2 {background: rgb(206,200,194);background: linear-gradient(90deg, rgba(206,200,194,1) 0%, rgba(81,63,183,0.21332282913165268) 100%);}*/
.bg-g-orange {background: rgb(230, 179, 136);background: linear-gradient(270deg, rgba(230, 179, 136,1) 0%, rgb(20, 125, 132,0.30) 100%);}
.bg-opacity-white {background-color: #ffffff91;}
.bg-opacity-white2 {
    background-color: #e1e1e13d;
}


/* Background */
.bg-pink {background-color: #FFF0F4;}
.bg-gray-2 {background-color: #fbfbfb;}
.bg-orange {background-color: #D8D8D8;}
.bg-orange-2 {background-color: #EF7632;}
.bg-orange-3{background-color: #F5D3C0;}
.bg-cyan-1 { background-color: #F5F5F5;}
.bg-cyan-2 { background-color: #F5F5F5;}
.bg-blue {background-color: #D9DCF5;}
.bg-cyan-2-transparent {background: linear-gradient(to bottom, #ee7632 50%, transparent 50%);}
.bg-blue-2-transparent {background: linear-gradient(to bottom, #3B3866 50%, transparent 50%);}
.bg-blue-3-transparent {
    background: linear-gradient(to top, #6d026d 80%, transparent 20%);
}

.bg-blue-1 {
    background-color: #d8d8d88c;
}
.bg-blue-2 {background-color: #F5F5F5;}
.bg-blue-3 {background-color: #B7CBEB;}
.bg-blue-4 {background-color: #E2E4F1;}
.bg-blue-5 {background-color: #C4DCF8;}
.bg-gray {background-color: #F5F5F5;}
.bg-gray-2 {background-color: #DFDFDF;}
.bg-camel {background-color:#D8D8D8}
.bg-camel-2 {background-color:#D3CDC3}
.bg-camel-3 {background-color:#F2E6DC}
.bg-camel-4 {background-color:#FFF9EB}
.bg-camel-5 {background-color:#CFCAD0}
.bg-camel-6 {background-color:#F6EAD9}
.bg-camel-7 {background-color:#CB8E85}
.bg-purple-2 {background-color: #6d026d;}
.bg-purple-3 {background-color: #9d96c0;}
.bg-camel-2-transparent {background: linear-gradient(to bottom, #B98F69 50%, transparent 50%);}
.bg-gray-transparent {background: linear-gradient(to bottom, #d1d1d1 50%, transparent 50%);}
.bg-green-1 {background-color: #E9EAE4;}
.bg-purple-camel { background: rgb(206,200,194);background: linear-gradient(318deg, rgba(206,200,194,1) 0%, rgba(206,200,194,1) 27%, rgba(81,63,183,0.21052170868347342) 100%); }
.bg-purple { background: rgb(244,123,61,1); background: linear-gradient(270deg, rgba(216,216,216,1.1601015406162464) 45%, rgba(244,123,61,1) 100%); }
.bg-cyan-orange { background: rgb(176,205,205);background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 55.8%, rgba(216,216,216,1) 55.8%, rgba(216,216,216,1) 100%); }
.bg-cyan-orange-2 {background: rgb(176,205,205);background: linear-gradient(30deg, rgba(176,205,205,1) 40% , rgba(250,177,135,1) 80%);}

/* Buttons */
.btn-orange {color: #fff;background-color: #EF7632;border-color: #EF7632;}
.btn-secondary1 {
    color: #fff;
    background-color: #3E3E3E;
    border-color: #3E3E3E;
}
    .btn-secondary1:hover, .btn-secondary1:active, .btn-secondary1:focus, .btn-secondary1.active {
        background: #EF7632 !important;
        color: #fff !important;
        border-color: #EF7632 !important;
    }

.btn-orange:hover , .btn-orange:active, .btn-orange:focus, .btn-orange.active {background: #3E3E3E !important;color: #fff !important;border-color: #3E3E3E !important;}
.btn-light:hover , .btn-light:active, .btn-light:focus, .btn-light.active {background: #fff !important;color: #EF7632 !important;border-color: #EF7632 !important;}
.btn-outline-black {color: #fff;background-color: transparent;border:1px solid #000 !important;color:#000;}
.btn-outline-black:hover , .btn-outline-black:active, .btn-outline-black:focus, .btn-outline-black.active {color:#fff;background: rgba(0, 0, 0, 0.308) !important;color: #000 !important;border-color: #000 !important;}


.btn-outline-black {
    color: #fff;
    background-color: transparent;
    border: 1px solid #000 !important;
    color: #000;
}

    .btn-outline-black:hover, .btn-outline-black:active, .btn-outline-black:focus, .btn-outline-black.active {
        color: #fff;
        background: rgba(255, 255, 255, 1) !important;
        color: #000 !important;
        border-color: #000 !important;
    }





.btn-secondary {background-color: #3E3E3E;}
.btn-outline-orange {color: #fff;background-color: transparent;border:1px solid #EF7632 !important;color:#EF7632;}
.btn-outline-orange:hover , .btn-outline-orange:active, .btn-outline-orange:focus, .btn-outline-orange.active {color:#fff;background: #EF7632 !important;color: #fff !important;border-color: #EF7632 !important;}
.btn-default-orange {color: #fff;background-color: transparent;border:1px solid #d1d1d1 !important;color:#000;}
.btn-default-orange:hover , .btn-default-orange:active, .btn-default-orange:focus, .btn-default-orange.active {color:#fff;background: #EF7632 !important;color: #fff !important;border-color: #EF7632 !important;}
.btn-white {color: #000000;background-color: #FFFFFF;border-color: #707070;}
.btn-white:hover , .btn-white:active, .btn-white:focus, .btn-white.active {background: transparent !important;color: #000 !important;border-color: #707070 !important;}

.orange-active.active {color:#EF7632;}

.feature-boxed .icon-box {height:80px;display: flex; align-items: center;justify-content: center;}
.feature-boxed .icon-box img {max-height:100%}

.discount-tag {width: 35px;height: auto;display: flex;align-items: center;justify-content: center;flex-direction: column;font-weight: bold;color:#FF646E;font-size: 11px;}
.discount-tag img {max-width:100%;}

.border-orange {border-color:#EF7632 !important;}
.border-orange-2 {border-color:#FAB187 !important;}
.border-bottom-orange {border-bottom-color:#EF7632 !important;}
.border-bottom-5 {border-bottom-width: 5px !important;}

.scroll-bar-options {height: 100px;position: relative;}

.tab-orange-border {}
.tab-orange-border .nav.nav-tabs {border-bottom-color: #EF7632;}
.tab-orange-border .nav.nav-tabs .nav-item .nav-link {text-decoration: none; font-weight:500;color:#000;}
.tab-orange-border .nav.nav-tabs .nav-item .nav-link.active {border-top-color: #EF7632;border-left-color: #EF7632;border-right-color: #EF7632;color:#EF7632;}
.tab-orange-border .nav.nav-tabs .nav-item .nav-link:hover {border-color: #EF7632;border-bottom-color: #ee;color:#EF7632;}
.tab-orange-border .tab-content {border-color: #EF7632;border-width: 1px;border-style: solid;border-top:none;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;padding:20px;}

.tab-content {position: relative;}
.tab-content #nextBtn {position: absolute;background: none;border:none;right:-50px;font-size: 25px;top:0px;bottom:0px;margin: auto 0px;}
.tab-content #prevBtn {position: absolute;background: none;border:none;left:-50px;font-size: 25px;top:0px;bottom:0px;margin: auto 0px;}

input[type="radio"] {position: relative;width: 16px;height: 16px;}
input[type="radio"]::before {content:"";/*background-color: #fff;*/position: absolute;width:100%;height:100%;border: 1px solid #000;}
input[type="radio"]:checked:before {content:"✓";background-color: #EF7632;position: absolute;width:100%;height:100%;border: 1px solid #EF7632;color: #fff;font-size: 12px;display: flex;align-items: center;justify-content: center;}

input[type="checkbox"] {position: relative;width: 24px;height: 24px;}
input[type="checkbox"]::before {background-color: #fff;position: absolute;width:100%;height:100%;}
input[type="checkbox"]:checked:before {content:"✓";background-color: #EF7632;position: absolute;width:100%;height:100%;border: 1px solid #EF7632;color: #fff;font-size: 10px;display: flex;align-items: center;justify-content: center;}

.editor-area {font-size:14px;}


.domain-list {
   display: flex;
   flex: 0 1 auto;
   flex-direction: inherit;
   flex-wrap: wrap;
   gap: 15px 15px;
   justify-content: center;
}

.domain-list li {
   border-radius: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-basis: 6.33333333%;
   height: 80px;
   }

/** pagination **/
.pagination {}
.pagination .page-link {border-color:#FAB187;font-size:14px;color:#3E3E3E;border-radius: 2px !important;font-weight: 500;}

/* Font-Size */
.fs-8 {font-size: 0.90rem;}
.fs-9 {font-size: 0.80rem;}
.fs-10 {font-size: 0.70rem;}

 Owl Carousel 
.owl-carousel {position: relative;}
.owl-carousel .owl-nav {
    position: absolute;
    width: 100%;
    /* height: 100%; */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    top: 30%;

}
   
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    
        color: #ee7633 !important;
        font-size: 100px !important;
    }

.owl-nav button.owl-next {
    transform: translateX(115%);
    color: black !important;
}

.owl-nav button.owl-prev {
    transform: translateX(-105%);
    color: pink !important;
}

/* Owl Carousel*/ 

.cursor-pointer { cursor: pointer;}

/* Min Heights */
.h-1 {min-height: 26.95rem;}
.h-2 {min-height: 11rem;}

/* Text */
.text-black {color:#3E3E3E !important;}
.text-hover-white:hover {color:#fff;}
.text-g-yellow {background:  -webkit-linear-gradient(0deg, rgba(254,212,45,1) 50%, rgba(252,191,41,1) 50%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.text-g-orange {background:  -webkit-linear-gradient(142deg, rgba(254,150,45,1) 45%, rgba(252,179,41,1) 73%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.text-brown {color: #331B00;}
.text-blue {color: #002850;}


/* Tech Para */
.tech-para-progress {position: relative;padding-bottom: 47px;}
.tech-para-progress .progress {position: absolute;top:0px;left:0px;right:0px;}
.tech-para-progress ul {width:100%;position: absolute;display: inline-flex;justify-content: end;padding:0px;margin:0px;top: -15px;column-gap: 70px;}
.tech-para-progress ul li {display: inline-flex;flex-direction: column;align-items: center;justify-content: flex-start;padding:0px;margin:0px;}
.tech-para-progress ul li p {margin:0px;}
.tech-para-progress ul li p.icon {background: #fff9eb;width: 60px;text-align: center;}
.tech-para-progress ul li p img {max-height: 50px;}
.tech-para-progress ul li p i {font-size: 40px;}

/* Form */
.form-control {z-index:1;}
.custom-form-check input {background-color:white;border-radius: 4px !important;outline: none;box-shadow: none; float:none !important;}
.custom-form-check .form-check-input:checked {background-color: #000;outline: none;box-shadow: none;border-color: #000;}
.custom-form-check .form-check-input:focus {box-shadow: none;}
.input-group>.form-control:focus, .input-group>.form-floating:focus-within, .input-group>.form-select:focus {z-index: 0;outline: none;box-shadow: none;}
.form-control.custom-control {border-color: #000;border-radius: 0px;font-weight: 500;padding: 15px;}
select.form-control.custom-control {background-image: url('../images/select-arrow.png');background-repeat: no-repeat;background-position: center right 15px;background-size: 10px;}
select.form-control {background-image: url('../images/select-arrow.png');background-repeat: no-repeat;background-position: top 16px right 15px;background-size: 10px;}

/* Border */
.border-end-5 {border-right-width: 0.6rem;border-right-style: solid;}

.rounded-s-e {border-top-left-radius: 30px;border-bottom-right-radius: 30px;display: inline-block;}
.link-icons {width:40px;height: 40px;font-size: 17px;display: inline-flex;align-items: center;justify-content: center;/*background: #000*/;border-radius: 100px;color: #fff;}
.list-style-dot {padding-left: 20px;}
.list-style-dot > li {list-style-type: circle !important;}
ul.border-bottom-list {width:100%;}
ul.border-bottom-list li {width:100%;border-bottom: 1px solid #00000036;box-sizing: border-box;padding: 10px 15px;font-weight: 500;}

/* Text Color */
.text-c-gray {color: #3e3e3eb8 !important;}
.text-c-orange {color: #EF7632 !important;}
.text-orange {color: #EF9255 !important;}
a:hover > .text-c-gray {color: #EF7632 !important;}

/* Accordion */
.accordion .accordion-button:not(.collapsed) {background-color: #efefef;color: #EF7632;font-weight: bold;outline:none;border-radius: 0px;}
.accordion .accordion-button {background-color: #efefef;color: #000;font-weight: bold;outline:none;font-size: 0.79rem;}
.accordion-item:first-of-type {border-radius: 0px;}
.accordion-item .accordion-body {font-size: 0.8rem;}

/* Table */
.table-comparison thead th {padding:5px;font-size: 17px;}
.table-comparison tbody td {}
.table-comparison td , .table-comparison th {padding: 15px !important;font-size: 15px;}

/* Panel Header */
.panel-header-dropdown {}
.panel-header-dropdown .dropdown-menu {border-radius: 0px;border:none;margin: 13px 0px 0px 0px !important;box-shadow: 0px 0px 10px #0000001c;padding: 15px;min-width: 250px;transform: translate(-40px, 28px) !important;}
.panel-header-dropdown .dropdown-menu ::after {content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #ffffff transparent;top: -15px;margin: 0px auto;left: 0%;right: 0%;z-index:2;}
.panel-header-dropdown .dropdown-menu li {padding:0px;}
.panel-header-dropdown .dropdown-menu li span {border-bottom:1px solid #000;font-size: 15px;width: 100%;display: inline-block;font-weight: 500;padding: 1px;}
.panel-header-dropdown .dropdown-menu .dropdown-item {font-size: 14px;padding: 1px;}
.panel-header-dropdown .dropdown-menu .dropdown-item:hover , .panel-header-dropdown .dropdown-menu .dropdown-item:active , .panel-header-dropdown .dropdown-menu .dropdown-item:focus {color:#ffaf7a;background: none;}

/* Panel Liste Dropdown */
.panel-liste-dropdown {}
.panel-liste-dropdown .dropdown-menu {border-radius: 0px;border:none;margin: 13px 0px 0px 0px !important;box-shadow: 0px 0px 10px #0000001c;padding: 15px;/*transform: translate(calc(-50% + 12px), calc(100% + 15px)) !important;*/}
.panel-liste-dropdown .dropdown-menu ::after {/*content:"";*/position:absolute;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #ffffff transparent;top: -15px;margin: 0px auto;left: 0%;right: 0%;z-index:2;}
.panel-liste-dropdown .dropdown-menu li {padding:0px;}
.panel-liste-dropdown .dropdown-menu li span {border-bottom:1px solid #000;font-size: 15px;width: 100%;display: inline-block;font-weight: 500;padding: 1px;}
.panel-liste-dropdown .dropdown-menu .dropdown-item {font-size: 14px;padding: 1px;}
.panel-liste-dropdown .dropdown-menu .dropdown-item:hover , .panel-header-dropdown .dropdown-menu .dropdown-item:active , .panel-header-dropdown .dropdown-menu .dropdown-item:focus {color:#ffaf7a;background: none;}

/* Panel Content Dropdown */
.panel-content-dropdown {}
.panel-content-dropdown .dropdown-menu {width: 50vw; align-items: center; border-radius: 0px;border:none;margin: 13px 0px 0px 0px !important;box-shadow: 0px 0px 10px #0000001c;padding: 15px;background-color: #F4F4F4;}
.panel-content-dropdown .dropdown-menu ::after {content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #F4F4F4 transparent;top: -15px;margin: 0px auto;left: 0%;right:calc(-100% + 30px);z-index:2;}
.panel-content-dropdown .dropdown-menu .content ul {display: flex; align-items: center; flex-wrap: wrap;}
.panel-content-dropdown .dropdown-menu li {padding:0px; margin: 12px 25px;}
.panel-content-dropdown .dropdown-menu li span {border-bottom:1px solid #000;font-size: 15px;width: 100%;display: inline-block;font-weight: 500;padding: 1px;}
.panel-content-dropdown .dropdown-menu .dropdown-item {font-size: 14px;padding: 1px;}
.panel-content-dropdown .dropdown-menu .dropdown-item:hover , .panel-header-dropdown .dropdown-menu .dropdown-item:active , .panel-header-dropdown .dropdown-menu .dropdown-item:focus {color:#ffaf7a;background: none;}

/* Panel Sidebar */
.panel-sidebar .user-profile-box {padding: 40px 0px 100px 0px !important;}
.panel-sidebar .user-profile-container {min-height: 50px;}
.panel-sidebar .user-image-box {width: 160px;height: 160px;position: absolute;margin: -80px auto 0px;left:0px;right:0px;}
.panel-sidebar .user-image-box .image-container {width: 100%;height: 100%;overflow: hidden;display: inline-flex;align-items: center;justify-content: center;border-radius: 100px;}
.panel-sidebar .user-image-box .image-container img {max-height: 100%;}

.panel-page-title {width:100%;height:auto;background-color: #ee7633; color:white;}

.panel-tab {border-color:#FAB187;}
.panel-tab .nav-link {border-radius: 0px;text-decoration: none !important;font-size: 15px;padding: 15px 25px;color: #0c0c0c !important;}
.panel-tab .nav-link.active {border-bottom-color:#fff;font-weight: 600;}
.panel-tab-content {background-color: #fff;min-height:auto;padding: 15px 10px;border:1px solid #FAB187;border-top: none;}
.panel-content {background-color: #fff;min-height:auto;padding: 15px 10px;border:1px solid #FAB187;}

.table-panel-custom thead tr th {font-size:14px;font-weight: 600;border-right:1px solid #d1d1d1;}
.table-panel-custom thead tr th:last-child {  border-right:none;}
.table-panel-custom tbody tr td { font-size:15px; border-right:1px solid #d1d1d1;}
.table-panel-custom tbody tr td:last-child { border-right:none;}

/* Datatable */
.datatable {width:100%;}
.dataTables_length {height:100%;padding: 5px 10px;font-size: 13px;}
.dataTables_length label {width:100%;display:inline-flex;align-items: center;height: 100%;}
.dataTables_length label .form-select-sm {width: auto;margin-left: 10px;}
.dataTables_filter {height:100%;padding: 0px;}
.dataTables_filter label {width:100%;display:inline-flex;align-items: center;height: 100%;justify-content: flex-end;}
.dataTables_filter label .form-control-sm {width: auto;margin-left: 10px;border-radius: 0px !important;outline: none !important;box-shadow: none !important;}
.paginate_button.page-item.active > .page-link {background-color: #EF7632;color:#fff;}
.dataTables_info {font-size: 12px;}
.datatable tr td {font-size: 14px;}
.datatable tr th {font-size: 14px;font-weight: normal;}

.os-selected a.active {background-color: #ef7d32;color:#fff;}
.os-selected input {display:none;}

ul.user-profile-menu {width:100%}
ul.user-profile-menu li {width:100%;}
ul.user-profile-menu li a {width:100%;padding: 8px 0px;font-size: 15px;display: inline-flex;align-items: center;font-weight: 500;color: #565656;}
ul.user-profile-menu > li:hover > a , ul.user-profile-menu > li > a.show {color:#EF9255}
ul.user-profile-menu li > .dropdown-menu li:hover > a , ul.user-profile-menu li > .dropdown-menu li a.show {color:#EF9255}
ul.user-profile-menu li a i {font-size: 26px;margin-right: 10px;color: #000;}
ul.user-profile-menu .dropdown > a {position: relative;}
ul.user-profile-menu .dropdown > a::after {content:"";position: absolute;background: url('../images/select-arrow.png') center right no-repeat;right:0px;top:0px;bottom:0px;margin:auto 0px;width: 14px;height: 8px;}
ul.user-profile-menu .dropdown > a.show::after {transform: rotate(-180deg);transition: all 0.2s;}
ul.user-profile-menu .dropdown > a.dropdown-toggle::after {border:none !important;}
ul.user-profile-menu .dropdown .dropdown-menu {position: relative !important;transform: none !important;padding: 0px 0px 0px 35px;background: none;border: none;}
ul.user-profile-menu .dropdown > .dropdown-menu li a  {font-size: 14px !important;}

/* Tab */
.nav.bordered-tab {display: inline-flex;justify-content: space-between;width: 100%;flex-direction: row;align-items: stretch;}
.nav.bordered-tab .nav-item {display: inline-flex;width: auto;width: 25%;}
.nav.bordered-tab .nav-item .nav-link {border: 1px solid #D8D8D8;width: 100%;border-radius: 0px;color: #919191;text-decoration: none;font-weight: 500;}
.nav.bordered-tab .nav-item .nav-link.active {border-bottom: 4px solid #FAB187;}

.triangle-left , .triangle-bottom , .triangle-right , .triangle-top {position: relative;}
.triangle-left::after {left: -16px;content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 7.5px 15px 7.5px 0;border-color: transparent #ef7d32 transparent transparent;margin: auto 0px;top: 0%;bottom: 0%;z-index:2;}
.btn:hover.triangle-left::after { border-color: transparent; border-right-color: inherit;}
.triangle-right::after {content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 15px;border-color: transparent transparent transparent #ef7d32;top: 0%;bottom: 0%;right: -16px;margin: auto 0;z-index:2;}
.triangle-bottom::after {content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 15px 12px 0 12px;border-color: #ef7d32 transparent transparent transparent;margin: 0px auto;left: 0%;right: 0%;bottom: -16px;z-index:2;}
.triangle-top::after {content:"";position:absolute;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #ef7d32 transparent;top: -16px;margin: 0px auto;left: 0%;right: 0%;z-index:2;}

.table-middle tr th , .table-middle tr td {vertical-align: middle;}
.table-text-center tr th , .table-middle tr td {text-align: center;}

.nav .nav-link.active {
    text-decoration: underline;
    color: #ee7633 !important;
}

.tab-options .nav-tabs {align-items: flex-end;}
.tab-options .nav-tabs .nav-item .nav-link {background-color: #fff;border-radius: 0px;padding: 20px 30px;border-left:2px solid #F5F5F5;text-decoration: none;color: #898989;font-weight: 500;}
.tab-options .nav-tabs .nav-item .nav-link:hover {border-top:2px solid #EF7632}
.tab-options .nav-tabs .nav-item .nav-link.active {border-top:2px solid #EF7632;padding: 30px 30px;border-right: none;color:#EF7632;}
.tab-options .nav-tabs .nav-item:first-child .nav-link {border-left:none;}
.tab-options .tab-content {background-color: #fff;}

/* Modal */
.modal .btn-close {position: absolute;right: 15px;top: 15px;width: 40px;height: 40px;border-radius: 100px;opacity: 1;color:#fff;font-size: 22px;z-index: 10;}
.modal .modal-content {border-radius: 0px;background-color: #fff;}
.modal-backdrop {background-color: #00000026;}

/*  Border */
.border-secondary {border-color: #D4D4D4 !important;}

/* Fatures Table */
.features-table tr td {padding: 10px 15px;}
.features-table tr th {padding: 10px 20px;text-align: center;font-size: 13px;}
.features-table tr td:first-child {text-align: left;}
.features-table tr td {padding: 10px 20px;text-align: center;}
.features-table tr th:first-child {text-align: left;}
.features-table tr td:first-child {min-width:400px;}
.features-table tbody tr td:first-child {font-size: 14px;font-weight: 400;}
.features-table tbody tr td:first-child i {font-size: 11px;}
.features-table tbody tr td {font-size: 14px;font-weight: bold;}
.features-table tfoot tr td:first-child {padding: 20px;min-width:400px;}
.features-table tfoot tr td:first-child i {font-size: 65px;color: #ffbc00;margin-right: 15px;}
.features-table tfoot tr td {padding: 10px 10px;}
.table-domain tr td , .table-domain tr th {font-size: 0.8rem;}
header {
    min-width: 132px;
    border-bottom: 0px;
    background-color: #fff;
}
/*header {min-width:132px;border-bottom:0px;background-color: #0000;}
*/header .header-logo {max-height:65px;}
header ul.header-nav {display: flex;flex-direction: column;list-style-type: none;margin:0px;padding:0px;justify-content: flex-start;}
header ul.header-nav li {width:100%;padding:1.8rem 0rem;}
header ul.header-nav li a {padding:0.55rem 0.75rem;font-size: 18px;font-weight: 500;}
header ul.header-nav li a i {font-size: 1.3rem;}
header ul.header-nav li .dropdown-menu {background-color: #fff;width:100%;min-height:350px;position: absolute;left:0px;right:0px;border-radius: 0px;border:1px solid #000;border-left:none;border-right:none;margin: 29px 0px 0px 0px !important;padding: 0px 0px;background-position: bottom right;background-repeat: no-repeat;background-size: contain;}
header ul.header-nav li ul.header-sub-menu {width:auto;/*border-right: 1px solid #707070;*/width:auto;float:left;box-sizing: border-box;margin-right: 5%;min-width: 15%;padding-right: 5%;}
header ul.header-nav li ul.header-sub-menu li {box-sizing: border-box;padding: 0px 0px;}
header ul.header-nav li ul.header-sub-menu li a {box-sizing: border-box;padding: 10px;display: inline-block;font-size: 16px;}
header ul.header-nav li ul.header-sub-menu:last-child {border:none;}
header .basket-counter {position: absolute;width: 20px;height: 20px;background-color: #e5762c;font-size: 12px;display: inline-flex;align-items: center;justify-content: center;border-radius: 100px;color: #fff;font-weight: 700;top: 0px;right: 0px;}

header ul.header-nav li .dropdown-menu { display: none; }
header ul.header-nav li:hover .dropdown-menu{ display: block;}

#domain-list-carousel {width: 100%;}
#domain-list-carousel .item { display:flex; justify-content: center;}
#domain-list-carousel .item::before {content:"";position: absolute;right:0px;background: #fff;width: 1px;height: 40%;margin: auto 0px;top: 30%;bottom: 30%;}
#domain-list-carousel .item p {margin:0px;padding:0px;color: #3E3E3E;}

#service-list-carousel {}
#service-list-carousel .item-service .img-box {width: 150px;height: 150px;}
#service-list-carousel .item-service .img-box img {max-height: 100%;}
#service-list-carousel .item-service .service-view {background-color: #ee7633;width: 199px;height: 51px;display: inline-flex;align-items: center;justify-content: center;font-weight: 600;}

.carousel-indicators {}
.carousel-indicators .active {background-color: #EF7632 !important;}
.carousel-indicators [data-bs-target] {border-color: #EF7632;width: 15px;height: 15px;border: 2px solid #EF7632;border-radius: 100px;background-color: transparent;}

table.table tr th , table.table tr td {vertical-align: middle;}
table.table-camel tr th , table.table-camel tr td {border-color: #dfcab8;}

footer {min-height:200px;background: url('../images/footer-effetct-logo.png') left -50% top no-repeat #2a2a2a;}
footer .footer-info-bar {width:100%;background-color: #707070;}
    footer .bg-icolor {
        background-color: #707070;
    }
    header .mobile-menu {
        width: 100%;
        background: #fff;
        overflow: auto;
        height: 100%;
    }

    header .mobile-menu ul li {
        width: 100%;
        box-sizing: border-box;
        padding: 0px;
        background: #ee7633;
        font-size: 15px;
        margin-bottom: 10px;
        font-weight: 500;
        color: #fff;
        height: 100%;
    }

        header .mobile-menu ul li a {
            padding: 15px 15px;
            display: inline-block;
            font-size: 15px;
            width: 100%;
            position: relative;
        }

        header .mobile-menu ul li ul {
            display: none;
        }

            header .mobile-menu ul li ul.dropdown-menu {
                position: relative !important;
                transform: none !important;
                background: none;
                border: none;
                background: #e5762c;
                border-radius: 0px;
                color: #fff;
                box-sizing: border-box;
                padding: 0px;
            }

                header .mobile-menu ul li ul.dropdown-menu li {
                    background: none;
                    margin: 0px;
                }

                    header .mobile-menu ul li ul.dropdown-menu li a {
                        padding: 10px 10px;
                        display: inline-block;
                        width: 100%;
                        border-bottom: 1px solid #ffffff47;
                    }

header .mobile-menu-button {
    width: 50px;
    height: 50px;
    /*background-color: #000000;*/
    justify-content: center;
    align-items: center;
    color: #000;
}

header .mobile-cart-button {
    width: 50px;
    height: 50px;
  /*  background-color: #000000;*/
    justify-content: center;
    align-items: center;
    color: #fff;
}

header .mobile-menu .dropdown-toggle::after {
    position: absolute;
    right: 15px;
    top: 24px;
}



.show-password {z-index: 99999;}

.icon-box {max-height:170px;}
.icon-box img {max-height:200px;}
#PackageTab { flex-direction: row;flex-wrap: nowrap;overflow-x: auto;
}

    #PackageTab .nav-item {
        width: auto;
        white-space: nowrap
    }
.collapsing {-webkit-transition: none;transition: none;display: none;}

.login-bar {border:1px solid #000}

/* Counter */
.counter input {border:none;width:auto;padding: 0px;}
.counter a {border:1px solid #000;padding: 3px 5px;margin: 0px 5px;}

.title-line-bottom {position: relative;margin-bottom:70px;}
.title-line-bottom::after {margin:0px auto;left:0px;right:0px;top:130%;position: absolute;content:"";width: 2px;height:50px;background-color: #000;}

.title-line-top {position: relative;margin-top:70px;}
.title-line-top::after {margin:0px auto;left:0px !important;right:0px;bottom:130%;position: absolute;content:"";width: 2px;height:50px;background-color: #000;left: 100%;}

.custom-position {position: relative;right:-57%}

.isimtescil {background-image: url('../images/isimtescil-icon.png');width: 20px;height: 19px;display: inline-block;background-size: contain;}

.circle-check {width:15px;height:15px;border: 1px solid #EF7633;border-radius: 100px;display: inline-flex;align-items: center;justify-content: center;padding: 0px;margin: 0px;}
.circle-check.active::after {content:"";width: 7px;height: 7px;background-color: #e5762c;display: inline-block;border-radius: 100px;}

ul.whois-list {width:100%;height:auto;}
ul.whois-list li {width:100%;height:auto;margin-bottom: 10px;float: left;}
ul.whois-list li span {min-width: 50%;display: inline-block;float:left;font-weight: 700;font-size: 15px;}
ul.whois-list li span:first-child {font-weight: 500;}

ul.categories-list {width:100%;height:auto;}
ul.categories-list li {width:100%;height:auto;}
ul.categories-list li a i {margin-right:5px;font-size:12px;}
ul.categories-list li a {width:100%; display: inline-flex; align-items: center;font-size: 16px;padding:7px 15px;}
ul.categories-list li a:hover , ul.categories-list li a.active {background-color: #F9EAE2;color:#000}

ul.features-list {width:100%;display: inline-flex;flex-wrap: wrap;}
ul.features-list li {width: 20%;}

.line-search-box {position: relative;display: inline-flex;align-items: center;width: 100%;}
.line-search-box > .form-control {border:none;border-bottom:1px solid #e5762c;outline: none;box-shadow: none;font-size: 15px;padding: 16px 5px 16px 30px;width: 100%;}
.line-search-box > i {position: absolute;z-index: 9999;margin:  auto 0px;}

.web-card {width:auto;margin-bottom: 15px;}
.web-card .web-top {width:100%;background-color: #DEDEDE;display: inline-flex;height: 17px;align-items: center;padding: 0px 7px;gap: 5px;border-top-left-radius: 7px;border-top-right-radius: 7px;}
.web-card .web-top .dot {width: 7px;height: 7px;background-color: #fff;display: inline-flex;border-radius: 100px;}
.web-card .web-content {height:200px;width:100%;display: inline-flex;align-items: center;justify-content: center;overflow: hidden;}
.web-card .web-content img {max-height:100%;}
.web-card .web-footer {width:100%;background-color: #DEDEDE;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;display: inline-flex;align-items: center;justify-content: space-between;padding: 7px 10px;font-size: 15px;}
.web-card .web-footer .web-name {margin:0px;font-weight: 500;}

.w-pagination {width:100%;display: inline-flex;align-items: center;justify-content: space-between;gap:25px}
.w-pagination li a.active {font-weight: bold;}
.w-pagination li a:hover {font-weight: bold;}

.mobile-user-menu-button {position: absolute;left:0px;}

@media screen and (max-width: 990px) {
    .big-font-size {
        font-size: 12rem !important;
        text-align: center;
        width: 100%;
    }

    .info-box {
        z-index: -1;
        display: none !important;
    }
}

@media screen and (max-width: 1199px) {
 
   .categories-list {width: 100% !important;overflow: auto;}
   .categories-list li {width: auto !important;float: left;margin-right: 5px;margin-bottom: 6px;}
   .categories-list li a {font-size: 12px !important;border: 1px solid #e5e5e5;}
   
   .nav.bordered-tab .nav-item {width: 100%;}

   ul.features-list li {width: 100%;}

   .w-pagination {flex-wrap: wrap;padding: 10px;}

   .border-xs-none {border:none;}

   .tab-options .nav-tabs {flex-direction: column;}
   .tab-options .nav-tabs .nav-item {width:100%;}
   .tab-options .nav-tabs .nav-item .nav-link {width: 100%;}
   .nav {flex-direction: column;}
   .nav-tabs .nav-item {width: 100%;}

    body {
        font-size: 0.900rem; text-align: center;
    }
   header ul.header-nav li a {font-size: 14px;}
   header ul.header-nav li .dropdown-menu {margin-top: 14px !important;}
   header ul.header-nav li ul.header-sub-menu li a {font-size: 13px;}
   .h1, h1 {font-size: calc(1.375rem + 0.7vw);}
   .fs-4 {font-size: calc(1.275rem + .0vw)!important;}
    .fs-1 {
        font-size: calc(0.8rem + .0vw) !important;
    }
    .fs-9 {
        font-size: calc(0.8rem + .0vw) !important;
    }
   .h-1 {min-height: 16.95rem;}
   .fs-7 {font-size: 16px;}
   header .header-logo {max-height: 50px;}
   header {padding: 0px; background-color:#fff}

   
   .tab-content #nextBtn {display: none;}
   .tab-content #prevBtn {display: none;}

   .tab-orange-border .nav.nav-tabs .nav-item .nav-link {width:100%;border-bottom-width: 1px !important; border-bottom-style: solid !important;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
   .tab-orange-border .nav.nav-tabs .nav-item .nav-link.active {width:100%;border-bottom-width: 1px !important; border-bottom-style: solid !important;border-bottom-color: #EF7632;}
   
   .domain-search-input {position: relative !important;}

   .domain-list {
      display: flex;
      flex: 0 1 auto;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
      gap: 15px 15px;
      justify-content: center;
  }

   .domain-list li {
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-basis: 46%;
      height: 53px;
      font-size: 19px !important;
  }

  .position-none-absolute {position: relative !important;}

  
.custom-position {position: relative;right:0px;text-align: right !important;}
.title-line-top::after {margin:0px 0px;right:0px;left:100% !important}
.bg-cyan-orange { background: rgb(176,205,205);}
    .datatable tr td {
        font-size: 10px  ;
    }

} 

.kk-card{
   height: 200px;
}
.kk-card img{
   height: 30px;
}
.loading-box{
   width: 100%;
   max-width: 500px;
   height: 50px;
   position: relative;
}
.loading-box p{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.campain-box {width:100%;height: 200px;display: block;position: relative;}
.campain-box .img-box {width:100%;height:100%;display: inline-flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 10px;box-sizing: border-box;}
.campain-box .img-box img {max-width: 100%;}
.campain-box .action-box {position: absolute;bottom:0px;background-color: #000;width:100%;display: inline-flex;justify-content: space-between;left:0px;right:0px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}
.campain-box .action-box a {color:#fff;width:100%;text-align: center;padding:6px;font-size:15px;font-weight: 500;}
.campain-box .action-box a:hover {color: #ffbc00;}


.h-463 {
    max-height: 463px !important;
}

.big-font-size {
    font-size: 7rem;
    color: #ee7633;
    font-weight: 400;
    line-height: normal;
}
    
}

.info-box {
    position: relative;
    display: flex;
    align-items: end;
    height: 100%;
}

    .info-box img {
        position: absolute;
    }

    .info-box p {
        position: absolute;
        color: #fff;
        width: 539px;
        height: 286px;
        left: 65px;
        bottom: -127px;
        margin: 0px;
       
        font-size: 122px;
        font-weight: bold;
       
    }



.mobile-title {
    font-size: 24px !important;
}
/* Hero Section Styles */

.hero-container {
    width: 100%;
    height: 728px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: #fff;
    overflow: hidden;
    background-image:
    /* Karartmalar - üstte sabit */
    linear-gradient(177deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 70%, transparent 100%), linear-gradient(270deg, rgba(0,0,0,0.5) 0%, transparent 50%, rgba(0,0,0,0.5) 100%),
    /* Asıl renkli gradient - hareket eden */
    linear-gradient(177deg, #0c0223 0%,#210e3a 20%,#57417c 45%,#3b305a 55%,#344B50 70%,#344B50 100%);
}


/* arka plan için smoothWaveStrong animasyon */
/*
  background-size: 
    100% 100%,      
    100% 100%,     
    300% 300%;      

  /* Arka plan pozisyonları (animasyonun hedefi sadece 3. katman) 
  background-position: 
    center center,    
    center center,   
    0% 40%;         

  background-blend-mode: multiply;
  animation: smoothWaveStrong 15s ease-in-out infinite;
  overflow: hidden;
}

@keyframes smoothWaveStrong {
  0% {
    background-position: 
      center center,
      center center,
      0% 40%;
  }
  25% {
    background-position: 
      center center,
      center center,
      50% 60%;
  }
  50% {
    background-position: 
      center center,
      center center,
      100% 40%;
  }
  75% {
    background-position: 
      center center,
      center center,
      50% 20%;
  }
  100% {
    background-position: 
      center center,
      center center,
      0% 40%;
  }
}
*/


/* Sol metin alanı */
.hero-content {
    flex: 1;
    max-width: 650px;
    z-index: 2;
    margin-left: 15%;
    margin-bottom: 20%;
}

    .hero-content p {
        font-weight: 200;
        font-size: smaller;
        max-width: 500px;
    }



/* Turuncu buton */
.hero-btn {
    position: relative;
    background: #ff7d47;
    border: none;
    padding: 8px 30px;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    transition: 0.25s;
    z-index: 999;
    top: 200px;
    right: 200px;
}

    .hero-btn:hover {
        color: #ff7d47;
        background: #fff;
    }



/* --- 2. Yıldız Efektinin Stili --- */
.magic-star {
    position: absolute;
    display: block;
    /* Yıldız Boyutu (İstediğin gibi büyük) */
    width: 25px;
    height: 25px;
    background: #ffffff; /* Beyaz renk */
    /* 4 Uçlu Parlayan Yıldız Şekli (Resimdeki gibi) */
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    pointer-events: none; /* Tıklamayı engellemesin */
    z-index: 1000; /* Butonun üstünde görünsün */
    /* Hafif Parlama */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
    /* Animasyon Tanımı */
    animation: star-burst 1s ease-out forwards;
}

/* Yıldızın Hareket Animasyonu */
@keyframes star-burst {
    0% {
        transform: translate(0, 0) scale(0.5) rotate(0deg);
        opacity: 1;
    }

    100% {
        /* JS'den gelen rastgele yönlere git, büyü ve dön */
        transform: translate(var(--x), var(--y)) scale(1.2) rotate(180deg);
        opacity: 0;
    }
}


/* Sol kısımda görünen video */
.ai-bot {
    width: 530px;
    height: 300px;
    position: absolute;
    bottom: 100px;
    left: 225px;
    background-color: #fff;
}

    .ai-bot iframe {
        width: 100%;
        height: 100%;
        border: none;
    }


/* Sağdaki el logosu */
.ai-hand {
    position: absolute;
    right: -110px;
    top: 120px;
    height: 500px;
    width: 900px;
}

    .ai-hand img {
        width: 100%;
        height: 90%;
        display: block;
    }

/* AI logosu */
.ai-chip {
    position: absolute;
    right: 135px;
    top: 10px;
    height: 500px;
    width: 450px;
}

    .ai-chip img {
        width: 100%;
        height: 90%;
        display: block;
    }


.stars-picture {
    transform: rotate(-5deg);
    position: absolute;
    top: 220px;
    right: -225px;
    width: 900px;
    height: 400px;
    background-image: url("pictures/stars.html");
    background-repeat: no-repeat;
    background-size: contain;
}

/* parlayan çip animasyonu */
.purple-star {
    position: absolute;
    width: 160px;
    height: 160px;
    background: #52168a;
    border-radius: 50%;
    box-shadow: 0 0 20px 10px rgba(138, 43, 226, 0.6);
    animation: twinkle 4s infinite ease-in-out;
}


@keyframes twinkle {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

/*responsive hero section*/

/* Büyük Ekranlar (1440px ) */
@media screen and (max-width: 1440px) {

    /* Sol metin alanı */
    .hero-content {
        flex: 1;
        max-width: 650px;
        z-index: 2;
        left: 2%;
        position: relative;
    }



        .hero-content p {
            font-weight: 300;
            font-size: smaller;
            padding-left: 1% !important;
            text-align: left !important;
            margin-bottom: 15% !important;
        }

    .ai-hand {
        height: auto;
        width: 700px;
        right: -5%;
    }

    .ai-chip {
        top: -10px;
        right: 80px;
        width: 400px;
        height: 500px;
    }


    .stars-picture {
        transform: rotate(-4deg);
        position: absolute;
        top: 260px;
        right: 20px;
        width: 500px;
        height: 300px;
        background-image: url("pictures/stars.html");
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* Parlayan Mor Yıldız */
    .purple-star {
        left: auto !important;
        top: auto !important;
        right: 15% !important;
        top: 8% !important;
        width: 120px !important;
        height: 120px !important;
        z-index: 0;
        animation: twinkle 4s infinite ease-in-out;
        filter: opacity(0.6);
    }

    .hero-btn {
        position: relative;
        background: #ff7d47;
        border: none;
        padding: 8px 30px;
        border-radius: 30px;
        color: #fff;
        cursor: pointer;
        transition: 0.25s;
        z-index: 999;
        top: 140px;
        right: 150px;
    }

    .ai-bot {
        width: 630px;
        height: 350px;
        position: absolute;
        bottom: 100px;
        left: 230px;
        background-color: #fff;
        z-index: 3;
    }
}

/* Tablet ve Küçük Laptoplar (1200px ve altı) */
@media screen and (max-width: 1200px) {
    .hero-container {
        /* İçeriğin taşmasını önlemek için yüksekliği otomatiğe al */
        height: auto;
        min-height: 800px;
    }

    .ai-hand {
        right: -200px;
        opacity: 0.5; /* Görsellerin metni kapatmaması için şeffaflık */
    }

    .ai-chip {
        right: 50px;
        width: 300px;
    }
}

/* 1024px genişlik için özel ayarlar */
@media screen and (width: 1024px) {

    /* Sol metin alanı */
    .hero-content {
        flex: 1;
        max-width: 650px;
        z-index: 2;
        left: -12%;
        position: relative;
    }

        .hero-content p {
            font-weight: 300;
            font-size: smaller;
            padding-left: 12% !important;
            text-align: left !important;
            margin-bottom: 15% !important;
        }




    .hero-btn {
        position: relative;
        background: #ff7d47;
        border: none;
        padding: 8px 30px;
        border-radius: 30px;
        color: #fff;
        cursor: pointer;
        transition: 0.25s;
        z-index: 999;
        top: 200px;
        right: 150px;
    }




    /* Sol kısımda görünen video */
    .ai-bot {
        width: 530px;
        height: 300px;
        position: absolute;
        bottom: 100px;
        left: 80px;
        background-color: #fff;
    }

        .ai-bot iframe {
            width: 100%;
            height: 100%;
            border: none;
        }


    /* Sağdaki el logosu */
    .ai-hand {
        position: absolute;
        right: -110px;
        top: 140px;
        height: 500px;
        width: 600px;
        opacity: 100% !important;
    }

        .ai-hand img {
            width: 100%;
            height: 90%;
            display: block;
        }

    /* AI logosu */
    .ai-chip {
        position: absolute;
        right: 40px;
        top: 70px;
        height: 400px;
        width: 320px;
    }

        .ai-chip img {
            width: 100%;
            height: 90%;
            display: block;
        }


    .stars-picture {
        transform: rotate(-5deg);
        position: absolute;
        top: 270px;
        right: -85px;
        width: 500px;
        height: 300px;
        background-image: url("pictures/stars.html");
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* Parlayan Mor Yıldız */
    .purple-star {
        left: auto !important;
        top: auto !important;
        right: 15% !important;
        top: 15% !important;
        width: 90px !important;
        height: 90px !important;
        z-index: 0;
        animation: twinkle 4s infinite ease-in-out;
        filter: opacity(0.6);
    }
}

/* Standart Tablet Boyutu (768px genişlik) */
@media screen and (width: 768px) {


    .hero-content {
        margin-bottom: 10%;
    }
    /* El Görseli */
    .ai-hand {
        position: absolute;
        /* Orijinal ayarlara yakın bir konum */
        top: 14%;
        right: -10%; /* Yarısı dışarıda */

        width: 70%;
        height: auto;
        opacity: 0.4; /* Metin okunsun diye biraz silik */
        z-index: 0; /* En arkada */
        pointer-events: none; /* Tıklamayı engelle */
    }

    /* Çip Görseli */
    .ai-chip {
        position: absolute;
        /* Sağ üst köşeye yakın */
        top: 9%;
        right: 9.5%;
        width: 35%;
        height: auto;
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    /* Yıldızlar Arka Planı */
    .stars-picture {
        position: absolute;
        top: 21%;
        right: -20%;
        width: 70%;
        opacity: 0.3;
        z-index: 0;
        pointer-events: none;
    }

    /* Parlayan Mor Yıldız */
    .purple-star {
        /* Başlığın sağ üstüne denk gelecek bir konum */
        left: auto !important;
        top: auto !important;
        right: 24% !important;
        top: 16% !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 0; /* Diğer arka planların bir tık önünde */
        animation: twinkle 4s infinite ease-in-out;
        filter: opacity(0.6);
    }
}

/* Küçük Tabletler ve Büyük Telefonlar (900px ve altı) */
@media screen and (max-width: 900px) {


    .hero-container {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
        gap: 40px;
        overflow: hidden;
    }


    .hero-content {
        order: 1;
        width: 90%;
        max-width: 100%;
        margin: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

        .hero-content h2 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }

    /* 2. SIRA: VİDEO */
    .ai-bot {
        order: 2;
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 90%;
        height: auto;
        aspect-ratio: 16/9;
        margin: 0;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        z-index: 10;
    }

        .ai-bot iframe {
            height: 100%;
        }

    /* 3. SIRA: BUTON */
    .hero-btn {
        order: 3;
        position: relative;
        top: auto !important;
        right: auto !important;
        margin: 0;
        width: 80%;
        max-width: 300px;
        z-index: 10;
    }



    /* El Görseli */
    .ai-hand {
        position: absolute;
        top: 35%;
        right: -20%;
        width: 90%;
        height: auto;
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    /* Çip Görseli */
    .ai-chip {
        position: absolute;
        top: 31%;
        right: 10%;
        width: 35%;
        height: auto;
        opacity: 0.5;
        z-index: 0;
        pointer-events: none;
    }

    /* Yıldızlar Arka Planı */
    .stars-picture {
        position: absolute;
        top: 40%;
        right: -25%;
        width: 80%;
        opacity: 0.3;
        z-index: 0;
        pointer-events: none;
    }

    /* Parlayan Mor Yıldız */
    .purple-star {
        left: auto !important;
        top: auto !important;
        right: 20% !important;
        top: 33% !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 0;
        animation: twinkle 4s infinite ease-in-out;
        filter: opacity(0.6);
    }
}

/* Standart Tablet Boyutu (768px genişlik) */
@media screen and (width: 768px) {


    .hero-content {
        margin-bottom: 10%;
    }
    /* El Görseli */
    .ai-hand {
        position: absolute;
        top: 14%;
        right: -10%;
        width: 70%;
        height: auto;
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    /* Çip Görseli */
    .ai-chip {
        position: absolute;
        top: 9%;
        right: 9.5%;
        width: 35%;
        height: auto;
        opacity: 0.4;
        z-index: 0;
        pointer-events: none;
    }

    /* Yıldızlar Arka Planı */
    .stars-picture {
        position: absolute;
        top: 21%;
        right: -20%;
        width: 70%;
        opacity: 0.3;
        z-index: 0;
        pointer-events: none;
    }

    /* Parlayan Mor Yıldız */
    .purple-star {
        left: auto !important;
        top: auto !important;
        right: 24% !important;
        top: 16% !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 0;
        animation: twinkle 4s infinite ease-in-out;
        filter: opacity(0.6);
    }
}


/* Çok Küçük Ekranlar (480px ve altı) */
@media screen and (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.8rem;
    }

    .hero-content p {
        font-size: 0.9rem;
    }

    .hero-btn {
        top: 0;
    }
}








/* Örnek ikonlar için placeholder, sen kendi ikonlarının url'lerini buraya koyacaksın */
.icon-1 {
    background-image: url('pictures/computer.png');
}

.icon-2 {
    background-image: url('pictures/email-3.png');
}

.icon-3 {
    background-image: url('pictures/online-store.html');
}

.icon-4 {
    background-image: url('pictures/internet.html');
}

.icon-5 {
    background-image: url('pictures/magic-wand-2.html');
}

.icon-6 {
    background-image: url('pictures/shapes.html');
}

.icon-7 {
    background-image: url('pictures/download.html');
}

.icon-8 {
    background-image: url('pictures/content-management.html');
}

.icon-9 {
    background-image: url('pictures/customer-support.html');
}


/* Başlık Alanı */
.template-header {
    max-width: 800px;
    margin: 0 auto 50px auto;
}

    .template-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .template-header p {
        font-size: 0.90rem;
        color: #e5e5e5;
        line-height: 1.6;
        margin-bottom: 30px;
    }

/* Turuncu Buton (Senin stilinle uyumlu) */
.template-btn {
    background: #ff7d47;
    color: #fff;
    border: none;
    padding: 12px 65px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s;
}

    .template-btn:hover {
        background: #fff;
        color: #ff7d47;
        transform: translateY(-3px);
    }

.filter-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 0px;
    position: relative;
}


    .filter-menu::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 67%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.7);
    }

.filter-btn {
    background: transparent;
    border: none;
    color: #efefef;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s;
    font-family: 'Poppins', sans-serif;
}

    .filter-btn:hover {
        color: #fff;
    }

    /* Aktif olan filtre butonu */
    .filter-btn.active {
        color: #ff7d47; /* Turuncu yazı */
    }

        /* Aktif butonun altındaki turuncu çizgi */
        .filter-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #ff7d47;
            border-radius: 2px 2px 0 0;
        }

/* --- Galeri Grid Yapısı --- */
.template-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Tekil Kart Yapısı */
.template-card {
    background: #fff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s;
    cursor: pointer;
    animation: fadeIn 0.5s ease forwards;
}

    .template-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    .template-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: top;
        display: block;
    }

/* Giriş Animasyonu Keyframe */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive Ayarlar --- */
@media screen and (max-width: 1024px) {
    .template-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
    }
}

@media screen and (width: 1024px) {
    .filter-menu::after {
        width: 97% !important;
    }
}

@media screen and (width: 768px) {
    .filter-menu {
        /* Genişliği daralt */
        width: 60% !important;
        margin: 0 auto !important;
        margin-bottom: 30px !important;
        /* İçindeki butonları da kutunun içinde ortala */
        justify-content: center !important;
        /* Yan yana sığmazlarsa alt satıra geçsinler */
        flex-wrap: wrap !important;
    }

        .filter-menu::after {
            width: 97% !important;
        }
}

@media screen and (max-width: 600px) {
    .template-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
    }

    .filter-menu {
        gap: 10px;
        overflow-x: auto; /* Mobilde yan kaydırma */
        justify-content: flex-start;
        white-space: nowrap;
        padding-bottom: 0;
        border-bottom: none;
    }

    .filter-btn {
        padding: 10px 15px;
        background: rgba(255,255,255,0.05);
        border-radius: 20px;
        margin-bottom: 10px;
    }

        .filter-btn.active::after {
            display: none; /* Mobilde alt çizgiyi kaldır, buton rengi yetiyor */
        }

        .filter-btn.active {
            background: #ff7d47;
            color: #fff;
        }
}

/*
   MİNİK TELEFONLAR (480px ve altı)
= */
@media screen and (max-width: 480px) {

    /* 1. KAPSAYICI BOŞLUKLAR */
    .template-section {
        padding: 40px 15px; /* Kenar boşluklarını iyice azalt */
    }

    /* 2. BAŞLIK VE YAZILAR */
    .template-header h3 {
        font-size: 1.2rem; /* Başlığı küçült */
    }

    .template-header p {
        font-size: 0.8rem;
    }

    .template-btn {
        padding: 10px 40px; /* Butonu daralt */
        font-size: 0.9rem;
    }

    /* 3. FİLTRE MENÜSÜ */
    .filter-menu {
        gap: 5px; /* Butonlar arası boşluğu azalt */
        justify-content: center; /* Ortala */
        overflow-x: auto; /* Yan yana sığmazsa kaydırılsın */
        padding-bottom: 5px;
    }

        .filter-menu::after {
            width: 90%; /* Alt çizgiyi ekran kadar uzat */
        }

    .filter-btn {
        font-size: 0.75rem; /* Yazıları küçült */
        padding: 6px 10px; /* İç boşluğu azalt */
        border-radius: 15px;
        margin-bottom: 5px;
    }

    /* 4. GALERİ (GÖRSELLER) - 2 SÜTUN YAPISI */
    .template-grid {
        display: grid;
        /* ÖNEMLİ: 2 Sütun yapıyoruz (2 üstte 2 altta görünür) */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Aradaki boşluğu küçült (Sıkışık dursun) */
    }

    .template-card {
        border-radius: 6px; /* Köşeleri biraz daha keskinleştir */
    }

        .template-card img {
            height: 140px; /* Görsellerin boyunu kısalt */
        }
}

/* --- ai features section --- */

.ai-features-section {
    width: 100%;
    padding: 100px 0;
    background-color: #1a1a1a;
    background-image: radial-gradient(circle at 0% 10%, rgba(76, 29, 149, 0.3) 0%, transparent 60%), radial-gradient(circle at 100% 90%, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 150px;
    overflow-x: hidden;
    position: relative;
}

/* 2. KART YAPISI (Kutu sadece yazı kadar yer kaplayacak) */


/* 3. YAZI ALANI */
.card-content {
    width: 58%;
    z-index: 5;
}

    .card-content h2 {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: #fff;
        margin-top: 0;
    }

    .card-content strong {
        font-weight: 450;
    }


    .card-content p {
        font-size: 0.95rem;
        color: #ccc;
        line-height: 1.6;
        margin-bottom: 20px;
    }

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    color: #e0e0e0;
}

    .feature-list strong {
        color: #fff;
    }

/* 4. GÖRSEL ALANI (KUTUDAN BAĞIMSIZ - HAVADA ASILI) */
.card-image {
    /* Akıştan çıkarıyoruz, kutu yüksekliğini etkilemez */
    position: absolute;
    /* Dikeyde ortala */
    top: 50%;
    transform: translateY(-50%);
    /* Sağ tarafa yapıştır ve dışarı taşır */
    right: -80px;
    /* Genişlik ayarı: Kutunun %50'si kadar yer kaplasın */
    width: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
}

    .card-image img {
        width: 82%;
        height: 380px;
        object-fit: fill;
        box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }

/* --- TERS KART (Reverse) AYARLARI --- */
/* Sadece içeriği sağa yasla (Resim sola geçecek) */
.feature-card.reverse {
    justify-content: flex-end; /* Yazıyı sağa it */
}

    /* Ters kartta resmi SOLA al */
    .feature-card.reverse .card-image {
        right: auto; /* Sağ ayarını iptal et */
        left: -80px; /* Sola yapıştır ve taşır */
    }

    /* Ters kartta yazının hizalaması */
    .feature-card.reverse .card-content {
        /* Yazı sağda duracağı için soldan boşluk bırakmıyoruz, sağa yaslıyoruz */
        text-align: left;
    }


/* --- YILDIZ İKONU (SENİN KODLARIN) --- */
.star-icon {
    position: absolute;
    width: 180px;
    height: auto;
    z-index: 20;
    pointer-events: none;
}

    .star-icon.position-left {
        top: -134.5px;
        left: -70px;
    }

    .star-icon.position-right {
        top: -134.5px;
        right: -70px;
    }


/*responsive ai features section*/
@media screen and (max-width: 1440px) {
    .feature-card {
        width: 90%;
        padding: 35px;
    }

    .card-image {
        right: -50px; /* 80px'den 50px'e çektik */
        width: 45%; /* Görsel alanını biraz daralttık */
    }

    .feature-card.reverse .card-image {
        left: -50px;
    }

    .card-image img {
        height: 320px; /* Yüksekliği orantılı kıstık */
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .ai-features-section {
        gap: 100px;
        padding: 60px 0;
    }

    .feature-card {
        width: 92%;
        padding: 30px;
    }

    .card-content {
        width: 60%; /* Metne biraz daha yer açtık */
    }

        .card-content h2 {
            font-size: 1.5rem; /* Başlığı tablete göre küçülttük */
        }

    /* Görseli neredeyse kutuya yapıştırıyoruz ki ekran dışına taşmasın */
    .card-image {
        right: -20px;
        width: 45%;
    }

    .feature-card.reverse .card-image {
        left: -20px;
    }

    .card-image img {
        height: 280px; /* Görseli tablete sığacak kadar küçülttük */
        width: 90%;
    }

    /* Yıldızları tablete göre küçült */
    .star-icon {
        width: 120px;
    }

        .star-icon.position-left {
            top: -90px;
            left: -40px;
        }

        .star-icon.position-right {
            top: -90px;
            right: -40px;
        }
}

/* =========================================
   MOBİL DÜZELTME (TAŞMA SORUNU GİDERİLDİ)
   ========================================= */
@media screen and (max-width: 767px) {
    .ai-features-section {
        gap: 40px !important;
        padding: 50px 0;
    }

    .feature-card {
        /* 1. KUTU MODELİNİ DÜZELT */
        box-sizing: border-box; /* Padding'i genişliğe dahil et (Çok Önemli!) */
        /* 2. GENİŞLİK AYARI */
        width: 90%; /* Ekranın %90'ını kaplasın (Kenarlardan %5 boşluk kalır) */
        margin: 0 auto; /* Kutuyu tam ortalar */
        /* Diğer Ayarlar (Öncekiyle aynı mantık) */
        flex-direction: column;
        padding: 30px 20px 0 20px;
        border-radius: 25px;
        overflow: hidden; /* Resmin taşmasını engeller */
        text-align: center;
    }

        /* Resim Ayarları (Tam Yapışan) */
        .card-image,
        .feature-card.reverse .card-image {
            position: relative;
            top: auto;
            right: auto;
            left: auto;
            transform: none;
            display: block;
            /* Kutu padding'i 20px olduğu için resmi 40px büyütüp 20px geri çekiyoruz */
            width: calc(100% + 40px);
            margin-left: -20px;
            margin-right: -20px;
            margin-bottom: -5px;
        }

            .card-image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                border-radius: 0 0 25px 25px; /* Kartın alt köşesiyle uyumlu olsun */
            }

    /* Yazı Alanı */
    .card-content {
        width: 100%;
        margin-bottom: 10px;
    }
        /* 1. Başlık (H2) */
        .card-content h2 {
            font-size: 1.35rem; /* 1.8rem'den 1.35rem'e düşürüldü */
            margin-bottom: 10px; /* Alt boşluk azaltıldı */
            line-height: 1.3; /* Başlık satır aralığı sıkılaştırıldı */
        }

        /* 2. Paragraf (P) */
        .card-content p {
            font-size: 0.85rem; /* 0.95rem'den 0.85rem'e düşürüldü */
            line-height: 1.5; /* Satır aralığı biraz daraltıldı (Mobilde okunabilirlik için ideal) */
            margin-bottom: 15px; /* Paragraf altı boşluk azaltıldı */
            color: #d1d1d1; /* Mobilde kontrastı artırmak için bir tık açılabilir */
        }

    /* Reverse kart düzeltmeleri */
    .feature-card.reverse {
        flex-direction: column;
        justify-content: flex-start;
    }

        .feature-card.reverse .card-content {
            text-align: center;
        }

    /* Yıldızları mobilde kapatmak en temizi, taşma riskini sıfırlar */
    .star-icon {
        display: none;
    }
}


@media screen and (width: 768px) {

    .ai-features-section {
        gap: 60px; /* Kartlar arası boşluk azaldı */
        padding: 50px 0;
        overflow-x: hidden; /* Taşmaları garanti engelle */
    }

    /* 1. KART YAPISI (Daha ince ve kompakt) */
    .feature-card {
        width: 88%; /* Kenarlardan biraz daha boşluk */
        padding: 2px 2px; /* İç boşlukları iyice sıktık */
        min-height: 240px; /* Kartın minimum boyunu kısalttık */
    }

    /* 2. YAZI ALANI (Puntolar Küçüldü) */
    .card-content {
        width: 52%; /* Resme yer açmak için genişliği kıstık */
    }

        .card-content h2 {
            font-size: 1.25rem;
            margin-bottom: 8px;
            line-height: 1.3;
        }

        .card-content p {
            font-size: 0.8rem; /* Paragraf küçüldü */
            line-height: 1.45;
            margin-bottom: 12px;
            color: #dcdcdc;
        }

    .feature-list {
        font-size: 0.75rem; /* Liste yazıları ufaldı */
        gap: 5px;
    }

    /* 3. GÖRSEL ALANI (Kutuya Yaklaştı ve Küçüldü) */
    .card-image {
        width: 45%;
        display: flex;
        right: 0px;
    }

        .card-image img {
            height: 280px; /* Resim yüksekliği ciddi oranda azaldı (380px -> 230px) */
            width: auto; /* En-boy oranı bozulmasın */
            max-width: 100%;
            box-shadow: 0 10px 25px rgba(0,0,0,0.4); /* Gölgeyi hafiflettik */
        }

    /* 4. TERS KART AYARLARI */
    .feature-card.reverse .card-image {
        left: 0px;
        right: auto;
    }

    /* Yıldızların konumu iyiyse dokunmuyoruz, sadece biraz küçültebiliriz */
    .star-icon {
        width: 90px; /* Yıldızları biraz küçülttük ki kalabalık etmesin */
    }

        .star-icon.position-left {
            top: -70px;
            left: -30px;
        }

        .star-icon.position-right {
            top: -70px;
            right: -30px;
        }
}

@media screen and (width: 1024px) {

    /* 1. Görseli Kutuya Yaklaştır (Sağdan Taşan) */
    .card-image {
        width: 45%; /* Genişliği biraz kıstık */
        right: -22px; /* 80px yerine 30px dışarı taşsın (Daha içeride) */
        /* Dikey ortalamayı garantiye al */
        top: 50%;
        transform: translateY(-50%);
    }

        /* 2. Görsel Boyutunu Optimize Et */
        .card-image img {
            height: 370px; /* Orijinal 380px'den biraz kısalttık */
            width: 90%;
            object-fit: cover;
        }

    /* 3. Ters Kart (Reverse) Görseli (Soldan Taşan) */
    .feature-card.reverse .card-image {
        left: -22px; /* Sol taraf için de aynısı */
        right: auto;
    }

    /* İsteğe bağlı: Yazı görselin altına girmesin diye genişliği güvene al */
    .card-content {
        width: 55%;
    }
}

@media screen and (width: 1440px) {
    .card-image {
        width: 40%;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

        .card-image img {
            height: 370px;
            width: 100%;
            object-fit: cover;
        }

    .feature-card.reverse .card-image {
        left: 0;
        right: auto;
    }
}

/* öteki videonun olduğu kısım */


/* --- Ana Bölüm --- */
.website-builder-section {
    position: relative;
    width: 100%;
    background-color: #1a1a1a;
    background-image: radial-gradient(circle at 0% 10%, rgba(76, 29, 149, 0.3) 0%, transparent 60%), radial-gradient(circle at 100% 90%, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
    padding: 100px 0;
    display: flex;
    flex-direction: column; /* ÖNEMLİ: İçerikleri alt alta dizer (Başlık üstte, video altta) */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    z-index: 1;
}

/* --- Başlık Kısmı --- */
.builder-content {
    /* position: absolute; KODUNU SİLİYORUZ. */
    /* Başlık artık akışın bir parçası olmalı */
    position: relative;
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin-bottom: 150px; /* Video ile arasındaki boşluk */
    z-index: 5;
}

    .builder-content h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

/* --- Ana Bölüm Ayarları (Gerekirse kontrol edin, z-index önemli) --- */
.website-builder-section {
    /* ... diğer özellikler aynı kalsın ... */
    position: relative;
    z-index: 1; /* Temel katman */
    /* Taşma olduğunda videonun kesilmemesi için section'da overflow: visible olabilir, 
       ancak genellikle hidden kalması daha güvenlidir. Video section içinde kalıyorsa sorun yok. */
}


/* --- VİDEO ARKASINDAKİ ŞERİT (Video Holder) --- */
.video-holder {
    width: 100%;
    height: 250px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: transparent;
    overflow: visible;
    margin-bottom: 9%;
}

    /* --- SAĞ VE SOL KENARDAKİ BEYAZ GLOW EFEKTİ --- */
    /* Arka plan şeffaf olduğu için bu beyaz ışıklar ana siyah zemin üzerinde parlayacak */
    .video-holder::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, #ffffff 0%, transparent 1%, transparent 99%, #ffffff 100%), linear-gradient(to right, #ffffff 0%, transparent 1%, transparent 99%, #ffffff 100%);
        mix-blend-mode: screen;
        filter: blur(7.5px); /* Biraz daha yumuşak bir parlama için blur arttırıldı */
        z-index: 0; /* Videonun arkasında */
        pointer-events: none;
        opacity: 0.8; /* Çok patlamaması için hafif transparanlık */
    }

    /* --- GENEL BEYAZ DOKU EFEKTİ (İsteğe bağlı, daha sade istenirse kaldırılabilir) --- */
    .video-holder::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(255, 255, 255, 0.10); /* Çok hafif beyazlık */
        mix-blend-mode: screen;
        z-index: 0;
        pointer-events: none;
    }



/* --- Video Kutusu --- */
.builder-video-box {
    width: 650px;
    max-width: 90%;
    aspect-ratio: 16/9;
    background: #000;
    box-shadow: 0 30px 60px rgba(0,0,0,0.7);
    position: relative;
    z-index: 10;
}

    .builder-video-box iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

/* --- Responsive Ayarlar --- */
/* --- RESPONSIVE AYARLAR (Bunu en alta ekle ve eskisiyle değiştir) --- */

/* 1. TABLET VE KÜÇÜK LAPTOPLAR (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .website-builder-section {
        padding: 80px 0;
    }

    .builder-content {
        margin-bottom: 120px; /* Video yukarı taştığı için payı arttırdık */
        padding: 0 30px;
    }

        .builder-content h2 {
            font-size: 1.4rem; /* Yazı boyutu ideal */
            line-height: 1.5;
        }
}

/* 2. TABLET (IPAD) VE GENİŞ TELEFONLAR (max-width: 768px) */
/* SORUNLU KISIM BURASIYDI - DÜZELTİLDİ */
@media screen and (max-width: 768px) {
    .website-builder-section {
        padding: 60px 0;
    }

    .builder-content h2 {
        font-size: 1.4rem; /* Yazı boyutu ideal */
        line-height: 1.4;
    }

    .builder-content {
        margin-bottom: 150px;
    }

    .builder-video-box {
        width: 90%;
    }

    .video-holder {
        height: 160px; /* Arkadaki şerit */
    }
}

/* 3. MOBİL TELEFONLAR (max-width: 480px) */
@media screen and (max-width: 480px) {
    .builder-content h2 {
        font-size: 1.2rem; /* Küçük ekranda devasa durmasın */
    }

    /* Mobilde de yukarı taşma payını hesaba kattık */
    .builder-content {
        margin-bottom: 60px;
    }

    .video-holder {
        height: 120px; /* Şeridi incelt */
    }

    .builder-video-box {
        width: 95%; /* Kenarlara yaklaşsın */
        box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    }
}

.transfer-page-loader {
    display: none !important;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    z-index: 99999;
}

    .transfer-page-loader.active {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

.transfer-page-spinner {
    width: 42px;
    height: 42px;
    color: #ee7633;
}
.sal{
    color:red;
}