/**
  * Name: Binabox | NFT Portfolio HTML Template
  * Version: 1.0.0
  * Author: Themesflat
  * Author URI: http://www.themesflat.com
*/
/**
  	* Reset Browsers
    * General
	* Elements
  	* Forms
	* Typography
	* Extra classes
	* link style
	* Root
	* Header
	* Site Logo
    * Menu
    * Header Fixed
    * Pagination
    * Scroll Top
    * Footer
    * Widget
    * PreLoad
    * side bar
    * up load
    * heading 
    * hover 
*/
/* Reset Browsers
-------------------------------------------------------------- */
html,
html,
body,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }

html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { background: var(--background-body); color: var(--primary-color); font-size: 20px; line-height: 30px; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

ol,
ul { list-style: none; }


caption,
th,
td { font-weight: normal; text-align: left; }

blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; content: none; }

blockquote,
q { quotes: none; }

a img { border: 0; }

img { max-width: 100%; height: auto; }

select { max-width: 100%; }

/* General
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea { font-family: "Poppins", sans-serif; font-size: 20px; line-height: 30px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: auto; }

img { height: auto; max-width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic; }

.text-p,
p { font-weight: 400; }

strong,
b,
cite { font-weight: bold; }

dfn,
cite,
em,
i,
blockquote { font-style: italic; }

abbr,
acronym { border-bottom: 1px dotted #e0e0e0; cursor: help; }

mark,
ins { text-decoration: none; }

sup,
sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; }

small { font-size: 75%; }

big { font-size: 125%; }

address { font-style: italic; margin: 0 0 20px; }

code,
kbd,
tt,
var,
samp,
pre { margin: 20px 0; padding: 4px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; overflow-x: auto; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-radius: 0; height: auto; }

/* Elements
-------------------------------------------------------------- */
tml { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*,
*:before,
*:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

hr { margin-bottom: 20px; border: dashed 1px #ccc; }

/* List */
ul,
ol { padding: 0; }

ul { list-style: disc; }

ol { list-style: decimal; }

li > ul,
li > ol { margin-bottom: 0; }

li { list-style: none; }

ul li,
ol li { padding: 0.1em 0; }

dl,
dd { margin: 0 0 20px; }

dt { font-weight: bold; }

del,
.disable { text-decoration: line-through; filter: alpha(opacity=50); opacity: 0.5; }

caption,
th,
td { font-weight: normal; text-align: left; }

th { border-width: 0 1px 1px 0; font-weight: bold; }

td { border-width: 0 1px 1px 0; }

th,
td { padding: 8px 12px; }

/* Media */
embed,
object,
video { margin-bottom: 20px; max-width: 100%; vertical-align: middle; }

p > embed,
p > iframe,
p > object,
p > video { margin-bottom: 0; }

/* Forms
-------------------------------------------------------------- */
/* Fixes */
button,
input { line-height: normal; }

button,
input,
select,
textarea { font-size: 100%; line-height: inherit; margin: 0; vertical-align: baseline; }

input,
textarea,
select { font-size: 16px; max-width: 100%; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); /* Removing the inner shadow on iOS inputs */ }

textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ vertical-align: top; height: 150px; /* Improves readability and alignment in all browsers */ }

input[type=checkbox] { display: inline; }

button,
input[type=button],
input[type=reset],
input[type=submit] { line-height: 1; cursor: pointer; -webkit-appearance: button; border: 0; }

input[type=checkbox],
input[type=radio] { padding: 0; width: 14px; height: 14px; margin-right: 11px; cursor: pointer; vertical-align: sub; /* Addresses excess padding in IE8/9 */ }

input[type=search] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ }

    input[type=search]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove chrome yellow autofill */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset; }

/* Reset search styling */
input[type=search] { outline: 0; }

    input[type=search]::-webkit-search-decoration,
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-results-button,
    input[type=search]::-webkit-search-results-decoration { display: none; }

/* Contact Form 7 */
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input { margin-bottom: 0; }

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; }

