:root {
    --primary-color: #F29100;
    --secondary-color: #4A4A4A;
    --tertiary-color: #33AA22;
    --special-color: #F5F5F5;

}

#containerDiv {
    background-color: #3d3d5d !important;
}

.container-class {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.popup-class {
    width: 45% !important;
    padding: 1% !important;
    height: 60% !important;
    border: 5px solid #f28000b3 !important;
    border-radius: 80px !important;
}


/* Global Stylings */
hr {
    border: 1px solid #80808040 !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    width: 100%;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    padding-left: 0.85rem;
    font-weight: 600;
}

sup {
    top: 1rem !important;
}

input {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: .5rem !important;
    margin-top: 0.30rem !important;
}

input::placeholder {
    font-weight: 400;
}

input[type="text"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="text"]:focus,
input[type="text"]:focus:not(:valid) {
    padding-right: 30px;
    transition: padding 54 ease-in;
}

input[type="number"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="number"]:focus,
input[type="number"]:focus:not(valid) {
    padding-right: 30px;
    transition: padding 54 ease-in;
}

input[type="email"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="email"]:focus:not(:valid) {
    padding-right: 30px;
}

input[type="tel"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="tel"]:focus:not(:valid) {
    padding-right: 30px;
}

input[type="date"] {
    color: black;
}

input[type="date"].date-error {
    border: 2px solid red !important;
}

input[type="date"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="date"]:focus:not(:valid) {
    padding-top: 10px;
}

input[type="password"] {
    color: #bcb8b8;
}

input[type="password"]:focus {
    outline: none;
    border: 3px solid var(--primary-color);
    padding: 5px;
    transition: padding .5s ease-in;
}

input[type="password"]:focus:not(:valid) {
    padding-right: 30px;
}

input[type="checkbox"] {
    -webkit-appearance: none !important;
    background-color: #fff !important;
    border: 2px solid var(--primary-color) !important;
    display: flex;
    justify-content: center;
    margin-top: 0px !important;
    align-items: center;
}

input[type="checkbox"]:checked::after {
    content: "\2713";
    width: auto;
    height: auto;
    display: flex;
    text-align: center;
    justify-content: center;
    color: var(--primary-color);
    align-items: center;
}

input[type="checkbox"].checkbox-unchecked {
    border-color: red !important;
    border-width: 2px !important;
}

.abone-form-title {
    text-align: center;
}

#formUpdate {
    display: none;
} 

#phoneValidate {
    margin: 5% 0%;
    padding: 5%;
    background: white;
    border-radius: 50px;
}

.kvkOnayDiv {
    justify-content: center;
}

#kvkkOnay {
    width: 20px;
    height: 20px;
}

#firstSmsArea {
    display: none;
}

.text-center {
    display: flex;
    justify-content: center;
    width: auto !important;
}

.ml-auto-form {
    margin-left: 0 !important;
    display: block !important;
}

.text-center {
    text-align: center;
}

/* ProgressBar */

.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 2rem 0 4rem;
}

.progressbar::before,
.progress1 {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    width: 98%;
    background-color: #3d3d5d;
    z-index: 1;
}

.progress1 {
    background-color: var(--primary-color);
    width: 0%;
    transition: 1s;
}

.progress-step {
    width: 3.1rem;
    height: 3.1rem;
    background-color: var(--primary-color);
    border: 4px solid #3d3d5d;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: white;
    transition: all 1s ease-in-out;
    cursor: pointer;
}

.progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    font-size: 1rem;
    color: var(--primary-color);
    text-align: center;
}

.progress-step-active {
    background-color: #ffffff;
    color: var(--primary-color);
    border: 4px solid var(--primary-color);
    z-index: 1;
}

.progress-step-icon {
    width: 50%;
    height: 50%;
}

/* Form Stylings */

.form {
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--primary-color);
    border-radius: 1.5rem;
    padding: 2rem 4rem;
    height: min-content !important;
    background-color: var(--special-color);
}

/* hr.gizle {
    display: none !important;
} */

.form-step {
    display: none !important;
    transform-origin: top;
    animation: animate 0.75s;
}

.abone {
    transform-origin: top;
    animation: animate 0.75s;
}

.bireysel-page {
    display: none;
    transform-origin: top;
    animation: animate 0.75s;
}

.firma-page {
    display: none;
    transform-origin: top;
    animation: animate 0.75s;
}

.tarife {
    transform-origin: top;
    animation: animate 0.75s;
}

.firma-gecis-page {
    transform-origin: top;
    animation: animate 0.75s;
}

.yeni-kurulum-page {
    transform-origin: top;
    animation: animate 0.75s;
}

.gecis-tarife-bilgilendirme {
    transform-origin: top;
    animation: animate 0.75s;
}

.gecis-tarife-bilgilendirme>hr {
    width: 100%;
    margin-top: 2% !important;
}

.yeni-tarife-bilgilendirme {
    transform-origin: top;
    animation: animate 0.75s;
}



@keyframes animate {
    from {
        transform: scale(1, 0);
        opacity: 0;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes closeAnimate {
    from {
        transform: scale(1, 1);
        opacity: 1;
    }

    to {
        transform: scale(1, 0);
        opacity: 0;
    }
}

@keyframes animate1 {
    from {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}


.form-step-active {
    display: block !important;
}

.input-group {
    margin: .5rem 0;
}

/* Loading Modal */

h2 span {
    position: relative;
    font-size: medium;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
    font-family: sans-serif;
    letter-spacing: 1px;
}

h2 span:after,
h2 span:before {
    position: absolute;
    top: 0;
    left: 0;
    content: attr(data-text);
}

h2 span:before {
    z-index: 10;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 1);
    animation: animation4 1s ease-in-out infinite;
}

@keyframes animation4 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(40px, -40px);
    }
}

h2 span:after {
    z-index: 9;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6);
    animation: animation5 1s ease-in-out infinite;
}

@keyframes animation5 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -20px);
    }
}

h2 span:nth-child(1):before,
h2 span:nth-child(1):after {
    animation-delay: 0s;
}

h2 span:nth-child(2):before,
h2 span:nth-child(2):after {
    animation-delay: 0.1s;
}

h2 span:nth-child(3):before,
h2 span:nth-child(3):after {
    animation-delay: 0.2s;
}

