@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --sf-color-primary: #331904;
    --sf-color-secondary: #757575;
    --sf-color-accent: #000000;
    --sf-color-bg: #ffffff;
    --sf-color-surface: #fafafa;
    --sf-color-text: #212121;
    --sf-color-link: #000000;
    --sf-color-link-hover: #424242;
    --sf-color-heading: #000000;
    --sf-color-border: #eeeeee;
    --sf-color-muted: #b2bec3;
    --sf-color-success: #00b894;
    --sf-color-warning: #fdcb6e;
    --sf-color-danger: #d63031;
    --sf-color-info: #0984e3;
    --sf-heading-font: 'Poppins', serif;
    --sf-font: 'Poppins', system-ui, sans-serif;
    --sf-base-size: 16px;
    --sf-line-height: 1.6;
    --sf-btn-radius: 24px;
    --sf-btn-padding-y: 7px;
    --sf-btn-padding-x: 25px;
    --sf-btn-font-size: 16px;
    --sf-btn-font-weight: 700;
    --sf-btn-transition: 0.35s;
    --sf-btn-primary-bg: #000000;
    --sf-btn-primary-text: #ffffff;
    --sf-btn-primary-hover-bg: #333333;
    --sf-btn-primary-hover-text: #ffffff;
    --sf-btn-secondary-bg: #ffffff;
    --sf-btn-secondary-text: #111111;
    --sf-btn-secondary-hover-bg: #f1f1f1;
    --sf-btn-secondary-hover-text: #111111;
    --sf-btn-text-transform: none;
    --sf-btn-outline-width: 3px;
    --sf-input-radius: 6px;
    --sf-input-border-color: #dfe6e9;
    --sf-input-focus-border: #0984e3;
    --sf-container-max: 1320px;
    --sf-section-padding: 60px;
    --sf-grid-gap: 24px;
    --sf-radius-sm: 4px;
    --sf-radius-md: 8px;
    --sf-radius-lg: 12px;
    --sf-header-height: 100px;
    --sf-logo-max-height: 45px;
    --sf-badge-radius: 4px;
    --sf-transition: 0.3s linear;
    --lcnb-nav-bg: #ffffff;
    --lcnb-nav-item-bg: #ffffff;
    --lcnb-nav-bg-hover: #ffffff;
    --lcnb-nav-text: #000000;
    --lcnb-nav-hover: #5c5c5c;
    --lcnb-nav-active: #ffffff;
    --lcnb-nav-active-bg: #263576;
    --lcnb-badge-bg: #263576;
    --lcnb-nav-pad-v: 0px;
    --lcnb-nav-pad-h: 0px;
}

h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0em;
    text-transform: none;
}

h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

h6 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.sf-btn--primary {
    background: var(--sf-btn-primary-bg);
    color: var(--sf-btn-primary-text);
}

.sf-btn--primary:hover {
    background: var(--sf-btn-primary-hover-bg);
    color: var(--sf-btn-primary-hover-text);
}

.sf-btn--secondary {
    background: var(--sf-btn-secondary-bg);
    color: var(--sf-btn-secondary-text);
}

.sf-btn--secondary:hover {
    background: var(--sf-btn-secondary-hover-bg);
    color: var(--sf-btn-secondary-hover-text);
}

.sf-btn--outline,
.sf-btn--dark-outline {
    border-width: 3px;
}

.sf-input {
    background: #ffffff;
    border: 1px solid #dfe6e9;
    color: #2d3436;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
}

.sf-input::placeholder {
    color: #b2bec3;
}

.sf-input:focus {
    border-color: #0984e3;
    outline: none;
}

.sf-label {
    font-size: 14px;
    font-weight: 500;
    color: #2d3436;
}

.sf-card {
    border-radius: 10px;
    box-shadow: none;
}

.sf-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.sf-badge--sale {
    background: #e74c3c;
    color: #ffffff;
    border-radius: 4px;
}

.sf-badge--new {
    background: #00b894;
    color: #ffffff;
    border-radius: 4px;
}

