/** * header.css - topbar + mega menü + sticky header (header.tpl) * Yükleme: header.tpl , her sayfada. JS: js/theme.js */ /* Hide WHMCS parent theme header; custom header uses .sm-header */ header#header.header { display: none; /* Required: WHMCS may inject header#header via $headeroutput */ } .sm-header__topbar.topbar, header.sm-header.main-header { display: block; visibility: visible; opacity: 1; } /* Topbar: inline SVG ikonlar - hizalama ve rengi link ile uyumlu */ .topbar .topbar-icon { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 6px; line-height: 1; color: inherit; } .topbar .topbar-icon svg { flex-shrink: 0; vertical-align: middle; color: inherit; width: 22px; height: 22px; } .topbar .dropdown-btn .topbar-icon:first-of-type svg { width: 22px; height: 22px; } .topbar .dropdown-btn .topbar-icon:last-of-type svg { width: 16px; height: 16px; } .topbar ul li a .topbar-icon { margin-right: 5px; } .topbar .dropdown-btn .topbar-icon:last-of-type { margin-left: 2px; margin-right: 0; } /* ---------------------------------------------------------------- Topbar ------------------------------------------------------------------- */ .topbar { background-color: #03256C; border-top: unset; border-bottom: 5px solid #00c9b7; position: relative; z-index: 15; transition: all 0.3s ease; } /* Sticky topbar styles - Disabled, only main-header is sticky now */ /* .topbar-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 15; animation: topbarSticky .95s ease forwards; box-shadow: rgba(50, 50, 50, 0.2) 0px 0px 20px 0px; } */ @-webkit-keyframes topbarSticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes topbarSticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .topbar ul { display: inline-flex; gap: 0; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; align-items: center; } .topbar .left-topbar ul li { display: inline-block; border-right: none; vertical-align: middle; position: relative; } .topbar .left-topbar ul li:not(:last-child):after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background-color: rgba(255, 255, 255, 0.3); } .topbar .left-topbar ul li:first-child { border-left: none; } .topbar .topbar-right ul li { display: inline-block; border-right: none; vertical-align: middle; position: relative; } .topbar .topbar-right ul li:not(:last-child):after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background-color: rgba(255, 255, 255, 0.3); } .topbar .left-topbar ul li span { font-size: 14px; color: #FFFFFF; transition: all .4s; } .topbar .topbar-right ul li span { font-size: 15px; color: #FFFFFF; transition: all .4s; } .topbar .left-topbar ul li:hover span { color: #FFFFFF; } .topbar .topbar-right ul li:hover span { color: #FFFFFF; } .topbar ul li { padding: 6px 20px; position: relative; } .topbar ul li a { display: flex; align-items: center; text-decoration: none; } .topbar-cart-link .topbar-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; background: #00c9b7; color: #03256c; font-size: 12px; font-weight: 700; border-radius: 10px; line-height: 1; } .topbar .left-topbar ul li a:hover { text-decoration: none; } .topbar .left-topbar ul li a:hover .topbar-icon, .topbar .left-topbar ul li a:hover span, .topbar .topbar-right ul li a:hover .topbar-icon, .topbar .topbar-right ul li a:hover span { color: #d1d5db; } .topbar ul li i { color: #FFFFFF; font-size: 16px; transition: all .4s; margin-inline-end: 5px; } .topbar ul li .currency button i { color: #FFFFFF; font-size: 16px; transition: all .4s; margin-inline-end: 5px; } .topbar .left-topbar ul li:hover i { color: #FFFFFF; } .topbar .topbar-right { display: flex; justify-content: flex-end; } .sm-header__topbar .sm-header__topbar-right ul { text-align: left; border-left: none; position: relative; } .topbar .topbar-right ul:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background-color: rgba(255, 255, 255, 0.3); } .sm-header__topbar .sm-header__topbar-right ul li { display: inline-block; text-align: left; vertical-align: middle; border-right: none; } .topbar .top-bar-dropdown { position: relative; } .topbar .dropdown-btn { background-color: unset; border: unset; cursor: pointer; font-size: 15px; display: flex; align-items: center; color: #FFFFFF; position: relative; padding: 0; } .topbar .dropdown-btn i { margin-left: 5px; font-size: 12px; } /* Dil / para birimi dropdown'ları (WHMCS $locales / $currencies; js/theme.js .open ekler) */ .topbar .dropdown-btn .topbar-locale { font-size: 15px; line-height: 1; } .topbar .dropdown-menus { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; margin: 0; padding: 6px; list-style: none; background-color: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 9999; } .topbar .dropdown-menus.open { display: block; } .topbar .dropdown-menus li a { display: block; padding: 8px 12px; font-size: 14px; font-weight: 500; color: #111827; border-radius: 6px; white-space: nowrap; text-decoration: none; } .topbar .dropdown-menus li a:hover, .topbar .dropdown-menus li a:focus { background-color: #f1f5f9; color: #03256C; text-decoration: none; } .topbar .dropdown-menus li a.active { color: #03256C; font-weight: 700; } @media (max-width: 767px) { .topbar .top-bar-dropdown .dropdown-btn { display: inline-flex; width: max-content; text-align: left; } } @media(max-width:1199px) { .topbar .left-topbar ul li span { font-size: 13px; } .topbar .topbar-right ul li span { font-size: 13px; } } @media(max-width:992px) { .topbar { border-bottom: 3px solid #00c9b7; } .topbar .row { margin: 0; } .topbar ul { justify-content: flex-start; } .topbar .topbar-right ul { justify-content: flex-end; } .topbar ul li { padding: 8px 10px; } /* Telefon numarası hariç diğer textleri gizle */ .topbar .left-topbar ul li:not(:first-child) span, .topbar .topbar-right ul li span { display: none; } .sm-header__topbar .topbar-right ul li a .topbar-cart-count { display: inline-flex; } /* Telefon numarası için font küçültme */ .topbar .left-topbar ul li:first-child span { font-size: 12px; } .topbar ul li i { font-size: 16px; margin-inline-end: 4px; } /* Blog ve İletişim linklerini gizle - mobilde gereksiz */ .topbar .left-topbar ul li:nth-child(2), .topbar .left-topbar ul li:nth-child(3) { display: none; } /* Separator'ları kaldır */ .topbar .left-topbar ul li:not(:last-child):after, .topbar .topbar-right ul li:not(:last-child):after { display: none; } .topbar .topbar-right ul:before { display: none; } } @media(max-width:768px) { .topbar { border-bottom: 2px solid #00c9b7; } .topbar .left-topbar, .topbar .topbar-right { display: flex; justify-content: center; } .topbar ul { gap: 0; } .topbar ul li { padding: 8px 8px; } /* Telefon numarası görünsün ama küçük */ .topbar .left-topbar ul li:first-child span { font-size: 11px; } .topbar ul li i { font-size: 16px; margin-inline-end: 3px; } .topbar ul li a { display: flex; align-items: center; justify-content: center; } /* Para birimi dropdown'unu da gizle mobilde */ .topbar .left-topbar ul li:last-child { display: none; } } @media(max-width:567px) { .topbar ul li { padding: 8px 6px; } /* Telefon numarası daha küçük */ .topbar .left-topbar ul li:first-child span { font-size: 10px; } .topbar ul li i { font-size: 15px; margin-inline-end: 2px; } /* Çok küçük ekranlarda daha dar */ .topbar .left-topbar ul, .topbar .topbar-right ul { width: 100%; } } @media(max-width:400px) { .topbar ul li { padding: 8px 5px; } /* Çok küçük ekranlarda telefon numarasını gizle */ .topbar .left-topbar ul li:first-child span { display: none; } .topbar ul li i { font-size: 14px; margin-inline-end: 0; } } /* ---------------------------------------------------------------- Header ------------------------------------------------------------------- */ .main-header { background-color: #fff; height: 80px; position: relative; transition: height .5s ease-in; } .header-sticky { animation: headerSticky .95s ease forwards; position: fixed; z-index: 14; width: 100%; box-shadow: rgba(50, 50, 50, 0.2) 0px 0px 20px 0px; transition: transform 100ms ease-in-out, background-color 200ms ease-in-out; background-color: rgb(252, 252, 252); top: 0; } @-webkit-keyframes headerSticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes headerSticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .main-header.dropdown-open { background-color: rgb(252, 252, 252); } .main-header .nabbar-nav { margin-bottom: 0; height: 100%; } .main-header .nabbar-nav > .container-lg, .main-header .nabbar-nav > .container-1200 { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; height: 100%; } .main-header > .nabbar-nav > .container-lg > .logo-and-navbar, .main-header > .nabbar-nav > .container-1200 > .logo-and-navbar { display: flex; flex-wrap: nowrap; align-items: center; } .main-header > .nabbar-nav > .container-lg > .logo-and-navbar > .nav-brand, .main-header > .nabbar-nav > .container-1200 > .logo-and-navbar > .nav-brand { display: inline-block; } .main-header > .nabbar-nav > .container-lg > .logo-and-navbar > .nav-brand img, .main-header > .nabbar-nav > .container-1200 > .logo-and-navbar > .nav-brand img { max-height: 96px; width: auto; height: auto; margin-left: 24px; transform: scale(1) translateY(0); transform-origin: left center; } /* Desktop Navigation */ @media (min-width: 992px) { .main-header > .nabbar-nav > .container-lg > .logo-and-navbar > .nav-brand, .main-header > .nabbar-nav > .container-1200 > .logo-and-navbar > .nav-brand { margin-inline-end: 32px; } .main-header .nabbar-nav .mainmenu { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; gap: 6px; } .main-header .nabbar-nav .mainmenu li { position: relative; } .main-header .nabbar-nav .mainmenu li.megamenu { position: inherit; } .main-header .nabbar-nav .mainmenu > li > a { display: flex; align-items: center; justify-content: space-between; padding: 0; font-size: 19px; white-space: nowrap; transition: 0.3s; color: rgb(54, 54, 54); font-weight: 600; text-decoration: none; border-bottom: 0; box-shadow: none; background-image: none; } .main-header .nabbar-nav .mainmenu > li > a:hover, .main-header .nabbar-nav .mainmenu > li > a:focus { text-decoration: none; border-bottom: 0; box-shadow: none; background-image: none; } .main-header .nabbar-nav .mainmenu > li > a { position: relative; } .main-header .nabbar-nav .mainmenu > li > a.active { color: var(--color-main); } .main-header .nabbar-nav .mainmenu > li > a > span { position: relative; } .main-header .nabbar-nav .mainmenu > li > a > span[data-offer]:after { content: attr(data-offer); background: #03256C; color: rgb(31, 32, 68); font-size: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; padding: 2px 4px; line-height: 1; font-weight: 400; letter-spacing: 1px; position: absolute; top: -15px; right: 0; animation: blinker 1.5s linear infinite; } .main-header .nabbar-nav .mainmenu li.has-droupdown > a > .dropdown-indicator { display: inline-flex; align-items: center; margin-inline-start: 5px; line-height: 0; transition: transform 0.4s ease-in-out; } .main-header .nabbar-nav .mainmenu li.has-droupdown > a > .dropdown-indicator svg { display: block; width: 18px; height: 18px; } .main-header .nabbar-nav .mainmenu li.has-droupdown.dropdown-opened > a, .main-header .nabbar-nav .mainmenu li:has(.active) > a { color: var(--color-main); } .main-header .nabbar-nav .mainmenu li.has-droupdown.dropdown-opened > a > .dropdown-indicator, .main-header .nabbar-nav .mainmenu li.has-droupdown > a:hover > .dropdown-indicator { transform: rotate(-180deg); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu { display: flex; -moz-box-pack: center; justify-content: center; background-color: rgb(252, 252, 252); border-radius: 0px 0px 50px 50px; padding: 10px 0px; position: absolute; top: 82px; left: 0px; width: 100%; visibility: hidden; opacity: 0; pointer-events: none; transition: 200ms ease-in-out; z-index: 5; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu.visible { visibility: visible; pointer-events: unset; opacity: 1; } /* Ensure submenu stays open when hovering over it */ .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu:hover { visibility: visible; pointer-events: unset; opacity: 1; } .main-header .navbar-button, .main-header .nabbar-nav .mobile-menu-header { display: none; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu > div { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-right: auto; margin-left: auto; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu > div { max-width: 800px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item { list-style: none; --bs-gutter-x: 0.5rem; --bs-gutter-y: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: nowrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333333%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li + li { margin-left: 20px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo .heading { display: flex; flex-direction: row; gap: 18px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo .heading span { display: block; padding: 4px 8px; border-radius: 10px; width: max-content; display: flex; -moz-box-align: center; align-items: center; -moz-box-pack: center; justify-content: center; white-space: nowrap; height: 24px; position: relative; z-index: 5; background-color: rgb(144, 219, 150); color: rgb(54, 54, 54); font-size: 13px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo .heading span:after { content: ""; position: absolute; top: 50%; left: -4px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgb(144, 219, 150) transparent transparent transparent; transform: translatey(-50%) rotate(90deg); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo p { color: rgb(124, 144, 170); font-size: 12px; font-style: normal; font-weight: 400; text-transform: uppercase; line-height: 16px; padding-bottom: 8px; margin-bottom: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo a { color: var(--color-main); display: flex; -moz-box-align: center; align-items: center; cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: none; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; background-size: 0px 1px; transition: all 500ms ease; padding-bottom: 2px; width: fit-content; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo a i { margin-inline-start: 5px; transition: 0.4s ease-in-out; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo a:hover { background-size: 100% 1px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > .new-design-nav-item-logo a:hover i { margin-inline-start: 10px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > p { font-style: normal; text-transform: capitalize; line-height: 16px; padding-bottom: 8px; padding-left: 16px; margin-bottom: 0; font-size: 15px; font-weight: 500; color: rgb(124, 144, 170); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul { display: flex; flex-direction: column; gap: 12px; list-style: none; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a { -moz-box-align: center; align-items: center; background-color: #f7f9fd; border-radius: 8px; cursor: pointer; display: flex; padding: 8px 10px 8px 10px; position: relative; text-decoration: none; transition: 0.4s ease-in-out; width: 100%; height: 54px; flex-wrap: nowrap; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:hover, .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a.active { background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / 23%); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner { display: flex; -moz-box-align: center; align-items: center; gap: 6px; flex-wrap: nowrap; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:after { content: '→'; right: 10px; position: absolute; opacity: 0; transition: 0.4s ease-in-out; transform: translateX(-60%); font-size: 17px; color: var(--color-main); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:hover:after { opacity: 1; transform: translateX(-20%); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .icon { align-self: center; flex-shrink: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .icon > .inner { -moz-box-align: center; align-items: center; background-color: #fff; border-radius: 5px; height: 38px; display: flex; -moz-box-pack: center; justify-content: center; transition: all 0.5s; width: 38px; margin: 2px; padding: 4px; flex-shrink: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .icon > .inner > i { font-size: 24px; line-height: 0; color: #667093; transition: all 0.5s; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:hover > .inner > .icon > .inner, .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a.active > .inner > .icon > .inner { background-color: var(--color-main); } .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:hover > .inner > .icon > .inner .img-icon, .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a.active > .inner > .icon > .inner .img-icon { filter: brightness(0) invert(1); } .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:hover > .inner > .icon > .inner > i, .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a.active > .inner > .icon > .inner i { color: #fff; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content { display: flex; gap: 4px; flex-direction: column; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .headings { color: #03256c; font-size: 15px; font-weight: 700; line-height: 16px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .headings > .labels { background-color: rgb(186, 230, 211); color: rgb(31, 32, 68); -moz-box-align: center; align-items: center; border-radius: 20px; display: inline-flex; font-size: 12px; font-weight: 500; -moz-box-pack: center; justify-content: center; line-height: 16px; padding: 2px 10px; position: relative; width: fit-content; text-decoration: none; text-transform: uppercase; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .subheading { color: rgb(124, 144, 170); font-size: 12px; font-weight: 400; line-height: 14px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img { display: block; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists { display: block; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists img { display: block; max-width: 90%; height: auto; transform: scale(1.3); transform-origin: center; } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(3) .submenu .megamenu-item > li.megamenu_img .menu-lists img { max-width: 55%; transform: scale(0.85); } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(1) .submenu .megamenu-item > li.megamenu_img .menu-lists img, .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(2) .submenu .megamenu-item > li.megamenu_img .menu-lists img { transform: scale(1.3); transform-origin: center; } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(3) .submenu .megamenu-item, .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(4) .submenu .megamenu-item { padding-bottom: 0; } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(4) .submenu .megamenu-item > li.megamenu_img { margin-top: -20px; } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(4) .submenu .megamenu-item > li.megamenu_img .menu-lists img { max-width: 60%; transform: scale(0.9); } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(4) .submenu .megamenu-item > li > ul { gap: 30px; } .sm-header .sm-header__nav .mainmenu li.has-droupdown:nth-child(3) .submenu .megamenu-item > li.megamenu_img { margin-top: -10px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists h3 { font-size: 15px; margin: 0; font-weight: 500; margin-bottom: 15px; color: rgb(124, 144, 170); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists p { font-size: 16px; margin: 0; position: relative; color: #6c6c6c; padding-inline-start: 25px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists p:before { content: '•'; position: absolute; left: 0px; top: 3px; font-size: 14px; color: var(--color-main); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img .menu-lists p + p { margin-top: 10px; } } @media (min-width: 1200px) { .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu > div { max-width: 1000px; } } @media (min-width: 1270px) { .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu > div { max-width: 1100px; } } @media (min-width: 1400px) { .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu > div { max-width: 1200px; } } @media (min-width: 1600px) { .sm-header .sm-header__nav .mainmenu li.has-droupdown .submenu > div { max-width: 1300px; } } /* Mobile Navigation */ @media (max-width: 991px) { .main-header .navbar-button { height: auto; width: auto; text-align: center; outline: none; border: 0 none; padding: 0; background: transparent; display: block; font-size: 25px; margin-inline-end: 15px; } .main-header .mobile-menu-header { display: flex; border-bottom: 1px solid #eeeeee; align-items: center; justify-content: space-between; padding: 15px 20px; } .main-header .mobile-menu-header .logo img { max-height: 96px; } .main-header .mobile-menu-header .close-icon .navbar-close { border: 0 none; width: 40px; height: 40px; font-size: 30px; display: flex; align-items: center; justify-content: center; color: #000; background: #cccccc40; line-height: 0; border-radius: 0; } .main-header .header-menu { z-index: 9999; position: fixed; content: ""; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); visibility: hidden; opacity: 0; transition: opacity .5s ease-out; } .main-header .header-menu.active { visibility: visible; opacity: 1; } body:has(.main-header .header-menu.active) { overflow: hidden; } .main-header .header-menu > .inner { width: 320px; z-index: 999; position: absolute; background: #FFFFFF; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.06); height: 100%; height: 100vh; display: flex; flex-direction: column; opacity: 0; left: -150px; transition: all .5s ease-out; } .main-header .header-menu.active > .inner { opacity: 1; left: 0; overflow-y: auto; } .main-header .nabbar-nav .mainmenu { padding: 24px 16px; display: flex; flex-direction: column; width: 100%; gap: 16px; } .main-header .nabbar-nav .mainmenu > li { display: block; padding-bottom: 16px; border-bottom: 1px solid rgb(246, 246, 249); } .sm-header .sm-header__nav .mainmenu > li > a { color: rgb(54, 54, 54); text-decoration: none; background-color: transparent; border: medium; cursor: pointer; font-weight: 600; font-size: 23px; line-height: 19px; width: 100%; text-align: start; display: flex; align-items: center; justify-content: space-between; transition: 0.4s ease-in-out; } .sm-header .sm-header__nav .mainmenu > li > a span, .sm-header .sm-header__nav .mainmenu > li > a .offer { font-size: inherit; font-weight: inherit; } .main-header .nabbar-nav .mainmenu > li > a > span[data-offer]:after { content: attr(data-offer); background: #03256C; color: rgb(31, 32, 68); font-size: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; padding: 2px 4px; line-height: 1; font-weight: 400; letter-spacing: 1px; position: relative; margin-inline-start: 10px; animation: blinker 1.5s linear infinite; } .main-header .nabbar-nav .mainmenu > li.has-droupdown > a.open { color: var(--color-main); } .main-header .nabbar-nav .mainmenu > li.has-droupdown > a > .dropdown-indicator { display: inline-flex; align-items: center; margin-inline-start: 5px; transform: rotate(-90deg); transition: transform 0.4s ease-in-out; } .main-header .nabbar-nav .mainmenu > li.has-droupdown > a > .dropdown-indicator svg { width: 18px; height: 18px; } .main-header .nabbar-nav .mainmenu > li.has-droupdown > a.open > .dropdown-indicator { transform: rotate(-180deg); } .main-header .nabbar-nav .mainmenu > li.has-droupdown .submenu { display: none; } .main-header .nabbar-nav .mainmenu > li.has-droupdown .submenu.visible { display: block; padding-top: 8px; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item { list-style: none; --bs-gutter-x: 0.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: 0; margin-right: calc(var(--bs-gutter-x) * -.5); margin-left: calc(var(--bs-gutter-x) * -.5); padding: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > p { color: rgb(124, 144, 170); font-size: 12px; font-style: normal; font-weight: 400; text-transform: uppercase; line-height: 16px; padding-bottom: 8px; padding-left: 0; margin-bottom: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a { align-items: center; background-color: transparent; border-radius: 0; cursor: pointer; display: flex; padding: 11px 0 11px 12px; position: relative; text-decoration: none; transition: color 0.2s ease-in-out; width: 100%; min-height: auto; border-bottom: 1px solid rgb(246, 246, 249); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li:last-child > a { border-bottom: none; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a:active, .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a.active { background: transparent; box-shadow: none; color: var(--color-main); } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner { display: block; width: 100%; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .icon, .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .icon > .inner, .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a .img-icon { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content { display: block; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .headings { color: #03256c; font-size: 16px; font-weight: 600; line-height: 1.35; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .headings > .labels { background-color: rgb(186, 230, 211); color: rgb(31, 32, 68); -moz-box-align: center; align-items: center; border-radius: 20px; display: inline-flex; font-size: 12px; font-weight: 500; -moz-box-pack: center; justify-content: center; line-height: 16px; padding: 2px 10px; position: relative; width: fit-content; text-decoration: none; text-transform: uppercase; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li > ul > li > a > .inner > .content > .subheading { display: none !important; } .main-header .nabbar-nav .mainmenu li.has-droupdown .submenu .megamenu-item > li.megamenu_img { display: none; } } @media (min-width:501px) { .main-header .nabbar-nav .nav-right-side-bar .btns i { display: none; } .sm-header .sm-header__nav .nav-right-side-bar .btns, .sm-header .sm-header__nav .nav-right-side-bar .btns span { font-size: 14px; font-weight: 600; } } @media (max-width:500px) { .sm-header .sm-header__nav .nav-right-side-bar .btns { padding: 8px 12px; font-size: 12px; font-weight: 600; } .main-header .nabbar-nav .nav-right-side-bar .btns span { display: none; } } /* Mega menü: "Yakında" işaretli öğeler (Ryzen, Ekran Kartlı) */ .sm-header .mainmenu .submenu .inner.menu-item-soon { position: relative; opacity: 0.6; } .sm-header .mainmenu .submenu .menu-item-soon-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.95); color: #333; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* --------------------------------------------------------------------------- Breadcrumb (includes/breadcrumb.tpl) header.tpl'de ana sayfa ve sepet akışı dışındaki tüm sayfalarda render edilir. --------------------------------------------------------------------------- */ .sm-breadcrumb { background: #f6f8fc; border-bottom: 1px solid rgba(3, 37, 108, 0.08); padding: 0.7rem 0; } .sm-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; line-height: 1.4; } .sm-breadcrumb-item { display: inline-flex; align-items: center; gap: 0.35rem; color: #5b6580; min-width: 0; } .sm-breadcrumb-item a { color: #5b6580; text-decoration: none; transition: color 0.15s ease; } .sm-breadcrumb-item a:hover, .sm-breadcrumb-item a:focus-visible { color: var(--color-main, #03256C); text-decoration: underline; } .sm-breadcrumb-sep { display: inline-flex; color: #a6aec4; } .sm-breadcrumb-current { color: var(--color-main, #03256C); font-weight: 600; /* Uzun başlıklar mobilde taşmasın */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Landing sayfalarında banner tam genişlikte başladığı için breadcrumb'ı görsel olarak ayırmak adına biraz daha nefes alanı verilir. */ .sm-landing .sm-breadcrumb { padding: 0.85rem 0; } @media (max-width: 575.98px) { .sm-breadcrumb { padding: 0.55rem 0; } .sm-breadcrumb-list { font-size: 0.75rem; } }