h2 span:nth-child(4):before,
h2 span:nth-child(4):after {
    animation-delay: 0.3s;
}

h2 span:nth-child(5):before,
h2 span:nth-child(5):after {
    animation-delay: 0.4s;
}

h2 span:nth-child(6):before,
h2 span:nth-child(6):after {
    animation-delay: 0.5s;
}

h2 span:nth-child(7):before,
h2 span:nth-child(7):after {
    animation-delay: 0.6s;
}

h2 span:nth-child(8):before,
h2 span:nth-child(8):after {
    animation-delay: 0.7s;
}

h2 span:nth-child(9):before,
h2 span:nth-child(9):after {
    animation-delay: 0.8s;
}

h2 span:nth-child(10):before,
h2 span:nth-child(10):after {
    animation-delay: 0.9s;
}

/* End */

.step-title {
    display: flex;
    justify-content: center;
    font-size: xx-large;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: black;

}

/* Button Stylings */
.btn {
    padding: 0.25rem 3rem !important;
    display: block;
    text-decoration: none;
    background-color: #FFFFFF;
    color: var(--primary-color) !important;
    text-align: center;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: 0.3s !important;
    font-weight: 600 !important;
    border: 2px solid var(--primary-color) !important;
    justify-content: center !important;
}

.btn:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--primary-color);
    background-color: #fff;
    border: none !important;
}

.btns-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    justify-items: center;
    justify-content: space-around;
}


