*{
    margin: 0;
    padding: 5;
    box-sizing: border-box;
    z-index: inherit;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: var(--color-bg-alt);
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

/* Tüm linkler için profesyonel hover efektleri - mavi renk ve alt çizgi yok */
a {
    color: inherit;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none !important;
    color: inherit;
}

a:hover *,
a:focus *,
a:active * {
    text-decoration: none !important;
}

#upper-header-nav{
    position: sticky;
    top: 0;
    z-index: 9;
    padding: 0.6rem 1.5rem;
    width: 100%;
    background: var(--color-beyaz);
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(var(--color-antrasit-rgb), 0.08);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (min-width: 1200px) {
    #upper-header-nav {
        padding-left: calc((100% - 1200px) / 2);
        padding-right: calc((100% - 1200px) / 2);
    }
}
#upper-header-nav #upper-nav-left{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
#upper-header-nav #upper-nav-left p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
#upper-header-nav #upper-nav-left i {
    color: var(--color-sari);
    font-size: 0.9rem;
}
#upper-header-nav #upper-nav-middle{
    display: none;
}
#upper-header-nav #upper-nav-right{
    display: flex;
    align-items: center;
}
#upper-header-nav #upper-nav-right p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    transition: color 0.3s ease;
    cursor: pointer;
}
#upper-header-nav #upper-nav-right p:hover {
    color: var(--color-yesil-koyu);
}
#upper-header-nav #upper-nav-right i {
    color: var(--color-sari);
    font-size: 0.9rem;
}


#header{
    position: sticky;
    top: 0%;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-muted);
    height: 80px;
    background-color: var(--color-beyaz);
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(var(--color-antrasit-rgb), 0.06);
}

/* Ana sayfada hero varken navbar sabit ve üstte overlay */
.has-hero #header { position: fixed; top: 0; left: 0; right: 0; }

/* Hero üzerindeyken: heroindex gibi şeffaf navbar, beyaz metin, çember ikonlar */
#header.header-over-hero {
    background: rgba(var(--color-siyah-rgb), 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
    border-bottom: 1px solid rgba(var(--color-beyaz-rgb), 0.08);
}
#header.header-over-hero #title a { color: var(--color-beyaz) !important; }
#header.header-over-hero .topnav nav ul li a { color: var(--color-beyaz) !important; }
#header.header-over-hero .topnav nav ul li a:hover { color: var(--color-yesil) !important; }
#header.header-over-hero #header-features-2 ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header.header-over-hero #header-features-2 a {
    filter: brightness(0) invert(1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    margin: 0;
    transition: background 0.2s;
    float: none;
}
#header.header-over-hero #header-features-2 a:hover { background: rgba(255,255,255,0.22); }
#header.header-over-hero #header-features-2 img { width: 18px; height: 18px; object-fit: contain; }
#header.header-over-hero .bars { filter: brightness(0) invert(1); }
/* Mobil açılır menü de cam stilinde */
    #header.header-over-hero .topnav.responsive { background: var(--color-beyaz); backdrop-filter: blur(14px); }
    #header.header-over-hero .topnav.responsive a { color: #1a1a1a !important; }

/* Ana sayfada (heroindex gibi) tek navbar: üst bar gizli */
.has-hero #upper-header-nav { display: none; }


#title{
    margin: 0 1.5%;
    padding: 0 0.5%;
}

#title a {
    text-decoration: none;
    color: #1a1a1a !important;
    font-weight: 800;
    font-size: 1.85rem;
    letter-spacing: 3px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(var(--color-sari-rgb), 0.7), 0 0 15px rgba(var(--color-sari-rgb), 0.5), 0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0;
}

#title a:hover {
    color: #1a1a1a !important;
    text-shadow: 0 0 12px rgba(var(--color-sari-rgb), 0.8), 0 0 20px rgba(var(--color-sari-rgb), 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
}

#title h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
}


.topnav{
    margin: 0;
    padding: 0;
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}
.topnav nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

section{
    margin: 0;
    padding: 0;
}

.topnav nav ul li{
    float: none;
    margin: 0;
    display: inline-block;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: none;
    cursor: pointer;
}

.topnav nav ul li p {
    margin: 0;
}

.topnav nav ul li a{
    position: relative;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    display: block;
    border-radius: 4px;
}

.topnav nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: var(--color-yesil-koyu);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.topnav nav ul li a:hover {
    color: var(--color-yesil-koyu);
    background: rgba(var(--color-yesil-rgb), 0.05);
}

