:root {
     --clr-border: #e5e7eb;
     --clr-shadow: rgba(2, 6, 23, .06);
     --clr-primary: #35d3c9;
     --clr-primary-weak: rgba(13, 110, 253, .18);
     --clr-success: #198754;
     --clr-text: #0f172a;
     --clr-muted: #64748b;
     --clr-light: #f8fafc;
     --clr-feature-bg: #f6fffd;
     --clr-feature-brd: #66666637;
 }

 .old-price {
     font-size: 19px;
     color: #9a9a9a;
     font-weight: 600;
 }

 .price-lg {
     font-size: 2.4rem;
     line-height: 1;
     font-weight: 600;
     letter-spacing: -.5px;
     color: #6c757d !important;
 }

 .tracking-1 {
     letter-spacing: .06em;
 }

 .h6 {
     font-size: 13px !important;
     color: var(--clr-muted) !important;
     font-weight: 600 !important;
 }

 .pricing-area .row>[class*="col"] {
     display: flex;
     align-items: stretch;
 }

 .pricing-card {
     display: grid;
     grid-template-rows: auto 1fr auto;
     gap: .75rem;
     height: 100%;
     border: 1px solid var(--clr-border);
     border-radius: 14px;
     box-shadow: 0 6px 20px var(--clr-shadow);
     width: 100%;
     max-width: 380px;
     margin-inline: auto;
 }

 .pricing-card header {
     margin-bottom: .5rem;
 }

 .pricing-card header p {
     font-size: 12px;
     margin: 0;
 }

 .pricing-card p {
     margin: 0 !important;
 }

 .pricing-head {
     display: flex;
     flex-direction: column;
     gap: .25rem;
     min-height: var(--pricing-head-min, 180px);
 }

 .pricing-body {
     display: block;
 }

 .pricing-card .pricing-head {
     min-height: var(--pricing-head-min, 170px);
 }

 .pricing-card .features,
 .pricing-card .list-unstyled {
     margin-top: .25rem;
 }



 .pricing-card.popular:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 28px var(--clr-primary-weak);
 }

 .badge-ribbon {
     position: absolute;
     top: -12px;
     right: 16px;
     background: var(--clr-primary);
     color: #fff;
     font-weight: 700;
     border-radius: 999px;
     padding: .35rem .7rem;
     font-size: .75rem;
     box-shadow: 0 4px 12px rgba(13, 110, 253, .35);
     white-space: nowrap;
 }

 .pricing-sep {
     border: 0;
     height: 1px;
     background: #eef2f6;
     margin: 0 24px;
 }

 .saving-box {
     background: var(--clr-light);
     border: 1px solid var(--clr-border);
     border-radius: .75rem;
     padding: 1rem 1.25rem;
     margin-top: .5rem;
 }

 .pricing-card .btn,
 .pricing-card .octf-btn {
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .pricing-area .pricing-card .view-more-btn {
     display: inline-block;
     padding: .5rem 1rem;
     border: 1px solid var(--clr-border);
     border-radius: .5rem;
     color: var(--clr-primary);
     background: #fff;
     text-decoration: none;
 }

 .pricing-area .pricing-card .view-more-btn:hover {
     background: var(--clr-light);
 }

 .pricing-area .pricing-card .view-more-btn:focus-visible {
     outline: 3px solid rgba(53, 211, 201, .35);
     outline-offset: 5px;
 }

 .feature-li {
     display: flex;
     align-items: center;
     gap: .5rem;
     border-radius: 12px;
     font-weight: 500;
     color: var(--clr-text);
     font-size: 14px !important;
     margin: 1.6em;
 }


 .d-flex1 {
     width: 70% !important;
     display: flex;
     gap: 1rem;
     border-radius: 9px;

 }



 .flexContainer {
     width: 50%;
     background-color: #fff;
     border-top-right-radius: 1rem;
     border-top-left-radius: 1rem;
     padding-left: .5rem !important;
     padding-right: .5rem !important;
     padding-top: .5em;
 }

 .flexContainerDesc {
     width: 50%;
     background-color: #fff;
     padding-left: .8rem;
     padding-right: .8rem;
     padding-top: .5em;
 }


 #row1 {
     flex-direction: column;
     line-height: 1 !important;
     align-content: center;
 }

 @media (min-width:768px) {
     #row2 {
         display: none;
     }

     #mobilPlan {
         display: none !important;
     }

     #deskPlan {
         display: block !important;
     }
 }

 @media (max-width:768px) {
     #row1 {
         display: none;
     }

     #row2 {
         display: block;
     }

     .feature-li {
         display: flex;
         align-items: center;
         gap: .5rem;
         border-radius: 12px;
         font-weight: 500;
         color: var(--clr-text);
         font-size: 12px !important;
         margin: 7px !important;
     }

     .a {
         font-size: 13px;
     }

     #DesktopButton {
         display: none !important;
     }
 }

 .seg-toggle,
 .seg-toggle2 {
     display: inline-flex;
     align-items: center;
     gap: 0;
     padding: 4px;
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 14px;
     overflow: hidden;
 }


 .seg-toggle .btn-check,
 .seg-toggle2 .btn-check {
     position: absolute;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
     width: 1px;
     height: 1px;
     overflow: hidden;
     white-space: nowrap;
     border: 0;
     margin: -1px;
 }


 .seg-toggle .seg,
 .seg-toggle2 .seg {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     padding: .6rem 1rem;
     min-width: 70px;
     justify-content: center;
     font-weight: 500;
     font-size: .85rem;
     line-height: 1;
     letter-spacing: .2px;
     color: #0f172a;
     background: transparent;
     border-radius: 10px;
     cursor: pointer;
     position: relative;
 }


 .seg-toggle .seg+.btn-check+.seg,
 .seg-toggle .seg+.seg,
 .seg-toggle2 .seg+.btn-check+.seg,
 .seg-toggle2 .seg+.seg {
     border-left: 1px solid #e5e7eb;
 }

 .mirror-billing .seg.is-active {
     color: var(--clr-primary, #3b82f6);
     text-decoration: underline;
     text-underline-offset: 6px;

     text-decoration-thickness: 2px;
 }

 .seg-toggle .seg:hover,
 .seg-toggle2 .seg:hover {
     background: #f7f9ff;
 }

 hr {
     background-color: #cccccc73;
     border: 0;
     height: 1px;
     margin-bottom: 1.5em;
     display: none;
 }

 .seg-toggle2 .btn-check:checked+.seg {
     color: #ffffff;
     border-radius: 10px;
 }

 .seg-toggle .save {
     font-weight: 500;
     font-size: .85rem;
     opacity: .95;
     color: #212529;
 }

 .seg-toggle2 .save {
     font-weight: 500;
     font-size: .85rem;
     opacity: .95;
     color: var(--clr-primary);
 }

 .seg-toggle button.seg,
 .seg-toggle2 button.seg {
     padding: 0;
     border: none;
     background: transparent;
     -webkit-appearance: none;
     appearance: none;
 }

 .seg-toggle-textual {
     display: inline-flex;
     align-items: center;
     gap: 0rem;
     background: transparent;
     border: 0;
     padding: 0;
 }

 .seg-toggle-textual .sep {
     opacity: .45;
     margin: .2em;
 }

 .seg-toggle-textual .seg {
     display: inline-flex;
     align-items: center;
     gap: .375rem;
     padding: 0;
     background: transparent;
     border: 0;
     border-radius: 0;
     font-weight: 600;
     color: #0f172a;
     text-decoration: none;
     cursor: pointer;
     line-height: 1.25;
     position: relative;
 }

 .seg-toggle-textual .seg:hover,
 .seg-toggle-textual .seg:focus-visible {
     outline: none;
     color: #35d3c9;
 }



 .seg-toggle-textual .btn-check:not(:checked)+.seg {

     color: #0f172a;
 }

 .seg-toggle-textual .seg .save {
     font-size: .75rem;
     font-weight: 700;
     color: var(--clr-muted);
     white-space: nowrap;
 }

 /* ============ PMX BLOĞU ============ */
 .pmx .pmx-card {
     border: 1px solid #e5e7eb;
     border-radius: 1rem;
     background: #fff;
     box-shadow: 0 6px 20px rgba(2, 6, 23, .06);
 }

 .pmx .pmx-popular {
     box-shadow: 0 10px 26px rgba(13, 110, 253, .18)
 }

 .pmx .pmx-ribbon {
     position: absolute;
     top: -10px;
     right: 14px;
     background: #0d6efd;
     color: #fff;
     font-weight: 700;
     border-radius: 999px;
     padding: .3rem .65rem;
     font-size: .7rem;
     box-shadow: 0 4px 12px rgba(13, 110, 253, .35);
 }

 .pmx .pmx-price-lg {
     font-size: 1.75rem;
     line-height: 1;
     font-weight: 600;
     color: #6c757d;
 }

 .pmx .pmx-old-price {
     color: #94a3b8;
     text-decoration: line-through;
     font-weight: 600;
     font-size: 25px;
 }

 .pmx .pmx-table thead th {
     vertical-align: bottom;
     background: #fff
 }

 .pmx .pmx-table tbody th {
     width: 19rem;
     position: sticky;
     left: 0;
     z-index: 1;
     background: #f8fafc !important;
     font-size: 14px;
     font-weight: 500;
 }

 .pmx .pmx-table td,
 .pmx .pmx-table th {
     border-color: #eef2f7 !important;
     font-size: 14px;
 }


 .iconCheck,
 .listCheck {
     color: var(--clr-primary) !important;
 }

 .iconClose {
     color: #800909 !important;
     font-size: 1.4em;
 }

 .iconCheck {
     font-size: 1.4em;
 }

 .listLabel {
     color: #212529;
 }


 .btn-primary:not(:disabled):not(.disabled).active,
 .btn-primary:not(:disabled):not(.disabled):active,
 .show>.btn-primary.dropdown-toggle {
     color: #35d3c9;
     background-color: transparent !important;
     /* border-color: var(--clr-primary);
     text-decoration: underline;
     text-underline-offset: 6px;
     text-decoration-thickness: 2px; */
 }

 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .show>.btn-outline-secondary.dropdown-toggle {
     color: gray;
     background-color: transparent !important;
     border-color: transparent !important;
 }

 /* ============ RESPONSIVE ============ */
 @media (prefers-reduced-motion:reduce) {
     .pricing-card.popular {
         transition: none;
         transform: none;
     }

     .pricing-card.popular:hover {
         box-shadow: none;
         transform: none;
     }
 }

 @media (max-width:992px) {
     .pmx .pmx-table tbody th {
         width: 14rem;
     }
 }

 @media (max-width:780px) {
     .badge-ribbon {
         top: -10px;
         right: 16px;
         font-size: .55rem;
     }

     .pmx .pmx-card {
         border: 1px solid #e5e7eb;
         border-radius: 1rem;
         background: #fff;
         box-shadow: 0 6px 20px rgba(2, 6, 23, .06);
     }

     .pmx .pmx-popular {
         box-shadow: 0 10px 26px rgba(13, 110, 253, .18)
     }

     .pmx .pmx-ribbon {
         top: -10px;
         right: 14px;
         background: #0d6efd;
         color: #fff;
         font-weight: 700;
         border-radius: 999px;
         padding: .3rem .65rem;
         font-size: .7rem;
         box-shadow: 0 4px 12px rgba(13, 110, 253, .35);
     }

     .pmx .pmx-price-lg {
         font-size: 1rem;
         line-height: 1;
         font-weight: 600;
         color: #64748b;
     }

     .pmx .pmx-old-price {
         color: #94a3b8;
         text-decoration: line-through;
         font-weight: 600;
     }

     .pmx .pmx-table thead th {
         vertical-align: bottom;
         background: #fff
     }

     .pmx .pmx-table tbody th {
         width: 10rem;
         position: sticky;
         left: 0;
         z-index: 1;
         background: #f8fafc !important;
         font-size: x-small;
         font-weight: 500;
     }

     .pmx .pmx-table td,
     .pmx .pmx-table th {
         border-color: #eef2f7 !important;
         font-size: x-small;
     }

     .monthE {
         font-size: x-small;
         text-wrap-mode: nowrap;
     }

     .getStarted {
         width: 70px;
         font-size: 9px;
     }

     .old-price {
         font-size: 15px !important;
         color: #9a9a9a;
         font-weight: 600;
     }
 }

 @media (max-width:767.98px) {
     .badge-ribbon {
         right: 12px;
     }

     .price-lg {
         font-size: 2.1rem;
     }

     .feature-li {
         font-size: .95rem;
     }

     .pricing-card .pricing-head {
         min-height: var(--pricing-head-min-sm, 140px);
     }

     .old-price {
         font-size: 15px !important;
         color: #9a9a9a;
         font-weight: 600;
     }
 }

 @media (max-width:576px) {
     .seg-toggle-textual {
         /* gap: .25rem; */
     }

     .plan-title {
         min-width: 120px;
     }

     .old-price {
         font-size: 15px !important;
         color: #9a9a9a;
         font-weight: 600;
     }
 }

 @media (max-width:480px) {
     .seg-toggle .seg {
         /* padding: 1rem; */
         min-width: auto;
         font-size: 11px;
     }

     .mirror-billing .seg.is-active {
         color: var(--clr-primary, #3b82f6);
         text-decoration: none;
         text-underline-offset: 2px !important;


     }

     .mirror-billing .seg.is-active {
         color: var(--clr-primary, #3b82f6);
         text-decoration: underline;
         /* text-underline-offset: 6px; */
     }

     .old-price {
         font-size: 15px !important;
         color: #9a9a9a;
         font-weight: 600;
     }

 }

 .plan-list li {
     display: flex;
     align-items: baseline;
     gap: .75rem;
     margin-bottom: 2rem;
 }

 .plan-title {
     margin: 0;
     font-weight: 600;
     line-height: 1.25;
     min-width: 160px;
     flex-shrink: 0;
     font-size: 16px;
 }

 .plan-desc {
     margin-left: -28px;
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     color: #6c757d;
     line-height: 1.25;
     font-size: 15px;
 }

 #MobilButton.justify-content-end {
     justify-content: center !important;
 }

 #MobilButton>.col-12 {
     display: flex !important;
     justify-content: center !important;
 }

 #MobilButton>.col-12>.d-flex.justify-content-end {
     justify-content: center !important;
     width: 100%;
 }

 #MobilButton nav.seg-toggle {
     display: inline-flex;
     margin-left: auto !important;
     margin-right: auto !important;
     float: none !important;
 }