/* Abone Pages */
.abone-group {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.abone-group-btn {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.abone-second-page {
    display: none;
}

.birey {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 3rem;
}

.birey-checkbox {
    width: 25px !important;
    height: 25px !important;
    border: 1px solid var(--primary-color);
    margin: 0px;
}

.birey-checkbox-title {
    margin: 5px 0;
    font-weight: 600;
}

.birey-checkbox-title:hover {
    font-weight: 500;
}

.tarife-label {
    width: 80%;
    margin: 2% 0;
    font-size: larger;
    font-weight: 600;
}

.tarife-group {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.tarife-group-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding: 5px 0px !important;
    width: 160px !important;
}

.tarife-btns {
    display: contents;
}

.hizmet-no-bilgi {
    color: #4A4A4A;
    background: #FF3B3B26 0% 0% no-repeat padding-box;
    border-radius: 15px;
    padding: 10px 20px;
}

.select-group {
    display: flex;
    align-items: center;
    width: 80%;
    flex-direction: column;
}

.gecis-select {
    border: 3px solid var(--primary-color);
    border-radius: 15px;
    height: 50px;
    width: 80%;
    padding-left: 2%;
    font-size: unset;
    font-weight: 400;
}

/* Bilgilendirme Sayfası */

.gecis-tarife-bilgilendirme {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.yeni-tarife-bilgilendirme {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}


.bilgilendirme-page {
    width: 40% !important;
    border: 3px solid var(--primary-color);
    border-radius: 15px;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.sonuc-boxs {
    border-bottom: 3px solid var(--primary-color);
    width: 100%;
}

.hiz-sonuc {
    color: #33AA22;
    font-weight: 700;
    font-size: xx-large;
    margin: 3% 6%;
    letter-spacing: 1px;
}

.sonuc-groups {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    padding: 2% 7%;
}

.sonuc-label {
    padding: 0;
    font-size: x-large;
    font-weight: bold;
}

.sonuc-label1 {
    padding: 0;
    font-size: large;
    font-weight: 600;
    color: var(--primary-color);
}

/* Paketler Sayfası */

.paketler {
    width: 100%;
    margin: 0 auto;
}

.paket-int {
    width: 100%;
    border-radius: 15px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.paketler-block {
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 10px 0;
    width: 40%;
    border: 4px solid #4a4a4a1c;
    border-radius: 25px;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1%;
}

.paketler-block.selected {
    border: 4px solid var(--tertiary-color) !important;
}

.paketler-block1 {
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    width: 40%;
    border: 4px solid #4a4a4a1c;
    border-radius: 25px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0% 2%;
    align-items: center;
    height: 277px;
}


.paketler-block1.selected {
    border: 4px solid var(--tertiary-color) !important;
    color: var(--primary-color);
}

.paketler-block2 {
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    width: 40%;
    border: 4px solid #4a4a4a1c;
    border-radius: 25px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 4% 1%;
    align-items: center;
    height: 277px;
}

.paketler-block5 {
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    margin: 10px 0;
    width: 40%;
    border: 4px solid #4a4a4a1c;
    border-radius: 25px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 4% 1%;
    align-items: center;
    height: 277px;
}

.paketler-block2.selected {
    border: 4px solid var(--tertiary-color) !important;
    color: var(--primary-color);
}

.paketler-block5.selected {
    border: 4px solid var(--tertiary-color) !important;
    color: var(--primary-color);
}

.paketler-block3 {
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin: 10px 0;
    width: 30%;
    border: 4px solid #4a4a4a1c;
    border-radius: 25px;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1%;
    height: 277px;
    align-items: center;
}

.paketler-block3-title {
    padding: 6%;
}

.paketler-block3.selected {
    border: 4px solid var(--tertiary-color) !important;
    color: var(--primary-color) !important;
}

.paket-block {
    padding-top: 8%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pkaet-block1>h2 {
    text-align: center;
}

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

.icon-style {
    display: block;
    background-color: white;
    color: var(--primary-color);
    font-size: x-large;
}

.paket-hiz-title {
    font-size: xx-large;
    font-weight: 700;
    color: var(--primary-color);
}


.paket-hiz-ozellik {
    font-size: large;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
    padding-left: 2px !important;
}

.model-left {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.model-isim {
    width: 70%;
    font-size: x-large;
    font-weight: 700;
}

.model-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 2px solid #00000024;
    width: 100%;
    padding-top: 3%;
}

.model-list-fiyat {
    font-size: 62px;
    font-weight: 600;
}

.model-list-fiyat-tur {
    font-size: 20px;
    font-weight: 500;
}

.model-right {
    width: 30%;
}

.modem-resmi {
    width: 100%;
    height: 100%;
}

.ip-yok {
    display: flex;
    justify-content: center;
}

.ip-var {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0% 2%;
}

.ip-fiyat {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-align: center;
    border-top: 2px solid #00000024;
    width: 100%;
    color: #4A4A4A;
    padding-top: 3%;
    font-size: 50px;
    justify-content: center
}

.ip-fiyat>svg {
    margin: 0px;
}

.ip-fiyat>label {
    font-size: large;
    font-weight: 700;
    margin: 0px;
}

.ip-fiyat-tur {
    font-size: 20px;
    font-weight: 500;
}

.abone-bilgi-list {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin: 3% 0;
}

.abone-bilgi {
    display: flex;
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    width: 40%;
    color: var(--secondary-color);
    font-size: larger;
    font-weight: 400;
    padding: 5px 15px;
}

.ozet-adress {
    display: flex;
    justify-content: space-between;
    margin: 1% 0px;
}

.ozet-adress-btn {
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--primary-color);
    color: white;
    font-size: large;
    font-weight: 500;
    padding: 0.5% 2%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.bi-pencil-square {
    margin-left: 10px;
}

.ozet-adress-tittle {
    padding: 1% 0px 2% 0px;
    font-size: larger;
    font-weight: 400;
    padding-left: 0px;
}

.ozet-paket {
    display: flex;
    justify-content: space-between;
}

.ozet-paket-buton {
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--primary-color);
    color: white;
    font-size: large;
    font-weight: 500;
    padding: 0.5% 2%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.ozet-paket-aciklama {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2% 0px 3% 0px;
    font-size: larger;
    font-weight: 400;
}

.ozet-paket-fiyat {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    border: 4px solid #399CFF;
    border-radius: 20px;
    font-size: larger;
    font-weight: 600;
}

.ozet-paket-fiyat-detay {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px 0px 15px;
}

.ozet-gizle {
    display: none;
}

.ozet-goster {
    display: flex;
}

.yonlendirme-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
}

.paketler-guvenlik {
    font-size: x-large;
    font-weight: 600;
    text-align: center;
}

.paketler-guvenlik1 {
    font-size: x-large;
    font-weight: 600;
    padding: 2%;
}

.guvenlik-imgs {
    position: unset;
    width: 50%;
    height: 50%;
    opacity: 0.70;
}

.goster {
    display: none;
}

.paket-title {
    display: none;
}

.paket-hr {
    display: none;
}

.sabit-hat {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100% !important;
    padding-left: 6%;
}

.sabit-hat-checkbox {
    height: 28px !important;
    width: 28px !important;
    margin: 0 !important;
}

.sabit-hat-title {
    margin: 0 !important;
    font-size: medium;
    font-weight: 500;
}

.sabit-hat-numara {
    width: 50%;
    margin-top: 0 !important;
    margin-left: 3%;
    display: none;
}

.sabit-checkbox-checked {
    display: block;
    transform-origin: center;
    animation: animate 0.75s;

}

.sabit-checkbox-close {
    transform-origin: center;
    animation: closeAnimate 0.75s;
}

.form-update {
    width: 95%;
}

.svg-style {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
    background: none;
}

.svg-money {
    width: 30px;
    height: 30px;
    color: var(--primary-color);
    background: none;
    margin-right: 10px;
}

.paket-aciklama-fiyat {
    display: flex;
    justify-content: center;
    border-top: 2px solid #00000024;
    margin-top: 4%;
    padding-top: 3%;
}

.pencil-svg {
    width: 20px;
    height: 20px;
    color: white;
    padding-left: 1%;
}

.paket-modem-fiyat {
    display: block;
    font-size: large;
    font-weight: 700;
    color: #4A4A4A;
    margin-bottom: 0px !important;
    padding: 0px !important;
}

.smsAreaClass {
    z-index: 1;
    position: absolute;
    background: #b3b3b3c7;
    width: 100%;
    height: 91%;
    top: 3.7%;
    left: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 4px solid var(--primary-color);
    border-radius: 1%;
}

.smsAreaDesign {
    width: 40%;
    height: 30%;
    background: white;
    border: 4px solid #c8c6c480;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.smsAreaDesign>h5 {
    text-align: center;
    margin-top: 2%;
}

.model-text {
    width: 100%;
}

.model-text>h3 {
    text-align: center;
}


.smsAreaInput {
    height: 20%;
    width: 62%;
    padding: 10px;
    margin-top: 4% !important;
}

.smsAreaSvg {
    width: 20%;
    height: 20%;
    color: #f8a400
}

.smsAreaButtons {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    height: 30%;
    width: 60%;
}

.smsAreaButton {
    height: 55%;
    width: 35%;
    margin-top: 2%;
    background: var(--primary-color);
    color: white !important;
    border: 2px solid rgb(82, 78, 78);
    border-radius: 10px;
    text-align: center;
    font-size: x-large;
    font-weight: 600;
    cursor: pointer;
}

.smsAreaErrorButton {
    height: 55%;
    width: 35%;
    margin-top: 2%;
    background: #ff0000;
    color: white !important;
    border: 2px solid rgb(82, 78, 78);
    border-radius: 10px;
    text-align: center;
    font-size: x-large;
    font-weight: 600;
    cursor: pointer;
}

.swalfire-icons {
    font-size: 1.5rem;
    color: white;
}

#ozet-buton-next {
    display: block;
}

.smsAreaChecked {
    display: flex;
}

.ozet-paket-title>ul>li:nth-child(1) {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #47474746;
    font-weight: bold;
}

.finish {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1%;
}

.finish>h4 {
    font-size: 1.5rem !important;
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-decoration-style: dotted;
    color: black;
}

.finish>h6 {
    font-size: 1.2rem !important;
    color: var(--secondary-color);
}

.finish>h6>strong {
    color: dark !important;
}

.finish-options {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    margin-top: 5%;
}

.finish-options-container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.digital-confirm {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    border: 2px solid #ff9900b5;
    border-radius: 22px;
    padding: 2%;
    width: 31%;
    box-shadow: 0px 0px 10px 6px var(--primary-color);
}

.digital-confirm-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 3%;
    height: 20%;
}

.digital-confirm-title {
    font-size: xx-large;
    font-weight: 600;
}

.digital-confirm-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.digital-confirm-video {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
    width: 50%;
    height: auto;
}

.dijital-imza-youtube {
    width: 100%;
    height: 100%;
    border: 2px solid #0000002e;
    border-radius: 22px;
}

.digital-confirm-description {
    margin: 1% 0px;
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    justify-content: center;
    height: auto;
}

.digital-confirm-video>iframe {
    border: 2px solid rgb(255, 255, 255);
    border-radius: 24px;
    min-height: 300px;
}

.digital-confirm-footer {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 5%;
    height: 10%;
}

.google-play {
    text-align: center;
}

.digital-img {
    width: 5%;
}

.e-devlet {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    height: auto;
    border: 2px solid #595957cf;
    border-radius: 22px;
    padding: 2%;
    width: 31%;
    box-shadow: 0px 0px 10px 6px #484644;
    position: relative;

}

.e-devlet-show {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.e-devlet-confirm-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 5%;
    height: 20%;
}

.e-devlet-title {
    font-size: xx-large;
    font-weight: 600;
}

.e-devlet-confirm-body {}

.e-devlet-confirm-footer {
    width: 100%;
    height: 40%;
}

.e-devlet-img {
    width: 5%;
}


#formText {
    text-decoration: none;
    font-weight: 700;
    font-size: larger;
    color: var(--primary-color);
}


.finish-options>.btns-group {
    display: flex;
}

.ozet-checkboxs {
    display: flex;
    margin: 2% 0px;
}

.ozet-checkbox-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ozet-checkboxs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.ozet-checkbox {
    width: 25px !important;
    height: 25px !important;
    border: 1px solid var(--primary-color);
    margin: 0px;
}

.ozet-checkbox-title {
    margin: 5px 0;
    font-weight: 600;
    font-size: large;
}

.checkbox-link {
    color: #597ce7;
    font-weight: 600;
}

.inputs-group-gecis {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gecis-ozel-input {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    max-width: 50%;
    flex-wrap: nowrap;
    align-items: center;
}

.service-provider {
    max-width: 100%;
    padding: 0.25rem 1rem;
    margin-top: 0.25rem;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
}

.paket-populer {
    display: flex;
    flex-direction: row-reverse;
    margin-top: -2.75%;
    margin-right: -2.75%;
}

.paket-populer>span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: red;
    color: #fff;
    border-bottom: 4px solid var(--primary-color);
    border-top-right-radius: 21px;
    border-bottom-left-radius: 26px;
    font-weight: 600;
    padding: 2% 3%;
}

.paket-populer>span>svg {
    width: 12%;
    height: auto;
    margin-left: 2%;
    margin-bottom: 2%;
}

#Capa_1 {
    width: 40px;
    height: auto;
    margin-left: 2%;
    margin-bottom: 0.5rem;
}

#paket1-1>.paket-aciklama-fiyat {
    position: relative;
    bottom: -5%;
}