.topnav nav ul li a:hover::after {
    transform: translateX(-50%) scaleX(1);
}








#header-features-2 {
    margin: 0 1.5%;
    padding: 0 0.5%;
}

#header-features-2 ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--color-antrasit-rgb), 0.1);
    color: var(--color-antrasit);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    position: relative;
}

.header-icon i {
    font-size: 1.05rem;
}

.header-icon:hover {
    color: var(--color-yesil-koyu);
    border-color: var(--color-yesil-koyu);
    background: rgba(var(--color-yesil-rgb), 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-yesil-rgb), 0.2);
}

#header-features-2 ul .number{
    background-color: var(--color-badge);
    border-radius: 50%;
    color: var(--color-beyaz);
    text-align: center;
    transform: translate(-8%, -1%);
}


.bars{
    display: none;
}



@media only screen and (max-width: 768px) {
    #upper-header-nav {
        display: none;
    }
}

@media only screen and (max-width: 600px) {

    #upper-header-nav {
        display: none;
    }

    #header{
        position: sticky;
        top: 0px;
        z-index: 10;
        width: 100%;
        display: flex;
        align-items: center;
        color: var(--color-text-muted);
        height: 70px;
        background-color: var(--color-beyaz);
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        padding: 0 1rem;
    }

    #title{
        margin: 0;
        padding: 0;
    }
    
    #title a {
        font-size: 1.5rem;
        letter-spacing: 2px;
        color: #1a1a1a !important;
        padding: 0.4rem 0;
        text-shadow: 0 0 6px rgba(var(--color-sari-rgb), 0.6), 0 0 12px rgba(var(--color-sari-rgb), 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    section{
        margin: 0% 0% 4% 0%;
    }

    #header-features-2{
        margin: 0;
        padding: 0;
        width: auto;
    }
    
    
    #header-features-2 ul {
        gap: 0.35rem;
    }
    
    #header-features-2 ul a{
        width: 38px;
        height: 38px;
        margin: 0;
        transform: none;
    }
    
    #header-features-2 ul a i {
        font-size: 0.95rem;
    }
    
    #header-features-2 ul a:hover{ 
        transform: translateY(-2px);
    }
    
    .topnav{
        display: none;
    }
    .topnav-2{
        display: none;
    }

    .topnav.responsive{
        display: block;
        background-color: var(--color-beyaz);
        overflow-y: auto;
        width: 280px;
        position: fixed;
        right: 0;
        top: 70px;
        height: calc(100vh - 70px);
        box-shadow: -4px 0 20px rgba(0,0,0,0.1);
        padding: 2rem 1.5rem;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .topnav.responsive.show-menu {
        transform: translateX(0);
    }
    
    .topnav.responsive nav ul { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 0;
    }
    
    .topnav.responsive nav ul li { 
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(var(--color-antrasit-rgb), 0.08);
    }
    
    .topnav.responsive nav ul li a {
        padding: 1rem 0;
        color: #1a1a1a !important;
        width: 100%;
        border-radius: 0;
    }
    
    .topnav.responsive nav ul li a::after {
        display: none;
    }

    .responsive-2{
        display: block;
    }

    .bars{
        display: block;
        height: 24px;
        width: 24px;
        position: relative;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .bars::before,
    .bars::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--color-antrasit);
        transition: all 0.3s ease;
    }
    
    .bars::before {
        top: 6px;
    }
    
    .bars::after {
        bottom: 6px;
    }
}




/* .search-input{
    margin-top: 3%;
    padding: 5% 7%;
    margin-top: 1%;
} */



















.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}


#footer-section{
    position: relative;
    background: var(--color-yesil-koyu);
    width: 100%;
    margin-top: 0;
    color: rgba(255,255,255,0.92);
}

#footer-section::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--color-yesil) 20%, var(--color-yesil) 80%, transparent 100%);
    pointer-events: none;
}

.footer-inner {
    padding: 3.5rem 1.5rem 2.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1140px;
    margin: 0 auto;
    text-align: left;
}

.footer-grid > .footer-brand {
    text-align: center;
}

.footer-brand .footer-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-beyaz);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
    letter-spacing: 0.3px;
}

.footer-brand .footer-logo-wrap:hover { color: var(--color-yesil); }

.footer-logo-img { 
    width: 5.5rem; 
    height: auto; 
    margin-bottom: 0.5rem;
}

.footer-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-tagline {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    text-align: center;
    max-width: 28ch;
    margin: 0;
}

