@import url('./components/reviews-swiper.css');
@import url('./components/infrastructures.css');
@import url('./components/faq.css');

ul.title-description li{
    width: fit-content;
    margin: 0 auto;
}
.medium-title span[style="color: #fff"]{
    color: var(--light-teal) !important;
}

/*------------------------------------*\
# TOP-UP COMPANY SELECTOR
\*------------------------------------*/

.top-up-company-selector{
    background-color: var(--light-teal-1);
    max-width: 648px;
    margin: 40px auto 20px;
    border-radius: 100px;
    display: flex;
    padding: 10px;
    gap: 10px;
}
.top-up-company{
    width: 100%;
    height: 50px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    z-index: 1;
    cursor: pointer;
}
.top-up-company.comp-izibiz{
    padding-top: 5px;
    padding-bottom: 5px;
}
.top-up-company.comp-edm{
    padding-top: 7px;
    padding-bottom: 7px;
}
.top-up-company img{
    object-fit: contain;
    object-position: center;
}



/*------------------------------------*\
# TOP-UP COMPARISON
\*------------------------------------*/

.top-up-comparison-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 1024px;
    margin: 20px auto 0;
    overflow: hidden;
}
.top-up-comparison-item{
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 250ms background-color;
    cursor: pointer;
    height: fit-content;
}
.top-up-comparison-item.active{
    background-color: rgba(221, 234, 227);
}
.top-up-comparison-item .item-img img{
    display: block;
    width: 100px;
    height: 40px;
    object-fit: contain;
}
.top-up-comparison-item:has(.tag){
    padding: 10px 20px;
}
.top-up-comparison-item:has(.tag) .item-img{
    height: 70px;
    width: 120px;
}
.top-up-comparison-item .item-img .tag{
    background-color: var(--light-teal-1);
    color: var(--teal);
    font-weight: bold;
    padding: 3px 10px;
    white-space: nowrap;
    width: fit-content;
    border-radius: 5px;
    display: block;
}
.top-up-comparison-item > .item-content{
    place-content: center;
    font-size: .9rem;
}
.top-up-comparison-item > .item-content .price{
    margin-bottom: 5px;
    font-size: 1.25rem;
    text-align: center
}
.top-up-comparison-switch{
    font-size: 1.1rem;
    margin-top: 10px;
    padding-bottom: 5px;
    cursor: pointer;
}
.top-up-comparison-switch:after{
    content: "";
    width: 20px;
    height: 30px;
    top: 10px;
    position: relative;
    margin-left: 10px;
    transform: rotate(180deg);
    transform-origin: center;
    display: inline-block;
    background-image: url('../img/icons/arrow-up.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: 250ms transform ease-out;
}
.top-up-comparison-switch.active:after{
    transform: none;
}
main > .section-wrapper:first-of-type ~ hr{
    margin-bottom: 60px;
}



/*------------------------------------*\
# ROAD STEPS
\*------------------------------------*/

.road-steps-section{
    max-width: 1248px;
    margin: 0 auto;
    position: relative;
}
.road-steps-section input{
    position: absolute;
    z-index: 10;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.road-steps{
    pointer-events: none;
}
.road-steps,
.road-steps-descriptions{
    display: flex;
    gap: 10px;
    position: relative;
    overflow: visible;
}
.road-steps-section:active input{
    cursor: grabbing;
}
.road-steps .road-step-indicator{
    border-radius: 100%;
    background-color: #fff;
    border: 5px solid var(--teal);
    width: auto;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px -15px #000;
}
.road-steps .road-step{
    width: 100%;
    height: 15px;
    border-radius: 100px;
    background: var(--light-teal-1);
    position: relative;
    cursor: pointer;
    overflow: visible;
}
@property --load-percent {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@keyframes roadStepLoadForward {
    from{--load-percent: 0%}
    to{--load-percent: 100%}
}
@keyframes roadStepLoadBackwards {
    from{--load-percent: 100%}
    to{--load-percent: 0%}
}
.road-steps .road-step:has(~ .active){
    background-color: var(--teal);
}
.road-steps .road-step.active{
    --load-percent: 100%;
    background-image: linear-gradient(to right, var(--teal) var(--load-percent), var(--light-teal-1) var(--load-percent), var(--light-teal-1));
}
.road-steps .road-step.active.load-forward{
    animation: 350ms roadStepLoadForward;
}
.road-steps .road-step.active.load-backwards{
    animation: 350ms roadStepLoadBackwards;
}
/*
.road-steps .road-step.active:before{
    content: "Aldıkça Kazan";
    display: flex;
    align-items: center;
    color: var(--orange);
    background-image: url('../img/icons/plane.svg');
    width: fit-content;
    background-repeat: no-repeat;
    padding-left: 76px;
    height: 58px;
    position: absolute;
    right: 28px;
    top: 0;
    transform: translate(100%, -100%);
}*/
@keyframes roadStepAfter {
    0%{transform: scale(1);opacity: 0;}
    12.5%{transform: scale(1.25);opacity: .25;}
    47.5%{transform: scale(2.1);opacity: .75;}
    50%{transform: scale(2);opacity: 1;}
    100%{box-shadow: 0 0 10px 10px red;}
}
.road-steps .road-step:after{
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: transparent;
    border-radius: 100%;
    opacity: 1;
    transform-origin: center;
    transition: 1s all linear(0, 0.029 1.3%, 0.119 2.8%, 0.659 8.7%, 0.871 11.6%, 1.009 14.6%, 1.052 16.2%, 1.078 17.9%, 1.088 19.7%, 1.085 21.7%, 1.014 31.4%, 0.993 38%, 1.001 57.6%, 1);
    backface-visibility: hidden;
    transform-style: preserve-3d
}
.road-steps .road-step:has(~ .active):after{
    background-color: var(--teal);
}
.road-steps .road-step.active:not(.road-steps .active ~ .active):after{
    transform: scale(2);
    background-color: var(--teal);
    transition-delay: 300ms;
}
.road-steps .road-step.load-backwards:after{
    transition-duration: 250ms;
    background-color: var(--light-teal-1);
}
.road-steps-descriptions{
    margin-top: 20px;
}
.road-step-description{
    display: block;
    width: 100%;
    display: block;
    opacity: .25;
    transition: 250ms opacity;
    cursor: pointer;
    text-align: center;
}
*:has(+ .road-step-description.active),
.road-step-description.active + *{
    opacity: .4;
}
.road-step-description.active{
    opacity: 1;
}
.road-step-description > *{
    display: block;
    width: fit-content;
    transform: translateX(-50%);
}
.road-step-description span:first-child{
    color: #aaa;
}
.road-step-description .price{
    font-weight: bold;
    font-size: 1.5rem;
}
.road-step-description b{
    font-size: 1.5rem;
}
.road-step-description:last-child{
    position: absolute;
    right: 0;
    transform: translateX(100%);
    width: fit-content;
}

.paper-plane-wrapper{
    position: relative;
    width: fit-content;
    height: fit-content;
}
.paper-plane-wrapper:after{
    content: "Aldıkça Kazan";
    color: var(--orange);
    position: absolute;
    display: block;
    left: 100%;
    bottom: 50%;
    white-space: nowrap;
    transition: 250ms opacity;
}
.paper-plane-wrapper.moving:after{
    opacity: 0;
    transition: 50ms opacity;
}
.paper-plane-wrapper.backwards:after{
    transform: scaleX(-1);
}
.paper-plane-wrapper svg{
    transform: translateX(-10px);
}



/*------------------------------------*\
# PRICING PLANS
\*------------------------------------*/

.pricing-plans-section{
    max-width: 1440px;
}
.billing-period-switcher{
    margin-left: auto;
    background-color: var(--teal);
    color: var(--white);
    width: fit-content;
    border-radius: 100px;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 7px 7px;
    z-index: 3;
}
.billing-period-switcher .billing-period{
    padding: 3px 20px;
    z-index: 1;
    cursor: pointer;
    position: relative;
}
.billing-period-switcher .billing-period .save{
    position: absolute;
    background-color: var(--light-teal);
    z-index: 10;
    color: var(--teal);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 7px 10px;
    font-size: .75rem;
    border-radius: 20px;
    text-align: center;
    height: fit-content;
    pointer-events: none;
}
.billing-period-switcher .billing-period.active{
    color: var(--teal);
}

.pricing-plan-container{
    overflow: hidden;
    display: block;
    height: fit-content;
    position: relative;
    z-index: 1;
}
.pricing-plans{
    max-width: 1440px;
    margin: 0 auto;
    border-collapse: collapse;
}
.pricing-plans:nth-child(2){
    background-color: var(--white);
    position: sticky;
    top: 70px;
    z-index: 2;
    table-layout: fixed;
    box-shadow: 0 20px 30px 10px white;
}
.pricing-plans:nth-child(2) td{
    padding-top: 30px;
}
.pricing-plans thead{
    background-color: var(--white);
}
.pricing-plans td{
    width: 33.33%;
}
.invitation-anouncement{
    border: 2px dashed var(--orange);
    padding: 30px 15px;
    border-radius: 20px;
    gap: 10px;
    align-items: center;
}
.invitation-anouncement span{
    color: var(--orange);
}
.invitation-anouncement .small-title{
    font-size: 1.5rem;
    font-weight: bolder;
}
.invitation-anouncement svg{
    width: 200px;
}
.pricing-plans thead span{
    display: block;
}
.pricing-plans td{
    padding: 10px 15px;
}
.pricing-plans tr.highlight{
    background-color: #EDF5F5;
}
.pricing-plans tr.highlight td:not(:first-child){
    font-weight: bold;
}
.pricing-plans .features td{
    border-bottom: 1px solid #E4EFE8;
}
.pricing-plans .features td div{
    display: flex;
    justify-content: center;
    text-align: center;
}
.pricing-plans .features td svg{
    overflow: visible;
}
.pricing-plans .features td:first-child{
    font-size: 1.4rem;
    padding: 10px;
}
.pricing-plans .features td .disabled{
    color: gray;
}
.pricing-plans .features td .enabled{
    color: var(--orange);
}



.plan-selector-container{
    display: flex;
    gap: 20px;
    margin: 0 auto;
    margin-top: 10px;
}
.plan-selector{
    padding: 5px 15px;
    background-color: #EAF4EF;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}
.popular-tag{
    background-color: #de8868;
    width: fit-content;
    padding: 5px 15px;
    color: #fff;
    border-radius: 20px;
    position: absolute;
    top: 15px;
    left: 30px;
}
.plan-title{
    margin-top: 0;
    font-size: 1.75rem;
    font-weight: bold;
}
.plan-header > *:not(.button){
    margin-left: 10px;
    margin-right: 10px;
}
.plan-header > span:not(.plan-description){
    font-size: 1.5rem;
    display: flex;
    align-items: end;
}
.plan-header .price{
    font-weight: bold;
    line-height: 1;
}
.plan-header .price b{
    font-size: 3rem;
}
.plan-pricing-description{
    display: block;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px;
}
.pricing-plans.monthly-period .annually-period-toggle{
    width: 0;
    height: 0;
    overflow: hidden;
}
.plan-header .button{
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
}
.plan-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.pricing-plans-accordion{
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    background-color: #FBFCF4;
    margin-top: 40px;
    padding: 20px;
    font-size: 1.5rem;
    cursor: pointer;
}
.pricing-plans-accordion span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricing-plans-accordion span:after{
    content: "";
    display: block;
    margin-left: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid var(--teal);
    border-radius: 100%;
    background-image: url('../img/icons/chevron-down.svg');
    filter: var(--teal-filter);
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
    transition: 250ms transform;
}
.pricing-plans-accordion:not(.active) span:after{
    transform: rotate(180deg);
}




ul[style*="list-style: disc"] li::marker{
    font-size: 1rem !important;
}