.rows {
    display: flex;
}

.rows .cols {
    flex: 1;
}

.rows .cols:last-child {
    margin-left: 1em;
}

/* Accordion styles */
.tabs {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

.tab {
    width: 100%;
    color: white;
    overflow: hidden;
}

.tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: #3d3d5d;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
}

.tab-label:hover {
    background: #1a252f;
}

.tab-label::after {
    content: "❯";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
}

.tab-content {
    max-height: 0;
    padding: 0 1em;
    color: #2c3e50;
    background: white;
    transition: all 0.35s;
}

.tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #2c3e50;
    cursor: pointer;
}

.tab-close:hover {
    background: #1a252f;
}

.acordion-img {
    width: 25px;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tab>input[type="checkbox"] {
    display: none;
}

input:checked+.tab-label {
    background: var(--primary-color);
}

input:checked+.tab-label::after {
    transform: rotate(90deg);
}

input:checked~.tab-content {
    max-height: 100vh;
    padding: 1em;
}

.tc-modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    z-index: 1;
    background: #615f5f73;
    position: absolute;
    height: 100%;
    width: 100%;

}

.tc-card {
    padding: 5%;
    border: 5px solid #31314e;
    border-radius: 20px;
    background: white;
}

.input-field {
    margin-bottom: 2%;
}

#document_type {
    border: white;
    background-color: var(--primary-color);
    padding: 1%;
    border-radius: 10px;
    color: white;
    font-size: medium;
    font-weight: 700;
}

#document_type>optgroup {
    background-color: white;
    color: var(--primary-color);
    font-size: medium;
    font-weight: 400;
    border-radius: 2px solid var(--primary-color);
}