.footer-links h6, .footer-contact h6, .footer-social h6 {
    color: var(--color-beyaz);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-links ul { list-style: none; margin: 0; padding: 0; }

.footer-links li { margin-bottom: 0.55rem; }

.footer-links a, .footer-contact a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover, .footer-contact a:hover { color: var(--color-yesil); }

.footer-contact p { margin: 0 0 0.35rem; font-size: 0.9rem; color: rgba(255,255,255,0.88); }
.footer-contact p i.fa { margin-right: 0.5rem; opacity: 0.8; }

.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.9rem;
    background: rgba(37,211,102,0.22);
    color: #e8f5e9;
    border: 1px solid rgba(37,211,102,0.45);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.footer-whatsapp:hover { background: rgba(37,211,102,0.35); color: #fff; border-color: rgba(37,211,102,0.6); }

.footer-social-icons { display: flex; gap: 0.65rem; margin-top: 0.6rem; }

.footer-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: rgba(255,255,255,0.92);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.footer-social-icons a:hover { border-color: var(--color-yesil); color: var(--color-yesil); background: rgba(var(--color-yesil-rgb), 0.12); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.15rem 1.5rem;
    text-align: center;
}

.footer-bottom p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.72); }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; text-align: center; }
    .footer-inner { padding: 2.5rem 1rem 2rem; }
    .footer-brand .footer-logo-wrap { justify-content: center; }
    .footer-tagline { max-width: none; margin: 0 auto; }
    .footer-links, .footer-contact, .footer-social { text-align: center; }
    .footer-social-icons { justify-content: center; }
}

footer .main-footer{  
    background: var(--color-footer); 
    height: 100%;
    padding: 4%;
}

footer ul{  padding-left: 0;  list-style: none;}

/* Copy Right Footer */
.footer-copyright { background: var(--color-footer); padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {  list-style: none; margin: 0;  padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid var(--color-antrasit-acik); display: inline-block;  line-height: 12px;  margin: 0;  padding: 0 8px;}
.footer-copyright nav ul li a{  color: var(--color-text-light);}
.footer-copyright nav ul li:first-child { border: medium none;  padding-left: 0;}
.footer-copyright p { color: var(--color-text-light); margin: 2px 0 0;}

/* Footer Top */
.footer-top{  background: var(--color-footer);  padding-bottom: 30px; margin-bottom: 30px;  border-bottom: 3px solid var(--color-siyah);}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{  background: transparent;}
footer.transparent .footer-copyright{ background: rgba(var(--color-siyah-rgb), 0.3);}

/* Footer light */
footer.light .footer-top{ background: var(--color-bg-alt);}
footer.light .main-footer{  background: var(--color-bg-alt);}
footer.light .footer-copyright{ background: rgba(var(--color-beyaz-rgb), 0.3);}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
  Widgets 
====================== */
.widget{  padding: 20px;  margin-bottom: 40px;}
.widget.widget-last{  margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent;  margin-bottom: 40px;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{  margin-bottom: 18px;}
.widget li a {
    color: var(--color-link);
    text-align: left;
}
.widget li a:hover{ color: var(--color-beyaz);}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: var(--color-accent); display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: var(--color-text-muted);}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{  color: var(--color-beyaz);}

ul.social-footer2 { margin: 0;padding: 0; width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {transform: scale(1.3);}
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center;}
.btn{
    text-decoration: none;
}
.btn:hover, .btn:focus, .btn.active {
    text-decoration: none;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: all 250ms ease-in-out 0s;
}

.widget-content, .widget-title{
    text-align: left;
}
 
.widget-content a{
    color: var(--color-beyaz);
}

.widget-content a:hover{
    color: var(--color-yesil-koyu);
}

/* WhatsApp overlay butonu (ürün kartları) */
.whatsapp-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-beyaz);
    text-decoration: none;
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    background: rgba(37, 211, 102, 0.9);
    transition: background 0.2s, color 0.2s;
}
.whatsapp-overlay-btn:hover {
    background: #25D366;
    color: var(--color-beyaz);
}

/* Favori overlay butonu (ürün kartları) */
.favori-overlay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-beyaz);
    text-decoration: none;
    border-radius: 50%;
    background: rgba(200, 60, 60, 0.85);
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.favori-overlay-btn:hover {
    background: #c0392b;
    color: var(--color-beyaz);
    transform: scale(1.08);
}

.add-to-cart-overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}