/* ============================================
PREMIUM E-TICARET TEMA – MODERN REDESIGN
============================================ */
/* Google Fonts Import */
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap’);
/* ============================================
ROOT VARIABLES – DESIGN TOKENS
============================================ */
:root {
–primary: #6C5CE7;
–primary-dark: #5A4BD1;
–primary-light: #A29BFE;
–secondary: #00CEC9;
–accent: #FD79A8;
–accent-dark: #E84393;
–dark: #1A1A2E;
–dark-2: #16213E;
–dark-3: #0F3460;
–light: #F8F9FE;
–light-2: #EEF0F8;
–text: #2D3436;
–text-light: #636E72;
–success: #00B894;
–warning: #FDCB6E;
–danger: #FF6B6B;
–shadow-sm: 0 2px 8px rgba(108, 92, 231, 0.08);
–shadow-md: 0 4px 20px rgba(108, 92, 231, 0.12);
–shadow-lg: 0 8px 40px rgba(108, 92, 231, 0.18);
–shadow-hover: 0 12px 48px rgba(108, 92, 231, 0.22);
–radius-sm: 8px;
–radius-md: 12px;
–radius-lg: 16px;
–radius-xl: 24px;
–transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
–transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ============================================
GLOBAL STYLES
============================================ */
body {
font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif !important;
color: var(–text) !important;
background: var(–light) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
font-family: ‘Inter’, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
/* ============================================
UYARI BANNER – PREMIUM TASARIM
============================================ */
.uyari-banner-modern {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: #fff !important;
border: none !important;
padding: 14px 30px !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 500 !important;
font-family: ‘Inter’, sans-serif !important;
letter-spacing: 0.3px;
position: relative;
z-index: 9999;
box-shadow: 0 2px 15px rgba(102, 126, 234, 0.3);
animation: slideDown 0.6s ease;
}
.uyari-banner-modern strong {
font-weight: 700;
margin-right: 6px;
}
.uyari-banner-modern .pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #FDCB6E;
border-radius: 50%;
margin-right: 8px;
animation: pulse 2s ease infinite;
vertical-align: middle;
}
@keyframes slideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
/* ============================================
HEADER / NAVIGATION
============================================ */
.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(108, 92, 231, 0.08) !important;
box-shadow: var(–shadow-sm) !important;
transition: var(–transition) !important;
}
.ast-header-break-point .ast-primary-header-bar.ast-header-sticked {
box-shadow: var(–shadow-md) !important;
}
/* Nav links */
.ast-builder-menu .menu-item > .menu-link,
.main-navigation .menu-item > a {
font-family: ‘Inter’, sans-serif !important;
font-weight: 500 !important;
font-size: 14px !important;
letter-spacing: 0.3px !important;
color: var(–dark) !important;
transition: var(–transition) !important;
position: relative;
}
.ast-builder-menu .menu-item > .menu-link:hover,
.main-navigation .menu-item > a:hover {
color: var(–primary) !important;
}
.ast-builder-menu .menu-item > .menu-link::after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(–primary), var(–accent));
transition: var(–transition);
transform: translateX(-50%);
border-radius: 1px;
}
.ast-builder-menu .menu-item > .menu-link:hover::after {
width: 70%;
}
/* ============================================
HERO SECTION (Elementor Ana Baner)
============================================ */
.elementor-element.e-parent:first-child {
position: relative;
overflow: hidden;
}
.elementor-element.e-parent:first-child::before {
content: ”;
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(108, 92, 231, 0.06) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
}
/* ============================================
SECTION HEADINGS
============================================ */
.elementor-heading-title {
color: var(–dark) !important;
position: relative;
display: inline-block;
}
.elementor-widget-heading .elementor-heading-title {
font-size: clamp(24px, 4vw, 36px) !important;
background: linear-gradient(135deg, var(–dark) 0%, var(–dark-3) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.elementor-widget-divider .elementor-divider-separator {
border-color: var(–primary) !important;
border-width: 3px !important;
max-width: 60px !important;
border-image: linear-gradient(90deg, var(–primary), var(–accent)) 1 !important;
}
/* ============================================
WOOCOMMERCE PRODUCT CARDS – PREMIUM
============================================ */
ul.products li.product,
.woocommerce ul.products li.product {
background: #fff !important;
border-radius: var(–radius-lg) !important;
overflow: hidden !important;
box-shadow: var(–shadow-sm) !important;
transition: var(–transition) !important;
border: 1px solid rgba(108, 92, 231, 0.06) !important;
position: relative;
padding: 0 !important;
margin-bottom: 30px !important;
}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
transform: translateY(-8px) !important;
box-shadow: var(–shadow-hover) !important;
border-color: rgba(108, 92, 231, 0.15) !important;
}
/* Product Image */
ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
border-radius: 0 !important;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
width: 100% !important;
height: auto !important;
}
ul.products li.product:hover .woocommerce-loop-product__link img,
.woocommerce ul.products li.product:hover a img {
transform: scale(1.06) !important;
}
/* Image Container */
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product > a:first-child {
overflow: hidden !important;
display: block !important;
position: relative;
}
/* Product Title */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: ‘Inter’, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(–dark) !important;
padding: 14px 16px 4px !important;
margin: 0 !important;
line-height: 1.4 !important;
transition: var(–transition) !important;
}
ul.products li.product:hover .woocommerce-loop-product__title {
color: var(–primary) !important;
}
/* Product Price */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
padding: 4px 16px 8px !important;
font-family: ‘Inter’, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(–primary) !important;
}
/* Sale Price */
ul.products li.product .price del {
color: var(–text-light) !important;
font-weight: 400 !important;
font-size: 13px !important;
opacity: 0.7;
text-decoration: line-through !important;
}
ul.products li.product .price ins {
color: var(–danger) !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 17px !important;
}
/* Sale Badge */
ul.products li.product .onsale,
.woocommerce span.onsale {
background: linear-gradient(135deg, var(–danger) 0%, var(–accent-dark) 100%) !important;
color: #fff !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
border-radius: var(–radius-sm) !important;
padding: 4px 12px !important;
min-width: auto !important;
min-height: auto !important;
line-height: 1.5 !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4) !important;
z-index: 2;
}
/* Add to Cart Button */
ul.products li.product .button,
.woocommerce ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product a.added_to_cart {
background: linear-gradient(135deg, var(–primary) 0%, var(–primary-dark) 100%) !important;
color: #fff !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
border: none !important;
border-radius: var(–radius-sm) !important;
padding: 10px 20px !important;
margin: 8px 16px 16px !important;
transition: var(–transition) !important;
text-transform: none !important;
display: block !important;
text-align: center !important;
width: calc(100% – 32px) !important;
box-sizing: border-box !important;
}
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
background: linear-gradient(135deg, var(–primary-dark) 0%, #4834C0 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4) !important;
}
/* ============================================
SINGLE PRODUCT PAGE
============================================ */
.single-product div.product .price {
color: var(–primary) !important;
font-size: 28px !important;
font-weight: 700 !important;
font-family: ‘Inter’, sans-serif !important;
}
.single-product div.product .price del {
color: var(–text-light) !important;
font-size: 20px !important;
}
.single-product div.product .price ins {
color: var(–danger) !important;
text-decoration: none !important;
}
.single-product .single_add_to_cart_button {
background: linear-gradient(135deg, var(–primary) 0%, var(–primary-dark) 100%) !important;
border: none !important;
border-radius: var(–radius-md) !important;
padding: 14px 36px !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
transition: var(–transition) !important;
}
.single-product .single_add_to_cart_button:hover {
background: linear-gradient(135deg, var(–primary-dark) 0%, #4834C0 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4) !important;
}
/* KDV Dahildir Text */
.woocommerce-price-suffix {
font-size: 11px !important;
color: var(–success) !important;
font-weight: 500 !important;
display: block !important;
margin-top: 2px;
}
/* ============================================
CART & CHECKOUT
============================================ */
.woocommerce .cart .button,
.woocommerce .checkout .button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt {
background: linear-gradient(135deg, var(–primary) 0%, var(–primary-dark) 100%) !important;
border: none !important;
border-radius: var(–radius-md) !important;
font-family: ‘Inter’, sans-serif !important;
font-weight: 600 !important;
transition: var(–transition) !important;
padding: 12px 28px !important;
}
.woocommerce .cart .button:hover,
.woocommerce .checkout .button:hover,
.woocommerce button.button.alt:hover {
background: linear-gradient(135deg, var(–primary-dark) 0%, #4834C0 100%) !important;
box-shadow: var(–shadow-md) !important;
}
/* ============================================
FOOTER
============================================ */
.ast-footer-overlay,
.site-footer {
background: var(–dark) !important;
color: rgba(255,255,255,0.8) !important;
}
.site-footer a {
color: var(–primary-light) !important;
transition: var(–transition) !important;
}
.site-footer a:hover {
color: #fff !important;
}
/* ============================================
SCROLL ANIMATIONS
============================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.elementor-element {
animation: fadeInUp 0.6s ease forwards;
}
/* Product card staggered animation */
ul.products li.product:nth-child(1) { animation-delay: 0.1s; }
ul.products li.product:nth-child(2) { animation-delay: 0.2s; }
ul.products li.product:nth-child(3) { animation-delay: 0.3s; }
ul.products li.product:nth-child(4) { animation-delay: 0.4s; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.uyari-banner-modern {
font-size: 11px !important;
padding: 10px 15px !important;
}
ul.products li.product .woocommerce-loop-product__title {
font-size: 13px !important;
}
ul.products li.product .price {
font-size: 14px !important;
}
}
/* ============================================
SCROLLBAR
============================================ */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(–light-2);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(–primary), var(–primary-dark));
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(–primary-dark);
}
/* ============================================
CATEGORY PAGE
============================================ */
.woocommerce-products-header__title {
font-family: ‘Inter’, sans-serif !important;
font-weight: 800 !important;
font-size: 32px !important;
color: var(–dark) !important;
margin-bottom: 30px !important;
}
/* Breadcrumbs */
.woocommerce-breadcrumb {
font-family: ‘Inter’, sans-serif !important;
font-size: 13px !important;
color: var(–text-light) !important;
}
.woocommerce-breadcrumb a {
color: var(–primary) !important;
transition: var(–transition) !important;
}
.woocommerce-breadcrumb a:hover {
color: var(–primary-dark) !important;
}