.dropzone.dz-clickable {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-tc {
    width: max-content;
}

.btn-e-devlet {
    padding: 0px !important;
    border: none !important;
}

.btn-e-devlet>img {
    width: 150px;
    border: 2px solid black;
    border-radius: 12px;
}

.e-devlet-btn-groups {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
}

.e-devlet-btn-kimlik {
    height: 50px;
}

.e-devlet-btn-kimlik>a {
    display: flex;
    align-items: center;
    font-size: x-large;
    height: 100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#kimlikForm {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.kimlik-on {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kimlik-arka {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-footer {
    display: flex;
    justify-content: space-around;
}

.adress-baslik {
    display: none;
}

.paket-block1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paket-modem-aciklama {
    text-align: center;
    font-size: small;
}

/* Responsive Tasarım */

/* Dizüstü Modu */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {

    h2 {
        font-size: 1.5rem !important;
    }

    .gizle {
        display: flex;
    }

    .form {
        width: 95%;
        background-color: var(--special-color);
        padding: 2rem;
    }

    .paketler-block {
        width: 46%;
    }

    .paketler-block1 {
        width: 46%;
        height: 201px;
    }

    .paketler-block2 {
        width: 46%;
        height: 201px;
    }

    .paketler-block5 {
        width: 46%;
        height: 201px;
    }

    .paketler-block3 {
        height: 201px;
    }

    .paket-block {
        padding: 1% 4%;
    }

    .select-group {
        margin-top: 2%;
        width: 100%;
    }

    .tarife-label {
        width: 100%;
        font-size: inherit;
        font-weight: 500;
    }

    .gecis-select {
        width: 100%;
    }

    .icon-style {
        font-size: larger;
    }

    .paket-populer>span {
        font-size: small;
    }

    .paket-hiz-title {
        font-size: larger;
    }

    .paket-hiz-ozellik {
        font-size: initial;
    }

    #Capa_1 {
        width: 30px;
    }

    #paket1-1>.paket-aciklama-fiyat {
        position: relative;
        bottom: -6%;
    }

    .model-isim {
        font-size: large;
        font-weight: revert;
    }

    .model-list {
        width: 100%;
        padding-top: 3%;
        margin-top: 10%;
        font-size: x-large;
        font-weight: 700;
    }

    .modem-resmi {
        width: 110%;
        height: 110%;
    }

    .model-list-fiyat-tur {
        font-size: initial;
        font-weight: 700;
    }

    .ip-fiyat {
        font-size: x-large;
        font-weight: 700;
    }

    .ip-fiyat-tur {
        font-size: revert;
        font-weight: inherit;
    }

    .ozet-paket-fiyat {
        width: 50%;
        font-size: small;
    }

    .paketler-guvenlik {
        font-size: 1.5rem;
        text-align: center;
    }

    .paketler-guvenlik1 {
        font-size: revert;
    }

    .guvenlik-imgs {
        width: 40%;
        height: 40%;
    }

    .goster {
        display: none;
    }

    .paket-title {
        display: none;
    }

    .paket-hr {
        display: none;
    }

    .popup-class {
        width: 69% !important;
        height: 62% !important;
    }


    .bilgilendirme-page {
        width: 65% !important;
    }

    .step-title {
        margin-top: 2%
    }

    #kullanici-adress {
        font-size: medium;
        font-weight: 400;
    }

    .ozet-paket-title {
        width: 40%;
        font-size: initial;
    }


    .smsAreaDesign {
        width: 60%;
        height: 40%;
    }

    .smsAreaDesign>svg {
        width: 13%;
        margin-top: 3%;
    }

    .smsAreaInput {
        height: 13%;
    }

    .smsAreaTitle {
        font-size: medium;
        margin-top: 2%;
    }

    .smsAreaButton {
        height: 40%;
        width: 40%;
    }

    .smsAreaErrorButton {
        height: 40%;
        width: 40%;
    }


    .digital-confirm-head {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .digital-confirm-title {
        margin-bottom: 15%;
        font-size: x-large;
    }

    .digital-img {
        width: 5%;
    }

    .digital-confirm-video {
        margin-top: 5%;
    }

    .e-devlet-confirm-head {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .e-devlet-title {
        text-align: center;
        font-size: x-large;
    }

    .e-devlet-img {
        width: 5%;
    }

    .e-devlet-tc>label {
        font-size: smaller;
    }

    .e-devlet-tc>input {
        padding: 3px;
    }

    .e-devlet-password>label {
        font-size: smaller;
        margin-top: 2%;
    }

    .e-devlet-password>input {
        padding: 3px;
    }

    .e-devlet-confirm-body>p {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }

    .e-devlet-confirm-footer {
        font-size: x-small;
    }

    .e-devlet-description {
        font-size: small;
    }

    .e-devlet-btn-groups {
        flex-direction: column;
    }

    .btn-kimlik {
        font-size: large;
    }

    .btn-e-devlet {
        margin-top: 10%;
    }

    .digital-confirm-description>p {
        font-size: small;
    }

    .paket-modem-aciklama {
        text-align: center;
        font-size: medium;
    }
}


/* Tablet Modu */

@media only screen and (min-width: 481px) and (max-width: 1024px) {

    /* Global Stylings */
    h2 {
        font-size: large !important;
    }

    .form {
        width: 100%;
        padding: 2rem 1.3rem;
        background-color: var(--special-color);
    }

    .step-title {
        font-size: x-larger !important;
        text-align: center;
    }

    /* Button Stylings */
    .btn {
        border: 2px solid var(--primary-color) !important;
    }

    .btns-group {
        margin: 4% 0 !important;
    }

    .select-group {
        padding: 2% 1% !important;
    }

    .bilgilendirme-page {
        width: 80% !important;
    }

    .hiz-sonuc {
        font-weight: 600;
        letter-spacing: 2px;
    }

    .sonuc-groups {
        width: 100%;
        padding: 2% 5%;
    }

    .paketler-block {
        width: 46%;
    }

    .paketler-block1 {
        width: 46%;
        height: 210px;
    }

    .paketler-block2 {
        text-align: center;
        width: 46%;
        height: 210px;
    }

    .paketler-block5 {
        text-align: center;
        width: 46%;
        height: 210px;
    }

    .paketler-block3 {
        height: inherit;
        text-align: center;
    }

    .kullanici-adress {
        font-size: initial;
        font-weight: 500;
    }

    .paket-block {
        padding: 2% 1%;
    }

    .icon-style {
        font-size: large;
    }

    .paket-hiz-title {
        font-size: smaller;
    }

    #Capa_1 {
        width: 20px;
    }

    .paket-hiz-ozellik {
        font-size: revert;
        padding-left: 2% !important;
    }

    .model-isim {
        font-size: larger;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .model-list {
        font-size: larger;
    }

    .model-list-fiyat-tur {
        font-size: small;
    }

    .ip-fiyat {
        font-size: inherit;
    }

    .ip-fiyat-tur {
        font-size: small;
    }

    .abone-bilgi {
        border: 2px solid var(--secondary-color);
        width: 46%;
    }

    .paketler-guvenlik {
        font-size: inherit !important;
        font-weight: 700;
        text-align: center;
    }

    .paketler-guvenlik1 {
        font-size: larger !important;
        font-weight: 500 !important;
        padding: 1%;
    }

    .guvenlik-imgs {
        position: unset;
        width: 35%;
        height: 35%;
        opacity: 0.70;
    }

    .ozet-paket-title {
        font-size: smaller;
        font-weight: 400;
    }

    .ozet-paket-title>ul {
        padding: 0px 2% !important;
    }

    .goster {
        display: none;
    }

    .paket-title {
        display: none;
    }

    .paket-hr {
        display: none;
    }

    .popup-class {
        width: 80% !important;
        font-size: x-small !important;
    }

    .paket-block-modem {
        text-align: center;
    }

    .ozet-paket-fiyat {
        width: 75%;
        font-size: small;
    }

    .kullanici-adress {
        font-size: small;
        font-weight: 500;
    }

    .smsAreaDesign {
        width: 65%;
        height: 30%;
    }


    .smsAreaInput {
        height: auto;
        width: 75%;
    }

    .smsAreaButtons {
        width: 75%;
        height: auto;
        margin-top: 3%;
    }

    .smsAreaButton {
        height: 90%;
        width: 40%;
        font-size: larger;
        text-align: center;
    }

    .smsAreaErrorButton {
        height: 90%;
        width: 40%;
        font-size: larger;
        text-align: center;
    }

    #kullanici-adress {
        font-size: initial !important;
        font-weight: 400 !important;
    }


    #shadow {
        margin-top: 1.5% !important;
    }

    .finish-options-container {
        flex-direction: column;
    }

    .digital-confirm {
        width: 100%;
        box-shadow: 0px 0px 20px 10px var(--primary-color);
    }

    .e-devlet {
        width: 100%;
        margin-top: 10%;
        box-shadow: 0px 0px 20px 10px #484644;
    }

    .paket-populer {
        flex-direction: none;
        margin-left: -2.75%;
    }

    .paket-populer>span {
        font-size: small;
        width: 100%;
        justify-content: center;
        text-align: center;
        border-top-left-radius: 21px;
        border-bottom-left-radius: 17px;
        border-bottom-right-radius: 17px;
    }

    #paket1-1>.paket-aciklama-fiyat {
        bottom: 0px;
    }

    .finish>h6 {
        font-size: 1rem !important;
    }

    .e-devlet-img {
        width: 10%;
    }

    .digital-img {
        width: 10%;
    }

    .digital-confirm-body {
        flex-direction: column;
    }

    .digital-confirm-video {
        width: 100%;
    }

    .digital-confirm-description {
        width: 100%;
        padding: 0px;
        margin-top: 5%;
    }

    .btn-kimlik {
        font-size: small;
    }

    .btn-e-devlet {
        border: none !important;
    }

    .btn-e-devlet>img {
        box-shadow: 0 0 10px 0 #750000;
    }

    .paket-modem-aciklama {
        text-align: center;
        font-size: x-small;
    }
}

