@import url(home.css?v=1.1);
@import url(page.css?v=1.1);
@import url(support.css?v=1.1);
@import url(return.css?v=1.1);
@import url(transaction.css?v=1.1);
@import url(category-detail.css?v=1.1);
@import url(product-detail.css?v=1.1);
@import url(sign-in-sign-up.css?v=1.1);
@import url(error.css?v=1.1);


:root {
    --theme-color-1: #002e5f;
    --theme-color-1-hover: #034285;
    --theme-color-2: #070808;
    --theme-color-3: #ffc40c;
    --theme-color-3-hover: #fbcc38;
    --theme-color-4: #e9f2ff;
    --theme-color-5: #0049A8;
    --theme-color-6: #07377f;
    
    --white: #FFFFFF;
    --black: #000000;
}


@font-face {font-family: PasajTurkcellIconFont; src: url(../fonts/PasajTurkcellIconFont.woff?1736644076) format("woff"); font-display: swap;}
@font-face {font-family: TurkcellIconFont; src: url(../fonts/TurkcellIconFont.woff?1736644076) format("woff"); font-display: swap;}
@font-face {font-family: GreycliffCF; src: url(../fonts/GreycliffCF-Bold.woff2?1736644076) format("woff2"); font-weight: 700; font-display: swap;}
@font-face {font-family: GreycliffCF; src: url(../fonts/GreycliffCF-Medium.woff2?1736644076) format("woff2"); font-weight: 500; font-display: swap;}
@font-face {font-family: GreycliffCF; src: url(../fonts/GreycliffCF-DemiBold.woff2?1736644076) format("woff2"); font-weight: 600; font-display: swap;}
@font-face {font-family: GreycliffCF; src: url(../fonts/GreycliffCF-Regular.woff2?1736644076) format("woff2"); font-weight: 400; font-display: swap;}
@font-face {font-family: GreycliffCF; src: url(../fonts/GreycliffCF-Light.woff2?1736644076) format("woff2"); font-weight: 300; font-display: swap;}

body {margin: 0px; padding: 0px;font-family: GreycliffCF; font-size: 14px; overflow-x: hidden;}
a:hover {text-decoration: none;}