.select { position: relative; overflow: hidden; }
    .select ::after { font-family: "Font Awesome 5 Pro"; content: "\f078"; font-size: 14px; right: 10px; font-weight: 600; color: #1F1F2C; display: block; position: absolute; background: 0 0; top: 50%; pointer-events: none; -webkit-transition: 0.25s all ease; -o-transition: 0.25s all ease; transition: 0.25s all ease; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

select option { font-size: 16px; line-height: 26px; color: #1F1F2C; }

textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] { border: none; outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

    /* Input focus */
    textarea:focus,
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=datetime]:focus,
    input[type=datetime-local]:focus,
    input[type=date]:focus,
    input[type=month]:focus,
    input[type=time]:focus,
    input[type=week]:focus,
    input[type=number]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    input[type=search]:focus,
    input[type=tel]:focus,
    input[type=color]:focus { border: none; outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

    textarea::placeholder,
    input[type=password]::placeholder,
    input[type=datetime]::placeholder,
    input[type=datetime-local]::placeholder,
    input[type=date]::placeholder,
    input[type=month]::placeholder,
    input[type=time]::placeholder,
    input[type=week]::placeholder,
    input[type=number]::placeholder,
    input[type=url]::placeholder,
    input[type=search]::placeholder,
    input[type=color]::placeholder { font-family: 'Alexandria', sans-serif; font-size: 17px; font-weight: 300; line-height: 20.82px; color: #00000080; }

/* Button */
button,
input[type=button],
input[type=reset],
input[type=submit] { font-family: "Bakbak One"; font-size: 16px; line-height: 24px; /* background-color: #21E786; */ color: #040B11; padding: 17px 50px; display: inline-block; -webkit-appearance: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
    button:focus, button:hover,
    input[type=button]:focus,
    input[type=button]:hover,
    input[type=reset]:focus,
    input[type=reset]:hover,
    input[type=submit]:focus,
    input[type=submit]:hover { outline: 0; /* background: #21E786;*/ color: #fff; }

/* Placeholder color */
::-webkit-input-placeholder { color: var(--primary-color2); }

:-moz-placeholder { color: var(--primary-color2); }

::-moz-placeholder { color: var(--primary-color2); opacity: 1; }

.error { font-size: 16px; color: red; margin-bottom: 10px; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s; }

/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder { color: var(--primary-color2); }

/* Typography
-------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 { font-family: "Alexandria", sans-serif; font-weight: 400; text-rendering: optimizeLegibility; color: #FFFFFF }

/* Varsayılan H1 boyutu */
h1 { font-size: 46px; font-weight: 800; line-height: 74px; text-underline-position: from-font; text-decoration-skip-ink: none; }

.tf-slider-item .content-inner .heading { text-align: center; }

/* 1430px ile 768px arasında kademeli olarak küçültme */
@media screen and (max-width: 1430px) {
    .tf-slider-item .content-inner .heading { font-size: 44px; line-height: 44px; }
    .slider-content .heading { font-size: 44px; line-height: 44px; }
}

/* 768px ve altı için */
@media screen and (max-width: 768px) {
    .tf-slider-item .content-inner .heading { font-size: 50px; line-height: 60px; }
    .accordion-content .heading { font-size: 50px; line-height: 60px; }
    .slider-content .heading { font-size: 50px; line-height: 60px; }
}

/* 425px ve altı için */
@media screen and (max-width: 425px) {
    .tf-slider-item .content-inner .heading { font-size: calc(32px + (43 - 32) * ((100vw - 320px) / (425 - 320))); line-height: calc(64px + (80 - 64) * ((100vw - 320px) / (425 - 320))); }
    .accordion-content .heading { font-size: calc(32px + (43 - 32) * ((100vw - 320px) / (425 - 320))); line-height: calc(64px + (80 - 64) * ((100vw - 320px) / (425 - 320))); }
    .slider-content .heading { font-size: calc(32px + (43 - 32) * ((100vw - 320px) / (425 - 320))); line-height: calc(64px + (80 - 64) * ((100vw - 320px) / (425 - 320))); }
}


@media screen and (max-width: 320px) {
    .tf-slider-item .content-inner .heading { font-size: 32px; line-height: 64px; }
    .accordion-content .heading { font-size: 32px; line-height: 64px; }
    .slider-content .heading { font-size: 32px; line-height: 64px; }
}

h2 { font-size: 44px; font-weight: 800; line-height: 70px; text-underline-position: from-font; text-decoration-skip-ink: none; }

h3 { font-size: 36px; line-height: 44px; }

h4 { font-size: 24px; line-height: 30px; }

h5 { font-size: 22px; line-height: 30px; }

h6 { font-size: 20px; line-height: 28px; }

/* Extra classes
-------------------------------------------------------------- */
.msg-success { background: linear-gradient(to right, #E250E5, #4B50E6, #E250E5); background-clip: text; -webkit-background-clip: text; font-weight: 700; background-size: 200% 200%; animation: rainbow 2s ease-in-out infinite; color: rgba(0, 0, 0, 0); transition: color 0.2s ease-in-out; font-size: 18px; font-weight: 400; line-height: 28px; }

label.error { color: red; }

.swiper-button-prev,
.swiper-button-next { width: 48px; height: 48px; top: 50%; }

@media only screen and (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next { display: none; }
}

.swiper-button-next { right: 68px; }

.swiper-button-prev { left: 46px; }

    .swiper-button-next:after,
    .swiper-button-prev:after { font-family: "Font Awesome 5 Pro"; font-size: 45px; width: 48px; height: 48px; background-color: var(--primary-color5); color: #141B22; display: flex; align-items: center; justify-content: center; box-sizing: border-box; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.swiper-button-next:after { content: "\f105"; }

.swiper-button-prev:after { content: "\f104"; }

.swiper-button-disabled { opacity: 1 !important; cursor: not-allowed !important; }

    .swiper-button-disabled::after { background-color: var(--primary-color15); color: var(--primary-color3); border: 1px solid var(--primary-color12); cursor: not-allowed !important; }

.swiper-pagination-bullets { position: relative; margin-top: 13px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: center; justify-items: center; padding-left: 15px; }
    .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 11px 0 5px; border: 1px solid var(--primary-color5); background: transparent; width: 8px; height: 8px; position: relative; opacity: 1; }
    .swiper-pagination-bullets .swiper-pagination-bullet-active { background: var(--primary-color5); }
        .swiper-pagination-bullets .swiper-pagination-bullet-active::before { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 50%; content: ""; width: 16px; height: 16px; border: 1px solid var(--primary-color5); overflow: visible; }

.tf-container { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; width: 1440px; max-width: 100%; }

.tf-container-2 { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; width: 1800px; max-width: 100%; }

.tf-container-3 { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; width: 1600px; max-width: 100%; }

.mb60 { margin-bottom: 60px; }

.mb87 { margin-bottom: 87px; }

.mb40 { margin-bottom: 40px; }

.mb30 { margin-bottom: 40px; }

.mb28 { margin-bottom: 28px; }

.mb26 { margin-bottom: 26px; }

.mb23 { margin-bottom: 23px; }

.mb22 { margin-bottom: 22px; }

.mb13 { margin-bottom: 13px; }

.mt17 { margin-top: 17px; }

.mt13 { margin-top: 13px; }

.mt10 { margin-top: 10px; }

.mt8 { margin-top: 8px; }

.mt6 { margin-top: 6px; }

.pt10 { padding-top: 10px; }

.visible { overflow: visible !important; }

/* link style
-------------------------------------------------------------- */
a { text-decoration: none; color: var(--primary-color3); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
    a:hover, a:focus { color: var(--primary-color5); text-decoration: none; outline: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

@keyframes rainbow {
    0% { background-position: left; }
    50% { background-position: right; }
    100% { background-position: left; }
}
/* Root
-------------------------------------------------------------- */
:root { /* color */ --background-body: #080808; --primary-color: #41454A; --primary-color2: #888B8E; --primary-color3: #141B22; --primary-color4: #5865F2; --primary-color5: #FFB800; --primary-color6: #F6F6F6; --primary-color7: #fff; --primary-color8: #fff; --primary-color9: #21E786; --primary-color10: #C2C3C5; --primary-color11: #141B22; --primary-color12: #fff; --primary-color13: #888B8E; --primary-color14: #41454A; --primary-color15: #fff; --primary-color16: #E2E2E3; --primary-color17: rgba(194, 195, 197, 0.35); --primary-color18: rgba(33, 231, 134, 0.2); --primary-color19: #41454A; --primary-color20: #434343; --primary-color21: #E2E2E3; --primary-color22: #E2E2E3; --primary-color23: #fff; --primary-color24: rgba(194, 195, 197, 0.2); --primary-color25: rgba(194, 195, 197, 0.5); --primary-color26: rgba(4, 11, 17, 0.1); --primary-color27: #41454A; --primary-color28: rgba(67, 67, 67, 0.2); --primary-color29: rgba(194, 195, 197, 0.5); --primary-color30: rgba(67, 67, 67, 0.4); --primary-color31: #888B8E; --primary-color32: #41454A; --primary-color33: #888B8E; --primary-color34: #C2C3C5; --primary-color35: rgba(29, 35, 40, 0.2); --primary-color36: rgba(28, 36, 51, 0.4); --product-color16: #dddddd; --product-color17: transparent; --product-color18: #141B22; --product-color19: #fff; --product-color20: #fff; --product-color21: #040b11ac; --product-color22: linear-gradient(356.98deg, #FFFFFF 25.85%, rgba(255, 255, 255, 0) 54.01%); --product-color23: #C2C3C5; --product-color24: #fff; --product-color25: rgba(194, 195, 197, 0.35); --bg-section: #f6f6f6; --bg-section2: unset; --bg-section3: transparent; }

.is_dark { --background-body: #080808; --primary-color: #C2C3C5; --primary-color2: #C2C3C5; --primary-color3: #fff; --primary-color4: #141B22; --primary-color5: #FFB800; --primary-color6: #141B22; --primary-color7: #080808; --primary-color8: #161616; --primary-color9: #fff; --primary-color10: #141B22; --primary-color11: #FFB800; --primary-color12: #FFB800; --primary-color13: #fff; --primary-color14: #fff; --primary-color15: transparent; --primary-color16: #141B22; --primary-color17: rgba(194, 195, 197, 0.15); --primary-color18: rgba(33, 231, 134, 0.1); --primary-color19: #BBBABE; --primary-color20: #fff; --primary-color21: rgba(65, 69, 74, 0.4); --primary-color22: rgb(67, 67, 67,0.7); --primary-color23: rgba(255, 255, 255, 0.05); --primary-color24: rgba(255, 255, 255, 0.05); --primary-color25: rgba(194, 195, 197, 0.15); --primary-color26: rgba(194, 195, 197, 0.15); --primary-color27: #C2C3C5; --primary-color28: rgb(67, 67, 67,0.7); --primary-color29: rgba(255, 255, 255, 0.3); --primary-color30: #434343; --primary-color31: #F7F7F7; --primary-color32: #F7F7F7; --primary-color33: #41454A; --primary-color34: #434343; --primary-color35: rgba(29, 35, 40, 1); --primary-color36: rgba(255, 255, 255, 0.3); --product-color16: #585a5b; --product-color17: #1F1F2C; --product-color18: #C2C3C5; --product-color19: #141b2294; --product-color20: #161616; --product-color21: #fff; --product-color22: linear-gradient(356.98deg, #040B11 25.85%, rgba(4, 11, 17, 0) 54.01%); --product-color23: rgba(255, 255, 255, 0.2); --product-color24: #040B11; --product-color25: #141B22; --bg-section: url(../images/background/bs-section.jpg); --bg-section2: #040B11; --bg-section3: url(../images/background/bs-section.jpg); }

#page { overflow: hidden; }

/* Header
-------------------------------------------------------------- */
header { background-color: var(--primary-color7); padding-right: 0 !important; position: fixed; top: 0; z-index: 9999; width: 100%; transition: all 0.5s ease; }
    header #site-header-inner { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left; }
        header #site-header-inner #site-logo { flex-shrink: 0; margin-right: 68px; }
        header #site-header-inner #main-nav { flex-shrink: 1; }
        header #site-header-inner .header-right { margin-left: auto; display: inline-flex; }
            header #site-header-inner .header-right .tf-button, header #site-header-inner .header-right .user, header #site-header-inner .header-right .mode-switch { margin-right: 0px; }
            header #site-header-inner .header-right .user, header #site-header-inner .header-right .mode-switch { width: 48px; height: 48px; line-height: 48px; text-align: center; background-color: var(--primary-color6); border-radius: 50%; display: inline-block; }
            header #site-header-inner .header-right .tf-button { padding: 12px 24px 12px 24px; background-color: var(--primary-color4); color: #fff; display: inline-flex; align-items: center; }
                header #site-header-inner .header-right .tf-button i { margin-right: 10px; }
                header #site-header-inner .header-right .tf-button::before { background-color: #21E786; }
                header #site-header-inner .header-right .tf-button.connect { background-color: var(--primary-color5); color: #141B22; margin-right: 0; }
                    header #site-header-inner .header-right .tf-button.connect i { font-size: 20px; }
                    header #site-header-inner .header-right .tf-button.connect::before { background-color: transparent; }
                    header #site-header-inner .header-right .tf-button.connect:hover { background-color: transparent; color: var(--primary-color3); }
    header.absolute { position: absolute; width: 100%; border-bottom: none; z-index: 100; }

/* Site Logo
-------------------------------------------------------------- */
/* Menu
-------------------------------------------------------------- */
/* Main Nav */
#main-nav ul { margin: 0px; }
    #main-nav ul li { position: relative; list-style: none; }

#main-nav > ul > li { float: left; padding: 42px 26px 42px 0px; }
    #main-nav > ul > li > a { font-family: "Bakbak One"; position: relative; font-size: 11px; line-height: 24px; font-weight: 400; display: block; color: var(--primary-color3); margin-right: 27px; letter-spacing: 0.1em; text-transform: uppercase; }
        #main-nav > ul > li > a:hover { color: var(--primary-color5); }
    #main-nav > ul > li:last-child { padding-right: 0; }
#main-nav > .menu > li.menu-item-has-children > a::after { content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: 700; font-size: 20px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

/* Sub Menu */
#main-nav .sub-menu { position: absolute; top: 80%; left: 0; width: 220px; padding: 5px 0; background-color: var(--primary-color8); z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); box-shadow: 0px 10px 25px rgba(71, 92, 133, 0.1); }
    #main-nav .sub-menu .sub-menu { left: 105%; top: 0%; opacity: 0 !important; visibility: hidden; }
        #main-nav .sub-menu .sub-menu::before { display: none; }
    #main-nav .sub-menu li a { display: block; font-family: "Bakbak One"; font-weight: 400; font-size: 16px; line-height: 24px; padding: 6px 20px; }
    #main-nav .sub-menu::before { content: ""; position: absolute; height: 15px; width: 15px; top: -5px; left: 15px; opacity: 1; z-index: -1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: var(--primary-color8); }
    #main-nav .sub-menu::after { content: ""; position: absolute; z-index: -1; width: 100%; height: 10px; left: 0; top: -9px; }
#main-nav .right-sub-menu { left: auto; right: 0; }

#main-nav > ul > li > a::before { position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: -1px; background-color: var(--primary-color5); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

#main-nav > ul > .current-menu-item > a::before,
#main-nav > ul > li > a:hover::before { opacity: 1; }

#main-nav > ul > .current-menu-item > a::before,
#main-nav > ul > .current-menu-item .current-menu-item > a,
#main-nav > ul > .current-menu-item > a { color: var(--primary-color5); }

#main-nav li:hover .sub-menu { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

#main-nav li .sub-menu li:hover .sub-menu { opacity: 1 !important; visibility: visible; }

#main-nav .sub-menu li.current-item a,
#main-nav .sub-menu li a:hover { color: var(--primary-color5); }

#main-nav > ul > li .sub-menu li { position: relative; }
    #main-nav > ul > li .sub-menu li a { transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear; }

/* Mobile Menu Button */
.mobile-button { display: none; position: absolute; width: 26px; height: 26px; float: right; top: 50%; right: 15px; background-color: transparent; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
    .mobile-button::before, .mobile-button::after,
    .mobile-button span { background-color: var(--primary-color3); -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s; }
    .mobile-button::before, .mobile-button::after { content: ""; position: absolute; top: 0; height: 3px; width: 100%; left: 0; top: 50%; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }
    .mobile-button span { position: absolute; width: 100%; height: 3px; left: 0; top: 50%; overflow: hidden; text-indent: 200%; }
    .mobile-button::before { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
    .mobile-button::after { -webkit-transform: translate3d(0, 7px, 0); -moz-transform: translate3d(0, 7px, 0); transform: translate3d(0, 7px, 0); }
    .mobile-button.active span { opacity: 0; }
    .mobile-button.active::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); -moz-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); }
    .mobile-button.active::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); -moz-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }

.tf-button-submit:hover { opacity: 0.9; color: #fff; }

.is_dark .tf-button-submit:hover { color: #fff; }

/* Header Fixed */
.header.is-fixed { position: fixed; top: 0;left: 0; width: 100%; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); z-index: 9999; background: var(--background-body); border: none; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

    .header.is-fixed.is-small { transition: height 0.3s ease; top: 0}
#main-nav-mobi { display: block; margin: 0 auto; width: 100%; position: absolute; top: 100%; left: 0; z-index: 999999; background-color: var(--primary-color8); }
    #main-nav-mobi ul { display: block; list-style: none; margin: 0; padding: 0; }
        #main-nav-mobi ul li { margin: 0; text-align: left; cursor: pointer; padding: 0; border-top: 1px solid rgba(138, 138, 160, 0.3); position: relative; padding-left: 72px; }
            #main-nav-mobi ul li:first-child { border-top: 0px; }
        #main-nav-mobi ul > li > a { color: var(--primary-color3); font-family: "Bakbak One"; font-weight: 400; font-size: 16px; display: inline-block; font-size: 14px; line-height: 40px; padding: 0 15px; }
        #main-nav-mobi ul > li.current-menu-item > a { color: var(--primary-color5); }
    #main-nav-mobi .sub-menu .menu-item a { margin-left: 15px; }
    #main-nav-mobi ul li > ul > li:first-child { border-top: 1px solid rgba(138, 138, 160, 0.3); }
    #main-nav-mobi .current-item > a,
    #main-nav-mobi ul > li > a:hover { color: var(--primary-color5); }
    #main-nav-mobi .menu-item-has-children .arrow { cursor: pointer; display: inline-block; font-size: 20px; font-family: "FontAwesome"; line-height: 48px; position: absolute; right: 15px; text-align: center; top: 0; width: 48px; }
        #main-nav-mobi .menu-item-has-children .arrow::before { font-family: "Font Awesome 5 Pro"; content: "\f107"; color: var(--primary-color3); }
    #main-nav-mobi .menu-item-has-children.current-menu-item .arrow:before { color: var(--primary-color3); }
    #main-nav-mobi .menu-item-has-children.current-menu-item .arrow:before { background: var(--primary-color5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    #main-nav-mobi .menu-item-has-children .arrow.active { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
        #main-nav-mobi .menu-item-has-children .arrow.active:before { content: "\f107"; }
    #main-nav-mobi ul ul li { background-color: var(--primary-color8); border-top: 1px solid rgba(138, 138, 160, 0.3); }

/* Page Title  */
.tf-page-title { padding: 77px 0; text-align: center; background: url("../images/background/bg-page-title.jpg") center center no-repeat fixed; background-size: cover; }
    .tf-page-title.style-2 { padding: 24px 0 15px; }
    .tf-page-title .breadcrumbs { width: 100%; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; }
        .tf-page-title .breadcrumbs li { font-family: "Bakbak One"; font-weight: 400; font-size: 14px; line-height: 20px; display: inline-block; padding: 0 10px 0 0px; color: var(--primary-color5); }
            .tf-page-title .breadcrumbs li:last-child { padding-right: 0; }
            .tf-page-title .breadcrumbs li a { font-weight: 700; position: relative; color: #888B8E; padding-right: 11px; }
                .tf-page-title .breadcrumbs li a::after { content: ""; position: absolute; color: #888B8E; top: 50%; transform: translateY(-50%); right: 0; width: 2px; height: 16px; background-color: #888B8E; }
                .tf-page-title .breadcrumbs li a:hover { color: var(--primary-color5); }
    .tf-page-title .page-title-heading { color: #fff; margin-bottom: 12px; }
    .tf-page-title.style-2 .breadcrumbs { margin-bottom: 0; }

/* Pagination
-------------------------------------------------------------- */
.tf-pagination { margin-top: 10px; text-align: center; }
    .tf-pagination ul { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; margin-left: 2px; position: relative; }
        .tf-pagination ul li { display: inline-flex; margin-right: 16px; width: 48px; height: 48px; justify-content: center; align-items: center; border: 1px solid var(--primary-color10); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; }
            .tf-pagination ul li:last-child { margin-right: 0; }
            .tf-pagination ul li a { font-family: "Poppins"; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--primary-color13); }
            .tf-pagination ul li.continue a { font-size: 32px; margin-top: -11px; }
            .tf-pagination ul li.btn-page { border-color: var(--primary-color12); background-color: var(--primary-color15); }
                .tf-pagination ul li.btn-page a { font-size: 34px; }
                .tf-pagination ul li.btn-page.btn-next { background-color: var(--primary-color5); border-color: var(--primary-color5); }
                    .tf-pagination ul li.btn-page.btn-next a { color: #141B22; }
            .tf-pagination ul li:hover, .tf-pagination ul li.active { background-color: var(--primary-color16); border-color: var(--primary-color16); }
                .tf-pagination ul li:hover a, .tf-pagination ul li.active a { color: var(--primary-color11); }

/* Scroll Top
-------------------------------------------------------------- */
#scroll-top { position: fixed; display: block; width: 50px; height: 50px; line-height: 50px; border-radius: 4px; text-align: center; z-index: 1; right: 14px; bottom: 23px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; opacity: 0; visibility: hidden; cursor: pointer; overflow: hidden; z-index: 9999; }
    #scroll-top.show { right: 15px; opacity: 1; visibility: visible; }
    #scroll-top::before, #scroll-top::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
    #scroll-top::before { z-index: -1; background-color: var(--primary-color5); }
    #scroll-top::after { content: "\f077"; font-family: "Font Awesome 5 Pro"; font-size: 18px; color: #ffffff; font-weight: 600; }
    #scroll-top:hover { transform: translateY(-7%); }

/* Footer
-------------------------------------------------------------- */
.footer { background-size: cover; background-color: #080808; }
    .footer .footer-inner { padding: 61px 0 40px; }
    .footer .widget.widget-infor { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; padding-right: 65px; padding-top: 65px; margin-top: 0; }
        .footer .widget.widget-infor .logo { flex-shrink: 0; }
            .footer .widget.widget-infor .logo img { max-height: 100px; height: auto; width: auto; }
        .footer .widget.widget-infor .content { font-size: 16px; line-height: 1.6; text-align: justify; flex-grow: 1; }
        .footer .widget.widget-infor .logo { margin-bottom: 13px; }
        .footer .widget.widget-infor .content { font-size: 14px; line-height: 22px; color: #C2C3C5; }
        .footer .widget.widget-infor .content-phone { font-family: 'Urbanist', sans-serif; font-size: 24px; font-weight: 800; }
        .footer .widget.widget-infor .content-address { font-family: 'Urbanist', sans-serif; font-size: 16.7px; font-weight: 800; line-height: 25.05px; }
    .footer .widget.widget-menu { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; height: 100%; flex-direction: row; flex-wrap: nowrap; padding: 0px 65px; }
        .footer .widget.widget-menu .menu ul li { padding-bottom: 15px; }
            .footer .widget.widget-menu .menu ul li a { font-size: 14px; line-height: 22px; color: #C2C3C5; }
                .footer .widget.widget-menu .menu ul li a:hover { color: var(--primary-color5); }
    /*.footer .widget.widget-menu .menu ul li:last-child { padding-bottom: 0; }*/
    .footer .widget .widget-title { font-family: 'Urbanist', sans-serif; font-size: 36px; font-weight: 800; line-height: 25.05px; margin-bottom: 38px; }
    .footer .bottom { border-top: 1px solid #434343; padding: 13px 0 14px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between; }
        .footer .bottom .social-item { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; }
            .footer .bottom .social-item li { margin-right: 45px; }
                .footer .bottom .social-item li:last-child { margin-right: 0; }
                .footer .bottom .social-item li a { font-size: 15px; color: #fff; }
                    .footer .bottom .social-item li a:hover { color: var(--primary-color5); }
        .footer .bottom .copy-right { color: #C2C3C5; font-size: 14px; line-height: 22px; }

/*Action Box -------------------------
------------------------------------------ */
/*.action-box .action-box-inner { background: url("../images/background/subscribe.png"); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px; text-align: center; margin-top: -105px; padding: 20px 65px; }*/
.action-box .action-box-inner { background: url("../images/background/bg-action-box1.png"), linear-gradient(268.28deg, #FFB800 -1.34%, #F0AD4E 100%); margin-top:80px; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 8px; text-align: center; padding: 40px 0 40px; }
    .action-box .action-box-inner .title { color: #fff; margin-bottom: 4px; margin-left: -16px; }
    .action-box .action-box-inner .content { font-size: 18px; line-height: 28px; color: #F7F7F9; margin-bottom: 22px; margin-left: -16px; text-align: center; }
    .action-box .action-box-inner .group-btn { margin-left: -16px; }
        .action-box .action-box-inner .group-btn .tf-button { padding: 12px 24px; margin-right: 20px; }
            .action-box .action-box-inner .group-btn .tf-button i { margin-right: 10px; }
            .action-box .action-box-inner .group-btn .tf-button:last-child { margin-right: 0; }
            .action-box .action-box-inner .group-btn .tf-button.discord { background-color: #5865F2; color: #fff; }
                .action-box .action-box-inner .group-btn .tf-button.discord::before { background-color: #21E786; }

/* PreLoad
-------------------------------------------------------------- */
@keyframes loading-animation_loadedAnimation {
    0% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    50% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.01); opacity: 0; }
}

@keyframes loading-animation_fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes loading-animation_makeInvisible {
    100% { visibility: hidden; }
}

@keyframes logoPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px #FFB800); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 15px #FFB800); }
    100% { transform: scale(1); filter: drop-shadow(0 0 5px #FFB800); }
}

@keyframes preloadFadeOut {
    0% { transform: scale(1); opacity: 1; border-radius: 0%; }
    50% { border-radius: 50%; }
    100% { transform: scale(0); opacity: 0; border-radius: 50%; }
}

@keyframes bounceIn {
    0% { transform: scale(0.3) translate(-50%, -50%); }
    50% { transform: scale(1.05) translate(-50%, -50%); }
    70% { transform: scale(0.9) translate(-50%, -50%); }
    100% { transform: scale(1) translate(-50%, -50%); }
}

.loading-animation_innerRing,
.loading-animation_outerRing { transform-origin: center; will-change: transform; animation-duration: 0.8s; /* Shortened animation duration */ }

.preload-logo { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; z-index: 100; transform-origin: 0 0; background: url(../icon/preload.png) center center no-repeat; animation: bounceIn 0.8s ease infinite alternate; /* Shortened animation duration */ }

.loading-animation_loaded { animation: loading-animation_makeInvisible 1ms 2s forwards; /* Shortened total duration */ pointer-events: none; }

    .loading-animation_loaded .loading-animation_innerRing { transform-origin: center; animation: loading-animation_loadedAnimation 0.8s cubic-bezier(.25,.01,.25,1) 0.5s forwards; /* Shortened durations */ }

    .loading-animation_loaded .loading-animation_outerRing { transform-origin: center; animation: loading-animation_loadedAnimation 0.8s cubic-bezier(.3,.01,.25,1) 0.7s forwards; /* Shortened durations */ }

    .loading-animation_loaded .preload-logo { animation: bounceIn 0.8s ease infinite alternate, loading-animation_fadeOut 0.8s ease-in-out 0.5s forwards; /* Shortened durations */ }
/*
.preload { position: fixed; width: 100%; height: 100%; background: #fff; top: 0; left: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; overflow: hidden; }

.preload-logo {position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; z-index: 100; margin: -200px 0 0 -200px; background: #ffffff; background: url(../icon/preload.png) center center no-repeat; animation: preload 1s linear infinite alternate; -webkit-animation-name: bounceIn; animation-name: bounceIn; }

.preload-hidden { animation: preloadFadeOut 0.6s ease-in-out forwards; }

.preload-logo.pulsing { animation: logoPulse 0.5s ease-in-out infinite; }

*/
.hidden { display: none !important; }
.tf-blog { padding: 30px 0 205px; }
    .tf-blog .tf-blog-item { box-sizing: border-box; padding: 30px 20px 28px; background: var(--primary-color8); margin-bottom: 30px; }
        .tf-blog .tf-blog-item .image { margin-bottom: 26px; position: relative; }
            .tf-blog .tf-blog-item .image img { width: 100%; }
            .tf-blog .tf-blog-item .image .category { position: absolute; top: 14px; right: 14px; font-family: "Bakbak One"; font-weight: 400; font-size: 14px; line-height: 22px; color: #fff; padding: 8px 10px; background-color: var(--primary-color5); }
        .tf-blog .tf-blog-item .title { margin-bottom: 4px; }
            .tf-blog .tf-blog-item .title a { color: var(--primary-color3); }
                .tf-blog .tf-blog-item .title a:hover { color: var(--primary-color5); }
        .tf-blog .tf-blog-item .content { margin-bottom: 15px; }
        .tf-blog .tf-blog-item .meta { margin-bottom: 2px; }
            .tf-blog .tf-blog-item .meta > span { margin-right: 0px; padding-right: 8px; font-family: "Bakbak One"; font-weight: 400; font-size: 16px; line-height: 24px; color: #888B8E; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left; display: inline-flex; position: relative; }
                .tf-blog .tf-blog-item .meta > span svg { margin-right: 7px; }
                    .tf-blog .tf-blog-item .meta > span svg path { fill: var(--primary-color5); }
                .tf-blog .tf-blog-item .meta > span::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 16px; background-color: #888B8E; }
                .tf-blog .tf-blog-item .meta > span:last-child::after { display: none; }
            .tf-blog .tf-blog-item .meta .admin i { font-size: 15px; margin-left: 2px; }
        .tf-blog .tf-blog-item .btn-readmore { display: inline-flex; font-family: "Bakbak One"; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--primary-color9); margin-left: 9px; }
            .tf-blog .tf-blog-item .btn-readmore i { margin-left: 4px; font-size: 23px; }
            .tf-blog .tf-blog-item .btn-readmore:hover { padding-left: 10px; color: var(--primary-color5); }
        .tf-blog .tf-blog-item.style-2 { padding: 24px 24px 30px 24px; }
            .tf-blog .tf-blog-item.style-2 .title { margin-bottom: 18px; }
            .tf-blog .tf-blog-item.style-2 .content { font-size: 16px; line-height: 24px; margin-bottom: 15px; }
    .tf-blog .main-content { margin-right: 50px; }

.tf-blog-detail { padding: 28px 0 102px 0; }

.detail-inner { margin-right: 30px; }
    .detail-inner .image { margin-bottom: 31px; }
        .detail-inner .image.style-2 { margin-right: -25px; }
            .detail-inner .image.style-2 img.mr20 { margin-right: 25px; }
            .detail-inner .image.style-2 img { width: calc(50% - 30px); }
    .detail-inner .title { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: flex-start; justify-content: space-between; flex-direction: column; }
        .detail-inner .title h3 { color: var(--primary-color3); }
        .detail-inner .title .category { color: var(--primary-color3); background-color: var(--primary-color5); padding: 8px 10px; font-family: "Bakbak One"; font-weight: 400; font-size: 14px; line-height: 22px; }
    .detail-inner .meta { margin-bottom: 15px; }
        .detail-inner .meta span { display: inline-flex; align-items: center; color: #888B8E; margin-right: 6px; padding-right: 13px; position: relative; }
            .detail-inner .meta span svg { margin-right: 7px; }
            .detail-inner .meta span::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 20px; background-color: #888B8E; }
            .detail-inner .meta span:last-child { margin-right: 0; padding-right: 0; }
                .detail-inner .meta span:last-child::after { display: none; }
    .detail-inner .content-inner { margin-bottom: 21px; }
        .detail-inner .content-inner.mb24 { margin-bottom: 24px; }
        .detail-inner .content-inner .title { margin-bottom: 11px; color: var(--primary-color3); font-size: 30px; line-height: 42px; }
    .detail-inner .post-infor { padding: 27px 33px 23px; margin-bottom: 40px; background-color: var(--primary-color18); border-left: 8px solid var(--primary-color5); }
        .detail-inner .post-infor .title { font-weight: 600; font-size: 24px; line-height: 30px; margin-bottom: 10px; }
        .detail-inner .post-infor .content { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left; }
            .detail-inner .post-infor .content .star { margin-right: 9px; }
                .detail-inner .post-infor .content .star i { color: #E8D41F; font-size: 17px; margin-right: 6px; }
                .detail-inner .post-infor .content .star span { color: var(--primary-color19); font-size: 14px; line-height: 22px; }
            .detail-inner .post-infor .content .name { color: var(--primary-color20); font-family: "Bakbak One"; font-weight: 400; font-size: 16px; line-height: 24px; }
    .detail-inner .content-bottom { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between; align-items: center; margin-bottom: 34px; }
        .detail-inner .content-bottom .widget { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between; }
            .detail-inner .content-bottom .widget .widget-title { font-size: 16px; line-height: 24px; margin-right: 14px; margin-top: 4px; color: var(--primary-color14); }
            .detail-inner .content-bottom .widget ul { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; }
                .detail-inner .content-bottom .widget ul li { margin-right: 12px; }
                    .detail-inner .content-bottom .widget ul li a { font-size: 18px; color: var(--primary-color13); }
                        .detail-inner .content-bottom .widget ul li a:hover { color: var(--primary-color5); }
                    .detail-inner .content-bottom .widget ul li:last-child { margin-right: 0; }
            .detail-inner .content-bottom .widget.widget-socical ul li:nth-child(1) a { font-size: 15px; }
            .detail-inner .content-bottom .widget.widget-tag ul li { margin-right: 0px; }
                .detail-inner .content-bottom .widget.widget-tag ul li a { color: var(--primary-color14); padding: 8px 12px; background-color: var(--primary-color21); font-size: 12px; line-height: 18px; margin-right: 11px; color: var(--primary-color20); }
                    .detail-inner .content-bottom .widget.widget-tag ul li a:hover { color: #fff; background-color: var(--primary-color5); }
                .detail-inner .content-bottom .widget.widget-tag ul li:last-child a { margin-right: 0; }
    .detail-inner .post-navigator { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between; margin-bottom: 59px; }
        .detail-inner .post-navigator li { max-width: 40%; background-color: var(--primary-color8); padding: 21px 20px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left; }
            .detail-inner .post-navigator li .thump { margin-right: 16px; flex-shrink: 0; }
            .detail-inner .post-navigator li .content { margin-top: -11px; }
                .detail-inner .post-navigator li .content .btn-post { font-weight: 700; font-size: 14px; line-height: 22px; color: #888B8E; }
                    .detail-inner .post-navigator li .content .btn-post:hover { color: var(--primary-color5); }
                .detail-inner .post-navigator li .content .title { margin-bottom: 0; margin-top: 2px; }
                    .detail-inner .post-navigator li .content .title a { font-family: "Poppins"; font-weight: 700; font-size: 18px; line-height: 28px; color: var(--primary-color3); }
                        .detail-inner .post-navigator li .content .title a:hover { color: var(--primary-color5); }
            .detail-inner .post-navigator li:last-child { flex-direction: row-reverse; }
                .detail-inner .post-navigator li:last-child .thump { margin-right: 0; margin-left: 16px; }
                .detail-inner .post-navigator li:last-child .content { text-align: right; }
    .detail-inner #comments .heading { margin-bottom: 5px; color: var(--primary-color3); }
    .detail-inner #comments .sub-heading { margin-bottom: 30px; }
    .detail-inner #comments .comment-form fieldset { float: left; width: 34%; margin-bottom: 20px; padding-right: 10px; padding-left: 0; }
        .detail-inner #comments .comment-form fieldset.message { width: 100%; margin-bottom: 23px; padding-right: 0; }
        .detail-inner #comments .comment-form fieldset:nth-child(2n) { width: 66%; padding-left: 10px; padding-right: 0; }
    .detail-inner #comments .comment-form .tf-button { background-color: var(--primary-color5); color: #fff; }

/*# sourceMappingURL=style.css.map */
#site-header-inner .header-right .tf-button.connect { color: #141B22; padding: 0px 35px; border-radius: 50px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16.8px; font-weight: 600; line-height: 37.2px; text-align: center; display: inline-flex; align-items: center; gap: 30px; }
/*header { background-color: #000000 }*/
header #site-header-inner { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; margin: 0px auto; }
    header #site-header-inner .header-right { margin-left: 0px; display: inline-flex; flex-direction: row; justify-content: center; gap: 35px; }
        header #site-header-inner .header-right .user, header #site-header-inner .header-right .mode-switch { padding: 0px 10px; }
.tf-collection { margin: 70px auto 0px auto; }
.logo-slider-wrap { background-color: #ffb800; }
.tf-product::before { border-left: 5px solid #FFB800; border-top: 5px solid #FFB800; }
.tf-product::after { border-right: 5px solid #FFB800; border-bottom: 5px solid #FFB800; }
.tf-roadmap .roadmap-box .content::before { border-left: 5px solid #FFB800; border-top: 5px solid #FFB800; }
.tf-roadmap .roadmap-box .content::after { border-right: 5px solid #FFB800; border-bottom: 5px solid #FFB800; }
.tf-slider.home2 { background: url(../images/slider/bg-slider-2.jpg) 50% no-repeat; background-size: cover; }
.tf-roadmap-style-thumb { overflow: hidden; list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1; }
.social { display: flex; justify-content: center; gap: 35px; margin: 35px auto 0px auto; }

    .social img { width: 200px; height: auto; }

.tf-item-detail-inner-reverse { margin-right: 70px; margin-top: 13px; margin-left: 0px; }
.tf-roadmap .swiper-button-next, .tf-roadmap .swiper-button-prev { bottom: 0; height: unset; position: absolute !important; position: unset; top: auto; width: unset; }

.tf-roadmap .swiper-button-next, .tf-roadmap .swiper-button-prev { bottom: 0; height: unset; position: absolute !important; position: unset; top: auto; width: unset; }
.sl-roadmap .swiper-slide.swiper-slide-active .shape-circle svg .fill-2 { fill: var(--primary-color5); }
.tf-roadmap::before { background: linear-gradient(180deg, var(--primary-color5) 0%, var(--primary-color5) 100%); }
.sl-roadmap .swiper-slide.swiper-slide-active .shape-circle svg .fill-1 { fill: var(--primary-color5); }
header #site-header-inner #site-logo { margin-right: 0px; }

@media only screen and (max-width: 1300px) {
    header #site-header-inner .header-right .mode-switch, header #site-header-inner .header-right .tf-button, header #site-header-inner .header-right .user { margin-right: 40px; }
}

@media only screen and (max-width: 1300px) {
    header #site-header-inner .header-right .mode-switch, header #site-header-inner .header-right .tf-button, header #site-header-inner .header-right .user { margin-right: 10px; }
}

@media only screen and (max-width: 991px) {
    header #site-header-inner .header-right .mode-switch { margin-right: 50px; }
}

.tf-slider.home-bg { background: url(/Assets/images/background/anasayfa/bg-01.jpg) 50% no-repeat; background-size: cover; }
.tf-slider.home2.home-bg-1 { background: url(/Assets/images/background/anasayfa/bg-02.jpg) center center no-repeat; background-size: cover; }
.tf-roadmap-ss.section-bg-1.home-bg-2 { background: var(--background-body); background-size: cover; }
/*.tf-slider.home2.abd-bg { background: url(/Assets/images/background/abd-borsasi/bg-01.png) 50% no-repeat; background-size: cover; }*/
/*.tf-section.tf-partner-sec.abd-bg-1 { background: url(/Assets/images/background/abd-borsasi/bg-01.png) 50% no-repeat; background-size: cover; }*/
/*.tf-section.tf-about.style-2.abd-bg-2 { background: url(/Assets/images/background/abd-borsasi/bg-01.png) 50% no-repeat; background-size: cover; }*/
.tf-slider.home2.bist-bg { background: url(/Assets/images/background/bist/bg-slider-4.png) 70% no-repeat; background-size: cover; background-color: #080808; }
.tf-news .tf-slider.home2.bist-bg { background: url(/Assets/images/background/bist/bg-slider-5.jpg) 70% no-repeat; background-size: cover; background-color: #080808; }
/*.tf-slider.home2.bist-bg-2 { background: url(/Assets/images/background/bist/bg-slider-5.jpg) 70% no-repeat; background-size: cover; background-color: #080808; }*/
.tf-slider.home2.bist-bg-2 { background: url(/Assets/images/background/main_vector.png) 70% no-repeat; background-size: 100% 50%; background-color: #080808; }
.tf-slider.home2.abd-bg-2 { background: url(/Assets/images/background/abd-borsasi/bg-slider-5.jpg) 70% no-repeat; background-size: cover; background-color: #080808; }
.tf-section.section-roadmap3.section-bg-1.bist-bg-1 { background: url(/Assets/images/background/bist/bg-02.jpg); background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; }
.tf-section.tf-about.bist-bg-2 { background: url(/Assets/images/background/bist/bg-03.png) }
/*.tf-slider.tefas-bg { background: url(/Assets/images/background/tefas-fonlari/bg-03.png) 50% no-repeat; background-size: cover; }*/
.tf-roadmap-ss.section-bg-1.ucretler-bg { background: url(/Assets/images/background/ucretler/bg-01.jpg); background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; position: relative; }
.tf-slider.home2.akademi-bg { background: url(/Assets/images/background/akademi/bg-01.jpg) 50% no-repeat; background-size: cover; }
.tf-page-title.sector-bg { background: url(/Assets/images/background/sectors/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.akademi-bg { background: url(/Assets/images/background/akademi/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.akademi-detay-bg { background: url(/Assets/images/background/akademidetay/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.haber-bg { background: url(/Assets/images/background/haber/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.haber-detay-bg { background: url(/Assets/images/background/haberdetay/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.content-bg { background: url(/Assets/images/background/content/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.sozluk-bg { background: url(/Assets/images/background/sozluk/bg-01.jpg) center center no-repeat; background-size: cover; }
.tf-page-title.sozluk-detay-bg { background: url(/Assets/images/background/sozlukdetay/bg-01.jpg) center center no-repeat; background-size: cover; }
#main-nav > ul > li.active > a::before { opacity: 1; background-color: var(--primary-color5); }
#main-nav > ul > li.active > a { color: var(--primary-color5); }
.btn-slider-1 { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 30px; }

.tf-button-1 { display: inline-block; padding: 10px; transition: transform 0.3s ease; }

    .tf-button-1 img { width: 200px; height: auto; object-fit: contain; }

    .tf-button-1:hover { transform: scale(1.05); }

    .tf-button-1.style-2 img { width: 200px; height: auto; object-fit: contain; }

.button-container { text-align: center; margin-bottom: 20px; }

/* Pasif (active olmayan) tab-button stilini tanımlıyoruz */
.tab-button { background-color: #161616; border: none; color: #6E7A88; padding: 15px 30px; margin: 5px; font-size: 16px; border-radius: 50px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }

    /* Aktif buton */
    .tab-button.active { background-color: var(--primary-color5); color: #080808; }

    /* Hover (fare ile üzerine gelindiğinde) */
    .tab-button:hover { background-color: var(--primary-color5); color: #080808; }

/* Flex yapısı */
.flex-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); }

.flex-row-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #ddd; border-bottom: 0px; }

.flex-item { flex: 1; text-align: center; padding: 10px; }

.flex-item-justify { flex: 1; text-align: justify; padding: 10px; }

.flex-item-end { flex: 1; text-align: end; padding: 10px; color: var(--primary-color5); }

.button-header { background-color: #161616; border: none; color: #F4F6F8; padding: 15px 30px; font-size: 21.36px; text-align: center; border-radius: 50px; margin: 5px; width: 40vw; height: 10vh; display: flex; align-items: center; justify-content: center; font-family: 'Urbanist', sans-serif; font-weight: 700; line-height: 21.57px; letter-spacing: 0.1348px; }

    .button-header.yellow { background-color: var(--primary-color5); color: #080808; }

@media screen and (max-width: 768px) {
    .button-header { width: 60vw; height: 8vh; font-size: 18px; }

    .tab-button { padding: 12px 25px; font-size: 14px; }

    .flex-item, .flex-item-justify, .flex-item-end { font-size: 12px; }
}

@media screen and (max-width: 480px) {
    .button-header { width: 80vw; height: 6vh; font-size: 16px; }

    .tab-button { padding: 10px 20px; font-size: 12px; }
    .flex-row { flex-direction: column; }

    .flex-item, .flex-item-justify, .flex-item-end { text-align: center; padding: 5px; }
}

.disabled-button { pointer-events: none; cursor: not-allowed; }
.display-center { display: flex; align-items: center; }
.modal { position: absolute; z-index: 1050; overflow: auto; align-items: center; top: 100%; right: 20px; height: fit-content; left: auto; }
.triangle { position: fixed; display: none; z-index: 9999; overflow: auto; top: 82%; left: 93%; }
/* Modal genel stil */
.modal { position: absolute; z-index: 1050; width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; top: 104%; left: 79%; height: fit-content; }

/* Üçgenin modal'ın üstüne yer alması için */
.triangle { position: fixed; display: none; z-index: 9999; overflow: auto; top: 82%; left: 93%; }

/* Modal içerik stili */
.modal-content { background-color: #fefefe; padding: 20px; border: 1px solid #888; width: 247px; text-align: center; border-radius: 10px; }
.app-links img { width: 120px; margin: 10px; }
.btn-close { cursor: pointer; position: absolute; top: 2%; right: 5%; font-size: 24px; z-index: 1000; }
.tf-work-container { display: flex; flex-wrap: wrap; justify-content: space-between; }
.tf-work { background: var(--primary-color8); padding: 20px 20px 34px; margin-bottom: 30px; position: relative; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 calc(25% - 30px); /* Four items per row */ min-height: 300px; /* Minimum height to ensure equal height */ }
.tf-roadmap .roadmap-box .content { min-height: 300px; }
.overlay img { height: auto; max-width: 100%; width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic; background-size: cover; }
.center { justify-content: space-around; }
.social-item li a:hover svg path { fill: var(--primary-color5); }
.tf-slider.banner-bg { position: relative; background: url(/Assets/images/banner/banner-home.jpg) center center no-repeat; background-size: cover; display: flex; align-items: baseline; justify-content: flex-end; }

.slider-content { text-align: right; color: #fff; padding: 2rem 4rem; }

    .slider-content .heading { margin-bottom: 1rem; }

    .slider-content .sub-heading { margin-bottom: 2rem; }

.btn-slider { display: flex; gap: 1rem; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-evenly; }

.btn-store img { width: 150px; height: auto; transition: transform 0.3s ease; }

    .btn-store img:hover { transform: scale(1.1); }
.banner-span { color: var(--primary-color5); }
.phones-image { display: none; }
/* Genel Cookie Banner */
#cookie-banner {
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    color: #fff;
    padding: 55px 300px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: padding 0.3s ease;
    background-color: #161616;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

/* Butonlar */
.cookie-btn {
    background-color: #FFB800;
    color: #000;
    width: 200px;
    height: 44px;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

    /* Buton Hover */
    .cookie-btn:hover {
        background-color: #E6A800;
    }

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}

    .popup-overlay.active {
        display: flex;
    }

/* Popup Content */
.popup-content {
    background-color: #161616;
    color: #fff;
    width: 600px;
    max-width: 90%;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-family: 'Urbanist', sans-serif;
    position: relative;
    max-height: 90%;
    overflow-y: auto;
}

/* Header */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}

/* Title */
.popup-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.15000000596046448px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.popup-overlay.no-scroll {
    overflow: hidden !important;
}

/* Close Button (Çarpı) */
.close-btn {
    background: none;
    border: none;
    font-family: Urbanist;
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .close-btn:hover {
        color: #FFB800;
    }

/* Description */
.popup-description {
    margin-bottom: 15px;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15000000596046448px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

/* Çerez Kategorileri */
.cookie-categories {
    margin-top: 20px;
}

/* Kategori Header */
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #333;
    cursor: pointer;
}

/* Chevron ve Başlık Grubu */
.chevron-and-title {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-y: hidden;
}

/* Chevron Butonu */
.toggle-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    overflow-y: hidden;
}

    .toggle-btn:focus {
        outline: none;
    }

    .toggle-btn:focus-visible {
        outline: none;
    }

    .toggle-btn:focus:not(:focus-visible) {
        outline: none;
    }

.chevron-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease, outline 0.3s ease;
    outline: none;
    overflow-y: hidden;
}

    /* Chevron Yukarı */
    .chevron-icon.up {
        transform: rotate(180deg);
        overflow-y: hidden;
    }

.toggle-btn,
.chevron-icon {
    -webkit-tap-highlight-color: transparent;
}

/* Detaylar */
.category-details {
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: left;
    color: #fff;
    margin-top: 10px;
    display: none;
}

    .category-details.active {
        display: block;
    }

/* Yazılar */
.category-header span {
    font-family: 'Urbanist', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 20.4px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #fff;
}

/* Status Yazısı */
.status {
    margin-left: auto;
    color: #FFB800;
    font-size: 14px;
    font-weight: 500;
}

/* Switch Container */
.switch {
    position: relative;
    display: inline-block;
    width: 54.39px;
    height: 29.59px;
    background-color: #000;
    border-radius: 29.59px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    /* Gizli Input */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* Slider */
    .switch label {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        border-radius: 29.59px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin: 0;
    }

        /* Slider Circle */
        .switch label:before {
            content: "";
            position: absolute;
            height: 23px;
            width: 23px;
            left: 3px;
            bottom: 3px;
            background-color: #333;
            border-radius: 50%;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

    /* Açık Durum */
    .switch input:checked + label {
        background-color: #000;
    }

        .switch input:checked + label:before {
            transform: translateX(24px);
            background-color: #FFB800;
        }

.save-btn {
    background-color: #FFB800;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 20px;
    display: block;
    width: 35%;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

    .save-btn:hover {
        background-color: #E6A800;
    }

.category-header span,
.category-details span {
    font-family: 'Urbanist', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 20.4px;
    letter-spacing: 0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.category-details p {
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.category-header,
.category-details {
    transition: all 0.3s ease;
}

    .category-header.no-border {
        border-bottom: none;
    }

    .category-details.with-border {
        border-bottom: 1px solid #333;
    }

.subcategory {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

/* Responsive düzenlemeler */
@media (max-width: 768px) {
    #cookie-banner {
        padding: 20px;
    }

    .cookie-btn {
        width: 150px;
        height: 40px;
        font-size: 14px;
        margin: 5px;
    }

    .popup-content {
        width: 95%;
        padding: 15px 20px;
    }
}
.subcategory span { font-family: 'Urbanist', sans-serif; font-size: 14px; font-weight: 400; color: #F4F6F8; }

.comming-soon .bg-404 { position: absolute; left: 50%; top: 200px; transform: translateX(-50%); max-width: 90%; height: auto; z-index: 1; }
.sub-one { font-family: 'Urbanist', sans-serif; font-size: 41px; font-weight: 500; line-height: 49.2px; color: #FFFFFF; }
.sub-two { font-family: 'Urbanist', sans-serif; font-size: 48px; font-weight: 700; line-height: 57.6px; color: #FFFFFF; }
.sub-three { font-family: 'Urbanist', sans-serif; font-size: 24px; font-weight: 300; line-height: 33px; color: #FFB800; }
.error-page .top { width: 100%; text-align: center; padding: 20px 0; z-index: 2; position: relative; }
.error-page .mid { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; text-align: center; padding: 20px; z-index: 2; position: relative; }
.error-page .bottom { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 30px 0; z-index: 2; position: relative; }
.popup-footer { display: flex; justify-content: center; align-items: center; }
.footer-inner .row > div:not(:last-child)::after { content: ""; position: absolute; top: 65px; right: 0; height: 90%; width: 1px; background-color: #FFC943; transition: opacity 0.5s ease, height 0.5s ease; }
.recent-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }

    .recent-items li { background: var(--product-color20); padding: 20px; border-radius: 10px; display: flex; align-items: center; gap: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }

        .recent-items li img { width: 119px; height: 86px; object-fit: cover; border-radius: 10px; }

        .recent-items li a { color: #fff; text-decoration: none; font-weight: 500; transition: color 0.3s ease; }

        .recent-items li:hover { transform: translateY(-5px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); }

        .recent-items li a:hover { color: #ffd700; }

.footer .widget.widget-menu .menu ul li a.footer-link { font-family: 'Urbanist', sans-serif; font-size: 16.7px; font-weight: 700; line-height: 17px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
.subscribe-title-big { font-family: 'Alexandria', sans-serif; font-size: 70px; font-weight: 700; line-height: 70.08px; color: #000000 }
.subscribe-title-small { font-family: 'Alexandria', sans-serif; font-size: 40px; font-weight: 700; line-height: 56.07px; color: #000000 }
.subscribe-big { font-family: 'Alexandria', sans-serif; font-size: 35px; font-weight: 700; line-height: 46.32px; text-align: left; color: #000000; }
.subscribe-small { font-family: 'Urbanist', sans-serif; font-size: 17px; font-weight: 400; line-height: 24px; text-align: left; color: #000000 }
/*.action-box { display: flex; justify-content: center; align-items: center; }
.action-box-inner { display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.action-box-inner-left { flex: 1; text-align: left; }
.action-box-inner-right { flex: 2; display: flex; flex-direction: column; gap: 15px; padding: 0px 76px 0px 160px; }*/
.group-btn-1 { display: flex; align-items: center; gap: 10px; width: 100%; }
.email-input { padding: 13px 25px; border: 1px solid #d8ae3b; border-radius: 30px; background-color: #d8ae3b; box-sizing: border-box; width: 100%; height: auto; outline: none; transition: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.subscribe-btn { display: flex; justify-content: center; align-items: center; background: #fff; color: #000; padding: 13px 45px; border: none; border-radius: 30px; cursor: pointer; font-family: 'Alexandria', sans-serif; font-size: 20px; font-weight: 700; line-height: normal; Line-height varsayılan hale getirilir transition: background-color 0.3s ease; }
    .subscribe-btn:hover { background: #d8ae3b; }
.subscribe-small-container { display: flex; align-items: center; gap: 10px; }
    .subscribe-small-container input[type="checkbox"] { margin-top: 3px; }

.checkbox-wrapper-37 input[type="checkbox"] { display: none; }
.kvkk-wrapper-37 input[type="checkbox"] { display: none; }
.checkbox-wrapper-37 .terms-label { cursor: pointer; display: flex; align-items: center; }
    .checkbox-wrapper-37 .terms-label .label-text { margin-left: 10px; color: #fff; font-family: Arial, sans-serif; font-size: 16px; }
.kvkk-wrapper-37 .kvkk-label { cursor: pointer; display: flex; align-items: center; }
    .kvkk-wrapper-37 .kvkk-label .label-text { margin-left: 10px; color: #fff; font-family: Arial, sans-serif; font-size: 16px; }
.checkbox-wrapper-37 .checkbox-svg { width: 24px; height: 24px; border-radius: 7px; }
.checkbox-wrapper-37 .checkbox-box { fill: #000; stroke: var(--primary-color5); stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 0.3s ease-in, fill 0.2s ease-in; }
.checkbox-wrapper-37 .checkbox-tick { stroke: var(--primary-color5); stroke-dasharray: 172; stroke-dashoffset: 172; transition: stroke-dashoffset 0.3s ease-in; }
.kvkk-wrapper-37 .checkbox-svg { width: 24px; height: 24px; border-radius: 7px; }
.kvkk-wrapper-37 .checkbox-box { fill: #000; stroke: var(--primary-color5); stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 0.3s ease-in, fill 0.2s ease-in; }
.kvkk-wrapper-37 .checkbox-tick { stroke: var(--primary-color5); stroke-dasharray: 172; stroke-dashoffset: 172; transition: stroke-dashoffset 0.3s ease-in; }
.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-box { stroke: var(--primary-color5); }
.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-tick { stroke-dashoffset: 0; }
.kvkk-wrapper-37 input[type="checkbox"]:checked + .kvkk-label .checkbox-box { stroke: var(--primary-color5); }
.kvkk-wrapper-37 input[type="checkbox"]:checked + .kvkk-label .checkbox-tick { stroke-dashoffset: 0; }

.mobile-download-wrapper { display: none; background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%); padding:15px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; transition: all 0.3s ease-in-out; }
.mobile-download { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-left: 35px; }

.logo-section { display: flex; align-items: center; gap: 15px; }
.logo-icon { display: flex; align-items: center; gap: 10px; position: relative; }
.download-logo { height: 40px; object-fit: contain; border-radius: 10px; transition: transform 0.3s ease-in-out; }
.logo-section:hover .download-logo { transform: scale(1.05); }
.logo-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

.app-name { font-family: 'Urbanist', sans-serif; font-size: 17px; line-height: 25px; font-weight: bold; color: #fff; }
.rating-section { display: flex; align-items: center; gap: 5px; height: 20px; }
.stars { display: flex; gap: 3px; }
.star { width: 13px; height: 13px; fill: #FFB800;}
.half-star { fill: url(#halfGradient);}
.rating { font-family: 'Urbanist', sans-serif; font-size: 14px; font-weight: bold; color: #fff; }
.close-button { background: none; border: none; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); transition: transform 0.3s ease, color 0.3s ease; padding: 0px; }
    .close-button::before,
    .close-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; background-color: #fff; transform-origin: center; transition: background-color 0.3s ease, transform 0.3s ease; }
    .close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
    .close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
    .close-button:hover { transform: scale(1.2); }
        .close-button:hover::before,
        .close-button:hover::after { background-color: #FFB800; }

.download-button { background-color: #FFB800; color: #fff; font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: bold; padding: 2px 20px; border: none; border-radius: 25px; text-decoration: none; cursor: pointer; transition: background-color 0.3sease, transform 0.2sease-in-out; }
    .download-button:hover { background-color: #fff; color: #FFB800; transform: translateY(-2px); box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); }

.dropdown-container { background-color: #161616; border-radius: 5px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.3s ease; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); border: 2px solid #262626; position: relative;}

    .dropdown-container.open::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 40%; height: 1px; background-color: #161616; transform: translateX(-50%); }
.side-bar { position: fixed; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; max-height: calc(100vh - 150px); display: block; width: 350px; padding-right: 15px; padding-bottom: 20px; scroll-behavior: smooth; }

    .side-bar::-webkit-scrollbar { display: none; }

    .side-bar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 3px; }

    .side-bar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; pointer-events: none; }

@media (max-width: 767px) {
    .side-bar { position: relative; top: 0; width: 100%; padding-right: 0; margin-bottom: 20px; overflow-y: visible; max-height: none; }
        .side-bar::after { display: none; }
}


/* Rest of your dropdown styles */
.dropdown-container { background-color: #161616; border-radius: 5px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.3s ease; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); border: 2px solid #262626; position: relative; }

    .dropdown-container.open::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 40%; height: 1px; background-color: #161616; transform: translateX(-50%); }

.dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer; color: #fff; font-family: 'Alexandria', sans-serif; font-size: 18px; font-weight: bold; gap: 15px; border: 2.67px solid #262626; }

.dropdown-title { flex-grow: 1; }

.dropdown-icon { transition: transform 0.3s ease; }

.dropdown-container.open .dropdown-icon { transform: rotate(180deg); }

.dropdown-content { display: none; padding: 10px 15px; background-color: #161616; }

.dropdown-container.open .dropdown-content { display: block; }

.footer-link { display: block; margin-bottom: 15px; color: #fff; font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 300; line-height: 24px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; text-decoration: none; transition: color 0.3s ease; }
    .footer-link:hover { color: var(--primary-color5); }
.info-link { font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 300; line-height: 44px; text-underline-position: from-font; text-decoration-skip-ink: none; color: #6E7A88; }
    .info-link a { font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 300; line-height: 44px; text-decoration-line: underline; text-decoration-style: solid; text-underline-position: from-font; text-decoration-skip-ink: auto; color: #6E7A88; }
.social-share-container { font-family: Alexandria, sans-serif; margin: 50px 0 50px; text-align: left; }
    .social-share-container .social-title { font-size: 46px; font-weight: 400; line-height: 74px; color: #fff; text-underline-position: from-font; text-decoration-skip-ink: none; margin-bottom: 15px; }
    .social-share-container .social-item { display: flex; align-items: center; gap: 55px; list-style: none; padding: 0; margin: 0; }
        .social-share-container .social-item li { display: inline-block; }
        .social-share-container .social-item a { text-decoration: none; color: #fff; font-size: 35px; transition: transform 0.3s ease, color 0.3s ease; }
            .social-share-container .social-item a:hover { transform: scale(1.2); color: #FFB800; }

        .social-share-container .social-item svg,
        .social-share-container .social-item i { width: 35px; height: 35px; }

.featured { max-width: 1440px; /* Swiper'ı taşmayı önleyecek şekilde sınırla */ width: 100%; margin: 0 auto; /* Ortalansın */ overflow: hidden; /* Taşmayı önle */ }

.swiper-wrapper { display: flex; box-sizing: border-box; }

.swiper-slide { min-width: 250px; /* Slayt genişliği çok küçük olmamalı */ }

    .featured .swiper-slide { display: flex; flex-direction: column; gap: 10px; border-radius: 10px; overflow: hidden; padding: 15px; margin-bottom: 30px; }
    .featured .slide-image { width: 100%; height: 175px; border-radius: 8px; object-fit: cover; }
    .featured .slide-content { padding: 15px; }
    .featured .slide-title { font-family: 'Alexandria', sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; text-align: left; color: #FFFFFF; }
    .featured .slide-meta { font-family: 'Alexandria', sans-serif; font-size: 12px; font-weight: 300; line-height: 24px; text-align: left; color: #c1c1c1; margin-bottom: 10px; }
.featured .slide-heading { font-family: 'Alexandria', sans-serif; font-size: 26px; font-weight: 700; line-height: 38px; text-align: left; color: #FFFFFF; text-decoration: none; transition: color 0.3s ease; }
        .featured .slide-heading:hover { color: #ffb800; }

.slider-control { width: 100%; margin-top: 15px; display: flex; justify-content: center; align-items: center; }
.swiper-container-horizontal > .swiper-scrollbar { background: #161616; height: 7px; }
.swiper-scrollbar-drag { background: var(--primary-color5); }
.image-description { display: flex; justify-content: space-between; align-items: flex-start; margin: 10px 0px 30px 0px; padding: 0px; width: 100%; }
#logo_header { width: 65%; padding: 15px 0px; }

.main-title { font-size: 46px; font-weight: 800; line-height: 74px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; margin-bottom: 30px; }
.main-exp { font-size: 15px; font-weight: 500; line-height: 34px; text-align: justified; text-underline-position: from-font; text-decoration-skip-ink: none; color: #F4F6F8; }
    .main-exp ul { padding: 0; margin: 0 0 20px 20px; }
        .main-exp ul li { list-style-type: none; position: relative; margin-bottom: 10px; padding-left: 20px; font-family: "Alexandria", sans-serif; font-size: 15px; font-weight: 500; line-height: 44px; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; }
            .main-exp ul li::before { content: '•'; position: absolute; left: 0; color: #c2c3c5; font-size: 18px; }
.secondary-title { font-size: 26px; font-weight: 800; line-height: 74px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; }
.bist-campaign { background-color: var(--primary-color5); color: #141B22; padding: 5px 10px; border-radius: 13px; font-family: 'Alexandria', sans-serif; font-size: 14.8px; line-height: 37.2px; text-align: center; cursor: pointer; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; border: 1.34px solid #FFB800; }
    .bist-campaign:hover { background-color: #080b0e; }
    .bist-campaign:focus,
    .bist-campaign:focus-visible {background-color: var(--primary-color5); color: #141B22; outline: 2px solid #141B22; outline-offset: 2px;}
        .bist-campaign:focus:not(:focus-visible) {outline: none;}
.bist .tf-slider-item.style-2 { padding: 0.4% 13% 7.4%; position: relative; }
.bist.abd-bg-2 .tf-slider-item.style-2 { padding: 3.4% 13% 15.4%; position: relative; }
    .bist.abd-bg-2 .tf-slider-item.style-2 .heading { font-size: 67.26px; line-height: 1.2; color: #ffffff; margin-bottom: 20px; text-align: left; font-family: "Urbanist", sans-serif; }
    .bist.abd-bg-2 .tf-slider-item.style-2 .sub-heading { font-size: 29.7px; font-weight: 300; color: #ffffff; margin-bottom: 30px; text-align: left; font-family: 'Alexandria', sans-serif; }
    .bist .tf-slider-item.style-2 .overlay img { object-fit: contain; }
    .bist .tf-slider-item.style-2 .content-inner { position: relative; z-index: 2; margin: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
    .bist .tf-slider-item.style-2 .heading { font-size: 84.26px; line-height: 1.2; color: #ffffff; margin-bottom: 20px; text-align: left; font-family: "Urbanist", sans-serif; }
    .bist .tf-slider-item.style-2 .sub-heading { font-size: 33.7px; font-weight: 300; color: #ffffff; margin-bottom: 30px; text-align: left; font-family: 'Alexandria', sans-serif; }
    .bist .tf-slider-item.style-2 .overlay { position: absolute; top: 0; width: 100%; }
.special-btn-slider-1 { display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; }

.tf-bist { list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1; }
    .tf-bist .content-rm-thumb { display: flex; align-items: center; padding: 48px 42px 48px 42px; background: var(--product-color20); flex-direction: column; gap: 30px; min-height: 760px; justify-content: space-around; border-radius: 15px; }
.tf-bist .content-right { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.border-box { position: relative; display: inline-block; padding: 10px 30px; border-left: 2px solid #FFB800; border-right: 2px solid #FFB800; border-top-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; }
    .border-box::before,
    .border-box::after { content: ""; position: absolute; width: 30%; height: 2px; background: #FFB800; transition: all 0.3s ease-in-out; }
    .border-box::before { top: 0; left: 0; border-top-left-radius: 10px; }
    .border-box::after { bottom: 0; right: 0; border-bottom-right-radius: 10px; }
.tf-work-bist { background: var(--primary-color8); padding: 30px; margin-bottom: 30px; position: relative; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 380px; align-items: center; border-radius: 15px; }
.tf-work-bist .content { text-align: center; }
.faq-section { padding: 60px 0; color: #fff; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 32px; color: #fff; }
.accordion-container { margin: 0 auto; }
.accordion-item { margin-bottom: 16px; border-bottom: 1px solid rgb(255 255 255 / 50%); }
.accordion-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.3s ease; }
    .accordion-header h3 { margin: 0; font-size: 24px; color: #fff; }
.accordion-icon { width: 20px; height: 20px; transition: transform 0.3s ease; }
.accordion-item.active .accordion-icon { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-item.active .accordion-content { max-height: 1000px; }
.content-wrapper { padding: 0 20px 20px; color: #ccc; line-height: 1.6; }
    .content-wrapper ul { padding-left: 20px; margin-top: 10px; }
    .content-wrapper li { margin-bottom: 8px; }
.license-logos { display: flex; gap: 20px; margin-top: 20px; justify-content: center; }
    .license-logos img { height: 40px; width: auto; }
.tf-contents { padding: 66px 0 7% 0; }
.button-404 { background-color: var(--primary-color5); color: #141B22; padding: 10px 20px; border-radius: 13px; font-family: 'Alexandria', sans-serif; font-size: 23px; line-height: 46.86px; text-align: center; cursor: pointer; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; border: 1.34px solid #FFB800; }
.button-404:hover { background-color: transparent; color: #FFFFFF ;}
.full-image { width: 100%; }
.tf-slider.kredi-bg { position: relative; background: url(/Assets/images/background/kredi/bg-01.png) center center no-repeat; background-size: cover; display: flex; align-items: baseline; justify-content: flex-end; }
.kredi-bg .slider-content { text-align: right; color: #01081C; padding: 20vh clamp(2rem, calc(16rem + 10vw), 9rem); }
.kredi-bg .heading { font-family: 'Alexandria', sans-serif; font-size: clamp(26px, calc(20px + 2vw), 55px); line-height: 1.2; color: #01081C; }
.kredi-bg .sub-heading { font-family: 'Alexandria', sans-serif; font-size: clamp(14px, calc(12px + 1vw), 24px); line-height: 1.2; }
.tf-slider.home2.kredi-bg-2 { background: url(/Assets/images/background/kredi/bg-02.png) center no-repeat; background-size: contain; background-color: var(--background-body); }
.kredi-bg-2 .tf-slider-item.style-2 { padding: 493px 0 15px; text-align: center; }
.tf-kredi-container { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; }
    .tf-kredi-container .title { font-family: 'Alexandria', sans-serif; font-size: 38px; line-height: 37.5px; text-align: center; font-weight: 300; }
.tf-kredi .top { font-family: 'Alexandria', sans-serif; font-size: 38px; line-height: 22px; font-weight: 300; color: #FFFFFF }
.tf-kredi .middle { font-family: 'Alexandria', sans-serif; font-size: 38px; line-height: 38px; font-weight: 700; color: #FFFFFF }
.tf-kredi-heading { display: flex; flex-direction: column; height: 100%; justify-content: space-evenly; align-items: flex-start; gap: 25px; }
.yellow { color: var(--primary-color5); }
.tf-kredi-faq.faq-section { padding: 60px 0 200px; color: #fff; }
.kredi-campaign { background-color: var(--primary-color5); color: #141B22; padding: 5px 15px 5px 40px; border-radius: 13px; font-family: 'Alexandria', sans-serif; font-size: 14.8px; line-height: 37.2px; text-align: center; cursor: pointer; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 40px; border: 1.34px solid #FFB800; }
    .kredi-campaign:hover { background-color: var(--background-body); }
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 10000; }

.popup-container { background: var(--primary-color5); border-radius: 20px; padding: 40px; position: relative; animation: popupFadeIn 0.3s ease-out; max-width: 1000px; margin: 0 auto; }
.popup-flex { display: flex; align-items: center; margin-right: -140px; }

#contactPopup .popup-content { background-color: var(--primary-color5); color: #fff; width: 600px; max-width: 100%; padding: 0px 30px; border-radius: 10px; box-shadow: none; font-family: 'Urbanist', sans-serif; position: relative; max-height: 90%; overflow-y: auto; flex: 2; }

.popup-content h2 { font-family: 'Alexandria', sans-serif; font-size: 43px; line-height: 50px; color: #ffffff; font-weight: bold; margin-bottom: 30px; }

.popup-content p { font-family: 'Alexandria', sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 30px; color: #ffffff; opacity: 0.8; }

.form-group { margin-bottom: 20px; }

    .form-group input[type="text"],
    .form-group input[type="tel"],
    .form-group input[type="email"] { font-family: 'Alexandria', sans-serif; font-size: 15px; line-height: 15px; width: 90%; padding: 8px; border: none; border-radius: 8px; background: rgb(216 174 59); color: #000; }
    .form-group input::placeholder { font-size: 15px;line-height: 15px; font-family: 'Alexandria', sans-serif; opacity: 1;}

    .form-group input::placeholder { color: rgba(0, 0, 0, 0.6); }

.checkbox-group { display: flex; align-items: center; gap: 10px; }

    .checkbox-group input[type="checkbox"] { margin-top: 5px; }

    .checkbox-group label { font-family: 'Urbanist', sans-serif; font-size: 16px; line-height: 24px; color: #000; opacity: 0.8; }

.submit-btn { border: none; cursor: pointer; transition: background-color 0.3s; padding: 10px 40px; border-radius: 50px; font-family: 'Alexandria', sans-serif; font-size: 16.8px; font-weight: 600; line-height: 37.2px; text-align: center; display: inline-flex; align-items: center; background: #fff; }

    .submit-btn:hover { background: var(--background-body); }

.phone-mockup { flex: 0 0 393px; position: relative;}

    .phone-mockup img { width: 100%; height: auto; border-radius: 20px; }

@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

#contactPopup .checkbox-wrapper-37 .checkbox-svg { width: 17px; height: 17px; border-radius: 4px; }
#contactPopup .kvkk-wrapper-37 .checkbox-svg { width: 17px; height: 17px; border-radius: 4px; }
.content-card { width: 100%; aspect-ratio: 2 / 5; position: relative; border-radius: 15px 15px 0px 0px; overflow: hidden; transition: transform 0.3s ease; margin-bottom: 50px; min-height: 450px; max-height: 600px;}
    .content-card img { width: 100%; height: 65%; object-fit: cover; display: block; }
    .content-card::after { content: ""; position: absolute; bottom: 35%; left: 0; width: 100%; height: 20%; background: linear-gradient(to top, var(--background-body) 5%, transparent); pointer-events: none; }
.content-card-content { position: relative; width: 100%; height: 35%; background: linear-gradient(to top, var(--background-body) 5%, transparent); padding: 15px; color: white; text-align: left; }
.tf-content-headlist .title { font-family: 'Alexandria', sans-serif; font-size: 25px; font-weight: 400; line-height: 32px; display: block; margin-bottom: 5px; }
.level { font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 400; line-height: 30px; color: var(--primary-color5); display: block; margin-bottom: 5px; }
.duration { font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 400; line-height: 32px; display: flex; flex-direction: row; align-items: center; gap: 7px; }
.content-card img.star-icon { width: 12px; height: 12px; }
.tf-content-headlist { margin: 50px 0; text-align: center; }


.tf-content-write { margin: 50px 0px 100px; }
.tf-content-row { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.tf-content-faculty101 { margin: 50px 0px 100px; }
    .tf-content-faculty101 .border-box { padding: 15px 20px; }
    .tf-content-faculty101 .faculty-card { border-radius: 12px; overflow: hidden; transition: transform 0.3s ease-in-out; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; /* -webkit-box-direction: normal; */ -webkit-flex-direction: column; -ms-flex-direction: column; gap: 10px; margin-bottom: 60px; }
        .tf-content-faculty101 .faculty-card img { height: 290px; object-fit: cover; border-radius: 20px; }
    .tf-content-faculty101 .category-title { font-size: 22px; font-weight: bold; padding-bottom: 10px; border-bottom: 2px solid #FFC107; display: inline-block; }
    .tf-content-faculty101 .faculty-card img.star-icon { width: 10px; height: 10px; }
    .tf-content-faculty101 h3 { font-family: 'Urbanist', sans-serif; font-size: 40px; font-weight: 700; line-height: 24px; color: #FFFFFF; margin-bottom: 30px; }
    .tf-content-faculty101 h5 { font-family: 'Alexandria', sans-serif; font-size: 25px; font-weight: 400; line-height: 32px; color: #F4F6F8; }
    .tf-content-faculty101 small { font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 300; line-height: 40px; color: #F4F6F8; }
.button-card { display: flex; flex-direction: column; justify-content: center; background: #FFDB7E; border-radius: 20px; height: 290px; width: 100%; padding: 20px;}
    .button-card p { font-family: 'Alexandria', sans-serif; font-size: clamp(16px, 2vw, 24px); /* Min 18px, Max 24px */ font-weight: 500; line-height: 1.3; color: #000000; text-align: left; }
    .button-card img { margin-top: 15px; width: 35px; height: 35px;}
.tf-support { padding: 60px 0 30px; background: linear-gradient(to bottom, #080808 0%, #161616 100%); }
.tf-support-redirect { padding: 60px 0 30px;}
.support-main{display:flex; flex-direction: column; align-items: center; gap:50px}
    .support-main img {max-width: 50%;}
    .support-main h1 { font-family: "Urbanist", sans-serif; font-size: 85px; font-weight: 800; line-height: 105px; text-underline-position: from-font; text-decoration-skip-ink: none; }
.hint-title { font-family: "Urbanist", sans-serif; font-size: 30px; font-weight: 200; line-height: 50px; color: #6E7A88; text-align: center; }
.search-bar { display: flex; align-items: center; background-color: #161616; border: 2px solid #FFB800; border-radius: 10px; padding: 18px 15px; width: 55%; }
.search-icon { width: 25px; height: 25px; margin-right: 10px; }
.search-bar input[type="text"] { border: none; background: transparent; outline: none; color: #6E7A88; font-family: 'Urbanist', sans-serif; font-size: 20px; width: 100%; }
.search-bar input::placeholder { color: #AAA; }
.support-faq-section { padding: 60px 0 30px; background: linear-gradient(to top, #080808 0%, #161616 100%); }
    .support-faq-section .accordion-item { margin-bottom: 16px; border-bottom: 2px solid rgb(54 54 54); }
    .support-faq-section .accordion-header h3 { color: var(--primary-color5); }
.support-section.section-work { padding: 80px 0 200px; }
.support-box { background: transparent; border: 2px solid #262626; padding: 30px; margin-bottom: 30px; position: relative; transition: all 0.3sease; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 280px; border-radius: 15px; align-items: center; }
    .support-box p { text-align: center; }
.support-top-title { border-bottom: 1px solid rgb(255 255 255 / 50%); text-align: center; padding: 30px; font-family: 'Alexandria', sans-serif; font-size: 20px; line-height: 33px; font-weight: 600; margin-bottom: 40px; color: #F4F6F8; }
.tf-support-redirect .tf-work-container { display: flex; flex-wrap: wrap; justify-content: center; }
.tf-slider.home2.support-bg { position: relative; background: url(/Assets/images/background/support/bg-01.png) center center no-repeat; background-size: cover; display: flex; align-items: flex-start; justify-content: flex-end; padding: 50px; flex-direction: row-reverse; height: 900px; overflow: hidden; margin-bottom: 100px; }
.bist.support-bg .tf-slider-item.style-2 { padding: 6% 0% 11.4%; position: relative; }
    .bist.support-bg .tf-slider-item.style-2 .heading { font-size: 65px; line-height: 85px; color: #ffffff; margin-bottom: 20px; text-align: left; font-family: "Urbanist", sans-serif; }
    .bist.support-bg .tf-slider-item.style-2 .sub-heading { font-size: 27.53px; line-height: 72px; font-weight: 300; color: #ffffff; margin-bottom: 30px; text-align: left; font-family: 'Alexandria', sans-serif; }
.support-banner-content { color: white; text-align: left; }
    .support-banner-content .heading { font-size: 65px; font-weight: bolder; line-height: 85px; font-family: 'Urbanist', sans-serif; }
    .support-banner-content .sub-heading { font-size: 18px; margin-top: 10px; }
.header-content { display: flex; align-items: center; gap: 1rem; }
.header-icon { width: 60px; height: 60px; }
.header-content h1 { font-family: 'Alexandria', sans-serif; font-size: 40px; line-height: 42px; font-weight: 300; }
.breadcrumb { margin-top: 0.5rem; background-color: transparent; }
    .breadcrumb a { font-family: 'Alexandria', sans-serif; font-size: 20px; font-weight: 300; color: #FBB034; text-decoration: none; }
    .breadcrumb span { font-family: 'Alexandria', sans-serif; font-size: 20px; font-weight: 300; color: #FBB034; text-decoration: none; }
.reverse { flex-direction: row-reverse; }
.tf-support-sss{padding:60px 0px 100px}
.tf-support-sss .accordion-header h3 { text-transform: capitalize; }
.accordion-content ul { padding: 0; margin: 0 0 20px 20px; }
    .accordion-content ul li { list-style-type: none; position: relative; margin-bottom: 10px; padding-left: 20px; font-family: "Alexandria", sans-serif; font-size: 15px; font-weight: 500; line-height: 44px; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; }
        .accordion-content ul li::before { content: '•'; position: absolute; left: 0; color: #c2c3c5; font-size: 18px; }
.accordion-content h2 { margin-bottom: 15px; }

.side-bar-sss { position: absolute; overflow-y: hidden; display: contents; padding-right: 15px; }
.sss-content { display: block; padding: 10px 15px; background-color: #161616; border-radius: 15px; margin-bottom: 30px; }
    .sss-content .footer-link { display: block; margin-bottom: 15px; color: #fff; font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 300; line-height: 24px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; text-decoration: none; transition: color 0.3sease; padding-bottom: 10px; padding-right: 15px; border-bottom: 1px solid rgb(255 255 255 / 50%); }
        .sss-content .footer-link:hover { color: var(--primary-color5); }
.tf-support-info { padding: 60px 0 100px; }

.support-container { height: 380px; padding: 2rem; }

.support-content { display: flex; align-items: center; gap: 100px;}

.folder-icon { position: relative; width: 385px;}

    .folder-icon img { width: 100%; height: auto; }

.question-text { color: white; font-family: 'Alexandria', sans-serif; font-size: 36px; line-height: 24px; font-weight: 400; margin: 0; }

.tf-slider.tf-counter.home2 { padding: 40px; background: var(--background-body); }
.tefas-main-title { font-family: 'Urbanist', sans-serif; font-size: 80px; font-weight: 600; line-height: 105px; color: white; margin-bottom: 60px; }
.tefas-description, .tefas-tagline { font-family: 'Alexandria', sans-serif; font-size: 32px; font-weight: 300; line-height: 40px; color: white; margin-bottom: 40px; }
.tefas-title { padding: 12% 0% 12% 20%; }
.tf-slider.tf-counter.home2 { padding: 40px; background: var(--background-body); }
.tefas-row { display: flex; align-items: center; justify-content: flex-start; }
.tefas-main-title { font-family: 'Urbanist', sans-serif; font-size: 84px; font-weight: 600; line-height: 105px; color: white; margin-bottom: 60px; }

.tefas-description, .tefas-tagline { font-family: 'Alexandria', sans-serif; font-size: 32px; font-weight: 300; line-height: 40px; color: white; margin-bottom: 40px; }

.tefas-title { padding: 12% 0% 12% 20%; }
.tf-work-bist.tf-work-tefas { background: var(--background-body); }
.tefas-left { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; flex-wrap: wrap; }
.contact-section { background-color: #121212; padding: 50px 0px 125px; display: flex; align-items: center; }
.popup-contact { color: #fff; padding: 30px; border-radius: 10px; font-family: 'Urbanist', sans-serif; position: relative; max-height: 90%; overflow-y: auto; width: 100%; }
.contact-section input[type="text"], .contact-section input[type="email"] { width: 100%; padding: 17.5px; border-radius: 8px; font-size: 16px; border: none; background: #d8ae3b; color: #000; }
.special-form { display: flex; justify-content: space-between; gap: 10px; }
    .special-form select { width: 30%; padding: 12px 20px; border-radius: 8px; font-size: 16px; border: none; background: #d8ae3b; color: #000; font-family: 'Alexandria', sans-serif; }
    .special-form input[type="tel"] { width: 70%; padding: 17.5px; border-radius: 8px; font-size: 16px; border: none; background: #d8ae3b; color: #000; }
.checkbox-group { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.contact-section .kvkk-wrapper-37 .checkbox-svg {border: 1px solid #fff; }
/*.contact-section .terms-wrapper-37 .checkbox-svg {border: 1px solid #fff; }*/
.contact-section .checkbox-wrapper-37 .checkbox-svg {border: 1px solid #fff; }

.main-slider-item { height: 430px; display: flex; flex-direction: column; align-items:center; }
.main-slider { padding: 30px;}
.main-slider .swiper-wrapper { display: flex; align-items: center;}
.main-slider .swiper-wrapper .swiper-slide { margin: auto; width: 250px; background: black; border-radius: 10px; padding: 15px; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; border: 2px solid #444;}
.main-slider .swiper-wrapper .swiper-slide .main-slider-item p { font-size: 30px; text-align: left;   color: white; margin-top: 10px; line-height:1.3;}
.lottie-box { width: 210px; height: 350px; background: black; display: flex; justify-content: center; align-items: center;}
.main-slider .swiper-wrapper .swiper-slide:hover { transform: scale(1.1); border: 2px solid #444; border-color: #4a4a4a; outline-color: #4a4a4a;}

.animation_container_main { position: absolute; right: -10%; width: 80vw; height: 120%; z-index: 1; overflow: visible; }
.tf-news{ padding: 60px 0 60px; }
    .tf-news .header-content h1 { font-family: 'Alexandria', sans-serif; font-size: 60px; line-height: 64px; font-weight: bolder; }
    .tf-news .breadcrumb a { font-family: 'Alexandria', sans-serif; font-size: 20px; line-height: 20px; font-weight: 500; color: #FBB034; text-decoration: none; }
    .tf-news .breadcrumb span { font-family: 'Alexandria', sans-serif; font-size: 20px; line-height: 20px; font-weight: 500; color: #FBB034; text-decoration: none; }
.news { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.news-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
    .news-items li { background: var(--product-color20); padding: 20px; border-radius: 10px; display: flex; gap: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; justify-content: space-between; align-items: center; }
.news-items li a.news-link { font-family: 'Urbanist', sans-serif; font-size: 16.7px; font-weight: 700; line-height: 17px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
    .news-items li a.news-link .news-content-title .title { font-family: 'Alexandria', sans-serif; font-size: 13px; font-weight: 600; line-height: normal; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
    .news-items li a.news-link .news-date { font-family: 'Alexandria', sans-serif; font-size: 10px; font-weight: 600; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #6E7A88; display: contents; }
        .news-items li img { width: 223.08px; height: 109.83px; object-fit: cover; border-radius: 10px; }
.news-title { display: flex; justify-content: center; margin: 60px 0px; }
    .news-title h3 { font-family: 'Urbanist', sans-serif; font-weight: 800; font-size: 38.3px; line-height: 44px; position: relative; display: inline-block; color: white; margin-bottom: 20px; padding-bottom: 0; }
        .news-title h3::before { content: ""; position: absolute; height: 16px; background: linear-gradient(to right, #FFC700 0%, transparent); bottom: -1px; left: -4px; width: 70%; z-index: -1; border-radius: 2px; clip-path: polygon(10px -40%, 100% 0%, 100% 100%, 0% 100%); }
.news-content { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.news-content-title { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; gap: 30px; }


.tf-news .breadcrumb { padding: .75rem 0; }
.tf-news .sub-title { font-family: 'Urbanist', sans-serif; font-weight: 200; font-size: 30px; line-height: 30px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #6E7A88;}
.top-news{}
.top-news .news-items { width: 100%; margin: 120px 0 60px 0}
        .top-news .news-items li a.news-link .news-content-title .title { font-family: 'Alexandria', sans-serif; font-size: 40px; font-weight: 600; line-height: normal; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
        .top-news .news-items li a.news-link .news-content-title .sub-title { font-family: 'Urbanist', sans-serif; font-size: 20px; font-weight: 300; line-height: 30px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: var(--primary-color); }
        .top-news .news-items li a.news-link .news-content-title .button { font-family: 'Alexandria', sans-serif; font-size: 24px; font-weight: 600; line-height: normal; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFB800; }
        .top-news .news-items li .image { flex: 0 0 45%; display: flex; align-items: center; justify-content: center; }

            .top-news .news-items li .image img { width: 512.55px; height: 356.09px; object-fit: cover; border-radius: 10px; }
.news-general-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 60px 0; }
    .news-general-list .news-items li a.news-link .news-content-title .title { font-family: 'Alexandria', sans-serif; font-size: 19.75px; font-weight: 600; line-height: normal; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
    .news-general-list .news-items li a.news-link .news-content-title .sub-title { font-family: 'Urbanist', sans-serif; font-size: 13.88px; font-weight: 300; line-height: 14.8px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #F4F6F8; }
    .news-general-list .news-items li a.news-link .news-content-title .button { font-family: 'Alexandria', sans-serif; font-size: 11.85px; font-weight: 600; line-height: normal; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFB800; }
    .news-general-list .news-items li .image { flex: 0 0 45%; display: flex; align-items: center; justify-content: center; }
    .news-general-list .news-items li img { aspect-ratio: 1.439 / 1; width: 523.08px; height: 173.83px; object-fit: cover; border-radius: 10px; }
.padding-0 { padding: 0px; }

.tf-blog .header-content h1 { font-family: 'Alexandria', sans-serif; font-size: 60px; line-height: 64px; font-weight: 700; }
.tf-blog .breadcrumb { margin: 3rem 0px; padding: 0px; background-color: transparent; }
    .tf-blog .breadcrumb a { font-family: 'Alexandria', sans-serif; font-size: 20px; line-height: 20.1px; font-weight: 600; color: #FBB034; text-decoration: none; }
    .tf-blog .breadcrumb span { font-family: 'Alexandria', sans-serif; font-size: 20px; font-weight: 600; color: #FBB034; text-decoration: none; }
.tf-news .image-description { display: flex; justify-content: center; align-items: center; margin: 10px 0px 60px 0px; padding: 0px; width: 100%; }
.tf-news .image-container h1 { font-family: 'Alexandria', sans-serif; font-size: 40px; font-weight: 600; line-height: normal; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; display: contents; }
.tf-blog.tf-news .image img,
.tf-blog.tf-news .image-container .image.full-image img { width: 100%; max-width: 1266px; height: auto; aspect-ratio: 1266 / 685; object-fit: contain; border-radius: 30px; margin: 0 auto; }
.tf-news .text-content .news-info { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 20px; }
.tf-news .text-content .news-info p { font-family: "Urbanist", sans-serif; font-size: 20px; font-weight: 300; line-height: 30px; text-underline-position: from-font; text-decoration-skip-ink: none; color: #F4F6F8; }
    .tf-news .text-content .news-info p img { width: 15px; height: 15px; margin-bottom: 5px; }
.tf-blog.tf-news p { font-family: "Urbanist", sans-serif; font-size: 32px; font-weight: 300; line-height: 34px; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF }
.tf-blog.tf-news .p-title { font-weight: 500; color: var(--primary-color5) }
.tf-blog.tf-news .bist-bg {margin: 120px 0px}
.tf-blog.tf-news .bist .tf-slider-item.style-2 { padding: 5.4% 3% 7.4%; position: relative; }
.contact-section .kvkk-wrapper-37 .checkbox-svg, .contact-section .terms-wrapper-37 .checkbox-svg {border: 1px solid #fff; }

/*Canlı Borsa -------------------------
------------------------------------------ */
/* Original styles preserved */
.market-card { background-color: #1e1e1e; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); margin: 5px; width: 20% }
.market-container { display: flex; justify-content: space-between; gap: 10px; width: 100%; }

.market-container2 { display: flex; justify-content: space-between; gap: 10px; width: 100%; }
.market-card2 { position: relative; display: flex; align-items: center; justify-content: space-evenly; gap: 30px; padding: 10px;  }
    .market-card2::before { content: ""; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 2px; height: 60%; background-color: #FFC943; }
    .market-card2:first-child::before { display: none; }

.market-container-cb { display: flex; justify-content: space-between; gap: 10px; width: 100%; }
.market-card-cb { position: relative; display: flex; align-items: center; justify-content: space-evenly; gap: 30px; padding: 10px; margin-top: 20px; }
    .market-card-cb::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 2px; height: 60%; background-color: #FFC943; }
    .market-card-cb:first-child::before { display: none; }

.market-text { display: flex; flex-direction: column; }
.cb-chart { width: 70px; height: auto; }

.btn-group { display: flex; justify-content: space-between; gap: 10px; width: 100%; }
.btn-card { background-color: #1e1e1e; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); margin: 5px; flex: 1; max-width: 200px; }
    .btn-card .highlight-btn { background-color: #fbbc05; color: white; }

.search-container { display: flex; gap: 10px; height: 50.2px; padding-left: 15px; }

.search-box { width: 490px; background-color: #1a1a1a; display: flex; align-items: center; padding: 0 20px; border-radius: 8px; }

    .search-box i { color: white; font-size: 20px; margin-right: 20px; }

    .search-box input { flex: 1; background-color: transparent; border: none; outline: none; color: white; font-size: 17px; font-weight: 600; }

.dropdown-box { width: 234px; background-color: #1a1a1a; border-radius: 8px; display: flex; align-items: center; padding: 0 20px; position: relative; }

    .dropdown-box select { flex: 1; background-color: transparent; border: none; outline: none; color: white; font-size: 17px; font-weight: 600; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 30px; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.custom-dropdown { width: 300px; background-color: #1a1a1a; border-radius: 8px; display: flex; align-items: center; padding: 0 20px; position: relative; cursor: pointer; user-select: none; }

.selected-option { flex: 1; color: white; font-size: 17px; font-weight: 600; padding-right: 30px; position: relative; }

    .selected-option::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: contain; }

.dropdown-options { position: absolute; top: 100%; left: 0; right: 0; background-color: #1a1a1a; border-radius: 0 0 8px 8px; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; z-index: 10; }

.custom-dropdown.open .dropdown-options { max-height: 200px; opacity: 1; visibility: visible; }

.dropdown-options li { padding: 10px 20px; color: white; font-size: 16px; transition: background 0.2s; }

    .dropdown-options li:hover { background-color: #2a2a2a; }


.custom-btn-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; width: 100%; margin-bottom: 15px; }

    .custom-btn-group .custom-btn { background-color: #1e1e1e; color: white; font-size: 15px; text-align: center; border-radius: 0.375rem; padding: 8px 0; min-width: 45px; display: flex; justify-content: center; align-items: center; height: 40px; } }

    .custom-btn-group .custom-btn:hover { background-color: #495057; }

    .custom-btn-group .custom-btn.active { background-color: #fbbc05; color: white; }

    /* Button for "Tümü" (All) can be wider */
    .custom-btn-group .custom-btn:first-child { grid-column: span 2; }

.market-table-container { background: var(--background-body); border-radius: 8px; padding: 10px; margin: 30px 0px 60px 0px; border: 1px solid #5f5054; }
.market-tabs { display: flex; padding-bottom: 10px; border-bottom: 1px solid #444; }
    .market-tabs button { background: transparent; border: none; color: #fff; cursor: pointer; padding: 10px 30px; }
        .market-tabs button.active { background: #444; border-radius: 5px; }

.custom-table { width: 100%; border-collapse: collapse; color: #fff; min-width: 600px; }
    .custom-table th,
    .custom-table td { padding: 10px; text-align: left; border: none; }
    .custom-table thead th { border-bottom: 1px solid #444; }
    .custom-table th { font-weight: normal; font-size: 15px; }
    .custom-table tbody tr:last-child td { border-bottom: none; }
.symbol { display: flex; align-items: center; gap: 5px; justify-content: space-around; }
.symbol-icon { background: #666; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; font-weight: bold; }
.symbol-code { width: 7ch; background-color: #161616; color: white; padding: 1px; border-radius: 6px; font-weight: 600; font-size: 14px; display: flex; transition: all 0.3s ease-in-out; justify-content: center; }
.green-text { color: #0f0; }
.red-text { color: #f00; }
.table-wrapper-cb { width: 100%; overflow-x: auto; white-space: nowrap; }
.custom-table td:nth-child(2) { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; max-width: 150px; }

.reklam-container { width: 100%; background-color: #a8a1a1; color: black; padding: 10px; height: 300px; display: flex; justify-content: center; align-items: center; }

.news-container { max-width: 1200px; margin: auto; margin-top: 70px; }
    .news-container h1 { font-family: 'Alexandria', sans-serif; font-size: 36px; font-weight: 700; line-height: normal; margin-bottom: 30px; text-align: center; }
    .news-container h5 { font-family: 'Alexandria', sans-serif; font-size: 17px; font-weight: 500; line-height: normal; text-underline-position: from-font; text-decoration-skip-ink: none; color: #FFFFFF; }
    .news-container .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; }
    .news-container .news-card { background-color: #1e1e1e; padding: 15px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .news-container .news-content { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; height: 100%; justify-content: space-around; }
        .news-container .news-content p { margin-top: 35px; font-size: 12px; }
    .news-container .news-card img { width: 223.08px; height: 173.83px; object-fit: cover; border-radius: 10px; flex: 0 0 45%; display: flex; align-items: center; justify-content: center; }

/*Hisse Detay -------------------------
------------------------------------------*/
/* Original styles preserved */
.section-hisse { padding: 20px; }
.fiyat { display: flex; gap: 10px; margin-top: 10px; }
.buy, .sell { background-color: #ffcc00; border: none; padding: 10px 50px; font-size: 16px; border-radius: 5px; cursor: pointer; color: #fff; }
.hisse-right { display: flex; justify-content: flex-end; gap: 10px; align-items: flex-start; }
.import { border: none; cursor: pointer; background-color: #FFB800; background-repeat: no-repeat; }
.hisse-right button { border-radius: 10px; padding: 10px; }
.export img, .import img { width: 25px; }
.transaction { background-color: #FFB800; }
.export { border: none; border-radius: 5px; cursor: pointer; background: #1a1a1a; background-repeat: no-repeat; }
.left-panel { flex: 2; margin-right: 20px; width: 100%; }
.right-panel { flex: 1; }
.stock-container { display: flex; align-items: center; background: #222; padding: 20px; border-radius: 10px; justify-content: space-between; text-align: center; }
.stock-left { flex: 3; }
.stock-header { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: bold; }
.stock-title { display: flex; align-items: center; margin-bottom: 10px; color: #FFFFFF; }
.stock-price { color: #00FF94; font-weight: bold; }
.down-arrow { color: #00FF94; margin-right: 5px; }
.down-arrow-compare { color: #F4F6F8; margin-right: 5px; }
.dot { height: 10px; width: 10px; background-color: #FFB800; border-radius: 50%; display: inline-block; margin-right: 8px; }
.stock-info-1 { display: flex; justify-content: space-between; }
.info-block { text-align: left; }
    .info-block p { font-size: 14px; margin-bottom: 5px; color: #FFFFFF; }
    .info-block span { font-size: 16px; }
.separator { width: 1px; height: 80px; background-color: #FFB800; margin: 0 35px; }
.stock-right { flex: 1; display: flex; align-items: center; font-weight: bold; cursor: pointer; color: #FFFFFF; }
.attention-box { border: 2px solid #333; padding: 20px; border-radius: 10px; }
.content-attention { display: flex; justify-content: space-between; margin-bottom: 20px; border-bottom: 0.5px solid rgba(255, 255, 255, 0.2); }
    .content-attention:last-child { border-bottom: none; }
.column { width: 30%; }
    .column h2 { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 10px; }
    .column p { font-size: 14px; color: #fff; }
    .column .small { color: #6E7A88 }
.small { font-size: 12px; color: #333; font-weight: normal; }
.change { display: flex; align-items: center; }
    .change img { width: 16px; height: 16px; margin-right: 5px; }
    .change .green { color: #00CC76; font-size: 14px; }
hr { border: 1px solid #ccc; margin: 20px 0; }
.chart-container { background-color: #2b2b2b; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
.market-card-cb canvas {background-color: transparent; border-radius: 0px;}
.time-buttons { display: flex; justify-content: space-around; margin-top: 15px; }
    .time-buttons button { background-color: #2b2b2b; color: #fff; padding: 8px 12px; border: none; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; }
        .time-buttons button:hover { background-color: #444; }
        .time-buttons button.active { background-color: #ffa500; color: black; }
        .time-buttons button.active { background-color: #ffa500; color: black; }

.directory-box { margin-top: 80px; }
.accordion-container-directory { margin: 0 auto; }
.accordion-item-directory { margin-bottom: 16px; margin-top: 15px; border: 2px solid rgb(71 66 66 / 50%); border-radius: 10px; }
.accordion-header-directory { padding: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.3s ease; }
    .accordion-header-directory h3 { margin-left: 10px; flex-grow: 1; font-size: 18px; color: #fff; }
.accordion-icon-directory { width: 20px; height: 20px; transition: transform 0.3s ease; }
.icon-directory { width: 20px; height: 20px; transition: transform 0.3s ease; }
.accordion-item-directory.active .accordion-icon-directory { transform: rotate(180deg); }
.accordion-content-directory { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-item-directory.active .accordion-content-directory { max-height: 1000px; }
.content-wrapper-directory { padding: 0 20px 20px; color: #ccc; line-height: 1.6; }
    .content-wrapper-directory ul { padding-left: 20px; margin-top: 10px; }
    .content-wrapper-directory li { margin-bottom: 8px; }
    .content-wrapper-directory p { font-size: 14px; line-height: 2; margin-bottom: 15px; }

.advert-box { margin-top: 80px; background-color: #fff; color: #000; display: flex; align-items: center; padding: 45%; border-radius: 15px; }

.stock-info { margin-top: 50px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); color: #fff; display: grid; gap: 8px; border: 2px solid rgb(71 66 66 / 50%); padding: 10px;}
    .stock-info-row { display: grid; grid-template-columns: repeat(6, 1fr); text-align: start; padding: 8px; border-radius: 6px;}
    .stock-info-row:nth-child(even) { background-color: #4a4a4a; }

.company-info-container { margin-top: 50px; }
.company-header { display: flex; }
    .company-header h5 { margin-left: 10px; }
.company-content { margin-bottom: 20px; }
    .company-content p { color: #fff; font-size: 13px; line-height: 1.5; margin-top: 20px; }
.company-info { display: grid; gap: 10px; }
    .company-info .info-item { display: flex; justify-content: space-between; }
        .company-info .info-item .label { font-size: 15px; color: #fff; }
        .company-info .info-item .value { text-align: right; font-size: 12px; color: #ccc; line-height: 1.3; width: 60% }
.company-stock-info { margin-top: 50px; padding: 15px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); color: #fff; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; text-align: center; border: 2px solid rgb(71 66 66 / 50%); }
    .company-stock-info div { display: flex; justify-content: space-between; padding: 8px; border-radius: 6px; }
.company-info-2 { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; column-gap: 40px; margin-bottom: 20px; }
    .company-info-2 .info-item { display: flex; justify-content: space-between; }
        .company-info-2 .info-item .label { font-size: 15px; color: #fff; }
        .company-info-2 .info-item .value { text-align: right; font-size: 12px; color: #ccc; line-height: 1.3; width: 60% }

.stock-news {    margin-top: 60px;    background-color: #222;    padding: 30px 15px;    border-radius: 15px;}
    .stock-news h5 {        font-family: 'Alexandria', sans-serif;        font-size: 24px;        font-weight: 300;        line-height: 20px;        margin-bottom: 30px;        color: white;    }
.stock-news-item {      margin-bottom: 15px;      padding-right: 15%;}
.stock-news-link {    display: flex;    align-items: flex-start;    gap: 20px;    text-decoration: none;    color: inherit;}
.stock-news-link img {        width: 150px;        height: 100px;        object-fit: cover;        border-radius: 15px;        flex-shrink: 0;    }
    .stock-news-content {    flex: 1;    color: white;}
.stock-news-title {    font-family: 'Alexandria', sans-serif;    font-size: 20px;    font-weight: 300;    line-height: 1.4;    margin-bottom: 10px;}
.stock-news-description {    font-family: 'Alexandria', sans-serif;    font-size: 15px;    font-weight: 300;    line-height: 1.4;    margin-bottom: 10px;    color: #ccc;}
.stock-news-see-all {    text-align: center;    margin-top: 20px;}
    .stock-news-see-all .see-all-link {        text-decoration: none;        color: #FFB800;        padding: 10px 20px;        transition: background-color 0.3s, color 0.3s;        font-weight: 500;    }
        .stock-news-see-all .see-all-link:hover,
        .see-all-link:active {            color: #FFB800;        }

.content-attention .small {    font-size: 11px;    color: #aaa;     font-weight: 300;     margin-top: 2px;     display: block; }

.advert-box-left { margin-top: 80px; margin-bottom: 90px; background-color: #fff; color: #000; display: flex; align-items: center; justify-content: center; padding: 9%; border-radius: 15px; }
.tf-kariyer {
    position: relative;
    background-image: url(/Assets/images/kariyer/kariyer_banner.png);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 800px;
    height: 950px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    overflow: hidden;
    background-color: #ffc301;
}
    .tf-kariyer .content-inner {
        text-align: center;
        margin: 0 auto;
    }

    .tf-kariyer .heading {
        font-family: 'Urbanist', sans-serif;
        font-size: 86px;
        font-weight: bold;
        line-height: 104.4px;
        color: #000000;
    }

.tf-how-we-work {
    color: #fff;
    padding: 80px 0;
}
    .tf-how-we-work .section-title {
        font-family: 'Alexandria', sans-serif;
        font-size: 30px;
        font-weight: 400;
        line-height: 33.1px;
        color: #F4F6F8;
        margin-bottom: 30px;
    }

    .tf-how-we-work .section-subtitle {
        margin: 0 auto 50px;
        font-family: 'Urbanist', sans-serif;
        font-size: 28px;
        font-weight: 200;
        line-height: 40px;
        color: #F4F6F8;
        text-align: center;
        max-width: 75%;
        text-transform: capitalize;
    }


.work-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2'li yapı */
    gap: 30px;
}

.work-card {
    background-color: #1b1b1b;
    border: 1px solid #ffc301;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

    .work-card img {
        margin-bottom: 30px;
    }

    .work-card h3 {
        font-family: 'Urbanist', sans-serif;
        font-size: 22px;
        font-weight: bold;
        line-height: 30px;
        color: #F4F6F8;
        margin-bottom: 15px;
        text-transform: capitalize;
    }

    .work-card p {
        font-family: 'Urbanist', sans-serif;
        font-size: 22px;
        font-weight: 200;
        line-height: 30px;
        color: #F4F6F8;
        text-transform: capitalize;
    }
.tf-cta {
    text-align: center;
    padding: 100px 20px;
}

.cta-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 50px;
    font-weight: bold;
    line-height: 70px;
    color: #ffffff;
    margin-bottom: 40px;
}

.cta-button {
    display: inline-block;
    background-color: #ffc301;
    color: #ffffff;
    font-family: 'Urbanist', sans-serif;
    font-size: 40.5px;
    font-weight: 800;
    line-height: 51px;
    padding: 7px 45px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.3s ease;
}
.tf-step-flow {
    padding: 100px 20px;
    color: #fff;
    text-align: center;
    position: relative;
}

.step-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    align-items: flex-start;
}

.timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 283px;
    height: 2px;
    background: linear-gradient(to right, transparent, #f1c446 20%, #f1c446 90%, transparent);
    z-index: 0;
    margin: 0 auto;
}

.step-item {
    flex: 1 1 260px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-box {
    border: 1px solid #5b5b5b;
    border-radius: 12px;
    padding: 20px;
    background-color: #111;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .step-box img {
        width: 100%;
        max-width: 170px;
        height: auto;
    }

.timeline-dot {
    position: relative;
    margin-top: 12px;
    width: 24px;
    height: 24px;
    border: 3px solid #f1c446;
    border-radius: 50%;
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .timeline-dot::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #f1c446;
        border-radius: 50%;
    }

.step-text {
    margin-top: 30px;
}

    .step-text h4 {
        color: #ffffff;
        font-family: 'Urbanist', sans-serif;
        font-size: 22px;
        font-weight: bold;
        line-height: 30px;
        margin-bottom: 10px;
        text-transform: capitalize;
    }

    .step-text p {
        color: #ffffff;
        font-family: 'Urbanist', sans-serif;
        font-size: 20px;
        font-weight: 200;
        line-height: 30px;
        text-transform: capitalize;
    }
.tf-join-us {
    text-align: center;
    padding: 100px 20px;
    color: #ffffff;
}

    .tf-join-us .join-title {
        font-family: 'Urbanist', sans-serif;
        font-weight: bold;
        font-size: 50px;
        line-height: 70px;
        margin-bottom: 40px;
    }

    .tf-join-us .join-description {
        margin-bottom: 100px;
    }

        .tf-join-us .join-description p {
            font-family: 'Urbanist', sans-serif;
            font-weight: 300;
            font-size: 28px;
            line-height: 40px;
            margin: 5px 0;
            text-transform: capitalize;
        }

    .tf-join-us .join-subtitle {
        font-family: 'Alexandria', sans-serif;
        font-weight: 500;
        font-size: 30px;
        line-height: 33px;
        margin: 50px 0 20px;
        text-transform: capitalize;
    }

        .tf-join-us .join-subtitle span {
            font-weight: 700;
            font-family: 'Urbanist', sans-serif;
            text-transform: capitalize;
        }

    .tf-join-us .join-btn {
        display: inline-block;
        background: #ffc301;
        color: #ffffff;
        font-family: 'Urbanist', sans-serif;
        font-weight: 800;
        font-size: 35px;
        line-height: 40px;
        padding: 16px 36px;
        border-radius: 12px;
        text-decoration: none;
        transition: background 0.3s ease;
    }

        .tf-join-us .join-btn:hover {
            background: #e5ac00;
        }

.content-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 40px;
}

    .content-table th,
    .content-table td {
        border: 1px solid #f1c446;
        padding: 8px;
        text-align: left;
    }
    .content-table th {
        color: #f1c446;
    }
    .content-table thead {
        background-color: transparent;
    }



/* ==================== RESPONSIVE ENHANCEMENTS ==================== */

/* Base responsive settings */
* { box-sizing: border-box; }

/* Main layout and panels */
@media screen and (max-width: 992px) {
    .left-panel, .right-panel { margin-right: 0; margin-bottom: 20px; }
}

@media screen and (max-width: 768px) {
    .left-panel, .right-panel { flex: 1 1 100%; }
}

/* Buy/Sell buttons */
@media screen and (max-width: 576px) {
    .fiyat { flex-direction: column; }

    .buy, .sell { padding: 10px 20px; width: 100%; }
}

/* Stock container */
@media screen and (max-width: 768px) {
    .stock-container { flex-direction: column; align-items: stretch; }

    .stock-left, .stock-right { flex: 1 1 100%; }

    .stock-right { margin-top: 20px; justify-content: center; }
}

/* Stock info blocks */
@media screen and (max-width: 768px) {
    .stock-info-1 { flex-direction: column; }

    .info-block { margin-bottom: 15px; }

    .separator { width: 80%; height: 1px; margin: 15px auto; }
}

/* Attention box */
@media screen and (max-width: 768px) {
    .content-attention { flex-direction: column; }

    .column { width: 100%; margin-bottom: 15px; }
}

/* Time buttons */
@media screen and (max-width: 576px) {
    .time-buttons { flex-wrap: wrap; gap: 10px; }

        .time-buttons button { flex: 1 0 calc(33.33% - 10px); padding: 8px 5px; font-size: 14px; }
}

/* Stock info grid */
@media screen and (max-width: 768px) {
    .company-stock-info { grid-template-columns: 1fr; }

    .company-info-2 { grid-template-columns: 1fr; gap: 15px; }

        .company-info-2 .info-item .value { width: 50%; }
}

/* Stock news */
@media screen and (max-width: 768px) {
    .stock-news-item { flex-direction: column; align-items: flex-start; padding-right: 0; margin-bottom: 60px; }

        .stock-news-item img { width: 100%; height: auto; max-height: 200px; }

    .stock-news-description { font-size: 0.9rem; }
}

/* Advert boxes */
@media screen and (max-width: 992px) {
    .advert-box { padding: 30%; }

    .advert-box-left { padding: 7%; }
}

@media screen and (max-width: 768px) {
    .advert-box { padding: 20%; }

    .advert-box-left { padding: 5%; }
}

@media screen and (max-width: 576px) {
    .advert-box { padding: 15%; }

    .advert-box-left { padding: 4%; }
}

/* Accordion and directory */
@media screen and (max-width: 576px) {
    .accordion-header-directory h3 { font-size: 16px; }

    .content-wrapper-directory p { font-size: 13px; line-height: 1.7; }
}

/* Hisse Right buttons */
@media screen and (max-width: 576px) {
    .hisse-right { flex-wrap: wrap; justify-content: center; }

        .hisse-right button { flex: 0 0 calc(50% - 10px); }
}

/* Handling touch targets for mobile */
@media screen and (max-width: 576px) {
    .accordion-header-directory,
    .time-buttons button,
    .hisse-right button,
    .buy, .sell { min-height: 44px; /* Minimum touch target size */ }
}
/* Fix for overflow issues */
.stock-info div,
.company-stock-info div,
.company-info .info-item,
.company-info-2 .info-item { flex-wrap: wrap; }
@media screen and (max-width: 576px) {
    .company-info .info-item .value,
    .company-info-2 .info-item .value { width: 100%; text-align: left; padding-top: 5px; }
}

@media screen and (max-width: 700px) {
    .section-hisse { padding: 10px; }

    .fiyat { flex-direction: column; gap: 10px; }

    .buy, .sell { width: 100%; padding: 10px 15px; font-size: 15px; }

    .hisse-right { flex-direction: column; align-items: center; gap: 10px; }

        .hisse-right button { width: 100%; padding: 10px 0; }

    .stock-container { flex-direction: column; padding: 15px; gap: 20px; }

    .stock-left, .stock-right { width: 100%; justify-content: center; text-align: center; }

    .stock-info-1 { flex-direction: column; gap: 15px; }

    .separator { width: 100%; height: 1px; margin: 20px 0; }

    .stock-news-item { flex-direction: column; padding-right: 0; gap: 15px; }

        .stock-news-item img { width: 100%; height: auto; max-height: 200px; }

    .company-stock-info { grid-template-columns: 1fr; }

    .company-info-2 { grid-template-columns: 1fr; gap: 12px; }

        .company-info .info-item .value,
        .company-info-2 .info-item .value { width: 100%; text-align: left; margin-top: 5px; }

    .advert-box,
    .advert-box-left { padding: 12%; }

    .time-buttons { flex-direction: row; flex-wrap: wrap; gap: 10px; }

        .time-buttons button { flex: 1 1 calc(50% - 10px); font-size: 14px; padding: 10px 5px; }

    .accordion-header-directory h3 { font-size: 15px; }

    .content-wrapper-directory p { font-size: 13px; line-height: 1.7; }

    .stock-info div,
    .company-stock-info div,
    .company-info .info-item,
    .company-info-2 .info-item { flex-wrap: wrap; }
}
.mobile-image {
    width: 70%;
}

.section-title h2 {
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-title p {
    font-size: 20px;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* Grid sistemi ile mükemmel hizalama */
.market-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.market-column {
    display: flex;
    flex-direction: column;
}

/* Başlıklar için sabit yükseklik */
.market-header {
    height: 80px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #FFB800;
    padding-bottom: 15px;
}

    .market-header h3 {
        color: #ffffff;
        font-size: 1.8rem;
        margin: 0;
        font-weight: 600;
    }

/* Her section için eşit alan */
.market-section {
    margin-bottom: 40px;
    flex: 1;
}

.market-section-title {
    color: #FFB800;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFB800;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.market-description {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin-bottom: 20px;
    min-height: 48px; /* 2 satır için sabit yükseklik */
    display: flex;
    align-items: flex-start;
}

/* Tatil günleri listesi */
.holiday-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.holiday-item {
    border-bottom: 1.65px solid #646464;
    padding: 15px 0;
    font-size: 16px;
    line-height: 22px;
}

    .holiday-item:last-child {
        border-bottom: none;
    }

.highlight {
    font-weight: 500;
    color: #FFB800;
}

/* Alt kısımdaki tam genişlik bölüm */
.full-width-section {
    margin-top: 60px;
    grid-column: 1 / -1;
}

.bank-holidays {
    background-color: rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    padding: 30px;
    margin-top: 20px;
}

.bank-holidays-title {
    color: #FFB800;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #FFB800;
}

.bank-holidays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.bank-holiday-item {
    border-bottom: 1px solid #646464;
    padding: 12px 0;
    font-size: 15px;
    line-height: 20px;
}

.tf-slider.home2.chat-bg {
    background: url(/Assets/images/background/content/chatgpt.png) 85% no-repeat;
    background-size: contain;
    background-color: #080808;
}

.bist.chat-bg .tf-slider-item.style-2 {
    padding: 6.4% 13% 2.4%;
    position: relative;
}
.chatgpt-section {
    padding: 30px 0;
}
.bist.chat-bg .tf-slider-item.style-2 .heading {
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: left;
    font-family: "Urbanist", sans-serif;
}

.bist.chat-bg .tf-slider-item.style-2 .sub-heading {
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 30px;
    text-align: left;
    font-family: 'Alexandria', sans-serif;
}

.border-box-campaign {
    position: relative;
    padding: 30px 40px;
    font-family: "Alexandria", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

    /* Üst sol köşe */
    .border-box-campaign::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20%; /* yatay çizgi uzunluğu */
        height: 2px;
        background-color: #FFB800;
    }

    .border-box-campaign::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 20%; /* dikey çizgi uzunluğu */
        background-color: #FFB800;
    }

    /* Alt sağ köşe */
    .border-box-campaign .bottom-line-x {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20%;
        height: 2px;
        background-color: #FFB800;
    }

    .border-box-campaign .bottom-line-y {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 2px;
        height: 20%;
        background-color: #FFB800;
    }


    .border-box-campaign .title {
        font-family: 'Alexandria', sans-serif;
        color: #FFB800;
    }

    .border-box-campaign .text {
        font-family: 'Alexandria', sans-serif;
        color: #F4F6F8;
    }
.campaign-detail {
    padding: 80px 15px
}