/* Telefon Modu */

@media only screen and (max-width: 480px) {

    input {
        border: 2px solid #E5E5E5;
        border-radius: 25px !important;
        color: black;
        font-weight: 600;
        font-size: medium;
        padding: 2% 0px;
        padding-left: 6%;
    }

    input[type="date"] {
        padding-right: 5%;
    }

    select:focus {
        background-color: white;
        color: var(--secondary-color);
    }

    .gizle {
        display: none !important;
    }

    .goster {
        display: block !important;
    }

    .tarife-label {
        display: none;
    }

    .text-center {
        display: none;
    }

    .progressbar {
        margin: 2rem 0 0.25rem !important;
    }

    .progress-step::after {
        content: none !important;
    }

    .form {
        width: 100%;
        padding: 1% 5%;
        background-color: var(--special-color);
        margin-top: 0px !important;
    }


    .abone {
        margin-top: 0 !important;
        width: 100%;
        padding: 80% 0px;
    }

    .step-title {
        margin-bottom: 0px;
    }

    .abone-group {
        border: 2px solid var(--special-color);
        background-color: #FFFFFF;
        padding: 15% 8%;
        border-radius: 25px;
        margin-top: 3% !important;
    }

    .input-group {
        max-width: 100% !important;
        flex: none !important;
        padding: 9px;
        margin: 0px;
    }

    .mobile-firma-title-gizle {
        display: none;
    }

    .mobile-firma-title-goster {
        display: flex;
        font-size: revert;
        color: #4A4A4A;

    }

    .mobile-gecis-title-gizle {
        display: none;
    }

    .mobile-gecis-title-goster {
        display: flex;
        font-size: revert;
        color: #4A4A4A;

    }

    .firma-page {
        display: block;
        margin-left: -10px;
        margin-right: -10px;
        padding: 3% 2%;
    }

    .mobile-firma {
        margin: 0 !important;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
        width: 100%;
        background: #FFFFFF;
    }

    .mobile-gecis {
        margin: 0 !important;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
        width: 100%;
        background: #FFFFFF;
    }

    .birey {
        margin-top: 5% !important;
    }

    .birey-checkbox {
        width: 20px !important;
        height: 20px !important;
    }

    .birey-checkbox-title {
        font-weight: 400;
    }

    .birey-footer-aciklama {
        font-size: small;
        font-weight: 300;

    }

    .btns-abonelik-mobile {
        margin-top: 0px !important;
    }

    .birey-footer {
        padding: 0px 3%;
    }

    .btns-group {
        margin-bottom: 10%;
    }

    .step-title {
        font-size: revert;
        font-weight: 400;
        text-align: center;
    }

    .hizmet-no-bilgi {
        font-size: small;
        font-weight: 400;
    }

    .mobile-abonelik {
        display: flex;
        flex-direction: column;
    }

    .select-group {
        display: flex;
        width: 100%;
        max-width: 100% !important;
    }

    .gecis-select {
        width: 100%;
        margin-top: 5%;
        color: #E5E5E5;
        font-size: large;
        padding-left: 4%;
        font-weight: 500;
        border: 2px solid #E5E5E5;
    }

    .altyapı-sorgu {
        margin-top: 15%;
        font-size: revert;
        font-weight: 600;
    }

    .bilgilendirme-page {
        width: 80% !important;
        border: 2px solid #E5E5E5;
        background-color: white;
    }

    .sonuc-boxs {
        border: none;
    }

    .sonuc-groups {
        border-bottom: 1px solid #E5E5E5;
        padding-bottom: 1px;
    }

    .sonuc-groups:last-child {
        border-bottom: none;
        padding-bottom: 1px;
    }


    .sonuc-label {
        font-weight: 500;
        font-size: medium;
    }

    .yeni-tarife-bilgilendirme {
        margin-bottom: 50%;
    }

    .gecis-tarife-bilgilendirme {
        margin-bottom: 50%
    }

    .paketler-block {
        padding: 5px;
        background-color: white;
        width: 48%;
    }

    .paket-block {
        width: 100%;
    }

    .paket-hiz-title {
        font-size: x-small;
        font-weight: 500;
    }

    #Capa_1 {
        width: 20px;
    }

    .paket-aciklama {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .paket-aciklama-fiyat>svg {
        width: 15px;
    }

    .icon-style {
        font-size: inherit;
        background: none;
    }

    .paket-hiz-ozellik {
        font-size: xx-small;
        padding-left: 4px;
        font-weight: 700;
    }

    .paket-hiz-fiyat {
        font-size: small;
    }

    .paketler-block1 {
        height: 167px;
        width: 48%;
    }

    .paket-block-modem {
        text-align: center;
        font-size: 15px !important;
    }

    .paket-modem-fiyat {
        font-size: small;
    }

    .paket-sabit-ip-fiyat {
        font-size: large;
    }

    .svg-style {
        width: 20px;
        height: 20px;
    }

    .modem-left {
        width: 65%;
    }

    .model-isim {
        font-size: 12px;
        font-weight: 600;
    }

    .model-list {
        font-weight: 500;
        font-size: 15px;
    }

    .model-list-fiyat-tur {
        top: 12px !important;
        font-size: 12px;
        font-weight: 500;
    }

    .paketler-block2 {
        height: 167px;
        width: 48%;
    }

    .paketler-block5 {
        height: 167px;
        width: 48%;
    }

    .paket-sabit-notip {
        font-size: 15px !important;
        text-align: center;
    }


    .paket-sabit-ip {
        font-size: 15px;
        font-weight: 500;
        text-align: center;
    }

    .ip-fiyat {
        font-size: 30px;
        font-weight: 700;
    }

    .ip-fiyat-tur {
        top: 25px !important;
        font-weight: 700;
        font-size: 18px;
    }

    .paketler-block3 {
        height: 100px;
    }

    .paketler-block3-title {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .paketler-guvenlik {
        margin: 0px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
    }

    .guvenlik-imgs {
        display: none;
    }

    .paket-guvenlik {
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        margin: 0px;
    }

    .paket-title {
        display: block;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        margin: 2% 0px;
    }

    .paket-int {
        flex-wrap: wrap;
    }

    .paket-hr {
        display: block;
        width: 100%;
    }

    .ozet-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
    }

    .ozet-form-baslik {
        text-align: center;
    }

    .abone-bilgi-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .abone-bilgi {
        width: 100%;
        border: 1px solid #E5E5E5;
        margin: 2% 0px;
        color: black;
        padding: 1% 5%;
        font-size: initial;
        font-weight: 400;
        background-color: white;
    }

    .ozet-form-adress {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .ozet-adress {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ozet-adress-btn {
        display: none;
        align-items: center;
        font-size: smaller;
        font-weight: 500;
        margin-bottom: 5%;
    }

    .ozet-adress-tittle {
        font-size: small;
        font-weight: 400;
    }

    .ozet-form-paket {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 4%;
    }

    .ozet-paket-buton {
        display: none;
        font-size: smaller;
        font-weight: 500;
        padding: 1px 3%;
        float: right;
        margin-bottom: 3%;
    }

    .ozet-paket-aciklama {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        align-items: stretch;
    }

    .ozet-paket-title>ul {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding-left: 4%;
        align-content: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .ozet-paket-title>ul>li {
        width: 48%;
        font-size: 14px;
        font-weight: 500;
    }

    .ozet-paket-fiyat {
        border: 2px solid #399cff;
        border-radius: 14px;
        background: white;
    }

    .ozet-paket-fiyat-detay {
        font-size: 18px;
        padding: 0px 2%;
        font-weight: 500;
        color: #4A4A4A;
    }

    .ozet-paket-fiyat-detay>label {
        padding: 0px;
    }

    .tarife {
        display: flex;
        flex-direction: column;
        margin: 50% 0px !important;
        padding: 4%;
        background: white;
        border: 2px solid #E5E5E5;
        border-radius: 20px;
    }

    .mobile-s-t {
        padding: 3% 0px;
        font-size: large;
        font-weight: 500;
    }

    .bireysel-page {
        margin-top: 7%;
    }

    .mobile-ozet-page {
        margin-top: 4%;
    }

    .ozet-adress>h5 {
        font-size: large;
        font-weight: 400;
    }

    .ozet-adress-tittle>label {
        text-align: center;
        width: 100%;
        padding-left: 0px;
    }

    .ozet-paket>h5 {
        font-weight: 400;
        font-size: large;
    }

    .ozet-paket-title>ul>li {
        color: #4A4A4A;
        font-weight: 400;
        font-size: small;
    }

    .mobil-gizle {
        display: none;
    }

    .ozet-paket-title>ul>li:nth-child(1) {
        width: 100%;
        margin-bottom: 4%;
        font-size: unset;
        font-weight: 600;
        border-width: medium;
        border-color: var(--primary-color);
    }

    .ozet-guvenlik-profil {
        text-align: center;
        font-weight: 600;
        margin: 3%;
        font-size: larger;
    }

    .ozet-paket-fiyat-genel {
        padding-top: 2%;
    }

    .popup-class {
        width: 100% !important;
        font-size: xx-small !important;
        height: 60% !important;
        border-radius: 40px !important;
    }

    input[type="checkbox"]:checked::after {
        height: auto !important;
    }

    .sabit-hat {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0px 15px;
    }

    .sabit-hat-checkbox {
        margin-bottom: 10px !important;
    }

    .sabit-hat-title {
        margin-bottom: 10px !important;
    }

    .sabit-checkbox-checked {
        width: 100%;
        margin: 5px 0px;
    }

    #box {
        left: 40% !important;
    }

    #shadow {
        left: 40% !important;
    }

    .smsAreaButtons {
        width: 81%;
    }

    .smsAreaInput {
        border: 2px solid var(--primary-color);
        background-color: white;
        color: #4A4A4A;
        font-size: larger;
        width: 81%;
    }

    .smsAreaDesign {
        width: inherit;
    }

    #ozet-paket-buton-mobil {
        display: flex !important;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        color: white;
        border: 2px solid #5e5e5e;
        padding: 0px;
        width: 40px;
        height: 40px;
        float: right;
        margin-bottom: 2%;
        cursor: pointer;
    }

    .mobile-ozet-page>h5 {
        font-weight: 600 !important;
        font-size: larger !important;
    }

    #adress-duzenle-buton-mobil {
        display: flex !important;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        border: 2px solid #5e5e5e;
        padding: 0px;
        width: 40px;
        height: 40px;
        float: right;
        margin-bottom: 2%;
        cursor: pointer;
    }

    .pencil-svg {
        padding: 5% !important;
        margin: 0px;
    }

    #hizmetNumarasi {
        border: 2px solid var(--primary-color);
        color: black;
        background: white;
        font-weight: 400;
        font-size: larger;
    }

    .finish-options-container {
        flex-direction: column;
    }

    .digital-confirm {
        width: 100%;
    }

    .e-devlet {
        width: 100%;
        margin-top: 10%;
    }

    .digital-confirm-title {
        font-size: x-large;
    }

    .e-devlet-title {
        font-size: x-large;
    }

    .e-devlet-confirm-body-butons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .e-devlet-confirm-footer>p {
        margin-top: 2%;
    }


    .paket-populer {
        margin-left: -3.75%;
        margin-top: -4%;
        margin-right: -3.75%;
    }

    .paket-populer>span {
        font-size: xx-small;
        width: 100%;
        justify-content: center;
        text-align: center;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    #paket1-1>.paket-aciklama-fiyat {
        position: relative;
        bottom: -7%;
    }

    .model-list>svg {
        width: 15px;
    }

    #internetVar {
        font-size: x-small;
        width: min-content !important;
        padding: 7px !important;
    }

    #internetYok {
        font-size: x-small;
        width: min-content !important;
        padding: 7px !important;
    }

    .cols {
        margin-left: 0px;
    }

    .e-devle-img {
        width: 10%;
    }

    .digital-img {
        width: 10%;
    }

    .digital-confirm-body {
        flex-direction: column;
    }

    .digital-confirm-video {
        width: 100%;
    }

    .idigital-confirm-video>iframe {
        min-height: 163px;
    }

    .digital-confirm-description {
        margin-top: 5%;
        width: 100%;
        padding: 0px;
    }

    .digital-confirm-description>p {
        font-size: x-small;
    }

    .e-devlet-btn-kimlik {
        height: 30px;
    }

    .btn-kimlik {
        font-size: x-small !important;
    }

    .btn-e-devlet {
        border: none !important;
    }

    .btn-e-devlet>img {
        box-shadow: 0 0 10px 0 #750000;
        height: 30px;
        width: 100px;
    }

    .google-play>a>img {
        width: 35%
    }

    #chck2>label {
        text-align: center;
    }

    .model-text>h2 {
        font-size: 15px !important;
    }

    .cols {
        margin-left: 0px;
    }

    .finish>h6 {
        font-size: small !important;
    }

    .text-center1 {
        display: flex;
    }

    .smsAreaButton {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .smsAreaErrorButton {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab-label {
        font-size: small !important;
    }

    .inputs-group-gecis {
        flex-direction: column;
    }

    .adress-baslik {
        margin: 5% 0px;
        display: flex;
        border-top: 2px solid #80808040;
        justify-content: center;
    }

    .adress-baslik>h6 {
        margin-top: 5%;
        font-size: larger;
        font-weight: 500;
    }

    .hr-gizle {
        display: none !important;
    }

    .sabit-hat-numara {
        width: 100%;
    }

    #kvkkOnay {
        width: 34px;
        height: 20px;
    }

    .paket-modem-aciklama {
        text-align: center;
        font-size: xx-small;
    }

    .btn {
        padding: 0.25rem 2rem !important;
    }
}