.sf-badge--soldout {
    background: #636e72;
    color: #ffffff;
    border-radius: 4px;
}

.sf-footer {
    background: #fe2020;
    color: #000000;
}

.sf-footer a {
    color: #000000;
}

.sf-header--static {
    position: relative !important;
    top: auto !important;
}

.sf-header,
body > .sf-header,
body.sf-boxed > .sf-header {
    background: #ffffff;
    color: #0162fe;
    height: 100px;
    border-bottom: 1px solid #eeeeee;
    border-top: none;
    border-right: none;
    border-left: none;
    box-shadow: none;
}

.sf-header:hover,
body > .sf-header:hover,
body.sf-boxed > .sf-header:hover {
    background: #ffffff;
}

.sf-header .sf-header__logo {
    color: #0162fe;
}

.sf-header .sf-header__logo:hover {
    color: #06fee1;
}

.sf-header .sf-header__icon-btn,
.sf-header .sf-header__menu-btn {
    background: transparent !important;
    border-radius: 41px !important;
    color: var(--sf-header-icon-color, #263576);
}

.sf-header .sf-header__icon-btn:hover,
.sf-header .sf-header__menu-btn:hover {
    color: var(--sf-header-icon-hover, #263576);
    background: #ffffff;
    border-radius: 41px !important;
}

.sf-header--logo-center-nav-below .sf-header__actions .sf-header__icon-btn {
    color: var(--sf-header-icon-color, #263576) !important;
}

.sf-header--logo-center-nav-below .sf-header__actions .sf-header__icon-btn:hover {
    color: var(--sf-header-icon-hover, #263576) !important;
}

.sf-header .sf-header__nav .sf-nav-item > a:hover {
    color: #06fee1;
}

.sf-header__nav .sf-nav-item > a,
.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item > a {
    font-size: 14px !important;
    font-weight: 400;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 0px 0px 0px 0px !important;
    transition: color 300ms linear, background 300ms linear, border-color 300ms linear !important;
}

.sf-header .sf-header__search-btn,
.sf-header .sf-header__menu-btn,
.sf-header .sf-header__actions a,
.sf-header .sf-header__actions button {
    transition: color 300ms linear, background 300ms linear !important;
}

.sf-header__nav {
    gap: 0;
}

.sf-header__nav .sf-nav-item {
    margin-right: 2px;
}

/* nav hover anim: underline — class eklenir */
.sf-header--logo-center-nav-below .sf-header__nav {
    background: #ffffff;
    border-top-color: #02a2f2;
    --lcnb-nav-pad-v: 0px;
    --lcnb-nav-pad-h: 0px;
    border-top: 1px solid #e0e0e0;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

.sf-header--logo-center-nav-below.sf-header {
    border-bottom: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .lcnb-nav-fixed {
        display: none !important;
    }
}

.lcnb-nav-fixed {
    background: #ffffff !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    border-top: 1px solid #e0e0e0 !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.lcnb-nav-fixed__left {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.lcnb-nav-fixed__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: static;
}

.lcnb-nav-fixed__actions--right {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.lcnb-nav-fixed > ul {
    padding-left: 150px;
    padding-right: 100px;
    box-sizing: border-box;
}

.lcnb-nav-fixed__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lcnb-nav-fixed,
.lcnb-nav-fixed__actions {
    overflow: visible;
}

.lcnb-nav-fixed__actions .sf-header__icon-btn {
    color: var(--sf-header-icon-color, #263576) !important;
    background: transparent;
}

.lcnb-nav-fixed__actions .sf-header__icon-btn:hover {
    color: var(--sf-header-icon-hover, #263576) !important;
}

.lcnb-nav-fixed__actions .sf-header__badge {
    background: #263576 !important;
}

.lcnb-nav-fixed .sf-nav-item {
    background: #ffffff !important;
}

.lcnb-nav-fixed .sf-nav-item:hover {
    background: #ffffff !important;
}

.lcnb-nav-fixed .sf-nav-item > a {
    color: #000000 !important;
}

.lcnb-nav-fixed .sf-nav-item > a:hover {
    color: #5c5c5c !important;
}

.lcnb-nav-fixed .sf-nav-item.active > a {
    color: #ffffff !important;
    background: #263576 !important;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item,
.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item {
    background: #ffffff;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item:hover,
.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item:hover {
    background: #ffffff;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item > a,
.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item > a {
    color: #000000;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item > a:hover,
.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item > a:hover {
    color: #5c5c5c;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item.active > a,
.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item > a.active {
    color: #ffffff;
    background: #263576;
}

.sf-header--logo-center-nav-below .sf-header__badge {
    background: #263576 !important;
}

.sf-header--logo-center-nav-below .sf-header__nav .sf-nav-item {
    flex: unset;
}

.sf-header--logo-center-nav-below .sf-header__left-nav {
    background: #ffffff;
}

.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item {
    background: #ffffff;
}

.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item > a {
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    padding: 0px 10px;
}

.sf-header--logo-center-nav-below .sf-header__left-nav .sf-nav-item > a:hover {
    color: #263576;
}

/* Sticky header mobilde gizlenir */
@media (max-width: 768px) {
    .sticky-header {
        display: none !important;
    }
}

/* Sticky header — header arka planı */
.sticky-header {
    background: #ffffff !important;
}

/* Sticky header — LCNB nav renk değişkenleri */
.sticky-header {
    --lcnb-nav-bg: #ffffff;
    --lcnb-nav-text: #000000;
    --lcnb-nav-hover: #5c5c5c;
    --lcnb-nav-active: #ffffff;
    --lcnb-nav-active-bg: #263576;
    --lcnb-badge-bg: #263576;
    --lcnb-nav-pad-v: 0px;
    --lcnb-nav-pad-h: 0px;
}

.sticky-header .sticky-nav li {
    background: #ffffff;
}

.sticky-header .sticky-nav li:hover {
    background: #ffffff;
}

.sticky-header .sticky-nav li a,
.sticky-header .sticky-nav-link {
    color: #000000;
}

.sticky-header .sticky-nav li a:hover,
.sticky-header .sticky-nav-link:hover {
    color: #5c5c5c;
}

.sticky-header .sticky-nav li.active > a,
.sticky-header .sticky-nav li a.active {
    color: #ffffff;
    background: #263576;
}

.sticky-header .sticky-nav li a,
.sticky-header .sticky-nav-link {
    font-size: 14px !important;
    font-weight: 400;
    text-transform: uppercase;
    padding: 8px 10px;
    border-radius: 0px 0px 0px 0px !important;
}

.sticky-header .sticky-nav {
    gap: 0;
}

.sticky-header .sticky-nav li {
    margin-right: 2px;
}

.sticky-header .sf-nav-badge {
    background: #263576 !important;
}

:root {
    --sf-mh-bg: #ffffff;
}

@media (max-width: 991px) {
/* === Mobil Header === */
.mobile-header--sticky {
    background: var(--sf-color-bg) !important;
}

.mobile-header {
    background: var(--sf-mh-bg);
    color: #1a1a1a;
    height: 56px;
    padding: 0px 0px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-bottom: 1px solid #e9ebec;
}

.mobile-header .mh-icon, .mobile-header .mh-icon svg {
    color: #263576;
    fill: #263576;
}

.mobile-header .mh-icon:hover, .mobile-header .mh-icon:hover svg {
    color: #263576;
    fill: #263576;
}

.mobile-header .mh-hamburger {
    color: #263576;
    background: #ffffff;
    font-size: 20px;
    border-radius: 0px;
}

.mobile-header .mh-search-input {
    background: #f3f3f9;
    color: #495057;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e9ebec;
}

.mobile-header .mh-search-input::placeholder {
    color: #adb5bd;
}

}

/* Özel CSS — Mobil */
@media (max-width: 768px) {
.sf-pagination__item--active .sf-pagination__link {

    color: #ff0000!important;

}
}