header  {padding: 10px;}
header div.header-top {display: flex; align-items: center; justify-content: space-between;}
header div.header-top div.header-top-left img {width: 82px;}
header div.header-top div.header-top-right ul {margin: 0px; padding: 0px; display: flex; align-items: center; gap: 18px;}
header div.header-top div.header-top-right ul li {list-style: none; float: left;}
header div.header-top div.header-top-right ul li a {display: flex; align-items: center; height: 22px; position: relative;}
header div.header-top div.header-top-right ul li a svg {width: 23px; fill: var(--theme-color-1); }
header div.header-top div.header-top-right ul li a i {font-size: 20px; color: var(--theme-color-1);}
header div.header-top div.header-top-right ul li a sup {width: 13px; height: 14px; margin: -5px 0px 0px -7px; border-radius: 100%; background-color: var(--theme-color-1); color: var(--white); line-height: 14px; text-align: center; font-size: 11px; font-weight: 600px;}
header div.header-bottom-search {margin-top: 15px; position: relative; }
header div.header-bottom-search input {width: 100%; border: solid 1px #ddd; background-color: #eff2f5; padding: 10px 10px 10px 41px; border-radius: 8px;}
header div.header-bottom-search input::placeholder {font-weight: 500;}
header div.header-bottom-search svg {position: absolute; width: 22px; left: 10px; top: 50%; transform: translateY(-50%); fill: #777;}
header div.header-menu {position: absolute; z-index: 999; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: #f00; overflow-y: auto; background-color: var(--white); display: none;}
header div.header-menu div.header-menu-logo {padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: solid 1px #DDD;}
header div.header-menu div.header-menu-logo img {width: 86px;}
header div.header-menu div.header-menu-logo svg {width: 22px; fill: var(--theme-color-1); margin-right: 5px;}
header div.header-menu div.header-menu-categories {margin: 0px; padding: 5px 14px;  border-bottom: solid 1px #DDD;}
header div.header-menu div.header-menu-categories ul {margin: 0px; padding: 0px;}
header div.header-menu div.header-menu-categories ul li {list-style: none; line-height: 35px;}
header div.header-menu div.header-menu-categories ul li a {display: flex; align-items: center; justify-content: space-between;}
header div.header-menu div.header-menu-categories ul li a.active span {color: var(--theme-color-3);}
header div.header-menu div.header-menu-categories ul li a span {color: #455366; font-size: 16px; font-weight: 500;}
header div.header-menu div.header-menu-categories ul li a svg {fill: #455366; width: 20px;}
header div.header-menu div.header-menu-categories ul li ul {display: none; margin-left: 20px;}
header div.header-menu div.header-menu-categories ul li ul li a span {font-size: 14px; font-weight: 500;}
header div.header-menu div.header-menu-categories ul li ul.active {display: block;}
header div.header-menu div.header-menu-page {margin: 0px; padding: 5px 16px;}
header div.header-menu div.header-menu-page ul {margin: 0px; padding: 0px;}
header div.header-menu div.header-menu-page ul li {list-style: none; line-height: 35px;}
header div.header-menu div.header-menu-page ul li a {color: #455366; font-size: 16px; font-weight: 500;}
header div.header-menu div.header-menu-footer {width: 100%;  margin-top: 10px; padding: 10px; color: var(--theme-color-1); display: flex; flex-direction: column; gap: 8px;}
header div.header-menu div.header-menu-footer svg {width: 20px; fill: var(--white);}

section.header-search div.overlay {width: 100%; height: 100vh; position: fixed; left: 0px; z-index: 999; padding: 0px; background-color: rgba(0, 0, 0, 0.5); display: none;}
section.header-search div.header-search-content {width: 100%;min-height: 10vh;max-height: 70vh;position: absolute;left: 50%;top: 105px;transform: translateX(-50%);z-index: 1000;background-color: var(--white);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;display: none;overflow-y: auto;overflow-x: hidden;}
section.header-search div.header-search-content div.header-content-search-top {background-color: #eff2f5;  padding: 10px;}
section.header-search div.header-search-content div.header-content-search-top span {font-size: 12px; font-weight: 600; color: #888;}
section.header-search div.header-search-content div.header-content-search-top ul {margin: 0px; padding: 20px 0px;display: flex; align-items: center; justify-content: start; gap: 15px; display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
section.header-search div.header-search-content div.header-content-search-top ul li {list-style: none;}
section.header-search div.header-search-content div.header-content-search-top ul li a {list-style: none; background-color: var(--white); border-radius: 25px; padding: 8px 10px;     -webkit-box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);color: #253342;font-weight: 500;}

section.header-search div.header-search-content div.header-content-search-center {padding: 10px;}
section.header-search div.header-search-content div.header-content-search-center span {font-size: 12px; font-weight: 600; color: #888;}
section.header-search div.header-search-content div.header-content-search-center ul {margin: 0px; padding: 20px 0px;display: flex; align-items: center; justify-content: start; gap: 15px; display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
section.header-search div.header-search-content div.header-content-search-center ul li {list-style: none;}
section.header-search div.header-search-content div.header-content-search-center ul li a {list-style: none; background-color: var(--white); border-radius: 25px; padding: 8px 10px;     -webkit-box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);color: #253342;font-weight: 500;}

section.header-search div.header-search-content div.header-content-search-bottom {padding: 10px 0;} 
section.header-search div.header-search-content div.header-content-search-bottom ul {margin: 0px 10px; padding: 0px; display: flex; flex-direction: column; align-items: start; gap: 10px;} 
section.header-search div.header-search-content div.header-content-search-bottom ul li {list-style: none;} 
section.header-search div.header-search-content div.header-content-search-bottom ul li a {display: flex; align-items: center; justify-content: space-between; gap: 5px;} 
section.header-search div.header-search-content div.header-content-search-bottom ul li a img {width: 70px;} 
section.header-search div.header-search-content div.header-content-search-bottom ul li a span.name {color: #333; width: 200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
section.header-search div.header-search-content div.header-content-search-bottom ul li a span.price {color: #333; width: 95px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight: bold;}


section.breadcrumb {padding: 0px 10px; display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; background-color: transparent;}
section.breadcrumb::-webkit-scrollbar {display: none}
section.breadcrumb a {flex: 0 0 auto; white-space: nowrap; margin-right: 8px; color: #777; font-size: 14px; text-decoration: none; position: relative}
section.breadcrumb a:not(:last-child)::after {content: ">"; margin-left: 8px; color: #aaa}

footer {padding: 15px 0px 0px 0px; margin-top: 20px; background-color: var(--theme-color-1);}
footer ul.pages {margin: 0px; padding: 0px;}
footer ul.pages li {list-style: none; border-bottom: solid 1px #023b78;}
footer ul.pages li a {padding: 0px 25px; line-height: 80px; display: flex; align-items: center; justify-content: space-between;}
footer ul.pages li a {color: var(--white);}
footer ul.pages li a:hover {color: var(--theme-color-3);}
footer ul.social-icons {margin: 0px; padding: 0px; display: flex; border-bottom: solid 1px #023b78;}
footer ul.social-icons li {list-style: none;}
footer ul.social-icons li a {padding: 0px 25px; line-height: 80px; display: block;}
footer ul.social-icons li a i {color: var(--white);}
footer ul.social-icons li a i:hover {color: var(--theme-color-3);}
footer ul.logos {margin: 0px 20px; padding: 20px 0px; display: flex; gap: 30px; overflow-x: auto;}
footer ul.logos::-webkit-scrollbar {display: none}
footer ul.logos li {list-style: none;}
footer div.copyrights {display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0px; border-top: solid 1px #023b78;}  
footer div.copyrights img {width: 40px;}
footer div.copyrights span {color: var(--white);}

.custom-radio-input {appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; border: 2px solid #ced4da; border-radius: 50%; outline: none; cursor: pointer; position: relative; top: 0px; left: 0px; transition: all 0.2s ease-in-out}
:checked {border: solid 1px var(--theme-color-1);}
.custom-radio-input:checked::before {content: ''; display: block; width: 11px; height: 11px; background-color: #ffc107; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.custom-radio-label {cursor: pointer; line-height: 1.5}
.custom-radio-container {display: flex; align-items: center}

div.custom-accordion {padding: 15px; margin-top: 10px; cursor: pointer; border-bottom: solid 1px #DDD;}
div.custom-accordion div.custom-accordion-title a { display: flex; align-items: center; justify-content: space-between; color: #161616;}
div.custom-accordion div.custom-accordion-title a span {font-size: 16px; font-weight: bold;}
div.custom-accordion div.custom-accordion-content {margin-top: 20px; display: none; text-align: left;}
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab ul {margin: 0px; padding: 10px 0px; display: flex; align-items: center; justify-content: start; gap: 10px;   overflow-x: auto; -webkit-overflow-scrolling: touch;  scroll-behavior: smooth; white-space: nowrap;   }
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab ul::-webkit-scrollbar {display: none;}
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab ul li {list-style: none; flex-shrink: 0; }
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab ul li a {background-color: var(--white);white-space: nowrap;padding: 6px 14px; display: block; border-radius: 20px; font-size: .875rem;font-weight: 500;-webkit-transition: background-color .3s, -webkit-box-shadow .3s;transition: background-color .3s, -webkit-box-shadow .3s;transition: background-color .3s, box-shadow .3s;transition: background-color .3s, box-shadow .3s, -webkit-box-shadow .3s;min-width: auto;-webkit-box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);box-shadow: 0 1px 4px 0 rgba(37, 51, 66, .2);color: #253342;}
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab ul li a.active {background-color: var(--theme-color-6); color: var(--white);}
div.custom-accordion div.custom-accordion-content div.custom-accordion-tab-content {margin-top: 20px;}

.rotate {transform: rotate(180deg); transition: transform 0.3s ease;}

select:focus, input:focus {outline: none !important;box-shadow: none !important;border-color: #ccc !important;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }


.custom-button { background-color: var(--theme-color-1); border: none; outline: none; color: var(--white); font-weight: 500; font-size: 15px; display: block; padding: 12px 8px; border-radius: 50px; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
.custom-button:hover {background-color: var(--theme-color-1-hover); color: var(--white); transition: background-color 0.3s ease, color 0.3s ease;}
.custom-button.disabled {background-color: #a4cffd !important; cursor: not-allowed !important; color: #999;}

div.search-wrapper {position: relative; z-index: 0; display: inline-block; width: 100%; margin: 0px auto 20px auto;}
div.search-wrapper input {width: 100%; border-radius: 8px; padding: 10px 10px 10px 35px; border: 1px solid #ccc;}
div.search-wrapper input:focus {outline: solid 1px var(--theme-color-2);}
div.search-wrapper i {position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #888;}