.error-message {
    display: inline-block;
    margin: 5px;
    font-size: 12px;
    color: red;
}



/* Base Styles */
.swiper-container {
    position: relative;
    overflow: hidden;
}

.swiper-wrapper {
    padding-left: 6.5vw;
    gap: 5.4vw;
}

.swiper-slide {
    width: 40% !important;
}

.swiper-container-wrapper {
    position: relative;
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-prev svg,
.swiper-button-next svg {
    width: 40px;
    height: 40px;
    fill: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.swiper-button-next {
    right: -2vw !important;
}

.swiper-button-prev {
    left: -2vw !important;
}

.custom-prev,
.custom-next {
    background-color: transparent;
    color: orange !important;
    font-size: 24px;
}

.custom-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.paket-int h2,
.paket-int p,
.payment-form label,
.payment-form input::placeholder {
    text-align: center;
}

.swiper-container .swiper-pagination.swiper-pagination {
    bottom: 0px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

.swiper-container .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: #888 !important;
    opacity: 0.9 !important;
    border-radius: 100% !important;
    margin: 0 4px !important;
}

.swiper-container .swiper-pagination-bullet-active {
    background: orange !important;
}

/* Responsive Styles */

@media (max-width: 375px) {
    .swiper-wrapper {
        padding-left: 6vw !important;
        gap: 9vw !important;
    }

    

    .paket-block {
        padding-top: 18% !important;
    }


}

 .paketler-block5 {
        min-height: 300px;
    }

@media (max-width: 480px) {
    .swiper-wrapper {
        padding-left: 6vw !important;
        gap: 9vw !important;
    }

   
    .paket-block {
        padding-top: 10%;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }

    #paket-block-mega {
        padding-top: 18% !important;
    }
}



@media (max-width: 768px) {
    .swiper-wrapper {
        padding-left: 6vw;
        gap: 4vw;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .swiper-wrapper {
        padding-left: 7vw;
        gap: 6.7vw;
    }

    .paket-block {
        padding-top: 9%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 1025px) and (max-width: 1444px) {
    .swiper-wrapper {
        padding-left: 7vw;
        gap: 6vw;
    }

    .paket-block {
        padding-top: 9%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 1444px) and (max-width: 1919px) {
    .swiper-wrapper {
        padding-left: 7vw;
        gap: 6.3vw;
    }

    .paket-block {
        padding-top: 9%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (min-width: 1920px) {
    .swiper-wrapper {
        padding-left: 6.3vw;
        gap: 6.7vw;
    }

    .paket-block {
        padding-top: 6%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}



@media (max-width: 480px) {
    .four-slides .swiper-wrapper {
        gap: 5.5vw;
    }
}

@media (max-width: 375px) {
    .four-slides .swiper-wrapper {
        gap: 4.5vw;
    }
}

@media (max-width: 768px) {
    .four-slides .swiper-wrapper {
        gap: 5vw;
    }
   .taksit-p{
    font-size: 0.8rem !important;
   }
}

@media (max-width: 1024px) {
    .four-slides .swiper-wrapper {
        gap: 5.5vw;
    }
}

@media (max-width: 1444px) {
    .four-slides .swiper-wrapper {
        padding-left: 5vw;
        gap: 6.9vw ;
    }
}

@media (max-width: 1919px) {
    .four-slides .swiper-wrapper {
        padding-left: 4.5vw;
        gap: 8vw;
    }
}

@media (min-width: 1920px) {
    .four-slides .swiper-wrapper {
        padding-left: 4vw;
        gap: 8.4vw;
    }
}