@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap);@import "mixin";$font-family:'Montserrat',Arial,sans-serif;$text-color:#282528;$primary-color:#0088C6;$primary-hover-color:#0088C6;$primary-text-color:#fff;$secondary-color:#0088C6;$secondary-hover-color:#0088C6;$secondary-text-color:#fff;$gray-color:#F0F0F0;$gray-hover-color:rgba(0,0,0,0);$gray-text-color:rgb(0,0,0);$light-gray-color:#fafafa;$border-color:rgb(255,255,255);$transition-base:all .2s ease-in-out;$radius-base:.4rembody{font-size:1rem;font-family:$font-family;color:$text-color;background:rgb(255,255,255);transition:left .2s ease-in-out,right .2s ease-in-out;position:relative;left:0}@media (min-width:992px){body{zoom:1.1}}.header-social-menu{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0;margin:0;list-style:none}.header-social-menu li a{display:flex;align-items:center;gap:.3rem;padding:.4rem;border-radius:.4rem;transition:background 0.2s,box-shadow 0.2s;color:inherit;text-decoration:none}.header-social-menu li a svg{flex-shrink:0;width:2.4rem;height:2.4rem;transition:transform 0.3s}.header-social-menu li a span{font-size:.95rem}.header-social-menu a[href^="tel:"]{color:#19befa!important}.header-social-menu a[href^="tel:"]:hover{background:#19befa;color:#fff!important;box-shadow:0 0 6px #19befa,0 0 12px #19befa}.header-social-menu a[href^="tel:"]:hover svg{transform:rotate(-15deg) scale(1.1)}.header-social-menu a[href*="instagram.com"]{color:#E1306C!important}.header-social-menu a[href*="instagram.com"]:hover{background:linear-gradient(90deg,#feda75 0%,#fa7e1e 35%,#d62976 65%,#962fbf 85%,#4f5bd5);color:#fff!important;box-shadow:0 0 6px #E1306C,0 0 12px #E1306C}.header-social-menu a[href*="instagram.com"]:hover svg{transform:rotate(-12deg) scale(1.1)}.header-social-menu a[href*="wa.me"]{color:#16BE45!important}.header-social-menu a[href*="wa.me"]:hover{background:#16BE45;color:#fff!important;box-shadow:0 0 6px #16BE45,0 0 12px #16BE45}.header-social-menu a[href*="wa.me"]:hover svg{transform:rotate(20deg) scale(1.15)}.typer-container{display:inline-block;vertical-align:middle;overflow:hidden;width:180px;height:1.2em}@keyframes scroll-text{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.header-social-menu .typing-dots::after{content:'';display:inline-block;width:1.2em;text-align:left;margin-left:.3rem;animation:dots 1.2s steps(3,end) infinite;color:#16BE45;font-weight:700}.header-top-right{display:flex;justify-content:center;align-items:center}@media (max-width:900px){.header-top-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0.6rem!important}.header-top-right{order:1!important;width:100%!important;text-align:center!important}.header-social-menu{order:2!important;width:auto!important;justify-content:center!important}}// Genel a hover a{color:$primary-color;&:active,&:focus,&:hover{color:$primary-hover-color}}.openbox-overlay,.navigation-menu-overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0);display:none;z-index:99;width:100%;height:100%;cursor:pointer}.navigation-active{.navigation-menu-overlay{display:block}}#header{position:relative;z-index:100;margin-bottom:3rem;.header-top{background:rgb(47,47,47)}.header-middle{background:#F9F9F9;.header-user-cart{display:flex;align-items:center;// dikey ortala justify-content:flex-end;// yatayda sağa yasla margin-left:1rem;// search bar’dan biraz ayır // 768px ve üzeri ekranlarda full-width’i iptal edip içeriğe göre ölçeklensin @media (min-width:768px){flex:0 0 auto!important;width:auto!important}// 767px altı için orijinali koru (grid içi full-width) @include max($md){justify-content:space-between;padding:1.5rem 0;margin-left:0}// ikon+metin hizlaması .user-menu>a,.cart-menu>a{display:flex;align-items:center;svg{margin-right:.5rem;flex-shrink:0}}}}.header-bottom{background:$primary-color}}.logo{@include center;padding:1rem 1rem;img{max-height:20rem;width:auto;// Eğer oranı bozulmasın istiyorsan bunu ekle!}@include max($md){padding:0rem 0}}.footer-logo{padding-bottom:10 rem;img{max-height:10 rem}@include max($md){@include center;padding:5 rem 0}}.search{padding:2.5rem 0;form{position:relative;input{width:100%;padding:1rem 8rem 1rem 4.3rem;border:1px solid $border-color;border-right:none!important;height:4.8rem;background:#fff url("{{ themeAsset('images/icon-search.svg') }}") no-repeat 0 50%;background-position:1.5rem;font-size:1.2rem;color:$text-color;border-radius:4px 0 0 4px;&::placeholder{opacity:1;color:#999}}button{position:absolute;top:0;right:0;height:100%;width:6.5rem;background:$primary-color;border:none;padding:0;border-radius:0 4px 4px 0;font-size:1.2rem;font-weight:700;color:$primary-text-color}}@include max($md){padding:0}}#navigation{position:relative;.category-level-1{>ul{display:flex;>li{>a{padding:1.5rem 1.7rem;font-size:1.2rem;color:$primary-text-color;line-height:1.8rem;display:flex;align-items:center;transition:color 0.3s,background 0.3s;svg{margin-right:8px;transition:color 0.3s,filter 0.4s,transform 0.2s;color:inherit}}// BMW ve Mercedes normal spin &.bmw:hover>a svg,&.bmw>a:hover svg{color:#fff;filter:drop-shadow(0 0 7px #00cfff);animation:spin 0.3s linear 10;transform:scale(1.12) rotate(-7deg)}&.mercedes:hover>a svg,&.mercedes>a:hover svg{color:#fff;filter:drop-shadow(0 0 7px #aaa);animation:spin 0.3s linear 10;transform:scale(1.12) rotate(-7deg)}// MOTOR YAĞI özel düşme efekti &.motor-yagi>a svg{color:#eab308}&.motor-yagi:hover>a svg,&.motor-yagi>a:hover svg{color:#ffc700;filter:drop-shadow(0 0 10px #ffc700);animation:drop-down 0.55s cubic-bezier(.22,1,.36,1)}&:hover>a,>a:hover{color:#fff;background:#0088C6;font-weight:700}}}}@include max($md){display:none}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes drop-down{0%{transform:translateY(-10px) scale(1);opacity:.7}70%{transform:translateY(3px) scale(1.13)}100%{transform:translateY(0) scale(1.12);opacity:1}}.toggle-bar{width:4rem;height:4rem;align-items:center;justify-content:center;font-size:2rem;display:none;cursor:pointer;z-index:1;@include max($md){display:flex}}#entry-slider{margin-bottom:3rem;position:relative;.slick-arrow{max-width:550px;height:4rem;opacity:1;position:absolute;top:50%;transform:translateY(-50%);z-index:2;cursor:pointer;>svg{display:none}&.slick-prev{left:10px;background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat left top;&:hover{background-position:left bottom}}&.slick-next{right:10px;background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat right top;&:hover{background-position:right bottom}}}.slick-dots{position:absolute;bottom:15px;display:flex;justify-content:center;align-items:center;width:100%;>li{margin:0 .5rem;>button{width:20px;height:2px;border:none;position:relative;overflow:hidden;text-indent:-9999px;border-radius:0;padding:0;display:block;margin-bottom:.5rem;background:url("{{ themeAsset('images/slider-bullet.svg') }}") no-repeat left}&.slick-active{>button{width:4.5rem;background-position:right}}}}// --- MOBİLDE FULL WIDTH SLIDER --- @include max($md){// Tüm üst parentların padding ve margin'ini sıfırla body, html, .container, .row, .col-12, .col-lg-6, .col-lg-12, .col-8 { padding: 0 !important; margin: 0 !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; box-sizing: border-box !important; } // Slider ve içeriği tam ekran ve ortalı #entry-slider, #entry-slider .slick-list, #entry-slider .slick-track, #entry-slider .entry-slider-item, #entry-slider .slick-slide, #entry-slider .slick-slide > div { position: relative !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; box-sizing: border-box !important; } #entry-slider { left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: 0 !important; background: #fff !important; overflow: hidden !important; z-index: 2; } #entry-slider img { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: 170px !important; // Yüksekliği burada ayarla object-fit: cover !important; // cover: kırpar, contain: sığdırır display: block !important; margin: 0 auto !important; border: none !important; background: transparent !important; box-shadow: none !important; } } } /* Category Multi Search */ .category-multi-search { background: #fff; border: 2px solid #e4e7ec; border-radius: 26px; box-shadow: 0 4px 24px 0 rgba(40,60,100,0.12); padding: 32px 28px 22px 28px; max-width: 600px; margin: 0 auto 48px auto; transition: box-shadow 0.35s cubic-bezier(.4,1,.7,1); &:hover { box-shadow: 0 12px 40px 0 rgba(60,80,120,0.20); } .category-multi-search-title { font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; color: #234c7c; margin-bottom: 24px; text-align: center; position: relative; span { display: inline-block; animation: fadeInDown 0.7s cubic-bezier(.17,.67,.83,.67); } } .category-multi-search-content { .row { gap: 12px 0; } select, button { border-radius: 18px !important; font-size: 1.05rem; padding: 10px 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.03); border: 1.3px solid #d5deea; transition: border 0.22s, box-shadow 0.22s; } select:focus { border-color: #328fff; box-shadow: 0 0 8px #bbdcfa; } button { background: linear-gradient(90deg, #328fff 60%, #3f7cd7 100%); color: #fff; font-weight: 600; letter-spacing: .02em; transition: background 0.3s, transform 0.18s cubic-bezier(.27,1,.42,1); box-shadow: 0 4px 12px 0 rgba(50,143,255,.08); &:hover { background: linear-gradient(90deg, #3f7cd7 40%, #328fff 100%); transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 18px 0 rgba(50,143,255,.14); } &:active { transform: scale(0.98); } } } } // Basit fade-in animasyonu @keyframes fadeInDown { 0% { opacity:0; transform:translateY(-24px);} 100% { opacity:1; transform:translateY(0);} } .page-multi-search { background: linear-gradient(90deg, #f5f9ff 0%, #fafdff 100%); border: 1.7px solid #dbeafe; border-radius: 20px; box-shadow: 0 2px 18px 0 rgba(40,80,140,0.10); padding: 28px 20px 18px 20px; max-width: 700px; margin: 0 auto 38px auto; position: relative; animation: fadeInDown 0.5s cubic-bezier(.22,.65,.58,1.07); &:before { content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 56px; height: 4px; background: linear-gradient(90deg,#328fff 30%,#a7c6fb 100%); border-radius: 2px; opacity: .33; transition: opacity 0.22s; } .page-multi-search-title { font-size: 1.35rem; font-weight: 600; color: #1951a6; text-align: center; margin-bottom: 20px; letter-spacing: .01em; span { display: inline-block; } } .page-multi-search-content { .row { gap: 8px 0; } select, button { border-radius: 16px !important; font-size: 0.99rem; padding: 10px 13px; box-shadow: 0 1px 6px rgba(44,96,194,0.05); border: 1.2px solid #c3d5ee; transition: border 0.2s, box-shadow 0.22s; } select:focus { border-color: #328fff; box-shadow: 0 0 7px #bbdcfa; } button { background: linear-gradient(90deg, #1951a6 60%, #328fff 100%); color: #fff; font-weight: 600; transition: background 0.24s, transform 0.18s cubic-bezier(.27,1,.42,1); box-shadow: 0 3px 12px 0 rgba(50,143,255,.06); &:hover { background: linear-gradient(90deg, #328fff 40%, #1951a6 100%); transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px 0 rgba(50,143,255,.16); } &:active { transform: scale(0.98); } } } } .main-banner { margin-bottom: 6rem; .banner-hover { overflow: hidden; img { transition: $transition-base; &:hover { transform: scale(1.1); } } } .slick-arrow { width: 4rem; height: 4rem; opacity: 1; position:absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; > i { display: none; } &.slick-prev { left: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat left top; &:hover { background-position: left bottom; } } &.slick-next { right: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat right top; &:hover { background-position: right bottom; } } } .slick-dots { display: flex; justify-content: center; align-items: center; width: 100%; > li { margin: 0 0.5rem; > button { width: 20px; height: 2px; border: none; position: relative; overflow: hidden; text-indent: -9999px; border-radius: 0; padding: 0; display: block; margin-bottom: 0.5rem; background:url("{{ themeAsset('images/icon-bullet.svg') }}") no-repeat left; } &.slick-active { > button { width: 4.5rem; background-position: right; } } } } @include max($md) { .banner { margin-bottom: 2rem; } } } .default-products { margin-bottom: 6rem; .products-header { position: relative; text-align: center; margin-bottom: 2rem; &:after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #DCDCDC; z-index: -1; } span { position: relative; font-size: 2.4rem; font-weight: 700; color: $text-color; line-height: 3.1rem; background: #f9f9f9; z-index: 2; padding: 0 3rem; } } .slick-arrow { width: 4rem; height: 4rem; opacity: 1; position:absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; > i { display: none; } &.slick-prev { left: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat left top; &:hover { background-position: left bottom; } } &.slick-next { right: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat right top; &:hover { background-position: right bottom; } } } .slick-dots { display: flex; justify-content: center; align-items: center; width: 100%; > li { margin: 0 0.5rem; > button { width: 20px; height: 2px; border: none; position: relative; overflow: hidden; text-indent: -9999px; border-radius: 0; padding: 0; display: block; margin-bottom: 0.5rem; background:url("{{ themeAsset('images/icon-bullet.svg') }}") no-repeat left; } &.slick-active { > button { width: 4.5rem; background-position: right; } } } } @include max($md) { margin-bottom: 4rem; } @include max($sm) { .products-header { span { padding: 0 2rem; } } } } .featured-products { .products-header { position: relative; text-align: center; padding: 1rem 0; margin-bottom: 2rem; &:after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #DCDCDC; z-index: -1; } span { position: relative; font-size: 2.4rem; font-weight: 700; color: $text-color; line-height: 3.1rem; background: #f9f9f9; z-index: 2; padding: 0 3rem; } @include min($md) { border: 1px solid $border-color; border-bottom: none; margin-bottom: 0; background: #fff; &:after { left: 50%; transform: translate(-50%, -50%); width: 90%; z-index: 1; } span { position: relative; font-size: 1.4rem; line-height: 1.8rem; background: #fff; padding: 0 1rem; } } } .slick-dots { display: flex; justify-content: center; align-items: center; width: 100%; > li { margin: 0 0.5rem; > button { width: 20px; height: 2px; border: none; position: relative; overflow: hidden; text-indent: -9999px; border-radius: 0; padding: 0; display: block; margin-bottom: 0.5rem; background:url("{{ themeAsset('images/icon-bullet.svg') }}") no-repeat left; } &.slick-active { > button { width: 4.5rem; background-position: right; } } } } @include min($md) { .showcase { border-top: none; &:hover { border-color: $border-color; } } } @include max($md) { margin-bottom: 3rem; } } .similar-products, .offered-products { margin-bottom: 6rem; .products-header { position: relative; text-align: center; margin-bottom: 2rem; &:after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #DCDCDC; z-index: -1; } span { position: relative; font-size: 2.4rem; font-weight: 700; color: $text-color; line-height: 3.1rem; background: #f9f9f9; z-index: 2; padding: 0 3rem; } } .slick-arrow { width: 4rem; height: 4rem; opacity: 1; position:absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; > i { display: none; } &.slick-prev { left: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat left top; &:hover { background-position: left bottom; } } &.slick-next { right: 25px; background:url("{{ themeAsset('images/icon-arrow.svg') }}") no-repeat right top; &:hover { background-position: right bottom; } } } .slick-dots { display: flex; justify-content: center; align-items: center; width: 100%; > li { margin: 0 0.5rem; > button { width: 20px; height: 2px; border: none; position: relative; overflow: hidden; text-indent: -9999px; border-radius: 0; padding: 0; display: block; margin-bottom: 0.5rem; background:url("{{ themeAsset('images/icon-bullet.svg') }}") no-repeat left; } &.slick-active { > button { width: 4.5rem; background-position: right; } } } } } /* @Showcase */ .showcase { position: relative; border: 1px solid $border-color; background: $primary-text-color; border-radius: $radius-base; margin-bottom: 3rem; &:hover { border-color: $primary-color; .showcase-price { opacity: 0; } .add-to-cart-button, .no-stock-button { opacity: 1 !important; } .add-to-cart-button { &:hover { background: $primary-hover-color; } } .no-stock-button { &:hover { background: #C1C1C1; } } } .showcase-image-container { position: relative; } .showcase-image { position: relative; padding-top: 100%; overflow: hidden; a { @include imgcenter; img { border-radius: $radius-base; } } } .showcase-content { position: relative; text-align: center; margin: 1rem; .showcase-title { text-align: center; margin-bottom: 3rem; a { display: block; font-size: 1.4rem; line-height: 2rem; height: 4rem; overflow: hidden; color: $text-color; } @include max($md) { margin-bottom: 2rem; } @include max($xs) { margin-bottom: 1rem; a { font-size: 1.3rem; } } } .showcase-price { height: 4.1rem; opacity: 1; font-size: 1.8rem; color: $secondary-color; line-height: 2.3rem; &-new { font-weight: 700; } &-old { font-size: 1.4rem; font-weight: 700; color: #999999; line-height: 1.8rem; text-decoration:line-through; } } .add-to-cart-button, .no-stock-button { opacity: 0; z-index: 11; position: absolute; bottom: 0; left: 0; width: 100%; height: 4.8rem; font-size: 1.8rem; color: $primary-text-color; border-radius: $radius-base; @include center; } .add-to-cart-button { background: $primary-color; } .no-stock-button { background: #D4D4D4; } } .discount-label { z-index: 11; position: absolute; left: 2rem; top: 2rem; width: 4.5rem; height: 4.5rem; background: $secondary-color; border-radius: 50%; font-size: 1.4rem; font-weight: 700; color: $primary-text-color; @include center; @include max($sm) { width: 3rem; height: 3rem; left: 1rem; top: 1rem; font-size: 1.2rem; } } .new-label { z-index: 11; position: absolute; right: 2rem; top: 2rem; width: 4.5rem; height: 4.5rem; background: #282528; border-radius: 50%; font-size: 1.4rem; font-weight: 700; color: $primary-text-color; @include center; @include max($sm) { width: 3rem; height: 3rem; right: 1rem; top: 1rem; font-size: 1.2rem; } } .sold-out-label { position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); font-size: 1.8rem; font-weight: 700; color: $secondary-color; line-height: 2.3rem; z-index: 1; @include center; } } .shopping-banners { margin-bottom: 60px; @include max($md) { margin-bottom: 30px; } .shopping-banner { @include center; padding: 18px 29px; background: #fff; @include max($md) { margin-bottom: 30px; } .shopping-banner-img { position: relative; display: block; width: 50px; height: 50px; @include imgcenter; } .shopping-banner-content { padding-left: 14px; .shopping-banner-title { color: #282528; font-size: 17px; font-weight: 800; } .shopping-banner-sub-title { color: #999999; font-size: 14px; } } } } /* @Footer */ /* @Footer */ #footer { margin-top: 10rem; .footer-row-1 { margin-bottom: 6rem; @include max($sm) { .banner { margin-bottom: 2rem; text-align: center; } } } // full-bleed arka plan için pseudo-element hack .footer-row-2, .footer-row-3 { position: relative; overflow: hidden; // içerik dışına taşmayı kes &::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; /* viewport’un ortası */ margin-left: -50vw; /* tam sol uç */ width: 100vw; /* tüm genişlik */ background: inherit; /* elementin background’unu al */ z-index: -1; /* içeriğin arkasında kalsın */ } } .footer-row-2 { padding: 6rem 0; background: #F9F9F9; .banner { margin-bottom: 2rem; } .footer-contact { font-size: 1.2rem; color: #000; line-height: 1.7rem; margin-bottom: 2rem; } .footer-social { display: flex; align-items: center; a { width: 3rem; height: 3rem; background: #fff; border-radius: 50%; margin-right: 1.3rem; @include center; &:last-child { margin-right: 0; } i { font-size: 1.4rem; color: $text-color; } } } @include max($md) { padding: 4rem 0; .banner, .footer-contact { text-align: center; } .footer-social { justify-content: center; margin-bottom: 3rem; } } } .footer-row-3 { padding: 2rem 0; background: #F1F1F1; .footer-banner { display: flex; align-items: center; justify-content: space-between; .copyright { font-size: 1.4rem; color: #000; line-height: 2.6rem; } } @include max($md) { .footer-banner { display: block; text-align: center; .copyright { margin-bottom: 2rem; } } } } @include max($md) { margin-top: 6rem; } @include max($sm) { margin-top: 3rem; } } // Menü kısmı aynı kalıyor .footer-menu-container { .footer-menu { .footer-menu-title { font-size: 1.8rem; font-weight: 700; color: #000; line-height: 2.3rem; margin-bottom: 2rem; } .footer-menu-content { > ul > li { color: #000; > a { font-size: 1.2rem; color: #000; line-height: 2.4rem; &:hover { text-decoration: underline; } } } } } @include max($md) { margin-bottom: 3rem; .footer-menu { text-align: center; } } @include max($sm) { text-align: center; &[data-menu-type="accordion"] { text-align: left; .footer-menu { .footer-menu-title { padding: $gutter; border: 1px solid $border-color; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; &:after { content: '\f067'; font-family: "Font Awesome 5 Free"; font-weight: 900; } margin-bottom: $gutter; } .footer-menu-content { padding: 0 $gutter $gutter; display: none; } &.active { .footer-menu-title:after { content: '\f068'; } .footer-menu-content { display: block; } } } } } } .newsletter { &-title { margin-bottom: 3rem; color: #ffffff; > div { font-size: 1.8rem; font-weight:700; line-height: 2.3rem; margin-bottom: 2rem; } > span { font-size: 1.2rem; color: #AEAEAE; line-height: 1.7rem; } } &-content { form { display: flex; height: 4.8rem; background-color:#ffffff; border-radius: $radius-base; input { flex: 1 0 0; background-color: transparent; padding: 1rem 2rem 1rem 4.3rem; font-size: 1.2rem; color: #999999; border:none; color: $text-color; border: 1px solid $border-color; border-right: none; border-radius: 4px 0 0 4px; background:url("{{ themeAsset('images/icon-newsletter.svg') }}") no-repeat 1.1rem 50%; } button { flex: 0 0 65px; background-color: $secondary-color; font-size: 1.2rem; font-weight: 700; color: $primary-text-color; border:none; border-radius: 0 4px 4px 0; } } } @include max($md) { text-align: center; } } /* #Pagination */ .paginate-wrapper { position: relative; padding: 2rem 0; .paginate { display: flex; justify-content: flex-end; @include max($xs) { justify-content: space-between; } a { padding: 0 0.2rem; min-width: 3rem; height: 3rem; font-size: 1.8rem; color: $text-color; border: 1px solid $border-color; border-radius: $radius-base; background: #fff; @include center; i { display: block; line-height: 1.4rem; font-size: 1.8rem; } } .paginate-content { display: flex; a { margin: 0 0.6rem; @include max($xs) { margin: 0 0.2rem; } } } .paginate-left { a { margin-right: 0.6rem; } } .paginate-right { a { margin-left: 0.6rem; } } .paginate-passive { a { background-color: #DFDFDF; color: #AEAEAE; } } .paginate-active { a { background-color: #fff; } } .paginate-element-active { background-color: $primary-color; color: $primary-text-color; } } } body.current-page-default-contact-us { .contact-us { .list-group-item { padding-left: 1rem; padding-right: 1rem; } } } /* @Breadcrumbs */ #breadcrumbs { margin-bottom: 3rem; @include max($sm) { display: none; } ol { display: flex; padding: 0; margin: 0; align-items: center; li { &:last-child { span { color: $primary-color; } } i { font-size: 1.2rem; margin: 0 0.5rem; font-style: normal; &:before { content: '>'; } } span { display: flex; align-items: center; font-size: 1.3rem; color: #999999; line-height: 1.7rem; } a { color: #999999; &:hover { span { span { color: $primary-color; } } } } } } } /* @Filter Wrapper */ @include max($sm) { .block-item { &[data-type="filter-product-groups"] { display: block; margin-bottom: 0; .block-item-title { display: none; } .block-item-content { display: block; padding: 0; } } &[data-type="product-groups"] { display: none; } } .filter-menu, .horizontal-filter-menu { position: fixed; width: 280px; height: 100%; left: -280px; top: 0; background: #ffffff; z-index: 100; transition: $transition-base; overflow-y: auto; -webkit-overflow-scrolling: touch; .filter-menu-category { display: none; } } .filter-menu-active { left: 280px; overflow: hidden; position: fixed; height: 100%; width: 100%; .filter-menu, .horizontal-filter-menu { left: 0; } } #filter-wrapper { @include max($sm) { margin-bottom: 2rem; } display: none; &.has-sorting-option:not(.has-filter-option) { display: block; .filter-wrapper-header { display: none; } .filter-wrapper-content { #sorting-options { display: block; } } } &.has-filter-option { display: block; .filter-wrapper-content { #sorting-options { display: none; } } } } .sorting-options-content-active { #filter-wrapper { .filter-wrapper-content { #sorting-options { display: block; } } } } } .filter-menu-overlay, .filter-wrapper-header { @include min($sm) { display: none !important; } } .horizontal-filter-menu { padding: 1.5rem; border: 1px solid $border-color; margin-bottom: 1rem; .horizontal-filter-menu-title { font-size: 1.6rem; margin-bottom: 1rem; } .clear-filters { display: flex; margin-bottom: 1rem; a { display: block; padding: 0.2rem 0.5rem; background: $gray-color; color: $text-color; } } .filter-menu-selected-items { flex: 0 0 100%; } .filter-menu-groups { margin-bottom: 1rem; .filter-menu-group-title { margin-bottom: 1rem; } } .filter-menu-selected-items { margin-bottom: 1rem; .filter-menu-selected-items-title { font-size: 1.4rem; margin-bottom: 1rem; } .filter-menu-selected-items-content { .filter-menu-selected-group { margin-bottom: 0.5rem; .filter-menu-selected-group-title { margin-right: 1rem; margin-bottom: 0.5rem; } .filter-menu-selected-group-content { display: flex; flex-wrap: wrap; .filter-menu-selected-item { margin-right: 1rem; margin-bottom: 0.5rem; flex: 0 0 auto; &:last-child { margin-right: 0; } a { display: block; padding: 0.2rem 0.5rem; background: $gray-color; color: $text-color; } } } } } } } .cascade-menu { .parent-item { a.selected-item { color: $primary-color; } } } /* Container styling */ #head-content { max-width: 800px; margin: 0 auto; padding: 20px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; } /* Main title */ #head-content h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5em; color: #1a1a1a; } /* Section subtitle */ #head-content h2 { font-size: 1.75rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; color: #2a2a2a; } /* Subsection heading */ #head-content h3 { font-size: 1.25rem; font-weight: 500; margin-top: 1.25em; margin-bottom: 0.5em; font-style: italic; color: #444; } /* Paragraph text */ #head-content p { font-size: 1rem; margin-bottom: 1em; text-align: justify; } /* Emphasize keywords */ #head-content p strong, #head-content h1 span, #head-content h2 span { color: #007acc; } /* Responsive adjustments */ @media (max-width: 600px) { #head-content { padding: 15px; } #head-content h1 { font-size: 1.5rem; } #head-content h2 { font-size: 1.2rem; } #head-content h3 { font-size: 1.0rem; } #head-content p { font-size: 0.5rem; } } /* Container styling */ #footer-content { max-width: 800px; margin: 0 auto; padding: 20px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; } /* Main title */ #footer-content h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75em; color: #1a1a1a; } /* Section subtitles */ #footer-content h2 { font-size: 1.75rem; font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; color: #2a2a2a; } /* Subsection headings */ #footer-content h3 { font-size: 1.25rem; font-weight: 500; margin-top: 1.25em; margin-bottom: 0.5em; font-style: italic; color: #444; } /* Paragraph text */ #footer-content p { font-size: 1rem; margin-bottom: 1em; text-align: justify; } /* Ordered lists */ #footer-content ol { margin: 1em 0 1em 1.5em; padding: 0; } #footer-content ol li { margin-bottom: 0.75em; } /* Unordered lists */ #footer-content ul { margin: 1em 0 1em 1.5em; padding: 0; list-style: disc; } #footer-content ul li { margin-bottom: 0.75em; } /* Emphasis styling */ #footer-content em { font-style: normal; font-weight: 600; color: #007acc; } /* Responsive adjustments */ @media (max-width: 600px) { #footer-content { padding: 15px; } #footer-content h1 { font-size: 1.5rem; } #footer-content h2 { font-size: 1.0rem; } #footer-content h3 { font-size: 1.0rem; } #footer-content p, #footer-content ol, #footer-content ul { font-size: 0.55rem; } } #filter-wrapper { margin-bottom: 4rem; @include min($md) { .filter-wrapper-content { border: 1px solid $border-color; border-radius: $radius-base; background: #fff; padding: 1.2rem 1.2rem 1.2rem 2.4rem; #sorting-options { margin-bottom: 0; .form-horizontal { select { font-size: 1.4rem; color: $text-color; border-radius: 0; background-size: 1rem 1rem; background-color: transparent; background-image: url("{{ themeAsset('images/icon-select.svg') }}"); @include max($xs) { font-size: 1rem; } } .record-count { font-size: 1.4rem; color: $text-color; } label { font-size: 1.4rem; color: $text-color; line-height: 1.8rem; } input[type=checkbox]+label:before { top: 50%; transform: translateY(-50%); border: none; width: 1.2rem; height: 1.2rem; border-radius: 0; background-color: #fff; background-image:url("{{ themeAsset('images/icon-checkbox.svg') }}"); background-position: top; background-size: 1.2rem; } input[type=checkbox]:checked+label:before { background-image:url("{{ themeAsset('images/icon-checkbox.svg') }}"); background-position: bottom; } } } } } } /* @Blocks */ .block-item { margin-bottom: 2rem; border: 1px solid $border-color; background: #fff; border-radius: 8px; a { color: $text-color; &:hover { color: $primary-hover-color; } } .block-item-title { font-size: 1.8rem; font-weight: 700; color: $primary-color; text-transform: uppercase; line-height: 2.3rem; display: flex; justify-content: space-between; align-items: center; padding-bottom: 2.4rem; margin: 2.4rem 2.4rem 0; border-bottom: 1px solid $border-color; > i { display: none; @include max($sm) { display: block; } } } .block-item-content { padding: 2.4rem; } &.active { .block-item-title { > i.fa-angle-down { &:before { content: '\f106'; } } } } &[data-type="no-frame"] { .block-item-title { display: none; } } } .product-area-top { margin-bottom: 6rem; @include max($xs) { margin-bottom: 3rem; } } .product-right { border: 1px solid $border-color; padding: 2rem; background: #fff; } /* @Product */ .product-image { position: relative; border: 1px solid $border-color; padding: 2.4rem; background: #fff; margin-bottom: 3rem; #product-primary-image { position: relative; padding-top: 100%; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down; } } .discount-label { z-index: 11; position: absolute; left: 3.4rem; top: 3.4rem; width: 4.5rem; height: 4.5rem; background: $secondary-color; border-radius: 50%; font-size: 1.4rem; font-weight: 700; color: $primary-text-color; @include center; @include max($sm) { width: 3rem; height: 3rem; left: 1rem; top: 1rem; font-size: 1.2rem; } } .new-label { z-index: 11; position: absolute; right: 3.4rem; top: 3.4rem; width: 4.5rem; height: 4.5rem; background: #282528; border-radius: 50%; font-size: 1.4rem; font-weight: 700; color: $primary-text-color; @include center; @include max($sm) { width: 3rem; height: 3rem; right: 1rem; top: 1rem; font-size: 1.2rem; } } } #product-thumb-image { margin-left: -15px; margin-right: -15px; .thumb-item { padding-left: 15px; padding-right: 15px; > div { > a { padding-top: 100%; position: relative; display: block; border: 1px solid $border-color; opacity: .75; @include imgcenter; &.zoomGalleryActive { opacity: 1; } } } } > .slick-arrow { width: 2rem; height: 2rem; opacity: 1; position:absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; > i { display: none; } &.slick-prev { left: 20px; background:url("{{ themeAsset('images/thumbs-arrow.svg') }}") no-repeat left top; &:hover { background-position: left bottom; } } &.slick-next { right: 20px; background:url("{{ themeAsset('images/thumbs-arrow.svg') }}") no-repeat right top; &:hover { background-position: right bottom; } } } } /* @Product List */ .product-list-container { font-size: 1.4rem; color: #999999; border-bottom: 1px solid $border-color; padding-bottom: 2rem; margin-bottom: 2rem; .product-list-block { margin-bottom: 0.8rem; } .product-list-row { display: flex; align-items: center; margin-bottom: 0.8rem; a { color: $text-color; transition: $transition-base; &:hover { color: $primary-color; } } .product-list-title { flex: 0 0 auto; width: 30%; } .product-list-content { flex: 1 1 auto; display: flex; align-items: center; word-break: break-word; &:before { content: ':'; margin-right: 1.6rem; } } } } .product-title { margin-bottom: 2rem; h1 { font-size: 1.6rem; font-weight: 700; color: $text-color; line-height: 2rem; } @include max($md) { h1 { font-size: 1.5rem; } } } .product-box { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid $border-color; padding-bottom: 2rem; margin-bottom: 2.5rem; .product-box-left { .prowduct-lowest { font-size: 1.4rem; color: #999999; line-height: 1.8rem; text-decoration: underline; } } @include max($sm) { display: block; .product-box-left { margin-bottom: 2rem; } } } .product-price-container { display: flex; align-items: center; margin-left: -0.5rem; margin-right: -0.5rem; margin-bottom: 1rem; > div { padding-left: 0.5rem; padding-right: 0.5rem; } .product-price { display: flex; align-items: baseline; &-new, &-old { font-size: 2.4rem; font-weight: 700; color: $secondary-color; line-height: 3.1rem; } } &.has-discount { .product-price { .product-price-old { font-size: 1.4rem; font-weight: 400; text-decoration: line-through; padding-left: 1rem; color: #AEAEAE; } } } } {% set cargoButtons = ['fast_shipping','same_day_shipping','three_days_delivery','five_days_delivery','seven_days_delivery','free_shipping','delivery_from_stock','pre_ordered_product','limited_stock','ask_stock','campaigned_product'] %} .product-cargo-buttons { display: flex; align-items: center; .product-cargo-button { display: flex; flex-wrap: wrap; height: 6.9rem; margin-right: 1.1rem; &:last-child { margin-right: 0; } i { flex: 0 0 11.2rem; width: 11.2rem; } {% for i in cargoButtons %} &.{{ i }} { i { background:url("{{ themeAsset('images/icon-btn-'~ loop.index ~'.svg') }}") no-repeat 50% 50%; } } {% endfor %} } } /* @Variants */ .product-options { display: flex; margin-bottom: 2.5rem; .product-options-title { padding-top: 1rem; font-size: 1.4rem; font-weight: 700; color: $primary-color; line-height: 1.8rem; margin-right: 2.5rem; } } .variant-select { margin-bottom: 2rem; .variant-list { margin-bottom: 1rem; &:last-child { margin-bottom: 0; } select { width: 50% !important; @include max($xs) { width: 100% !important; } } } } .variant-plural { margin-bottom: 2rem; .variant-list { flex: 0 0 100%; display: flex; flex-wrap: wrap; margin-bottom: 1rem; &:last-child { margin-bottom: 0; } } span { flex: 0 0 auto; border: 1px solid $gray-color; padding: 1rem 1.5rem; cursor: pointer; margin: 0 1rem 1rem 0; border-radius: $radius-base; color: $text-color; &:last-child { margin-right: 0; } &.variant-passive { color: #AEAEAE; } &.variant-no-stock { color: #AEAEAE; } &.variant-selected { border-color: $secondary-color; color: $secondary-color; } } } .variant-singular { margin-bottom: 2rem; .radio-custom { margin-bottom: 1rem; } } .product-whatsapp { margin-left: 1rem; > a { color: #999999; font-size: 1.2rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid $border-color; border-radius: $radius-base; @include center; i { margin-right: 1.4rem; } } @include max($xs) { > a { font-size: 1rem; padding: 0.5rem; } } } .product-cart-buttons { margin-left: -5px; margin-right: -5px; margin-bottom: 5rem; > div { padding-left: 5px; padding-right: 5px; } .product-buttons-wrapper { flex: 1 0 0; max-width: 100%; .product-buttons-row { display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; > div { flex: 1 0 0; max-width: 100%; padding-left: 5px; padding-right: 5px; } } } .product-qty-wrapper { flex: 1 0 0; max-width: 100%; .product-qty-row { display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; @include max($xs) { align-items: flex-end; } > div { flex: 1 0 0; max-width: 100%; padding-left: 5px; padding-right: 5px; } } } } .product-qty-wrapper { margin-bottom: 1.5rem; .product-qty { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-right: 1rem; .product-qty-title { font-size: 1.4rem; font-weight: 700; color: $primary-color; line-height: 1.8rem; } .product-qty-content { display: flex; height: 3.8rem; width: 106px; border-radius: $radius-base; border: 1px solid $border-color; > a { flex: 0 0 2.8rem; max-width: 2.8rem; @include center; color: $text-color; height: 3.8rem; } > div { flex: 1 0 0; max-width: 100%; input { width: 100%; height: 100%; text-align:center; background-color: #F1F1F1; border: 1px solid $border-color; border-radius: $radius-base; font-size: 1.4rem; font-weight: 600; } } } } @include max($xs) { margin-bottom: 1rem; flex: 0 0 100%; max-width: 100%; .product-qty { width: 100%; .product-qty-title { margin-bottom: 1rem; } } } } a.add-to-cart-button, a.no-stock-button, a.quick-order-button, a.remind-me-button { @include center; height: 4rem; font-size: 1.4rem; font-weight: 700; padding: 0 1.5rem; border-radius: $radius-base; transition: $transition-base; } a.add-to-cart-button { background-color: $primary-color; color: $primary-text-color; margin-right: 1rem; &:hover { background-color: $primary-hover-color; } } a.no-stock-button { background-color: #D4D4D4; color: $primary-text-color; &:hover { background-color: #C1C1C1; } } a.quick-order-button { margin-left: 1rem; background-color: $secondary-color; color: $secondary-text-color; &:hover { background-color: $secondary-hover-color; } } a.remind-me-button { background-color: #575757; color: $primary-text-color; &:hover { background-color: #343434; } } #product-user-buttons { margin-bottom: $gutter; display: flex; justify-content: space-between; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; > div { padding-left: 0.5rem; padding-right: 0.5rem; a { display: flex; align-items: center; flex-wrap: wrap; color: $text-color; transition: $transition-base; i { width: 2.9rem; height: 2.9rem; border: 1px solid $secondary-color; font-size: 1.4rem; color: $secondary-color; border-radius: 50%; @include center; } span { font-size: 1.2rem; color: $text-color; padding-left: .6rem; } &:hover { color: $secondary-color; } &.add-my-favorites { span { &:before { content: attr(data-add-to-favorites); } } &.favorite-product { i { font-weight: 900; color: $primary-color; } span { &:before { content: attr(data-favorite-product); } } } } } } @include max($xs) { display: block; > div { margin-bottom: 2rem; } } } .product-social { position: relative; > a { width: 100%; height: 100%; display: flex; align-items: center; color: $text-color; font-size: 1.6rem; } .product-social-content { position:absolute; top: 50%; transform: translateY(-50%); left: 100%; height: 100%; display: none; background-color: #fff; z-index: 11; padding: 3rem .5rem; > div { display: flex; height: 100%; margin-left: -3px; margin-right: -3px; align-items: center; justify-content: center; > div { padding-left: 3px; padding-right: 3px; > a { i { @include center; font-size: 1.4rem; color: #ffffff !important; border: none !important; width: 2rem; height: 2rem; } &.product-social-facebook { i { background-color: #3b5998; } } &.product-social-twitter { i { background-color: #1da1f2; } } &.product-social-pinterest { i { background-color: #bd081c; } } &.product-social-whatsapp { i { background-color: #128c7e; } } } } } } @include max($xs) { display: inline-block; } } /* @Tab */ /* -------------------------------------- Ürün Detay Sekmeleri -------------------------------------- */ .product-detail-tab { background: #fff; padding: 3rem 2rem; margin-bottom: 9rem; border-radius: $radius-base; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); // --- Başlıklar (Sekme Etiketleri) --- .product-detail-tab-header { display: flex; gap: 2rem; margin-bottom: 4.7rem; border-bottom: 1px solid $border-color; [data-tab-index] { flex: 0 0 auto; > a { display: inline-flex; align-items: center; font-size: 1.6rem; font-weight: 500; color: #AEAEAE; line-height: 2rem; padding-bottom: 1.3rem; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } &.active > a { color: $secondary-color; border-color: $secondary-color; } } } // --- İçerik (Sekme Panelleri) --- .product-detail-tab-content { [data-tab-content] { height: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; > div { font-size: 1.4rem; color: $text-color; line-height: 2.2rem; margin-bottom: 1.5rem; } &.active { height: auto; overflow: visible; } } } // --- Mobil Kırılmalar --- @include max($md) { .product-detail-tab-header { overflow-x: auto; padding-bottom: 0.5rem; [data-tab-index] > a { padding: 0 1.5rem; white-space: nowrap; } } } @include max($xs) { margin-bottom: 6rem; padding: 2rem 1rem; .product-detail-tab-header { gap: 1rem; } } } /* @Override */ .btn { font-size: 1.2rem; border-radius: 0; transition: $transition-base; &.btn-primary { color: $primary-text-color; background: $primary-color; &:not(.btn-loading):active, &:not(.btn-loading).active, &:not(.btn-loading):hover, &:not(.btn-loading).hover, &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active { background: $primary-hover-color; color: $primary-text-color; } } &.btn-secondary { color: $gray-text-color; background: $gray-color; &:not(.btn-loading):active, &:not(.btn-loading).active, &:not(.btn-loading):hover, &:not(.btn-loading).hover { color: $gray-text-color; background: $gray-hover-color; } } } .btn-loading:before { border-top-color: $primary-color; } .loader { .ball-pulse { > div { background-color: $primary-color; } } } .loading > div { border-top-color: $primary-color; border-bottom-color: $primary-color; } .loading-bar { .loader { background: $primary-color; } } .control-label { color: $text-color; } .information-content { border: solid 1px #000000; border-radius: $radius-base; span { border-radius: #000000; } i { color: darken(#000000, 10%); } } .member-block { li { > a { &.active { color: $primary-color; } } &:hover > a:not(.active) { color: $primary-color; i.left-icons { color: $primary-color; } } } } #featured-product-block { border: none; } /* @Filter Menu */ .filter-menu { .filter-menu-category { .filter-menu-category-title { background-color: transparent; border: none; padding: 1.5rem; } .filter-menu-category-content { a { color: $text-color; } } } .filter-menu-groups { .filter-menu-group-title { background-color: transparent; border: none; padding: 1.5rem; } .filter-menu-group-content { label { color: $text-color; } } } .filter-menu-selected-items { .filter-menu-selected-items-title { background-color: transparent; border: none; padding: 1.5rem; font-weight: 400; } .filter-menu-selected-items-content { padding: 1.5rem; .filter-menu-selected-group { .filter-menu-selected-group-title { font-weight: 400; } } } } @include min($sm) { .filter-menu-box { border-top: 1px solid $border-color !important; border: none; margin-top: 2rem; padding-top: 4rem; margin-bottom: 0; &:nth-child(1) { border-top: none !important; padding-top: 0; margin-top: 0; } } .filter-menu-category { border: none; .filter-menu-category-title { background-color: transparent; border: none; padding: 0 0 1.5rem; font-size: 1.6rem; font-weight: 700; color: #334150; line-height: 1.9rem; } .filter-menu-category-content { border: none; margin-bottom: 2rem; a { font-size: 1.4rem; color: $text-color; color: $text-color; line-height: 3.2rem; padding: 0; &:hover { text-decoration: underline; } i { display: none; } } } .filter-menu-category-top { a { font-size: 1.4rem; font-weight: 700; color: $text-color; line-height: 1.9rem; padding: 0; i { display: none; } } } } .filter-menu-groups { .filter-menu-group-title { background-color: transparent; border: none; padding: 0 0 1.5rem; font-size: 1.6rem; font-weight: 700; color: $primary-color; line-height: 1.9rem; } .filter-menu-group-content { padding: 0; label { font-size: 1.4rem; color: $text-color; } input[type=checkbox]+label:before { top: 50%; transform: translateY(-50%); border: none; width: 1.2rem; height: 1.2rem; border-radius: 0; background-color: #fff; background-image:url("{{ themeAsset('images/icon-checkbox.svg') }}"); background-position: top; background-size: 1.2rem; } input[type=checkbox]:checked+label:before { background-image:url("{{ themeAsset('images/icon-checkbox.svg') }}"); background-position: bottom; } } } .filter-menu-selected-items { .filter-menu-selected-items-title { background-color: transparent; border: none; padding: 0 0 1.5rem; font-size: 1.6rem; font-weight: 700; color: #334150; line-height: 1.9rem; } .filter-menu-selected-items-content { padding: 0; .filter-menu-selected-group { .filter-menu-selected-group-title { font-weight: 400; } } } } } } .idea-promotion-bar { padding: 0; &.bar-position-top { border-bottom: none; } } #checkout-breadcrumbs { .checkout-steps { > a { margin-left: -$gutter; margin-right: -$gutter; } } } #ideaexport_translation_bar_container { display: none; } #custom-export { position: relative; > a { display: block; color: $text-color; font-weight: 600; font-size: 20px; transition: $transition-base; } } #custom-export-content { width: 320px; background-color: #ffffff; display: none; padding: 16px; border: 1px solid $border-color; overflow: visible; .custom-export-title { margin-bottom: 16px; font-size: 16px; font-weight: 700; } .custom-export-select { margin-bottom: 16px; position: relative; > a { padding: 10px; display: flex; color: $text-color; border: 1px solid $border-color; > span { &:last-child { padding-left: 10px; } } &:after { content: '\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; } } .select-content { display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: 200px; overflow-y: auto; background-color: #ffffff; z-index: 2; border: 1px solid $border-color; border-top: none; > a { padding: 10px; display: flex; color: $text-color; > span { &:last-child { padding-left: 10px; } } &:hover { background-color: $border-color; } } } } @include max($md) { width: 250px; } } .flag { width: 18px; height: 18px; background-image: url("{{ themeAsset('images/export-flags.png') }}"); display: block; } .flag-ad{background-position:0 0}.flag-ae{background-position:-18px 0}.flag-af{background-position:-36px 0}.flag-ag{background-position:-54px 0}.flag-ai{background-position:-72px 0}.flag-al{background-position:-90px 0}.flag-am{background-position:-108px 0}.flag-ao{background-position:-126px 0}.flag-aq{background-position:-144px 0}.flag-ar{background-position:-162px 0}.flag-as{background-position:-180px 0}.flag-at{background-position:-198px 0}.flag-au{background-position:-216px 0}.flag-aw{background-position:-234px 0}.flag-ax{background-position:-252px 0}.flag-az{background-position:-270px 0}.flag-ba{background-position:-288px 0}.flag-bb{background-position:-306px 0}.flag-bd{background-position:-324px 0}.flag-be{background-position:-342px 0}.flag-bf{background-position:-360px 0}.flag-bg{background-position:-378px 0}.flag-bh{background-position:-396px 0}.flag-bi{background-position:-414px 0}.flag-bj{background-position:-432px 0}.flag-bl{background-position:-450px 0}.flag-bm{background-position:-468px 0}.flag-bn{background-position:-486px 0}.flag-bo{background-position:-504px 0}.flag-bq{background-position:-522px 0}.flag-br{background-position:-540px 0}.flag-bs{background-position:-558px 0}.flag-bt{background-position:-576px 0}.flag-bw{background-position:-594px 0}.flag-by{background-position:-612px 0}.flag-bz{background-position:-630px 0}.flag-ca{background-position:-648px 0}.flag-cc{background-position:-666px 0}.flag-cd{background-position:-684px 0}.flag-cf{background-position:-702px 0}.flag-cg{background-position:-720px 0}.flag-ch{background-position:-738px 0}.flag-ci{background-position:-756px 0}.flag-ck{background-position:-774px 0}.flag-cl{background-position:-792px 0}.flag-cm{background-position:-810px 0}.flag-cn{background-position:-828px 0}.flag-co{background-position:-846px 0}.flag-cr{background-position:-864px 0}.flag-cv{background-position:-882px 0}.flag-cw{background-position:-900px 0}.flag-cx{background-position:-918px 0}.flag-cy{background-position:-936px 0}.flag-cz{background-position:-954px 0}.flag-de{background-position:-972px 0}.flag-dj{background-position:-990px 0}.flag-dk{background-position:-1008px 0}.flag-dm{background-position:-1026px 0}.flag-do{background-position:-1044px 0}.flag-dz{background-position:-1062px 0}.flag-ec{background-position:-1080px 0}.flag-ee{background-position:-1098px 0}.flag-eg{background-position:-1116px 0}.flag-eh{background-position:-1134px 0}.flag-er{background-position:-1152px 0}.flag-es{background-position:-1170px 0}.flag-et{background-position:-1188px 0}.flag-fi{background-position:-1206px 0}.flag-fj{background-position:-1224px 0}.flag-fk{background-position:-1242px 0}.flag-fm{background-position:-1260px 0}.flag-fo{background-position:-1278px 0}.flag-fr{background-position:-1296px 0}.flag-ga{background-position:-1314px 0}.flag-gb{background-position:-1332px 0}.flag-gd{background-position:-1350px 0}.flag-ge{background-position:-1368px 0}.flag-gf{background-position:-1386px 0}.flag-gh{background-position:-1404px 0}.flag-gi{background-position:-1422px 0}.flag-gl{background-position:-1440px 0}.flag-gm{background-position:-1458px 0}.flag-gn{background-position:-1476px 0}.flag-gp{background-position:-1494px 0}.flag-gq{background-position:-1512px 0}.flag-gr{background-position:-1530px 0}.flag-gs{background-position:-1548px 0}.flag-gt{background-position:-1566px 0}.flag-gu{background-position:-1584px 0}.flag-gw{background-position:-1602px 0}.flag-gy{background-position:-1620px 0}.flag-hk{background-position:-1638px 0}.flag-hn{background-position:-1656px 0}.flag-hr{background-position:-1674px 0}.flag-ht{background-position:-1692px 0}.flag-hu{background-position:-1710px 0}.flag-id{background-position:-1728px 0}.flag-ie{background-position:-1746px 0}.flag-il{background-position:-1764px 0}.flag-in{background-position:-1782px 0}.flag-io{background-position:-1800px 0}.flag-iq{background-position:-1818px 0}.flag-is{background-position:-1836px 0}.flag-it{background-position:-1854px 0}.flag-jm{background-position:-1872px 0}.flag-jo{background-position:-1890px 0}.flag-jp{background-position:-1908px 0}.flag-ke{background-position:-1926px 0}.flag-kg{background-position:-1944px 0}.flag-kh{background-position:-1962px 0}.flag-ki{background-position:-1980px 0}.flag-km{background-position:-1998px 0}.flag-kn{background-position:-2016px 0}.flag-kr{background-position:-2034px 0}.flag-kw{background-position:-2052px 0}.flag-ky{background-position:-2070px 0}.flag-kz{background-position:-2088px 0}.flag-la{background-position:-2106px 0}.flag-lb{background-position:-2124px 0}.flag-lc{background-position:-2142px 0}.flag-li{background-position:-2160px 0}.flag-lk{background-position:-2178px 0}.flag-lr{background-position:-2196px 0}.flag-ls{background-position:-2214px 0}.flag-lt{background-position:-2232px 0}.flag-lu{background-position:-2250px 0}.flag-lv{background-position:-2268px 0}.flag-ma{background-position:-2286px 0}.flag-mc{background-position:-2304px 0}.flag-md{background-position:-2322px 0}.flag-me{background-position:-2340px 0}.flag-mf{background-position:-2358px 0}.flag-mg{background-position:-2376px 0}.flag-mh{background-position:-2394px 0}.flag-mk{background-position:-2412px 0}.flag-ml{background-position:-2430px 0}.flag-mm{background-position:-2448px 0}.flag-mn{background-position:-2466px 0}.flag-mo{background-position:-2484px 0}.flag-mp{background-position:-2502px 0}.flag-mq{background-position:-2520px 0}.flag-mr{background-position:-2538px 0}.flag-ms{background-position:-2556px 0}.flag-mt{background-position:-2574px 0}.flag-mu{background-position:-2592px 0}.flag-mv{background-position:-2610px 0}.flag-mw{background-position:-2628px 0}.flag-mx{background-position:-2646px 0}.flag-my{background-position:-2664px 0}.flag-mz{background-position:-2682px 0}.flag-na{background-position:-2700px 0}.flag-nc{background-position:-2718px 0}.flag-ne{background-position:-2736px 0}.flag-nf{background-position:-2754px 0}.flag-ng{background-position:-2772px 0}.flag-ni{background-position:-2790px 0}.flag-nl{background-position:-2808px 0}.flag-no{background-position:-2826px 0}.flag-np{background-position:-2844px 0}.flag-nr{background-position:-2862px 0}.flag-nu{background-position:-2880px 0}.flag-nz{background-position:-2898px 0}.flag-om{background-position:-2916px 0}.flag-pa{background-position:-2934px 0}.flag-pe{background-position:-2952px 0}.flag-pf{background-position:-2970px 0}.flag-pg{background-position:-2988px 0}.flag-ph{background-position:-3006px 0}.flag-pk{background-position:-3024px 0}.flag-pl{background-position:-3042px 0}.flag-pm{background-position:-3060px 0}.flag-pn{background-position:-3078px 0}.flag-pr{background-position:-3096px 0}.flag-ps{background-position:-3114px 0}.flag-pt{background-position:-3132px 0}.flag-pw{background-position:-3150px 0}.flag-py{background-position:-3168px 0}.flag-qa{background-position:-3186px 0}.flag-re{background-position:-3204px 0}.flag-rest{background-position:-3222px 0}.flag-ro{background-position:-3240px 0}.flag-rs{background-position:-3258px 0}.flag-ru{background-position:-3276px 0}.flag-rw{background-position:-3294px 0}.flag-sa{background-position:-3312px 0}.flag-sb{background-position:-3330px 0}.flag-sc{background-position:-3348px 0}.flag-sd{background-position:-3366px 0}.flag-se{background-position:-3384px 0}.flag-sg{background-position:-3402px 0}.flag-sh{background-position:-3420px 0}.flag-si{background-position:-3438px 0}.flag-sj{background-position:-3456px 0}.flag-sk{background-position:-3474px 0}.flag-sl{background-position:-3492px 0}.flag-sm{background-position:-3510px 0}.flag-sn{background-position:-3528px 0}.flag-sr{background-position:-3546px 0}.flag-ss{background-position:-3564px 0}.flag-st{background-position:-3582px 0}.flag-sv{background-position:-3600px 0}.flag-sx{background-position:-3618px 0}.flag-sz{background-position:-3636px 0}.flag-tc{background-position:-3654px 0}.flag-td{background-position:-3672px 0}.flag-tf{background-position:-3690px 0}.flag-tg{background-position:-3708px 0}.flag-th{background-position:-3726px 0}.flag-tj{background-position:-3744px 0}.flag-tk{background-position:-3762px 0}.flag-tl{background-position:-3780px 0}.flag-tm{background-position:-3798px 0}.flag-tn{background-position:-3816px 0}.flag-to{background-position:-3834px 0}.flag-tr{background-position:-3852px 0}.flag-tt{background-position:-3870px 0}.flag-tv{background-position:-3888px 0}.flag-tw{background-position:-3906px 0}.flag-tz{background-position:-3924px 0}.flag-ua{background-position:-3942px 0}.flag-ug{background-position:-3960px 0}.flag-um{background-position:-3978px 0}.flag-us{background-position:-3996px 0}.flag-uy{background-position:-4014px 0}.flag-uz{background-position:-4032px 0}.flag-va{background-position:-4050px 0}.flag-vc{background-position:-4068px 0}.flag-vg{background-position:-4086px 0}.flag-vi{background-position:-4104px 0}.flag-vn{background-position:-4122px 0}.flag-vu{background-position:-4140px 0}.flag-wf{background-position:-4158px 0}.flag-ws{background-position:-4176px 0}.flag-xk{background-position:-4194px 0}.flag-yt{background-position:-4212px 0}.flag-za{background-position:-4230px 0}.flag-zm{background-position:-4248px 0}.flag-zw{background-position:-4266px 0} .entry-blog-container { .entry-blog-header { color: $text-color; font-size: 20px; font-weight: 700; margin-bottom: 28px; } .entry-blog-content { // Masaüstünde tek satır ve yatay kaydırma @include min($lg) { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; // Slick slider yüksekliğini açığa çıkar height: auto !important; &.slick-slider { height: auto; } .entry-blog-item { flex: 0 0 auto; width: 25%; // İsterseniz oranı değiştirin } } // Tablet — mevcut kodu koru @include max($lg) { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-bottom: 12px; .entry-blog-item { width: 38vw; } } // Mobil @include max($sm) { .entry-blog-item { width: 81vw; } } > .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; cursor: pointer; background: #fff; opacity: 1; z-index: 2; &.slick-prev { left: 15px; } &.slick-next { right: 15px; } &.slick-disabled { opacity: 0.5; } } > .slick-dots { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding-top: 20px; > li { margin: 0 5px; > button { display: block; width: 12px; height: 12px; border: none; border-radius: 50%; background-color: $border-color; text-indent: -9999px; } &.slick-active > button { background-color: $primary-color; } } } .entry-blog-item-container { margin-bottom: 28px; border: 1px solid $border-color; transition: $transition-base; @include min($lg) { &:hover { border-color: $primary-color; } } .entry-blog-item-image { height: 100%; a { position: relative; overflow: hidden; display: block; aspect-ratio: 1280/960; @include imgcenter; } .entry-blog-nopic { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; color: #ccc; font-size: 70px; background: #f5f5f5; @include center; } } .entry-blog-item-content { padding: 12px; .entry-blog-title { margin-bottom: 12px; a { display: block; overflow: hidden; height: 40px; line-height: 20px; color: $text-color; font-size: 18px; font-weight: 600; } } .entry-blog-text { margin-bottom: 12px; p { overflow: hidden; height: 54px; line-height: 18px; font-size: 13px; margin-bottom: 0; } } .entry-blog-item-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; a { @include center; height: 36px; font-size: 13px; font-weight: 500; margin-bottom: 12px; } .entry-blog-date { display: flex; align-items: center; font-size: 11px; margin-bottom: 12px; > span { display: flex; align-items: center; &:first-child { padding-right: 8px; } } i { height: 15px; margin-right: 4px; } } } } } } } .header-bottom-bar { background: #08a1d6; position: relative; width: 100%; padding: 0; z-index: 1; } .category-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; gap: 32px; padding: 0 60px; /* soldan boşluk */ } // Eğer mobilde padding veya boyutları biraz daha düşürmek istersen: @media (max-width: 991px) { .header-middle-right { gap: 8px; .user-cart-group { gap: 6px; a, .account-label, .cart-label { padding: 4px 8px; font-size: 0.95rem; svg { width: 24px; height: 24px; } } } .header-divider { height: 24px; margin: 0 4px; } } } // ---- Contentbox Panel Kutu ---- .contentbox-header { background: linear-gradient(90deg, #eaf6ff 0%, #f7fafd 100%); border-radius: 1.5rem 1.5rem 0 0; padding: 1.1rem 2rem 0.6rem 2rem; margin-bottom: 0; box-shadow: 0 2px 8px rgba(0,60,150,0.04); h4 { font-size: 1.5rem; font-weight: 700; color: $primary-color; margin-bottom: 0; letter-spacing: -0.01em; } } .contentbox-body { background: #fff; border-radius: 0 0 1.5rem 1.5rem; padding: 2.1rem 2rem 2rem 2rem; box-shadow: 0 8px 32px -8px rgba(0,32,61,0.08); margin-bottom: 2rem; // Form genel ayarları form { .form-group { margin-bottom: 1.2rem; label { font-size: 1.07rem; color: #34425a; font-weight: 500; margin-bottom: .45rem; padding-left: 0.12rem; } .form-control { border-radius: 0.9rem; border: 1.2px solid #e0e4ef; font-size: 1.08rem; color: #28344d; padding: 0.7rem 1.1rem; background: #f7fafc; transition: border-color .17s, background .17s; &:focus { border-color: $primary-color; background: #eaf6ff; } } .required { color: #e74c3c; font-weight: 700; margin-left: .3rem; font-size: 1.1em; vertical-align: middle; } .toggle-password { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: #adb8cb; cursor: pointer; z-index: 2; font-size: 1.1rem; transition: color 0.18s; &:hover { color: $primary-color; } } // Checkbox özel tasarım .checkbox-custom { display: flex; align-items: flex-start; input[type="checkbox"] { accent-color: $primary-color; width: 18px; height: 18px; margin-top: 2px; margin-right: 0.5em; } label { color: #626e87; font-size: 1.01rem; font-weight: 500; margin: 0; cursor: pointer; a { color: $primary-color; text-decoration: underline; &:hover { color: darken($primary-color, 10%); } } } } } // Buton grubu .btn-group-binary { display: flex; gap: .7rem; justify-content: flex-end; .btn { padding: 0.9rem 2.1rem; font-size: 1.13rem; font-weight: 700; border-radius: 1.5rem; border: none; transition: background 0.15s, color 0.15s; &.btn-primary { background: $primary-color; color: #fff; &:hover { background: darken($primary-color, 10%); } } &.btn-secondary { background: #eaf0fa; color: #253767; &:hover { background: #e2ecfa; } } } } } } // ---- Sözleşme/Aydınlatma Metni Kutuları ---- #user-agreement-wrapper, #personal-data-agreement-wrapper { background: #fff; border-radius: 1.2rem; box-shadow: 0 8px 32px -8px rgba(0,32,61,0.09); padding: 2.5rem 1.7rem 2rem 1.7rem; margin-top: 2.5rem; max-width: 680px; margin-left: auto; margin-right: auto; .contentbox-header { background: linear-gradient(90deg, #eaf6ff 0%, #f7fafd 100%); border-radius: 1.2rem 1.2rem 0 0; padding: 1.1rem 1.7rem 0.6rem 1.7rem; box-shadow: 0 2px 8px rgba(0,60,150,0.04); h4 { font-size: 1.3rem; color: $primary-color; font-weight: 700; margin: 0; } } h3, h2 { font-size: 1.17rem; color: $primary-color; font-weight: 700; margin-top: 2.1rem; margin-bottom: 0.5rem; letter-spacing: -.01em; } p, ul, li { font-size: 1.03rem; color: #34425a; line-height: 1.7; margin-bottom: .55rem; } strong { color: $primary-color; font-weight: 700; } a { color: $primary-color; text-decoration: underline; &:hover { color: darken($primary-color, 10%); } } hr { border: none; border-top: 1px solid #e0e0e0; margin: 1.3rem 0; } } // --- Mobil Duyarlılık --- @media (max-width: 768px) { .contentbox-header, .contentbox-body, #user-agreement-wrapper, #personal-data-agreement-wrapper { border-radius: 0.9rem; padding-left: 0.6rem; padding-right: 0.6rem; } .contentbox-body { padding: 1.3rem 0.6rem; } #user-agreement-wrapper, #personal-data-agreement-wrapper { padding: 1.5rem 0.6rem; } } .blog-detail-item-content { background: #fff; border-radius: 1.5rem; box-shadow: 0 6px 32px -8px rgba(0,32,61,0.10); padding: 2.5rem 2.2rem 2.7rem 2.2rem; margin: 0 auto 2.5rem auto; max-width: 740px; h1, h2, h3, h4, h5, h6 { color: $primary-color; font-weight: 700; margin-top: 2rem; margin-bottom: .8rem; line-height: 1.24; letter-spacing: -.01em; } h4 { font-size: 1.28rem; } h3 { font-size: 1.38rem; } h2 { font-size: 1.53rem; } h1 { font-size: 1.65rem; } p { font-size: 1.09rem; color: #2c3a4b; line-height: 1.78; margin-bottom: 1.25rem; strong { color: $primary-color; font-weight: 700; } } ul, ol { margin: 0 0 1.5rem 1.2rem; padding-left: 1.25rem; li { font-size: 1.08rem; color: #36455a; margin-bottom: 0.7rem; line-height: 1.65; strong { color: $primary-color; font-weight: 600; } } } hr { border: none; border-top: 1px solid #e5eaf2; margin: 2.1rem 0; } // İsteğe bağlı: alt bilgi veya not .blog-detail-note { background: #f8fbff; border-left: 4px solid $primary-color; padding: 1rem 1.1rem; font-size: .98rem; color: #496383; margin: 1.5rem 0; border-radius: .6rem; } // Mobil uyumluluk @media (max-width: 768px) { padding: 1.1rem .5rem 1.3rem .5rem; border-radius: 0.8rem; h1, h2, h3, h4, h5, h6 { margin-top: 1.1rem; } } } /* -------------------------------------------------- HEADER TOP — Menü Öğeleri -------------------------------------------------- */ .header-top-left .menu-items-row1 { display: flex !important; align-items: center !important; gap: 1rem !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .header-top-left .menu-items-row1 li { display: inline-flex !important; align-items: center !important; padding: 1rem 1rem !important; border-radius: 1rem !important; background: transparent !important; color: #b2b9bc !important; cursor: pointer !important; transition: background 0.2s, color 0.2s !important; } .header-top-left .menu-items-row1 li a { color: inherit !important; text-decoration: none !important; font-weight: 500 !important; transition: color 0.2s !important; } /* Hover efekti */ .header-top-left .menu-items-row1 li:hover { background: rgba(6, 176, 255, 0.2) !important; color: #ffffff !important; } .header-top-left .menu-items-row1 li:hover > a { color: #ffffff !important; } /* Aktif sayfa */ .header-top-left .menu-items-row1 li.active, .header-top-left .menu-items-row1 li.current { background: #06b0ff !important; color: #ffffff !important; } .header-top-left .menu-items-row1 li.active > a, .header-top-left .menu-items-row1 li.current > a { color: #ffffff !important; } /* Responsive (opsiyonel) */ @media (max-width: 768px) { .header-top-left .menu-items-row1 { flex-wrap: wrap !important; gap: 0.6rem !important; } .header-top-left .menu-items-row1 li { padding: 0.3rem 0.6rem !important; font-size: 0.9rem !important; } } /* Menü listesi de flex’e geçerse tam ortalama garantili olur */ .header-top-left .menu-items-row1 { display: flex; justify-content: center; gap: 1.5rem; /* aralığı ayarlamak istersen */ padding: 0; margin: 0; } @media (max-width: 768px) { /* header-social-menu yatayda kalmaya devam etsin */ .header-social-menu { flex-wrap: wrap; justify-content: center; } /* WhatsApp link’ini 100% genişlik yap, alt satıra geçsin */ .header-social-menu a[href*="wa.me"] { flex: 1 1 100%; text-align: center; margin-top: 0.5rem; /* biraz boşluk için */ } } /* Menü öğeleri yatay, boşluksuz ve süslemeli */ .menu-items-row1 { display: flex; gap: 1.5rem; /* öğeler arası mesafe */ padding: 0; margin: 0; list-style: none; } /* Her bir
  • kutucuk gibi davransın */ .menu-items-row1 li { position: relative; } .menu-items-row1 li a { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem; color: #06b0ff; font-weight: 500; font-size: 1.2rem; /* ← İşte burası font-size ayarı */ text-decoration: none; transition: background 0.2s, color 0.2s; } /* Üzerine gelince arka plan maviye dönsün, yazı beyaz olsun */ .menu-items-row1 li a:hover { background: rgba(6, 176, 255, 0.2); color: #fff; } /* Aktif sayfa linki (Twig’te .active sınıfını eklediysen) */ .menu-items-row1 li.active a { background: #06b0ff; color: #fff; } @media (max-width: 768px) { .menu-items-row1 li a { font-size: 0.9rem; } } .user-menu-back { padding: 1rem 0; background: #f7f7f7; text-align: left; border-bottom: 1px solid #e0e4ef; } .btn-back { background: none; border: none; color: $primary-color; font-size: 1rem; font-weight: 500; cursor: pointer; padding: 0; &:hover { text-decoration: underline; } } .user-menu-back { padding: 1rem 1.5rem; background: #f7f7f7; border-bottom: 1px solid #e0e4ef; } .btn-back { background: none; border: none; color: $primary-color; font-size: 1rem; font-weight: 500; cursor: pointer; padding: 0; transition: color .2s; &:hover { text-decoration: underline; } } /* @User Menu Content */ body { &.user-menu-content-active { .user-menu-content { right: 0; box-shadow: -2px 0 8px 0 rgba(63, 114, 255, 0.1); } } &.user-menu-welcome-active { .user-menu-welcome { right: 0; box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.1); } } @include max($md) { &.user-menu-content-active, &.user-menu-welcome-active { overflow: hidden; position: fixed; height: 100%; width: 100%; left: -280px; } } } .user-menu { > a { background: #0088C6 url("{{ themeAsset('images/icon-user.svg') }}") no-repeat 0 50%; background-position: .8rem; display: block; position: relative; padding: 1.4rem 1.2rem .7rem 4.9rem; border: 1px solid $border-color; border-radius: $radius-base; span { display: block; &:first-child { font-size: 1.2rem; color: #ffffff; line-height: 1.8rem; margin-bottom: 0.2rem; } &:last-child { font-size: 1.4rem; color: #ffffff; line-height: 1.3rem; } } } @include max($md) { > a { width: 3.3rem; height: 3.3rem; border: none; padding: 0; border-radius: 0; background: url("{{ themeAsset('images/icon-user.svg') }}") no-repeat 0 50%; span { display: none; } } } } .user-menu-content, .user-menu-welcome { position:fixed; top:0; right: -480px; width: 480px; height: 100%; background-color:#ffffff; z-index:101; transition: $transition-base; overflow-y:auto; padding: 8rem; .user-menu-content-top { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid $border-color; } .user-menu-title { font-size: 1.8rem; font-weight: 700; color: $text-color; margin-bottom: 1rem; } .user-menu-subtitle { font-size: 1.6rem; margin-bottom: 2rem; } .user-menu-input { margin-bottom: 1.5rem; input { background-color: #ffffff; border-radius: 0; font-size: 1.2rem; color: $text-color; &::placeholder { color: $text-color; opacity: 1; } } } .user-menu-forgot-pass { text-align: right; display: block; color: $text-color; text-decoration: underline; } .user-menu-button { margin-bottom: 1.5rem; .btn { font-size: 1.6rem; font-weight: 700; } } .btn-user-menu-signup { background-color: $text-color; color: #ffffff; } .user-menu-profile-list { padding:2rem 0; margin-bottom:2rem; border-top: 1px solid $border-color; border-bottom: 1px solid $border-color; > a { color: $text-color; font-size: 1.6rem; padding: 1rem 0; display:block; &:hover { color: $primary-color; text-decoration:underline; } } } .user-menu-profile-logout { > a { font-size: 1.6rem; font-weight: 700; } } @include max($md) { right: -280px; width: 280px; padding: 1.5rem; } } /* @Cart Content */ body { &.cart-content-active { .cart-content { right: 0; box-shadow: -2px 0 5px 0 rgba(0, 0, 0, 0.1); } } @include max($md) { &.cart-content-active { overflow: hidden; position: fixed; height: 100%; width: 100%; left: -280px; } } } .cart-menu { > a { background: $primary-color url("{{ themeAsset('images/icon-cart.svg') }}") no-repeat 0 50%; background-position: .8rem; display: block; position:relative; padding: .8rem 1.2rem .7rem 4.9rem; border-radius: $radius-base; span { display: block; &:first-child { font-size: 1.4rem; color: $primary-text-color; line-height: 1.8rem; margin-bottom: 0.2rem; } } .cart-total-price { font-size: 1rem; color: #6497B1; line-height: 1.3rem; } .cart-amount { position:absolute; top: -6px; left: 21px; width: 28px; height: 28px; line-height: 24px; text-align:center; background-color: $secondary-color; color: $secondary-text-color; border-radius: 50%; border: 2px solid #fff; @include max($sm) { top: -10px; right: -5px; width: 20px; height: 20px; line-height: 16px; } } } @include max($md) { > a { width: 8.3rem; height: 3.3rem; border: none; padding: 0; border-radius: 0; background: url("{{ themeAsset('images/icon-cart.svg') }}") no-repeat 0 50%; span { display: none; } } } } /* @Cart Content */ .cart-content { position:fixed; top:0; right: -480px; width: 480px; height: 100%; background-color:#ffffff; z-index:101; transition: $transition-base; padding: 6rem; overflow-y:auto; .cart-content-title { font-size: 1.8rem; font-weight: 700; color: $text-color; margin-bottom: 1rem; } .cart-content-subtitle { font-size: 1.6rem; margin-bottom: 2rem; } .cart-list { border-top: 1px solid $border-color; margin-bottom: 3rem; .cart-list-item { border-bottom: 1px solid $border-color; padding: 1.5rem 0; display: flex; align-items: center; margin-bottom: 1.5rem; .cart-list-item-image { flex: 0 0 6rem; margin-right: 1rem; > span { display: block; width: 100%; height: 6rem; background:url("{{ themeAsset('images/nopic_image.png')}}") no-repeat center center; background-size: 50% 50%; } } .cart-list-item-content { flex: 1 0 0; min-width: 0; padding-right: 1rem; .cart-list-item-title { color: $text-color; font-size: 1.4rem; font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cart-list-item-brand { display: block; color: $text-color; } .cart-list-item-price { font-size: 1.4rem; font-weight: 700; } .cart-list-item-amount { font-size: 1.2rem; font-weight: 400; } } .cart-list-item-delete { color: $text-color; flex: 0 0 2rem; opacity: 0.5; transition: $transition-base; font-size: 1.6rem; height: 2rem; @include center; overflow: hidden; &:hover { opacity: 1; } } } } .cart-content-total-price { margin-bottom: 3rem; > span { font-size: 1.6rem; } > div { font-size: 1.8rem; font-weight: 700; } } .cart-content-button { margin-bottom: 1.5rem; .btn { font-size: 1.6rem; font-weight: 700; } } .cart-content-empty-icon { position:relative; border-top: 1px solid $border-color; border-bottom: 1px solid $border-color; height: 20rem; margin-bottom: 3rem; @include imgcenter; img { width: 15rem; height: auto; opacity:0.2; } } @include max($md) { right: -280px; width: 280px; padding: 1.5rem; } } .no-results { text-align:center; padding:60px 20px; } .no-results__img { max-width:200px; margin-bottom:24px; } .no-results__title { font-size:1.8rem; margin-bottom:12px; } .no-results__text { color:rgb(85, 85, 85); margin-bottom:24px; } .no-results__link { color:#686868; text-decoration:underline; } .no-results__btn { padding:12px 28px; border-radius:4px; background:rgb(46, 130, 255); color:rgb(0, 0, 0); text-decoration:none; } .no-results__btn:hover { background:rgb(3, 251, 36); } /* #kategori-col’u ortala */ #kategori-col { float: none; /* Bootstrap’in float’ını kapatır */ margin: 0 auto; /* Sağ-sol otomatik boşluk */ } /* opsiyonel: arka plan kartını da daraltıp ortala */ .category-multi-search { max-width: 700px; /* istediğin genişlik */ margin: 0 auto; /* ortala */ } .site-header { display: flex; align-items: center; padding: 10px 20px; background: #fff; position: relative; } .main-nav { /* Menü genişliğin kadar yer kaplasın */ } .ticker { flex: 1; /* Nav’ın hemen yanından başlasın */ overflow: hidden; /* dışarı taşanı gizle */ margin-left: 20px; /* nav ile biraz boşluk */ white-space: nowrap; height: 30px; /* isteğe göre ayarla */ } .ticker__inner { display: inline-block; padding-left: 100%; /* başta tamamen sağda başlasın */ animation: scroll-left 20s linear infinite; font-weight: bold; line-height: 30px; /* ticker yüksekliğiyle hizalı */ } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } :root { --note-bg: #77c2f3; --note-bg-alt: #0277bd; --note-border: #0288d1; --popup-bg: #ffffff; --popup-border: #0277bd; --popup-text: #333333; } /* wrapper, sadece genişlik ve ortalama için */ .custom-note-wrapper { width: 100%; max-width: 600px; margin: 12px auto 0; /* butondan 12px aşağı başlat */ text-align: center; } /* ——— custom-note (buton) ——— */ .custom-note { display: block; overflow: hidden; position: relative; width: 100%; padding: 12px 20px 12px 50px; background: linear-gradient(to bottom, var(--note-bg) 0%, var(--note-bg-alt) 100%); border: 1px solid var(--note-border); border-radius: 6px; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.2), inset 0 1px rgba(255,255,255,0.3); cursor: pointer; margin: 12px auto 0; /* popup itmemesi için */ transition: transform 0.2s ease, box-shadow 0.2s ease; } .custom-note::before { content: "💳"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; } .custom-note:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.4); } /* ——— popup, akışta hemen altına gelir ——— */ .custom-note-popup { display: none; /* başta gizli */ opacity: 0; /* fade için */ margin-top: 4px; /* buton ile popup arası 4px */ padding: 10px 14px; background-color: var(--popup-bg); border-left: 4px solid var(--popup-border); border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-size: 14px; line-height: 1.6; color: var(--popup-text); transition: opacity 0.3s ease; } /* tıklanınca görünür yap */ .custom-note-popup.visible { display: block; opacity: 1; } /* 1) Pulse animasyonu */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* 2) Slide‑in açılış animasyonu */ @keyframes slideIn { 0% { opacity: 0; transform: translateY(50px) scale(0.8); } 60% { opacity: 1; transform: translateY(-10px) scale(1.05); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* --- Toggle Butonu --- */ .whatsapp-toggle { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background-color: #25D366; border: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform .2s; z-index: 10000; } .whatsapp-toggle:hover { transform: scale(1.1); } /* 2) SVG’in boyutunu ikonuna uygun küçült */ .whatsapp-toggle svg { width: 64px; height: 64px; } /* 3) İlk (baloncuk) beyaz, ikinci (telefon) yeşil olsun */ /* nth-of-type(1) yerine first-child, nth-of-type(2) yerine last-child da kullanabilirsin */ .whatsapp-toggle svg path:nth-of-type(1) { fill: #fff !important; } .whatsapp-toggle svg path:nth-of-type(2) { fill: #25D366 !important; } /* --- Widget Genel --- */ .whatsapp-widget { position: fixed; right: 20px; /* Toggle’ın 60px+20px boşluğunun üstünde */ bottom: calc(20px + 60px + 10px); width: 300px; max-width: 90vw; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.2); transform: translateY(100px); opacity: 0; transition: transform .3s ease, opacity .3s ease; z-index: 10001; display: flex; flex-direction: column; pointer-events: none; } .whatsapp-widget.open { transform: translateY(0); opacity: 1; pointer-events: auto; } /* --- Header --- */ .whatsapp-header { background: #25D366; color: #fff; padding: 10px; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: space-between; } .whatsapp-header-title { display: flex; align-items: center; font-weight: 600; font-size: 16px; } .whatsapp-header-title svg { margin-right: 6px; } .whatsapp-close { background: transparent; border: none; font-size: 20px; color: #fff; cursor: pointer; line-height: 1; } /* --- Konuşma Balonu --- */ .whatsapp-content { position: relative; background: #fff; padding: 15px; margin: 0 12px 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); } .whatsapp-content::before { content: "";position:absolute;bottom:-10px;left:24px;border-width:10px 10px 0 10px;border-style:solid;border-color:#fff transparent transparent transparent}.whatsapp-start{display:block;width:100%;margin:0;background-color:#fff;color:#25D366;border:2px solid #25D366;font-weight:700;font-size:16px;text-align:center;text-decoration:none;padding:14px 0;border-radius:0 0 12px 12px;transition:background-color .2s ease,color .2s ease}.whatsapp-start:hover{background-color:#25D366;color:#fff;text-decoration:none}bunu güncelle kanka komple ver bana