/* Minification failed. Returning unminified contents. (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (183,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (184,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (189,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (220,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (226,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (228,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (234,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (238,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (238,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (246,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (264,20): run-time error CSS1039: Token not allowed after unary operator: '-ep-header-height' (264,52): run-time error CSS1039: Token not allowed after unary operator: '-ep-megamenu-height' (266,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-header-height' (266,67): run-time error CSS1039: Token not allowed after unary operator: '-ep-megamenu-height' (294,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (298,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-glass-bg' (301,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (310,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (311,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (318,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (322,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (326,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (331,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (333,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (338,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (352,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (355,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (365,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (368,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (372,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (382,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (395,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (395,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (417,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (420,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-glass-bg' (423,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (434,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (435,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (442,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (455,27): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (465,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (470,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (471,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius' (475,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (479,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (492,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (495,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (499,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (507,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (517,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (520,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-glass-bg' (523,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (533,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (534,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (540,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (551,27): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (559,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (570,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (573,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (577,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (586,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (603,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (610,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (616,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (643,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (663,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (663,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (669,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (696,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (708,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (713,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (718,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (723,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (728,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (737,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (738,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (750,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (767,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (767,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (800,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (800,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (816,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (832,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (842,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg' (844,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (849,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (865,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (878,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (915,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (934,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (941,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (950,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (951,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (962,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark' (963,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark' (976,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (979,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (984,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (989,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (997,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (1004,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (1025,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (1026,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (1027,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius' (1030,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm' (1061,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (1062,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (1063,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (1092,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (1092,64): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (1092,89): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (1152,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (1176,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (1189,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (1189,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (1276,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (1395,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (1406,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark' (1427,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (1453,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (1518,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (1528,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (1539,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (1547,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (1581,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (1614,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (1624,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (2047,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius' (2072,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (2077,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (2081,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger' (2130,22): run-time error CSS1030: Expected identifier, found '.' (2130,37): run-time error CSS1031: Expected selector, found ')' (2130,37): run-time error CSS1025: Expected comma or open brace, found ')' (2156,28): run-time error CSS1039: Token not allowed after unary operator: '-dot-color' (2171,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg' (2172,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (2173,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (2205,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (2209,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg' (2210,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (2219,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2220,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2257,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2258,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2263,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (2272,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2272,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (2314,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (2333,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2339,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2340,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (2348,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2348,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (2364,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2370,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2371,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (2379,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2379,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (2403,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition' (2421,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (2430,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success' (2461,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (2461,49): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (2521,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (2527,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (2544,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (2583,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (2583,49): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-xl' (2718,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (2718,53): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (2746,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (2746,53): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (2821,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (2861,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (2861,74): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (3184,55): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-warm' (3186,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-2xl' (3199,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (3208,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (3214,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (3225,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (3225,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light' (3228,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (3232,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition-spring' (3245,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (3247,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius' (3250,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm' (3271,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (3340,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (3537,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (3546,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted' (3583,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (3596,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (3609,58): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (3633,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (3968,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (3973,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (3973,49): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (4164,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (4169,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (4169,49): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (4977,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (5060,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg' (5168,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-cat-scroll-top' (5170,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (5174,39): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (5200,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (5211,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5217,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5219,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5340,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (5357,39): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (5358,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (5368,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (5372,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5383,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg' (5385,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (5392,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (5393,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-text' (5402,39): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (5403,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg' (5423,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light' (5425,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white' (5426,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (5437,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5438,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5442,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5443,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary' (5473,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-border' (5482,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius' (5484,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border-light' (6043,24): run-time error CSS1030: Expected identifier, found '.' (6043,33): run-time error CSS1031: Expected selector, found ')' (6043,33): run-time error CSS1025: Expected comma or open brace, found ')' (6154,15): run-time error CSS1030: Expected identifier, found '>' (6154,36): run-time error CSS1031: Expected selector, found ')' (6154,36): run-time error CSS1025: Expected comma or open brace, found ')' (6579,19): run-time error CSS1030: Expected identifier, found '>' (6579,40): run-time error CSS1031: Expected selector, found ')' (6579,40): run-time error CSS1025: Expected comma or open brace, found ')' */ /* ============================================ CATEGORY PAGE - PREMIUM E-COMMERCE DESIGN Advanced Level - Bootstrap Compatible ============================================ */ /* --- CSS Variables --- */ :root { --ep-primary: #ff6a00; --ep-primary-light: #ff8c33; --ep-primary-dark: #e55d00; --ep-primary-glow: rgba(255, 106, 0, 0.15); --ep-secondary: #252934; --ep-secondary-light: #363b48; --ep-success: #28a745; --ep-success-light: #20c997; --ep-danger: #dc3545; --ep-info: #0ea5e9; --ep-text: #1a1a2e; --ep-text-light: #555; --ep-text-muted: #999; --ep-bg: #f5f6f8; --ep-bg-warm: #faf8f5; --ep-bg-white: #fff; --ep-border: #e8e8e8; --ep-border-light: #f0f0f0; --ep-shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --ep-shadow: 0 2px 8px rgba(0,0,0,0.08); --ep-shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --ep-shadow-hover: 0 8px 32px rgba(0,0,0,0.14); --ep-shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); --ep-shadow-card-hover: 0 12px 40px rgba(255, 106, 0, 0.12), 0 4px 12px rgba(0,0,0,0.08); --ep-radius: 8px; --ep-radius-lg: 12px; --ep-radius-xl: 16px; --ep-radius-2xl: 20px; --ep-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ep-transition-fast: all 0.15s ease; --ep-transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --ep-glass-bg: rgba(255, 255, 255, 0.85); --ep-glass-border: rgba(255, 255, 255, 0.3); --ep-glass-shadow: 0 8px 32px rgba(0,0,0,0.08); } /* --- Keyframe Animations --- */ @keyframes ep-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes ep-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ep-slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes ep-scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes ep-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes ep-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(255, 106, 0, 0); } } @keyframes ep-pulse-red { 0%, 100% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); } 50% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3), 0 0 0 5px rgba(220, 38, 38, 0.08); } } @keyframes ep-shimmer-sweep { 0% { left: -100%; } 50% { left: 200%; } 100% { left: 200%; } } @keyframes ep-badge-glow { 0%, 100% { box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1); } 50% { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25); } } @keyframes ep-glow { 0%, 100% { box-shadow: 0 0 5px rgba(255, 106, 0, 0.2), 0 0 20px rgba(255, 106, 0, 0.05); } 50% { box-shadow: 0 0 10px rgba(255, 106, 0, 0.3), 0 0 40px rgba(255, 106, 0, 0.1); } } @keyframes ep-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes ep-borderGlow { 0%, 100% { border-color: rgba(255, 106, 0, 0.1); } 50% { border-color: rgba(255, 106, 0, 0.3); } } @keyframes ep-gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- Scroll Reveal Utility --- */ .ep-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .ep-reveal.ep-revealed { opacity: 1; transform: translateY(0); } /* Product columns stagger animation kaldırıldı (translateY yok) */ /* ============================== BREADCRUMB ============================== */ #sitePath.breadcrumb, ol.breadcrumb { background: var(--ep-bg-white, #fff); border-radius: var(--ep-radius-lg, 12px); padding: 14px 22px; margin-top: 20px; margin-bottom: 22px; box-shadow: 0 1px 6px rgba(0,0,0,0.04); border: 1px solid var(--ep-border-light, #f0f0f0); display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; list-style: none; animation: ep-fadeIn 0.4s ease both; } #sitePath.breadcrumb::-webkit-scrollbar, ol.breadcrumb::-webkit-scrollbar { display: none; } #sitePath.breadcrumb li, ol.breadcrumb li { display: inline-flex; align-items: center; font-size: 13px; white-space: nowrap; flex-shrink: 0; } #sitePath.breadcrumb li + li::before, ol.breadcrumb li + li::before { content: "\f054"; font-family: "Font Awesome 7 Pro"; font-weight: 900; font-size: 9px; color: var(--ep-text-muted, #aaa); margin: 0 8px; } #sitePath.breadcrumb li a, ol.breadcrumb li a { color: var(--ep-text-light, #666); text-decoration: none; transition: var(--ep-transition, all 0.2s ease); font-weight: 500; } #sitePath.breadcrumb li a:hover, ol.breadcrumb li a:hover { color: var(--ep-primary, #FF7F00); } #sitePath.breadcrumb li a.btn-warning { background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff !important; border: none; border-radius: 24px; padding: 5px 16px; font-size: 12px; font-weight: 600; box-shadow: 0 3px 10px rgba(255, 106, 0, 0.3); transition: var(--ep-transition-spring); } #sitePath.breadcrumb li a.btn-warning:hover { box-shadow: 0 5px 16px rgba(255, 106, 0, 0.4); transform: translateY(-1px); } #sitePath.breadcrumb .active a small { font-size: 12px; } /* ============================== LEFT SIDEBAR ============================== */ .left-menu-container { position: -webkit-sticky; position: sticky; top: calc(var(--ep-header-height, 70px) + var(--ep-megamenu-height, 48px) + 12px); align-self: flex-start; max-height: calc(100vh - var(--ep-header-height, 70px) - var(--ep-megamenu-height, 48px) - 24px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; animation: ep-slideInLeft 0.5s ease both; } .left-menu-container::-webkit-scrollbar { width: 4px; } .left-menu-container::-webkit-scrollbar-track { background: transparent; } .left-menu-container::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; } .left-menu-container::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* --- Left Menu Panel Group (Accordion) --- */ #accordion.panel-group { margin-bottom: 0; } #accordion .panel { border: 1px solid rgba(255, 106, 0, 0.06) !important; border-radius: var(--ep-radius-lg) !important; margin-bottom: 8px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; background: var(--ep-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--ep-transition); } #accordion .panel:hover { box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08); border-color: rgba(255, 106, 0, 0.12) !important; } #accordion .panel-heading { background: var(--ep-bg-white) !important; border-bottom: 1px solid var(--ep-border-light) !important; padding: 0 !important; } #accordion .panel-title a { display: block; padding: 12px 16px; color: var(--ep-text); font-weight: 600; font-size: 14px; text-decoration: none !important; transition: var(--ep-transition); } #accordion .panel-title a:hover { color: var(--ep-primary); background: rgba(255, 106, 0, 0.03); } #accordion .panel-title a.active { color: var(--ep-primary); background: rgba(255, 106, 0, 0.05); border-left: 3px solid var(--ep-primary); } #accordion .panel-title .collapse-icon { transition: transform 0.3s ease; color: var(--ep-text-muted); } #accordion .panel-body { padding: 0 !important; } /* --- Left Menu List --- */ .left-menu-list { margin-bottom: 0; } .left-menu-list .list-group-item { border: none !important; border-bottom: 1px solid var(--ep-border-light) !important; padding: 0 !important; border-radius: 0 !important; transition: var(--ep-transition); } .left-menu-list .list-group-item:last-child { border-bottom: none !important; } .left-menu-list .list-group-item a { display: block; padding: 10px 16px 10px 24px; color: var(--ep-text); text-decoration: none !important; font-size: 13px; transition: var(--ep-transition); } .left-menu-list .list-group-item a:hover { color: var(--ep-primary); padding-left: 30px; background: rgba(255, 106, 0, 0.04); } .left-menu-list .list-group-item a::before { content: ''; display: inline-block; width: 0; height: 2px; background: var(--ep-primary); border-radius: 2px; margin-right: 0; transition: width 0.3s ease, margin-right 0.3s ease; vertical-align: middle; } .left-menu-list .list-group-item a:hover::before { width: 12px; margin-right: 6px; } .left-menu-list .list-group-item.active { background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)) !important; border-color: transparent !important; } .left-menu-list .list-group-item.active a { color: #fff !important; font-weight: 600; } .left-menu-list .list-group-item.active a:hover { color: #fff !important; background: transparent; padding-left: 28px; } /* ============================== FILTER PANELS (Color / Fabric Width) ============================== */ #filterPanel.filter-panel, .filter-panel { margin-top: 12px !important; border: 1px solid rgba(255, 106, 0, 0.06) !important; border-radius: var(--ep-radius-lg) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; background: var(--ep-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--ep-transition); } #filterPanel.filter-panel:hover, .filter-panel:hover { box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08); border-color: rgba(255, 106, 0, 0.12) !important; } #filterPanel .panel-heading, .filter-panel .panel-heading { background: var(--ep-bg-white) !important; border-bottom: 1px solid var(--ep-border-light) !important; padding: 12px 16px !important; } #filterPanel .panel-heading .panel-title, .filter-panel .panel-heading .panel-title { font-size: 14px; color: var(--ep-text); } #filterPanel .panel-body, .filter-panel .panel-body { padding: 12px 16px !important; } #filterPanel .panel-body .list-group, .filter-panel .panel-body .list-group { max-height: 400px !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: var(--ep-border) transparent; } #filterPanel .panel-body .list-group::-webkit-scrollbar, .filter-panel .panel-body .list-group::-webkit-scrollbar { width: 4px; } #filterPanel .panel-body .list-group::-webkit-scrollbar-thumb, .filter-panel .panel-body .list-group::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 4px; } .filter-search-box { border: 1px solid var(--ep-border) !important; border-radius: var(--ep-radius) !important; padding: 8px 12px !important; font-size: 13px !important; margin-bottom: 10px; transition: var(--ep-transition); } .filter-search-box:focus { border-color: var(--ep-primary) !important; box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.08), 0 2px 8px rgba(255, 106, 0, 0.06) !important; outline: none; background: #fffcfa !important; } #filterPanel .prod-filter-color { background-color: #fff !important; padding: 6px 0 !important; border: none !important; } .filter-panel .prod-filter-color label { color: var(--ep-text) !important; font-size: 13px; cursor: pointer; transition: var(--ep-transition); } .filter-panel .prod-filter-color label:hover { color: var(--ep-primary) !important; } .filter-panel-body .list-group-item { border: 0px; } .filter-panel-body .seperator { border-bottom: 1px solid var(--ep-border-light); height: 2px; margin-bottom: 10px; } /* --- Fabric Width Filter --- */ #filterPanelKumasEni, .filter-panel-kumasEni { margin-top: 12px !important; border: 1px solid rgba(255, 106, 0, 0.06) !important; border-radius: var(--ep-radius-lg) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04); overflow: hidden; background: var(--ep-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--ep-transition); } #filterPanelKumasEni:hover, .filter-panel-kumasEni:hover { box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08); border-color: rgba(255, 106, 0, 0.12) !important; } .filter-panel-kumasEni .panel-heading { background: var(--ep-bg-white) !important; border-bottom: 1px solid var(--ep-border-light) !important; padding: 12px 16px !important; } .filter-panel-kumasEni .panel-heading .panel-title { font-size: 14px; color: var(--ep-text); } .filter-panel-kumasEni .panel-body { padding: 12px 16px !important; } .filter-panel-kumasEni .panel-body .list-group { max-height: 400px !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: var(--ep-border) transparent; } .filter-panel-kumasEni .panel-body .list-group::-webkit-scrollbar { width: 4px; } .filter-panel-kumasEni .panel-body .list-group::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 4px; } #filterPanelKumasEni .prod-filter-kumasEni { background-color: #fff !important; padding: 6px 0 !important; border: none !important; } .filter-panel-kumasEni .prod-filter-kumasEni label { color: var(--ep-text) !important; font-size: 13px; cursor: pointer; transition: var(--ep-transition); } .filter-panel-kumasEni .prod-filter-kumasEni label:hover { color: var(--ep-primary) !important; } /* ============================== ACTIVE FILTERS - Premium Design ============================== */ .ep-active-filters { background: linear-gradient(135deg, #fff8f3 0%, #fff 100%); border: 1px solid rgba(255, 106, 0, 0.1); border-radius: var(--ep-radius-xl); padding: 16px 20px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(255, 106, 0, 0.06); animation: ep-scaleIn 0.3s ease both; } .ep-active-filters__header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 106, 0, 0.08); } .ep-active-filters__header i { color: var(--ep-primary); font-size: 14px; } .ep-active-filters__header span { font-size: 13px; font-weight: 700; color: var(--ep-text); text-transform: uppercase; letter-spacing: 0.3px; } .ep-active-filters__count { background: var(--ep-primary) !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 12px !important; margin-left: auto; text-transform: none !important; letter-spacing: 0 !important; } .ep-active-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ep-filter-remove-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 9px; transition: var(--ep-transition); } .remove-filter-button:hover .ep-filter-remove-icon { background: rgba(255,255,255,0.4); transform: rotate(90deg); } /* ============================== ACTIVE FILTERS (Remove buttons) ============================== */ .remove-filter-button { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 24px; color: #fff; padding: 7px 16px; margin-bottom: 6px; background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); margin-left: 3px; text-decoration: none !important; white-space: nowrap; font-size: 13px; font-weight: 600; transition: var(--ep-transition-spring); line-height: 1.4; height: auto; width: auto; box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25); animation: ep-scaleIn 0.3s ease both; position: relative; overflow: hidden; } .remove-filter-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .remove-filter-button:hover::before { left: 100%; } .remove-filter-button:hover { text-decoration: none; background: linear-gradient(135deg, var(--ep-danger), #e74c3c); color: #fff; transform: scale(1.05); box-shadow: 0 4px 14px rgba(220, 53, 69, 0.35); } .remove-filter-button span { display: inline-flex; align-items: center; } #clearFilterBtn { background: var(--ep-text-muted); color: #fff; } #clearFilterBtn:hover { background: var(--ep-danger); color: #fff; } #clearFilterKumasEniBtn { background: var(--ep-text-muted); color: #fff; } #clearFilterKumasEniBtn:hover { background: var(--ep-danger); color: #fff; } .filter-button:hover { background: var(--ep-danger); } /* --- Active List Group Item --- */ .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; color: #fff; background-color: var(--ep-primary); border-color: var(--ep-primary); } /* ============================== CATEGORY HEADER - Pro Design ============================== */ .cat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, #ffffff 0%, #fffaf6 50%, #fff5ed 100%); border-radius: var(--ep-radius-xl); padding: 22px 28px; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(255,106,0,0.06), 0 0 0 1px rgba(255,106,0,0.06); border: none; position: relative; overflow: hidden; animation: ep-fadeInUp 0.4s ease both; } .cat-header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ep-primary), var(--ep-primary-light)); border-radius: 4px 0 0 4px; animation: ep-glow 3s ease-in-out infinite; } .cat-header::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 106, 0, 0.06) 0%, transparent 70%); pointer-events: none; } .cat-header__content { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .cat-header__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff; font-size: 18px; box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3); animation: ep-float 4s ease-in-out infinite; } .cat-header__text { min-width: 0; flex: 1; } .cat-header h1 { margin: 0 !important; font-size: 21px !important; font-weight: 700; color: var(--ep-text); line-height: 1.3; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-header__desc { margin-top: 3px; } .cat-header__desc, .cat-header p { margin: 3px 0 0 0; font-size: 13px; color: var(--ep-text-muted); line-height: 1.4; } .cat-header__badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 24px; background: linear-gradient(135deg, var(--ep-bg) 0%, #fff 100%); border: 1px solid rgba(255, 106, 0, 0.1); color: var(--ep-text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; transition: var(--ep-transition); } .cat-header__badge:hover { border-color: rgba(255, 106, 0, 0.25); box-shadow: 0 2px 8px rgba(255, 106, 0, 0.1); } .cat-header__badges { display: flex; gap: 8px; flex-shrink: 0; } .cat-header__badge i { font-size: 11px; color: var(--ep-primary); opacity: 0.8; } /* ============================== SORT ROW - Pro Design v2 ============================== */ #sort-row { display: flex !important; align-items: center; justify-content: space-between; gap: 0; padding: 0; background: var(--ep-bg-white); border-radius: 50px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04); border: none; overflow: hidden; min-height: 46px; animation: ep-fadeInUp 0.4s ease both; animation-delay: 0.15s; } /* Sort Options Container */ .sort-row__options { display: flex; align-items: center; gap: 4px; padding: 5px 6px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sort-row__options::-webkit-scrollbar { display: none; } /* Sort Buttons */ #sort-row .sort-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 50px; font-size: 13px; font-weight: 500; color: var(--ep-text-light); text-decoration: none !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; border: 1.5px solid transparent; background: transparent; position: relative; cursor: pointer; letter-spacing: 0.1px; line-height: 1; } #sort-row .sort-btn i { font-size: 13px; opacity: 0.5; transition: all 0.25s ease; } #sort-row .sort-btn:hover { color: var(--ep-primary); background: rgba(255,106,0,0.06); border-color: rgba(255,106,0,0.15); } #sort-row .sort-btn:hover i { opacity: 1; color: var(--ep-primary); } #sort-row .sort-btn:active { transform: scale(0.97); } #sort-row .sort-btn.active { color: #fff !important; background: var(--ep-primary); border-color: var(--ep-primary); box-shadow: 0 2px 8px rgba(255,106,0,0.30); font-weight: 600; } #sort-row .sort-btn.active i { opacity: 1; color: #fff; } #sort-row .sort-btn.active:hover { background: var(--ep-primary-dark); border-color: var(--ep-primary-dark); box-shadow: 0 4px 14px rgba(255,106,0,0.35); } /* Page Indicator */ .sort-row__page { display: flex; align-items: center; gap: 6px; padding: 0 18px; height: 46px; font-size: 13px; font-weight: 600; color: var(--ep-text-muted); white-space: nowrap; flex-shrink: 0; border-left: 1px solid var(--ep-border-light); } .sort-row__page > i { font-size: 13px; color: var(--ep-text-muted); opacity: 0.6; } .sort-row__page-current { color: var(--ep-primary); font-weight: 700; font-size: 15px; min-width: 16px; text-align: center; } .sort-row__page-sep { color: var(--ep-border); font-weight: 400; margin: 0 1px; font-size: 12px; } .sort-row__page-total { color: var(--ep-text-muted); font-size: 13px; font-weight: 500; } /* Legacy support - hide old col structure if any remains */ #sort-row > .col { display: none !important; } /* Hide the old label element if it somehow still exists */ .sort-row__label { display: none !important; } /* ============================== WELL - Scoped to category page context ============================== */ .col-md-9 > .well, .col-sm-12 > .well { background-color: var(--ep-bg-white); border: 1px solid var(--ep-border-light); border-radius: var(--ep-radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--ep-shadow-sm); } /* ============================== PRODUCT GRID (Bootstrap 5 Compatible) col-xl-4 col-lg-4 col-md-6 col-6 ============================== */ #prods.row { display: flex !important; flex-wrap: wrap !important; margin-left: -8px !important; margin-right: -8px !important; align-items: stretch; } #prods.row > div[class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 16px !important; display: flex; flex-direction: column; } /* ============================== PRODUCT CARD - PRO LEVEL DESIGN Responsive: 4K / Desktop / Laptop / Tablet / Mobile ============================== */ /* --- Card Container --- */ .product-item-v2, .product-item-v3 { background: var(--ep-bg-white); border: 1px solid var(--ep-border-light); border-radius: var(--ep-radius-xl); overflow: hidden; transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease; position: relative; height: 100%; display: flex; flex-direction: column; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03); container-type: inline-size; } .product-item-v2:hover, .product-item-v3:hover { box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08); border-color: rgba(255, 106, 0, 0.15); } /* Subtle top accent line */ .product-item-v2::before, .product-item-v3::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ep-primary), var(--ep-primary-light), var(--ep-primary)); background-size: 200% 100%; z-index: 10; opacity: 0; transition: opacity 0.4s ease; } .product-item-v2:hover::before, .product-item-v3:hover::before { opacity: 1; animation: ep-gradientShift 3s ease infinite; } /* --- Hover Overlay on Image --- */ .product-item-v2 .img-wrapper::after, .product-item-v3 .img-wrapper::after { content: 'Ürünü İncele'; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 50%, transparent 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; color: #fff; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; z-index: 4; pointer-events: none; } .product-item-v2:hover .img-wrapper::after, .product-item-v3:hover .img-wrapper::after { opacity: 1; transform: translateY(0); } /* --- Quick View Floating Badge --- */ .product-item-v2 .img-wrapper::before, .product-item-v3 .img-wrapper::before { content: '\f002'; font-family: 'Font Awesome 7 Pro'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.97); color: var(--ep-primary); display: flex; align-items: center; justify-content: center; font-size: 17px; opacity: 0; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 5; box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(255,106,0,0.15); pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .product-item-v2:hover .img-wrapper::before, .product-item-v3:hover .img-wrapper::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --- Card Link Wrapper --- */ .product-item-v2 > a, .product-item-v3 > a { text-decoration: none !important; color: var(--ep-text); display: flex; flex-direction: column; flex: 1; min-height: 0; border-radius: inherit; } /* --- Image Container --- */ .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { display: block; overflow: hidden; border-radius: var(--ep-radius-xl) var(--ep-radius-xl) 0 0; position: relative; background: linear-gradient(145deg, #f8f9fa, #f0f1f3); height: 0; padding-bottom: 133.33%; aspect-ratio: 3 / 4; } @supports (aspect-ratio: 3 / 4) { .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { height: auto; padding-bottom: 0; } } .product-item-v2 .img-wrapper img, .product-item-v3 .img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: filter 0.4s ease; } .product-item-v2:hover .img-wrapper img, .product-item-v3:hover .img-wrapper img { filter: brightness(1.03) saturate(1.05); } /* --- Image Slider (multi-image hover/swipe) --- */ .ep-img-slider .ep-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.25s ease; z-index: 1; } .ep-img-slider .ep-slide.active { opacity: 1; z-index: 2; } .product-item-v2:hover .ep-img-slider .ep-slide, .product-item-v3:hover .ep-img-slider .ep-slide { transform: none; filter: none; } .ep-img-slider .ep-slide-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) scale(0.8); display: flex; gap: 5px; z-index: 7; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 20px; padding: 5px 10px; } .ep-img-slider .ep-slide-dots .ep-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); box-shadow: none; transition: background 0.2s ease, transform 0.2s ease; } .ep-img-slider .ep-slide-dots .ep-dot.active { background: var(--ep-primary, #ff6a00); transform: scale(1.25); } @media (max-width: 767px) { .ep-img-slider .ep-slide-dots { opacity: 1; bottom: 6px; gap: 4px; } .ep-img-slider .ep-slide-dots .ep-dot { width: 6px; height: 6px; } } /* Kategori kartı: mobilde çoklu görsel Swiper (swiper-element) */ @media (max-width: 767.98px) { .ep-img-slider > swiper-container.ep-card-swiper-el { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } .ep-img-slider[data-ep-swiper-card="1"] swiper-slide .ep-slide { position: relative; top: auto; left: auto; opacity: 1; z-index: auto; } /* Swiper kendi pagination ile senkron; HTML .ep-dot tekrarını gizle */ .ep-img-slider[data-ep-swiper-card="1"] .ep-slide-dots { display: none !important; } } /* --- Card Body (below image) --- */ .product-item-v2 .addInfoArea, .product-item-v3 .addInfoArea { display: flex; flex-direction: column; flex: 1; padding: 0; min-height: 0; } .product-item-v2 .calculateAreaMain, .product-item-v3 .calculateAreaMain { display: flex !important; flex-direction: column; flex: 1; min-height: 0; } /* --- Variant Dots (override inline styles) --- */ .product-item-v2 > a > span[id^="prodVariant_"], .product-item-v3 > a > span[id^="prodVariant_"] { height: auto !important; min-height: 26px; display: flex !important; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 10px; } /* --- Variant Link Button (override inline height:30px) --- */ .product-item-v2 .btn-sm.btn-secondary, .product-item-v3 .btn-sm.btn-secondary { height: auto !important; min-height: 0; padding: 4px 8px !important; font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- All inline height overrides within card (prevent layout shift) --- */ .product-item-v2 span[style*="height"], .product-item-v3 span[style*="height"], .product-item-v2 a[style*="height"], .product-item-v3 a[style*="height"], .product-item-v2 div[style*="height"], .product-item-v3 div[style*="height"] { height: auto !important; } /* --- Calculate close button --- */ .product-item-v2 .calcCloseBtn, .product-item-v3 .calcCloseBtn { height: auto !important; } /* --- Discount panel wrapper (override inline styles) --- */ .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { height: auto !important; min-height: 0; margin-top: auto; } /* --- Product Name --- */ .product-item-v2 .prod-name, .product-item-v3 .prod-name { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; padding: 14px 16px 6px; font-size: 13.5px; font-weight: 600; color: var(--ep-text); line-height: 1.5; min-height: 44px; max-height: 54px; letter-spacing: -0.01em; word-break: break-word; transition: color 0.25s ease; } .product-item-v2:hover .prod-name, .product-item-v3:hover .prod-name { color: var(--ep-primary-dark); } /* --- Favorite Button (Floating Heart on Image) --- */ .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { position: absolute !important; top: 12px; right: 12px; z-index: 8; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ep-text-muted); font-size: 15px; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: none; box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); margin: 0; opacity: 1; transform: scale(1); } .product-item-v2 .add-to-fav::before, .product-item-v3 .add-to-fav::before, .epv3-card .add-to-fav::before { content: ''; position: absolute; top: -12px; right: -3px; bottom: -12px; left: -12px; border-radius: 12px; } .product-item-v2 .add-to-fav .my-fav-heart-selected, .product-item-v3 .add-to-fav .my-fav-heart-selected, .epv3-card .add-to-fav .my-fav-heart-selected { color: var(--ep-danger); } /* Hide the text label - only show icon */ .product-item-v2 .add-to-fav > span[id^="prodFavText"], .product-item-v3 .add-to-fav > span[id^="prodFavText"], .epv3-card .add-to-fav > span[id^="prodFavText"] { display: none !important; } /* Fix icon sizing inside floating fav button */ .product-item-v2 .add-to-fav .fa-lg, .product-item-v3 .add-to-fav .fa-lg, .epv3-card .add-to-fav .fa-lg { font-size: 1em; line-height: 1; } /* prod-detail.css’teki genel .add-to-fav i.fa-heart { 1.3rem !important } kart üstü mini butonu şişiriyor — burada sıfırla */ .product-item-v2 .add-to-fav i.fa-heart, .product-item-v3 .add-to-fav i.fa-heart, .epv3-card .add-to-fav i.fa-heart, .product-item-v2 .add-to-fav i.fa-smile, .product-item-v3 .add-to-fav i.fa-smile, .epv3-card .add-to-fav i.fa-smile, .product-item-v2 .add-to-fav i.fa-frown, .product-item-v3 .add-to-fav i.fa-frown, .epv3-card .add-to-fav i.fa-frown { font-size: 1em !important; line-height: 1 !important; } /* --- Price Area --- PREMIUM */ .product-item-v2 .price-area, .product-item-v3 .price-area { padding: 0; position: relative !important; top: 0 !important; display: flex; flex-direction: column; } .product-item-v2 .price-area br, .product-item-v3 .price-area br { display: none; } /* --- Normal Price Wrapper --- */ .product-item-v2 .price-wrapper, .product-item-v3 .price-wrapper { display: flex !important; flex-direction: column; gap: 3px; padding: 12px 16px 8px; position: relative !important; top: 0 !important; line-height: 1.3 !important; height: auto !important; width: 100% !important; flex-wrap: nowrap; } .product-item-v2 .priceText, .product-item-v3 .priceText { font-size: 12px; color: var(--ep-text-light); display: flex; flex-direction: column; gap: 3px; width: 100%; } .product-item-v2 .priceText > span:first-child, .product-item-v3 .priceText > span:first-child { font-size: 10px; color: var(--ep-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { display: inline; font-size: 24px; font-weight: 800; color: var(--ep-text); letter-spacing: -0.03em; font-feature-settings: 'tnum' on, 'lnum' on; line-height: 1.1; } .price-wrapper-line { text-decoration: line-through !important; color: var(--ep-text-muted) !important; font-size: 14px !important; font-weight: 500 !important; opacity: 0.6; } /* --- Balloon Price (Çarpı Fiyat) --- PREMIUM */ .baloon-price-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; height: auto; font-weight: 700; } .baloon-price-rate-row { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; height: auto; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; text-align: center; border-radius: 10px; position: static; top: auto; margin-left: 0; font-size: 14px; font-weight: 800; box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25); animation: ep-pulse-red 3s ease-in-out infinite; transition: var(--ep-transition); letter-spacing: -0.02em; flex-shrink: 0; } .product-item-v2:hover .baloon-price-rate-row, .product-item-v3:hover .baloon-price-rate-row { transform: scale(1.06); box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4); } .baloon-price-rate { text-align: center; vertical-align: middle; font-size: 14px; position: static; top: auto; } .baloon-price-space { display: none; } .baloon-price-row { display: flex; flex-direction: column; gap: 3px; font-size: 16px; flex: 1; min-width: 0; } .baloon-price-row-first-price { color: var(--ep-text-muted) !important; text-decoration: line-through; display: block; font-size: 11px; font-weight: 500; line-height: 1.3; opacity: 0.65; } .baloon-price-row-last-price { color: var(--ep-text) !important; display: block; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; font-feature-settings: 'tnum' on, 'lnum' on; } /* --- Discount Footer (İndirimli Fiyat) --- PREMIUM GLASS CARD */ .baloon-price-footer { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; font-weight: bold; min-height: auto; border-top: none; position: relative; overflow: hidden; margin: 6px 12px 10px; border-radius: 12px; border: 1px solid rgba(16, 185, 129, 0.18); box-shadow: 0 2px 12px rgba(16, 185, 129, 0.10), inset 0 1px 0 rgba(255,255,255,0.6); } .baloon-price-footer::before { display: none; } .baloon-price-footer-empty { background-color: transparent; display: block; padding: 8px 14px; font-weight: bold; min-height: auto; margin: 6px 12px 10px; border-radius: 12px; } /* --- Card Options Slider (Seçenekli Ürün) --- */ .ep-card-opts-row { background: linear-gradient(135deg, rgba(124,58,237,.07) 0%, rgba(124,58,237,.14) 100%); border: 1px solid rgba(124,58,237,.18); } .ep-card-opts-icon { color: #7c3aed; font-size: 12px; flex-shrink: 0; } .ep-card-opts-slider { position: relative; height: 18px; overflow: hidden; flex: 1 1 auto; min-width: 0; } .ep-card-opts-slider__track { position: relative; width: 100%; height: 100%; } .ep-card-opts-slider__item { position: absolute; left: 0; top: 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #6d28d9; line-height: 18px; transform: translateY(110%); opacity: 0; will-change: transform, opacity; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1); } .ep-card-opts-slider__item--active { position: relative; transform: translateY(0); opacity: 1; } .ep-card-opts-slider__item--exit { position: absolute; transform: translateY(-110%); opacity: 0; } .baloon-green-text { color: #059669; display: flex; align-items: center; gap: 5px; text-align: left; line-height: 1.3; margin-bottom: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .baloon-green-text::before { content: '\f058'; font-family: 'Font Awesome 7 Pro'; font-weight: 900; font-size: 11px; color: #10b981; } .baloon-price-value { display: block; font-size: 24px; line-height: 1.15; text-align: left; color: #047857; font-weight: 900; letter-spacing: -0.03em; font-feature-settings: 'tnum' on, 'lnum' on; } /* ============================== PRODUCT CARD BADGES - PRO v2 ============================== */ .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { position: absolute; z-index: 6; font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 6px; line-height: 1.3; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); white-space: nowrap; letter-spacing: 0.03em; animation: ep-scaleIn 0.3s ease both; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; } .product-item-v2:hover .iade-garantisi, .product-item-v2:hover .sponsorlu, .product-item-v2:hover .storDahil, .product-item-v2:hover .genis-en-kumas, .product-item-v2:hover .next-day-cargo, .product-item-v2:hover .same-day-cargo, .product-item-v3:hover .iade-garantisi, .product-item-v3:hover .sponsorlu, .product-item-v3:hover .storDahil, .product-item-v3:hover .genis-en-kumas, .product-item-v3:hover .next-day-cargo, .product-item-v3:hover .same-day-cargo { transform: translateY(-1px) scale(1.03); } .iade-garantisi { bottom: 10px; right: 10px; top: auto; left: auto; background: rgba(22, 163, 74, 0.94); color: #fff; box-shadow: 0 2px 10px rgba(22, 163, 74, 0.25); } .sponsorlu, .img-wrapper > .sponsorlu, .product-item-v2 .img-wrapper > .sponsorlu, .product-item-v3 .img-wrapper > .sponsorlu, .product-item-v2 .img-wrapper .sponsorlu, .product-item-v3 .img-wrapper .sponsorlu { position: absolute !important; bottom: 6px !important; top: auto !important; left: 6px !important; right: auto !important; margin: 0 !important; transform: none !important; background: rgba(0, 0, 0, 0.4) !important; color: rgba(255,255,255,0.7) !important; box-shadow: none !important; font-weight: 500 !important; font-size: 7px !important; padding: 1px 4px !important; border-radius: 2px !important; letter-spacing: 0.02em; z-index: 8 !important; line-height: 1.3 !important; } .storDahil { top: 36px; left: 10px; background: rgba(14, 116, 144, 0.94); color: #fff; box-shadow: 0 2px 8px rgba(14, 116, 144, 0.25); } .genis-en-kumas { top: 6px !important; left: 6px !important; bottom: auto !important; right: auto !important; background: rgba(124, 58, 237, 0.94); color: #fff; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25); z-index: 7; } /* Yeni Ürün etiketi varsa geniş-en-kumaş altına kaydır */ .img-wrapper > .new-product ~ .genis-en-kumas { top: 30px !important; } .next-day-cargo { top: 6px; left: 6px; background: rgba(37, 99, 235, 0.94); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .same-day-cargo { top: 6px; left: 6px; background: rgba(37, 99, 235, 0.94); color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } /* ========================================================== KARGO ETİKETLERİ — img-wrapper içi hiyerarşi algoritması Sıralama: 1) Yeni Ürün 2) Geniş Enli Kumaş 3) Kargo Etiketi next-day-cargo ve same-day-cargo aynı kuralları paylaşır (bir ürün aynı anda ikisine birden sahip olamaz) ========================================================== */ .img-wrapper > .next-day-cargo, .img-wrapper > .same-day-cargo { position: absolute !important; top: 6px !important; left: 6px !important; bottom: auto !important; right: auto !important; z-index: 7; } /* Sadece Yeni Ürün varsa → altına */ .img-wrapper > .new-product ~ .next-day-cargo, .img-wrapper > .new-product ~ .same-day-cargo { top: 30px !important; } /* Sadece Geniş Enli Kumaş varsa → altına */ .img-wrapper > .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .genis-en-kumas ~ .same-day-cargo { top: 30px !important; } /* Yeni Ürün + Geniş Enli Kumaş ikisi de varsa → en alta */ .img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo { top: 54px !important; } /* ========================================================== ÖZEL ÜRÜN ETİKETLERİ (prod-custom-tag) Admin panelinden tanımlanan, renkleri dinamik etiketler. Sağ üst köşede, üstten alta doğru sıralanır. ========================================================== */ .product-item-v2 .prod-custom-tag, .product-item-v3 .prod-custom-tag { position: absolute; z-index: 6; font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 6px; line-height: 1.3; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); white-space: nowrap; letter-spacing: 0.03em; animation: ep-scaleIn 0.3s ease both; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; right: 6px; top: 56px; left: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .product-item-v2:hover .prod-custom-tag, .product-item-v3:hover .prod-custom-tag { transform: translateY(-1px) scale(1.03); } .img-wrapper > .prod-custom-tag { position: absolute !important; right: 6px !important; left: auto !important; bottom: auto !important; z-index: 7; } .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 56px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 80px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 104px !important; } @keyframes ep-video-ring { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); } 70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } .video-izle { position: absolute !important; top: 10px; right: 12px; bottom: auto !important; left: auto !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px 6px 8px !important; background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #b91c1c; cursor: pointer; border: 1px solid rgba(220, 38, 38, 0.15); border-radius: 20px !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.02em; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; white-space: nowrap; } .video-izle i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; font-size: 10px; padding-left: 2px; flex-shrink: 0; animation: ep-video-ring 2s ease-out infinite; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25); } .video-izle:hover { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.25); } /* Video İzle - görselin üstünde (indirim + video çakışma durumu) */ .video-izle--on-img { position: absolute !important; bottom: 8px !important; right: 8px !important; top: auto !important; left: auto !important; z-index: 7 !important; } .video-izle:hover i { background: linear-gradient(135deg, #b91c1c, #dc2626); transform: scale(1.1); box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35); } .video-izle span { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; font-size: 11px; } .new-product, .new-product-mobile { position: absolute; top: 0; left: 0; z-index: 6; } .ribbon-new-product { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #16a34a, #059669); color: #fff; padding: 5px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 16px 0 var(--ep-radius) 0; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25); } .brillant-logo { position: absolute; top: 10px; right: 10px; z-index: 6; background: rgba(255, 255, 255, 0.96); padding: 5px 8px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ============================== FAVORITE BUTTON - PRO (Global fallback) ============================== */ .add-to-fav { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--ep-text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border-bottom: 1px solid var(--ep-border-light); } .add-to-fav .my-fav-heart-selected { color: var(--ep-danger); } /* ============================== COLOR VARIANT DOTS - PRO v2 ============================== */ /* --- Variant Row Container --- */ /* --- Trust Strip (tek renk durumu) --- */ .ep-trust-strip { display: flex; align-items: center; gap: 10px; padding: 6px 16px 8px; min-height: 0; overflow: hidden; flex-wrap: nowrap; } .ep-trust-item { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: #9ca3af; white-space: nowrap; flex-shrink: 0; } .ep-trust-item i { font-size: 9px; color: #d1d5db; } .ep-trust-item--highlight { color: #16a34a; } .ep-trust-item--highlight i { color: #16a34a; } /* Yıldız puanı altın rengi */ .ep-trust-item .fa-star { color: #f59e0b !important; } /* Tek renk varsa ürün adına daha fazla satır ver */ .ep-trust-strip ~ .calculateAreaMain .prod-name, .product-item-v2:has(.ep-trust-strip) .prod-name, .product-item-v3:has(.ep-trust-strip) .prod-name { -webkit-line-clamp: 3 !important; } .ep-variant-row { display: flex; align-items: center; gap: 8px; padding: 4px 16px 6px; min-height: 0; } /* --- Variant Color Dots --- */ .ep-variant-dots { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .dot { height: 16px; width: 16px; border-radius: 50%; display: block; background-color: var(--dot-color, #ccc); border: 1.5px solid rgba(0, 0, 0, 0.08); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; position: relative; box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); flex-shrink: 0; } .dot--rainbow { background-image: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444) !important; background-color: transparent !important; } .dot--more { background: var(--ep-bg) !important; border: 1.5px solid var(--ep-border-light); color: var(--ep-text-muted); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; height: 16px; width: auto; min-width: 16px; padding: 0 3px; border-radius: 50%; line-height: 1; vertical-align: middle; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1; } .dot:hover { transform: scale(1.3); border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 2; } .dot:active { transform: scale(1.1); } /* --- Variant Count Label --- */ .ep-variant-count { font-size: 10px; font-weight: 600; color: var(--ep-text-muted); cursor: pointer; padding: 2px 8px; border-radius: 10px; background: var(--ep-bg); border: 1px solid var(--ep-border-light); transition: all 0.2s ease; white-space: nowrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0.01em; line-height: 1.4; } .ep-variant-count:hover { color: var(--ep-primary); border-color: var(--ep-primary); background: rgba(255, 106, 0, 0.04); } .ep-variant-spacer { display: none; } /* ============================== COMMENT / REVIEW SECTION - PREMIUM ============================== */ .item-comment { display: flex; align-items: center; justify-content: center; padding: 10px 14px 12px; margin-top: auto; min-height: 44px; border-top: 1px solid rgba(0,0,0,0.04); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.01) 100%); } /* Legacy table styles (kept for backward compatibility) */ .item-comment table { width: 100%; table-layout: fixed; } .item-comment table td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-comment .btn-warning { background: transparent; color: var(--ep-primary); border: 1.5px solid var(--ep-primary); border-radius: 20px; font-size: 11px; font-weight: 600; padding: 4px 12px; transition: var(--ep-transition-spring); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; } .item-comment .btn-warning:hover { background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff; box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3); border-color: transparent; transform: translateY(-1px); } .item-comment .btn-outline-success { border-radius: 20px; font-size: 11px; font-weight: 600; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; } /* --- New Premium Review Elements --- */ .ep-review-summary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; flex-wrap: wrap; } .ep-rating-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid rgba(217, 119, 6, 0.12); box-shadow: 0 1px 4px rgba(217, 119, 6, 0.08); white-space: nowrap; transition: var(--ep-transition); line-height: 1.3; } .ep-rating-badge .fa-star { color: #f59e0b; font-size: 10px; } .product-item-v2:hover .ep-rating-badge, .product-item-v3:hover .ep-rating-badge { transform: scale(1.04); box-shadow: 0 2px 10px rgba(217, 119, 6, 0.18); } .ep-review-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ep-primary) !important; font-size: 11px; font-weight: 600; text-decoration: none !important; padding: 3px 10px; border-radius: 16px; border: 1.5px solid var(--ep-primary); transition: var(--ep-transition-spring); white-space: nowrap; background: transparent; line-height: 1.3; cursor: pointer; } .ep-review-link:hover { background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff !important; border-color: transparent; box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3); transform: translateY(-1px); text-decoration: none !important; } .ep-review-link i { font-size: 12px; } .ep-seller-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ep-primary) !important; font-size: 11px; font-weight: 600; text-decoration: none !important; padding: 4px 12px; border-radius: 16px; border: 1.5px solid var(--ep-primary); transition: var(--ep-transition-spring); white-space: nowrap; background: transparent; line-height: 1.3; cursor: pointer; } .ep-seller-link:hover { background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff !important; border-color: transparent; box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3); transform: translateY(-1px); text-decoration: none !important; } .ep-seller-link i { font-size: 11px; } .ep-new-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #059669; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 16px; border: 1px solid rgba(5, 150, 105, 0.15); white-space: nowrap; transition: var(--ep-transition); line-height: 1.3; } .ep-new-badge i { font-size: 11px; } .product-item-v2:hover .ep-new-badge, .product-item-v3:hover .ep-new-badge { transform: scale(1.03); box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15); } .ep-sales-count { display: inline-flex; align-items: center; gap: 3px; color: var(--ep-text-muted); font-size: 10px; font-weight: 600; white-space: nowrap; letter-spacing: 0.01em; } .ep-sales-count i { font-size: 9px; color: var(--ep-success); } /* ============================== DISCOUNT PANEL (on product card) - PRO ============================== */ [id="discountWrapperProdItemNew"] { border-radius: 0 !important; margin-top: auto; padding: 8px 12px !important; font-size: 12px !important; line-height: 1.4; height: auto !important; overflow: hidden; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #991b1b 75%, #7f1d1d 100%) !important; background-size: 300% 100% !important; color: #fff !important; font-weight: 700; height: auto !important; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; position: relative; overflow: hidden; border-radius: 0 0 var(--ep-radius-xl) var(--ep-radius-xl); animation: ep-urgency-pulse 4s ease-in-out infinite; } .product-item-v2 [id="discountWrapperProdItemNew"]::before, .product-item-v3 [id="discountWrapperProdItemNew"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); animation: ep-shimmer 2.5s infinite; } .product-item-v2 [id="discountWrapperProdItemNew"]::after, .product-item-v3 [id="discountWrapperProdItemNew"]::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); } /* --- Campaign / Discount Wrapper --- */ .discount-wrapper { display: flex; align-items: center; gap: 10px; padding: 8px 14px; } .discount-percent { background: linear-gradient(135deg, #e53935, #d32f2f); color: #fff; font-size: 18px; font-weight: 800; padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: baseline; gap: 1px; box-shadow: 0 2px 8px rgba(229, 57, 53, 0.35); } .discount-percent small { font-size: 12px; } .discount-price-wrapper { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.3; } .prod-old-price { color: var(--ep-text-muted); font-size: 13px; font-weight: 500; } .prod-price { color: var(--ep-text); font-size: 18px; font-weight: 800; } .campaign-wrapper { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; background: linear-gradient(135deg, #fef3c7, #fde68a); border-radius: 0; } .campaign-text { font-size: 12px; color: var(--ep-text); } /* --- Pro Discount Panel - URGENCY DESIGN --- */ @keyframes ep-urgency-pulse { 0%, 100% { background-position: 0% 50%; box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0); } 50% { background-position: 100% 50%; box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.15); } } @keyframes ep-timer-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.97); } } @keyframes ep-bolt-flash { 0%, 80%, 100% { opacity: 1; transform: scale(1); } 90% { opacity: 0.5; transform: scale(1.2); } } .ep-discount-panel { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #991b1b 75%, #7f1d1d 100%); background-size: 300% 100%; color: #fff; font-weight: 700; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; margin-top: auto; min-height: 52px; overflow: hidden; border-radius: 0 0 var(--ep-radius-xl) var(--ep-radius-xl); position: relative; animation: ep-urgency-pulse 4s ease-in-out infinite; } .ep-discount-panel--empty { background: transparent !important; min-height: 0 !important; padding: 0 !important; height: 0 !important; animation: none !important; } /* --- Product Detail Page Discount Panel --- */ .ep-discount-panel--detail { border-radius: 10px; margin-top: 0; min-height: auto; height: auto !important; padding: 12px 16px; } .ep-discount-text { font-size: 10px; font-weight: 700; color: #fde68a; text-transform: uppercase; letter-spacing: 0.1em; width: 100%; text-align: center; margin-bottom: 2px; } /* New discount row layout */ .ep-discount-row { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; } /* Discount badge (big percentage) */ .ep-discount-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; padding: 4px 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); flex-shrink: 0; } .ep-discount-badge > i { color: #fbbf24; font-size: 13px; animation: ep-bolt-flash 2s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6)); } .ep-discount-badge > span { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -0.02em; text-shadow: 0 1px 3px rgba(0,0,0,0.3); line-height: 1; } /* Discount info (label + timer) */ .ep-discount-info { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; } .ep-discount-label { font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1; } .ep-discount-timer { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: 0.02em; line-height: 1; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 4px 8px; margin-top: 2px; animation: ep-timer-blink 1.2s ease-in-out infinite; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .ep-discount-timer i { font-size: 10px; color: #fbbf24; animation: ep-bolt-flash 1.5s ease-in-out infinite; } /* Legacy support */ .ep-discount-rate { font-size: 15px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } .ep-discount-rate i { color: #fbbf24; font-size: 12px; } /* Responsive discount panel */ @media (max-width: 767px) { .ep-discount-panel { padding: 8px 8px; min-height: 44px; border-radius: 0 0 var(--ep-radius-lg) var(--ep-radius-lg); } .ep-discount-badge > span { font-size: 15px; } .ep-discount-badge > i { font-size: 11px; } .ep-discount-badge { padding: 3px 8px; border-radius: 6px; } .ep-discount-label { font-size: 10px; } .ep-discount-timer { font-size: 9px; padding: 3px 6px; border-radius: 5px; } .ep-discount-text { font-size: 9px; } .ep-discount-row { gap: 8px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { border-radius: 0 0 var(--ep-radius-lg) var(--ep-radius-lg); } } @media (max-width: 480px) { .ep-discount-panel { padding: 6px 6px; min-height: 40px; gap: 2px; border-radius: 0 0 8px 8px; } .ep-discount-badge > span { font-size: 13px; } .ep-discount-badge > i { font-size: 10px; } .ep-discount-badge { padding: 2px 6px; border-radius: 5px; gap: 3px; } .ep-discount-label { font-size: 9px; letter-spacing: 0.08em; } .ep-discount-timer { font-size: 8px; padding: 2px 5px; border-radius: 4px; gap: 3px; } .ep-discount-timer i { font-size: 7px; } .ep-discount-text { font-size: 8px; } .ep-discount-row { gap: 6px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { border-radius: 0 0 8px 8px; } } /* ============================== PAGINATION – BS5 Flexbox ============================== */ .ep-pagination-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0; margin-top: 12px; } .ep-pagination-prev, .ep-pagination-next { flex: 0 0 auto; } .ep-pagination-center { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; } .ep-pagination-info { font-size: 14px; font-weight: 600; color: var(--ep-text-light, #555); letter-spacing: 0.3px; } /* Önceki/Sonraki buton sarmalayıcı ul'leri sıfırla */ .ep-pagination-wrapper .ep-pagination-prev .pagination, .ep-pagination-wrapper .ep-pagination-next .pagination { display: flex; margin: 0; padding: 0; list-style: none; border: none; background: none; } /* Önceki/Sonraki butonlar — li > a stillerini devre dışı bırak */ .ep-pagination-wrapper .ep-pagination-prev .pagination > li, .ep-pagination-wrapper .ep-pagination-next .pagination > li { display: flex; list-style: none; } .ep-pagination-wrapper .ep-pagination-prev .pagination > li > a, .ep-pagination-wrapper .ep-pagination-next .pagination > li > a { min-width: auto; height: auto; border: none; border-radius: 0; background: none; padding: 0; font-size: inherit; font-weight: inherit; box-shadow: none; } .ep-pagination-prev .btn-success, .ep-pagination-next .btn-success { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ep-primary, #ff6a00), var(--ep-primary-light, #ff9a33)) !important; border: none !important; border-radius: 10px !important; padding: 10px 22px !important; font-weight: 600; font-size: 14px; color: #fff !important; box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.2px; text-decoration: none; white-space: nowrap; line-height: 1.5; } .ep-pagination-prev .btn-success:hover, .ep-pagination-next .btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 106, 0, 0.35); } .ep-pagination-prev .btn-success:active, .ep-pagination-next .btn-success:active { transform: translateY(0); } /* ============================== SEO TEXT ============================== */ /* --- SEO Text Row — Pro Tasarım (daraltılabilir) --- */ @keyframes ep-seo-row-accent { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .ep-seo-text-row { margin-top: 24px; } .ep-seo-text-row .well { line-height: 1.9; font-size: 12.5px; color: #6b7a8d; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; max-height: 160px; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .ep-seo-text-row .well.ep-seo--expanded { max-height: 5000px; } /* Sol accent çizgisi */ .ep-seo-text-row .well::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #FF7F00 0%, #ff9a3c 40%, #ffc78e 100%); border-radius: 16px 0 0 16px; z-index: 3; animation: ep-seo-row-accent 3s ease-in-out infinite; } /* Fade-out gradient (daraltılmış halde) */ .ep-seo-text-row .well::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 35%, rgba(255,255,255,0.95) 65%, rgba(255,255,255,1) 100%); pointer-events: none; transition: opacity 0.5s ease; z-index: 2; } .ep-seo-text-row .well.ep-seo--expanded::after { opacity: 0; } /* İç padding (::before sol accent olduğu için sol'da biraz fazla) */ .ep-seo-text-row .well > * { padding-left: 28px; padding-right: 24px; } .ep-seo-text-row .well > *:first-child { padding-top: 20px; } .ep-seo-text-row .well > *:last-child { padding-bottom: 20px; } /* Başlıklar */ .ep-seo-text-row .well h2 { color: #1a202c; font-size: 15px; font-weight: 800; margin-top: 18px; margin-bottom: 10px; padding-bottom: 6px; padding-left: 40px; border-left: 3px solid #FF7F00; display: block; letter-spacing: 0.2px; } .ep-seo-text-row .well h3 { color: #2d3748; font-size: 13.5px; font-weight: 700; margin-top: 14px; margin-bottom: 8px; padding-left: 38px; border-left: 2px solid rgba(255, 127, 0, 0.4); display: block; } /* Linkler */ .ep-seo-text-row .well a { color: #4a6fa5 !important; text-decoration: none !important; font-weight: 500; transition: all 0.2s ease; border-bottom: 1px solid transparent; } .ep-seo-text-row .well a:hover { color: #FF7F00 !important; border-bottom-color: rgba(255, 127, 0, 0.3); } /* Listeler */ .ep-seo-text-row .well ul, .ep-seo-text-row .well ol { padding-left: 34px; margin-bottom: 10px; list-style: none; } .ep-seo-text-row .well li { margin-bottom: 5px; position: relative; padding-left: 16px; } .ep-seo-text-row .well li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, #FF7F00, #ff9a3c); box-shadow: 0 0 4px rgba(255, 127, 0, 0.2); } /* Bold metin */ .ep-seo-text-row .well strong, .ep-seo-text-row .well b { color: #2d3748; font-weight: 700; } /* Görseller */ .ep-seo-text-row .well img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; } /* === Sosyal medya ikon görselleri (DB'den gelen küçük ikonlar) === */ .ep-seo-text-row .well a > img, .ep-seo-text-row .well a > img[width] { width: 32px !important; height: 32px !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; margin: 0 2px !important; vertical-align: middle !important; object-fit: contain !important; background: #f5f6f8 !important; padding: 4px !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } .ep-seo-text-row .well a:hover > img { transform: scale(1.12) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important; border-color: rgba(255, 127, 0, 0.2) !important; } /* Sosyal link chip tasarımı */ .ep-seo-text-row .well a[href*="facebook"], .ep-seo-text-row .well a[href*="instagram"], .ep-seo-text-row .well a[href*="youtube"], .ep-seo-text-row .well a[href*="pinterest"], .ep-seo-text-row .well a[href*="twitter"], .ep-seo-text-row .well a[href*="x.com"], .ep-seo-text-row .well a[href*="plus.google"] { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px 6px 6px !important; border-radius: 10px !important; background: linear-gradient(135deg, #f8f9fb, #f0f2f5) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; margin: 4px 5px !important; transition: all 0.3s ease !important; font-size: 12px !important; font-weight: 600 !important; color: #4a5568 !important; text-decoration: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; } .ep-seo-text-row .well a[href*="facebook"]:hover, .ep-seo-text-row .well a[href*="instagram"]:hover, .ep-seo-text-row .well a[href*="youtube"]:hover, .ep-seo-text-row .well a[href*="pinterest"]:hover, .ep-seo-text-row .well a[href*="twitter"]:hover, .ep-seo-text-row .well a[href*="x.com"]:hover, .ep-seo-text-row .well a[href*="plus.google"]:hover { background: linear-gradient(135deg, #fff5eb, #fff0e0) !important; border-color: rgba(255, 127, 0, 0.2) !important; color: #FF7F00 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(255, 127, 0, 0.12) !important; } /* Platform özel hover renkleri */ .ep-seo-text-row .well a[href*="facebook"]:hover { border-color: rgba(24, 119, 242, 0.3) !important; color: #1877f2 !important; } .ep-seo-text-row .well a[href*="instagram"]:hover { border-color: rgba(225, 48, 108, 0.3) !important; color: #e1306c !important; } .ep-seo-text-row .well a[href*="youtube"]:hover { border-color: rgba(255, 0, 0, 0.3) !important; color: #ff0000 !important; } .ep-seo-text-row .well a[href*="pinterest"]:hover { border-color: rgba(189, 8, 28, 0.3) !important; color: #bd081c !important; } /* Devamını Oku butonu (JS ile eklenir) */ .ep-seo-text-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 0; border: none; border-top: 1px solid rgba(0, 0, 0, 0.04); background: linear-gradient(to bottom, #fafbfc, #f5f6f8); color: #8896a6; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.4px; text-transform: uppercase; position: relative; z-index: 3; border-radius: 0 0 16px 16px; } .ep-seo-text-toggle::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 127, 0, 0.3), transparent); border-radius: 2px; } .ep-seo-text-toggle:hover { color: #FF7F00; background: linear-gradient(to bottom, #fff8f0, #fff3e6); } .ep-seo-text-toggle i { font-size: 9px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.04); } .ep-seo-text-toggle:hover i { background: rgba(255, 127, 0, 0.1); } .ep-seo-text-toggle.ep-seo--expanded i { transform: rotate(180deg); } /* ============================== EMPTY STATE - Premium Design ============================== */ .ep-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 32px; text-align: center; background: linear-gradient(135deg, #fff 0%, var(--ep-bg-warm) 100%); border: 2px dashed rgba(255, 106, 0, 0.15); border-radius: var(--ep-radius-2xl); margin: 20px 0; animation: ep-fadeInUp 0.5s ease both; } .ep-empty-state__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,106,0,0.08), rgba(255,106,0,0.04)); color: var(--ep-primary); font-size: 28px; margin-bottom: 20px; animation: ep-float 3s ease-in-out infinite; } .ep-empty-state__title { font-size: 20px; font-weight: 700; color: var(--ep-text); margin: 0 0 8px 0; } .ep-empty-state__desc { font-size: 14px; color: var(--ep-text-muted); max-width: 400px; line-height: 1.6; margin: 0 0 20px 0; } .ep-empty-state__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-light)); color: #fff !important; text-decoration: none !important; border-radius: var(--ep-radius-lg); font-weight: 600; font-size: 14px; box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3); transition: var(--ep-transition-spring); } .ep-empty-state__btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(255, 106, 0, 0.4); color: #fff !important; } /* ============================== ALERT BOX ============================== */ .alert-success.alert-white { background: var(--ep-bg-white); border: 1px solid #d4edda; border-radius: var(--ep-radius); padding: 12px 16px; font-size: 14px; box-shadow: var(--ep-shadow-sm); display: flex; align-items: center; gap: 10px; } .alert-success.alert-white > .icon { flex-shrink: 0; } .margin-bottom-5px { margin-bottom: 12px; } /* ============================== PRODUCT ADMIN PANEL (inline admin controls) ============================== */ .ep-prod-admin-panel { margin-top: 4px; background: #f8f9fa; border-top: 1px solid var(--ep-border-light, #e9ecef); font-size: 11px; } .ep-admin-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 4px 8px; background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600; color: #6c757d; transition: color 0.2s, background 0.2s; } .ep-admin-toggle:hover { color: #495057; background: #e9ecef; } .ep-admin-toggle i { font-size: 9px; transition: transform 0.2s; } .ep-admin-body { padding: 6px; } .ep-prod-admin-panel .btn-sm { font-size: 10px; padding: 2px 6px; line-height: 1.4; } .ep-prod-admin-panel .badge { font-size: 10px; } .ep-prod-admin-panel .form-check-input { width: 14px; height: 14px; margin-top: 1px; } .ep-prod-admin-panel .form-check-label { font-size: 11px; line-height: 1.3; } /* ============================== LEFT BANNER CONTAINER ============================== */ .left-banner-container { overflow-y: auto; max-height: 3000px; scrollbar-width: thin; } .left-banner-container::-webkit-scrollbar { width: 4px; } .left-banner-container::-webkit-scrollbar-thumb { background: var(--ep-border); border-radius: 4px; } /* ============================== CATEGORY AUTO BANNER (sol sidebar ürün kartları) BS5 flex layout uyumu ============================== */ .category-auto-banner { position: relative; margin-bottom: 12px; } .category-auto-banner:last-child { margin-bottom: 0; } .left-banner-container .product-item-v2, .left-banner-container .product-item-v3 { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .left-banner-container .product-item-v2 .img-wrapper, .left-banner-container .product-item-v3 .img-wrapper { max-width: 100%; } .left-banner-container .product-item-v2 .img-wrapper img, .left-banner-container .product-item-v3 .img-wrapper img { width: 100%; height: auto; } .left-banner-container .product-item-v2 .prod-name, .left-banner-container .product-item-v3 .prod-name { font-size: 11px; } .left-banner-container .product-item-v2 .price-wrapper, .left-banner-container .product-item-v3 .price-wrapper { font-size: 12px; } .left-banner-container .product-item-v2 .baloon-price-header, .left-banner-container .product-item-v3 .baloon-price-header { font-size: 11px; } .left-banner-container .product-item-v2 .ep-discount-panel, .left-banner-container .product-item-v3 .ep-discount-panel { font-size: 11px; padding: 4px 6px; } /* ============================== SOL SIDEBAR BANNER KARTI - PRO ============================== */ @keyframes ep-side-banner-shine { 0% { left: -100%; } 100% { left: 100%; } } .ep-side-banner { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease; max-width: 90%; } .ep-side-banner:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(255, 106, 0, 0.18); } .ep-side-banner__link { display: block; text-decoration: none !important; color: inherit; } /* --- Eperde Önerisi Badge (side banner) --- */ .ep-side-banner .ep-recommendation-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: #f0c040; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; position: absolute; top: 10px; left: 10px; z-index: 5; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 8px rgba(15, 52, 96, 0.25); } .ep-side-banner .ep-recommendation-badge::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(240,192,64,0.08) 40%, rgba(240,192,64,0.15) 50%, rgba(240,192,64,0.08) 60%, transparent 100%); background-size: 200% 100%; animation: ep-badge-shimmer 3s ease-in-out infinite; pointer-events: none; } .ep-side-banner .ep-recommendation-badge i { font-size: 10px; color: #f0c040; filter: drop-shadow(0 0 3px rgba(240, 192, 64, 0.4)); } .ep-side-banner .ep-recommendation-badge span { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1; } /* --- Görsel Alanı --- */ .ep-side-banner__img { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #f5f5f5; max-height: 280px; } .ep-side-banner__img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 280px; object-fit: contain; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ep-side-banner:hover .ep-side-banner__img img { transform: scale(1.06); } /* Gradient overlay on image bottom */ .ep-side-banner__img::after { display: none; } /* Shine effect on hover */ .ep-side-banner__img::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); z-index: 3; transform: skewX(-15deg); pointer-events: none; } .ep-side-banner:hover .ep-side-banner__img::before { animation: ep-side-banner-shine 0.6s ease forwards; } /* --- Fiyat Etiketi --- */ .ep-side-banner__price-tag { position: absolute; bottom: 10px; left: 10px; z-index: 4; display: flex; align-items: baseline; gap: 3px; padding: 6px 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } .ep-side-banner__price { font-size: 20px; font-weight: 800; color: var(--ep-primary); letter-spacing: -0.03em; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ep-side-banner__currency { font-size: 11px; font-weight: 600; color: var(--ep-text-muted); } /* --- Kampanya Sayacı --- */ .ep-side-banner__campaign { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(220, 38, 38, 0.9); color: #fff; font-size: 10px; font-weight: 600; border-radius: 6px; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); } .ep-side-banner__campaign i { font-size: 9px; } /* --- Alt Bilgi Alanı --- */ .ep-side-banner__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #fff; } .ep-side-banner__name { font-size: 12px; font-weight: 600; color: var(--ep-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ep-side-banner__cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: linear-gradient(135deg, var(--ep-primary) 0%, #ee5a24 100%); color: #fff; font-size: 11px; font-weight: 700; border-radius: 8px; text-align: center; justify-content: center; letter-spacing: 0.02em; transition: all 0.25s ease; box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25); } .ep-side-banner:hover .ep-side-banner__cta { background: linear-gradient(135deg, #ee5a24 0%, var(--ep-primary) 100%); box-shadow: 0 4px 16px rgba(255, 106, 0, 0.35); transform: translateY(-1px); } .ep-side-banner__cta i { font-size: 10px; transition: transform 0.25s ease; } .ep-side-banner:hover .ep-side-banner__cta i { transform: translateX(3px); } /* ============================== SORT MENU ============================== */ .sortMenu .list-group-item { padding: 0px !important; } .sortMenu a { display: block; padding: 8px 13px; color: var(--ep-text); text-decoration: none !important; } /* ============================================ RESPONSIVE BREAKPOINTS - PRO LEVEL BS5 Grid: col-xl-4 col-lg-4 col-md-6 col-6 Her ekran ölçüsü için ayrı ayrı tasarım ============================================ */ /* ========== 4K / Ultra Wide (2560px+) ========== */ @media (min-width: 2560px) { .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 16px; padding: 16px 20px 8px; min-height: 56px; max-height: 68px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 28px; } .baloon-price-row-last-price { font-size: 26px; } .baloon-price-value { font-size: 28px; } .baloon-price-rate-row { height: 42px; min-width: 56px; font-size: 16px; border-radius: 12px; } .baloon-price-header { padding: 12px 20px 8px; } .baloon-price-footer { padding: 14px 18px; margin: 6px 16px 12px; border-radius: 14px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 44px; height: 44px; font-size: 18px; top: 14px; right: 14px; } .item-comment { min-height: 52px; padding: 10px 20px 14px; } .ep-rating-badge { font-size: 14px; padding: 5px 12px; border-radius: 22px; } .ep-review-link { font-size: 13px; padding: 5px 16px; } .ep-seller-link { font-size: 13px; padding: 5px 16px; } .ep-new-badge { font-size: 13px; padding: 5px 16px; } .ep-sales-count { font-size: 12px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 13px; padding: 6px 14px; border-radius: 8px; } .product-item-v2 .prod-custom-tag, .product-item-v3 .prod-custom-tag { font-size: 10px; padding: 4px 10px; border-radius: 6px; } .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 50px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 72px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 94px !important; } .dot { height: 18px; width: 18px; } .ep-variant-row { padding: 4px 18px 6px; gap: 8px; } .item-comment .btn-warning { font-size: 13px; padding: 6px 16px; } #prods.row > div[class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 24px !important; } } /* ========== Large Desktop (1920px - 2559px) ========== */ @media (min-width: 1920px) and (max-width: 2559px) { .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 14px; padding: 14px 16px 6px; min-height: 48px; max-height: 58px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 22px; } .baloon-price-row-last-price { font-size: 20px; } .baloon-price-value { font-size: 22px; } .baloon-price-rate-row { height: 36px; min-width: 48px; font-size: 15px; } #prods.row > div[class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 20px !important; } } /* ========== Standard Desktop (1200px - 1919px) ========== */ @media (min-width: 1200px) and (max-width: 1919px) { .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 13px; padding: 12px 14px 6px; min-height: 44px; max-height: 52px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 18px; } .baloon-price-row-last-price { font-size: 17px; } .baloon-price-value { font-size: 18px; } #prods.row > div[class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 16px !important; } } /* ========== Small Desktop / Laptop (992px - 1199px) ========== */ @media (min-width: 992px) and (max-width: 1199px) { .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 12px; padding: 10px 12px 4px; min-height: 38px; max-height: 46px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 17px; } .baloon-price-row-last-price { font-size: 16px; } .baloon-price-row-first-price { font-size: 11px; } .baloon-price-value { font-size: 17px; } .baloon-price-rate-row { height: 30px; min-width: 40px; font-size: 12px; } .baloon-price-header { padding: 6px 12px 4px; gap: 8px; } .baloon-price-footer { padding: 8px 10px; margin: 3px 8px 6px; border-radius: 10px; } .ep-card-opts-slider { height: 16px; } .ep-card-opts-slider__item { font-size: 11px; line-height: 16px; } .ep-card-opts-icon { font-size: 10px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 34px; height: 34px; font-size: 13px; top: 8px; right: 8px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 9px; padding: 3px 8px; } .product-item-v2 .prod-custom-tag, .product-item-v3 .prod-custom-tag { font-size: 8px; padding: 3px 7px; border-radius: 4px; max-width: calc(100% - 46px); overflow: hidden; text-overflow: ellipsis; right: 4px; } .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 42px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 60px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 78px !important; } .dot { height: 14px; width: 14px; } .ep-variant-row { padding: 3px 12px 4px; gap: 6px; } .ep-variant-count { font-size: 9px; padding: 1px 6px; } #prods.row > div[class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 12px !important; } } /* ========== Tablet Portrait (768px - 991px) — BS5: col-md-6 = 2 kolon ========== */ @media (min-width: 768px) and (max-width: 991px) { .left-menu-container { position: static; margin-bottom: 20px; } #sort-row { justify-content: center; } .ep-pagination-wrapper { flex-direction: row; align-items: center; } .product-item-v2, .product-item-v3 { border-radius: var(--ep-radius-lg); } .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { border-radius: var(--ep-radius-lg) var(--ep-radius-lg) 0 0; } .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 13px; padding: 10px 12px 4px; min-height: 38px; max-height: 48px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 18px; } .product-item-v2 .priceText > span:first-child, .product-item-v3 .priceText > span:first-child { font-size: 10px; } .baloon-price-row-last-price { font-size: 17px; } .baloon-price-row-first-price { font-size: 11px; } .baloon-price-value { font-size: 18px; } .baloon-price-rate-row { height: 30px; min-width: 40px; font-size: 12px; border-radius: 8px; } .baloon-price-header { padding: 6px 12px 4px; gap: 8px; } .baloon-price-footer { padding: 8px 10px; margin: 3px 8px 6px; border-radius: 10px; } .baloon-green-text { font-size: 10px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 34px; height: 34px; font-size: 13px; top: 8px; right: 8px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 9px; padding: 3px 8px; } .dot { height: 14px; width: 14px; } .ep-variant-row { padding: 3px 10px 4px; gap: 5px; } .ep-variant-count { font-size: 9px; padding: 1px 6px; } .item-comment { min-height: 36px; padding: 5px 10px 8px; } .item-comment .btn-warning { font-size: 10px; padding: 3px 10px; } .item-comment .btn-outline-success { font-size: 10px; padding: 3px 10px; } .ep-rating-badge { font-size: 11px; padding: 2px 6px; } .ep-review-link { font-size: 10px; padding: 2px 8px; } .ep-seller-link { font-size: 10px; padding: 3px 10px; } .ep-new-badge { font-size: 10px; padding: 3px 10px; } .ep-sales-count { font-size: 9px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { min-height: 44px; padding: 6px 10px !important; font-size: 11px !important; } .product-item-v2 > a > span[id^="prodVariant_"], .product-item-v3 > a > span[id^="prodVariant_"] { min-height: 22px; padding: 3px 8px; } #prods.row > div[class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; margin-bottom: 12px !important; } } /* ========== Mobile Landscape (576px - 767px) — BS5: col-6 = 2 kolon ========== */ @media (min-width: 576px) and (max-width: 767px) { #sitePath.breadcrumb { padding: 10px 12px; font-size: 12px; } .cat-header h1 { font-size: 18px !important; } .cat-header__icon { width: 36px; height: 36px; min-width: 36px; font-size: 15px; } #sort-row { border-radius: 30px; min-height: 40px; } #sort-row .sort-btn { padding: 6px 12px; font-size: 11px; } .sort-row__options { gap: 3px; padding: 4px 5px; } .sort-row__page { height: 40px; padding: 0 12px; } .product-item-v2, .product-item-v3 { border-radius: var(--ep-radius-lg); } .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { border-radius: var(--ep-radius-lg) var(--ep-radius-lg) 0 0; } .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 12px; padding: 8px 10px 4px; min-height: 34px; max-height: 42px; } .product-item-v2 .price-wrapper, .product-item-v3 .price-wrapper { padding: 4px 10px; } .product-item-v2 .priceText > span:first-child, .product-item-v3 .priceText > span:first-child { font-size: 9px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 15px; } .baloon-price-row-last-price { font-size: 14px; } .baloon-price-row-first-price { font-size: 10px; } .baloon-price-value { font-size: 15px; } .baloon-price-rate-row { height: 26px; min-width: 36px; font-size: 11px; border-radius: 5px; } .baloon-price-header { padding: 4px 10px 2px; gap: 6px; } .baloon-price-footer { padding: 6px 8px; margin: 2px 8px 6px; border-radius: 8px; } .ep-card-opts-slider { height: 15px; } .ep-card-opts-slider__item { font-size: 10px; line-height: 15px; } .ep-card-opts-icon { font-size: 9px; } .baloon-green-text { font-size: 9px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 32px; height: 32px; font-size: 12px; top: 8px; right: 8px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 9px; padding: 3px 6px; } .product-item-v2 .prod-custom-tag, .product-item-v3 .prod-custom-tag { font-size: 8px; padding: 2px 6px; border-radius: 4px; max-width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; right: 4px; } .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 42px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 60px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 78px !important; } .dot { height: 13px; width: 13px; border-width: 1px; } .ep-variant-row { padding: 2px 8px 4px; gap: 4px; } .ep-variant-count { font-size: 8px; padding: 1px 5px; } .item-comment { min-height: 34px; padding: 4px 8px 6px; } .item-comment .btn-warning { font-size: 10px; padding: 3px 8px; } .item-comment .btn-outline-success { font-size: 10px; padding: 3px 8px; } .ep-rating-badge { font-size: 10px; padding: 2px 6px; } .ep-rating-badge .fa-star { font-size: 9px; } .ep-review-link { font-size: 10px; padding: 2px 8px; } .ep-seller-link { font-size: 10px; padding: 3px 8px; } .ep-new-badge { font-size: 10px; padding: 3px 8px; } .ep-sales-count { font-size: 9px; } .ep-review-summary { gap: 4px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { min-height: 40px; padding: 5px 8px !important; font-size: 11px !important; } .product-item-v2 > a > span[id^="prodVariant_"], .product-item-v3 > a > span[id^="prodVariant_"] { min-height: 20px; padding: 3px 6px; gap: 3px; } .ep-pagination-prev .btn-success, .ep-pagination-next .btn-success { padding: 8px 14px !important; font-size: 13px; } #prods.row > div[class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; margin-bottom: 10px !important; } } /* ========== Mobile Portrait (481px - 575px) ========== */ @media (min-width: 481px) and (max-width: 575px) { #sitePath.breadcrumb { padding: 8px 10px; font-size: 11px; } .cat-header { padding: 12px; gap: 8px; } .cat-header__icon { width: 30px; height: 30px; min-width: 30px; font-size: 13px; } .cat-header h1 { font-size: 16px !important; } .cat-header__badge { font-size: 10px; padding: 4px 8px; } #sort-row { border-radius: 26px; min-height: 38px; } #sort-row .sort-btn { padding: 5px 10px; font-size: 10px; } #sort-row .sort-btn i { display: none; } .sort-row__options { gap: 2px; padding: 4px 5px; } .sort-row__page { padding: 0 10px; height: 38px; } .sort-row__page > i { display: none; } .product-item-v2, .product-item-v3 { border-radius: 10px; } .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { border-radius: 10px 10px 0 0; } .product-item-v2:hover, .product-item-v3:hover { box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08); } .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 11px; padding: 8px 8px 3px; min-height: 30px; max-height: 38px; -webkit-line-clamp: 2; } .product-item-v2 .price-wrapper, .product-item-v3 .price-wrapper { padding: 2px 8px; } .product-item-v2 .priceText > span:first-child, .product-item-v3 .priceText > span:first-child { font-size: 9px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 14px; } .baloon-price-row-last-price { font-size: 13px; } .baloon-price-row-first-price { font-size: 9px; } .baloon-price-value { font-size: 14px; } .baloon-price-rate-row { height: 24px; min-width: 34px; font-size: 10px; border-radius: 5px; padding: 2px 5px; } .baloon-price-header { padding: 4px 8px 2px; gap: 5px; } .baloon-price-footer { padding: 6px 8px; margin: 2px 6px 4px; border-radius: 6px; } .ep-card-opts-slider { height: 14px; } .ep-card-opts-slider__item { font-size: 9px; line-height: 14px; } .ep-card-opts-icon { font-size: 8px; } .baloon-green-text { font-size: 9px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 30px; height: 30px; font-size: 11px; top: 6px; right: 6px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 8px; padding: 2px 5px; border-radius: 4px; } .iade-garantisi { bottom: 6px; right: 6px; top: auto; left: auto; } .sponsorlu { bottom: 6px; left: 6px; top: auto; right: auto; } .storDahil { top: 28px; left: 6px; } .genis-en-kumas { top: 6px !important; left: 6px !important; } .img-wrapper > .next-day-cargo, .img-wrapper > .same-day-cargo { top: 6px !important; left: 6px !important; } .img-wrapper > .new-product ~ .genis-en-kumas { top: 24px !important; } .img-wrapper > .new-product ~ .next-day-cargo, .img-wrapper > .new-product ~ .same-day-cargo { top: 24px !important; } .img-wrapper > .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .genis-en-kumas ~ .same-day-cargo { top: 24px !important; } .img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo { top: 42px !important; } .dot { height: 12px; width: 12px; border-width: 1px; } .ep-variant-row { padding: 2px 8px 3px; gap: 4px; } .ep-variant-dots { gap: 3px; } .ep-variant-count { font-size: 8px; padding: 1px 5px; } .item-comment { min-height: 30px; padding: 4px 6px 6px; } .ep-rating-badge { font-size: 9px; padding: 2px 5px; } .ep-rating-badge .fa-star { font-size: 8px; } .ep-review-link { font-size: 9px; padding: 2px 6px; } .ep-seller-link { font-size: 9px; padding: 2px 8px; } .ep-new-badge { font-size: 9px; padding: 2px 8px; } .ep-sales-count { font-size: 8px; } .ep-review-summary { gap: 3px; } .remove-filter-button { font-size: 11px; padding: 4px 10px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { min-height: 38px; padding: 5px 6px !important; font-size: 10px !important; } .product-item-v2 > a > span[id^="prodVariant_"], .product-item-v3 > a > span[id^="prodVariant_"] { min-height: 18px; padding: 2px 6px; gap: 3px; } #prods.row > div[class*="col-"] { padding-left: 4px !important; padding-right: 4px !important; margin-bottom: 8px !important; } .ep-pagination-prev .btn-success, .ep-pagination-next .btn-success { padding: 6px 12px !important; font-size: 12px; } } /* ========== Small Mobile (320px - 480px) ========== */ @media (max-width: 480px) { #sitePath.breadcrumb { padding: 6px 8px; font-size: 10px; } .cat-header { padding: 10px; gap: 6px; } .cat-header__icon { display: none; } .cat-header h1 { font-size: 15px !important; } .cat-header__badge { font-size: 9px; padding: 3px 6px; } .cat-header__badge i { display: none; } #sort-row { min-height: 36px; border-radius: 22px; } #sort-row .sort-btn { padding: 4px 8px; font-size: 9px; } #sort-row .sort-btn i { display: none; } .sort-row__options { gap: 2px; padding: 3px 4px; } .sort-row__page { padding: 0 8px; height: 36px; font-size: 11px; } .sort-row__page > i { display: none; } .sort-row__page-current { font-size: 12px; } .product-item-v2, .product-item-v3 { border-radius: 8px; border-width: 1px; } .product-item-v2 .img-wrapper, .product-item-v3 .img-wrapper { border-radius: 8px 8px 0 0; } .product-item-v2:hover, .product-item-v3:hover { box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08); } .product-item-v2 .prod-name, .product-item-v3 .prod-name { font-size: 10px; padding: 6px 6px 2px; min-height: 26px; max-height: 34px; -webkit-line-clamp: 2; line-height: 1.35; } .product-item-v2 .price-wrapper, .product-item-v3 .price-wrapper { padding: 2px 6px; } .product-item-v2 .price-area, .product-item-v3 .price-area { padding: 4px 6px 6px; } .product-item-v2 .priceText > span:first-child, .product-item-v3 .priceText > span:first-child { font-size: 8px; } .product-item-v2 .priceText > span:last-child, .product-item-v3 .priceText > span:last-child { font-size: 13px; } .baloon-price-row-last-price { font-size: 12px; } .baloon-price-row-first-price { font-size: 9px; } .baloon-price-value { font-size: 13px; } .baloon-price-rate-row { height: 22px; min-width: 30px; font-size: 9px; border-radius: 4px; padding: 2px 4px; } .baloon-price-header { padding: 3px 6px 2px; gap: 4px; } .baloon-price-footer { padding: 5px 6px; margin: 2px 4px 4px; border-radius: 6px; } .baloon-green-text { font-size: 8px; } .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { width: 28px; height: 28px; font-size: 10px; top: 4px; right: 4px; } .product-item-v2 .iade-garantisi, .product-item-v2 .sponsorlu, .product-item-v2 .storDahil, .product-item-v2 .genis-en-kumas, .product-item-v2 .next-day-cargo, .product-item-v2 .same-day-cargo, .product-item-v3 .iade-garantisi, .product-item-v3 .sponsorlu, .product-item-v3 .storDahil, .product-item-v3 .genis-en-kumas, .product-item-v3 .next-day-cargo, .product-item-v3 .same-day-cargo { font-size: 7px; padding: 2px 4px; border-radius: 3px; } .product-item-v2 .prod-custom-tag, .product-item-v3 .prod-custom-tag { font-size: 7px; padding: 2px 5px; border-radius: 3px; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; right: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 34px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 50px !important; } .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 66px !important; } .iade-garantisi { bottom: 4px; right: 4px; top: auto; left: auto; } .sponsorlu { bottom: 4px; left: 4px; top: auto; right: auto; } .storDahil { top: 22px; left: 4px; } .genis-en-kumas { top: 4px !important; left: 4px !important; } .img-wrapper > .next-day-cargo, .img-wrapper > .same-day-cargo { top: 4px !important; left: 4px !important; } .img-wrapper > .new-product ~ .genis-en-kumas { top: 20px !important; } .img-wrapper > .new-product ~ .next-day-cargo, .img-wrapper > .new-product ~ .same-day-cargo { top: 20px !important; } .img-wrapper > .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .genis-en-kumas ~ .same-day-cargo { top: 20px !important; } .img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo, .img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo { top: 36px !important; } .ribbon-new-product { font-size: 8px; padding: 3px 8px; } /* Video button on small mobile */ .video-izle { top: 4px; right: 6px; padding: 3px 6px 3px 4px !important; font-size: 8px !important; gap: 3px; border-radius: 14px !important; } .video-izle i { width: 18px; height: 18px; font-size: 7px; padding-left: 1px; } .video-izle span { font-size: 8px; } .dot { height: 11px; width: 11px; border-width: 1px; } .ep-variant-row { padding: 2px 6px 3px; gap: 3px; } .ep-variant-dots { gap: 2px; } .ep-variant-count { font-size: 7px; padding: 1px 4px; border-radius: 8px; } .dot--more { font-size: 7px; } .remove-filter-button { font-size: 10px; padding: 3px 8px; } .item-comment { padding: 3px 4px 5px; min-height: 26px; } .item-comment .btn-warning { font-size: 8px; padding: 2px 5px; } .item-comment .btn-outline-success { font-size: 8px; padding: 2px 5px; } .ep-rating-badge { font-size: 8px; padding: 1px 4px; border-radius: 4px; } .ep-rating-badge .fa-star { font-size: 7px; } .ep-review-link { font-size: 8px; padding: 1px 5px; border-radius: 10px; border-width: 1px; } .ep-review-link i { font-size: 9px; } .ep-seller-link { font-size: 8px; padding: 2px 6px; border-radius: 10px; border-width: 1px; } .ep-new-badge { font-size: 8px; padding: 2px 6px; border-radius: 10px; } .ep-new-badge i { font-size: 8px; } .ep-sales-count { display: none; } .ep-review-summary { gap: 3px; } .product-item-v2 [id="discountWrapperProdItemNew"], .product-item-v3 [id="discountWrapperProdItemNew"] { min-height: 36px; padding: 4px 6px !important; font-size: 9px !important; } .product-item-v2 > a > span[id^="prodVariant_"], .product-item-v3 > a > span[id^="prodVariant_"] { min-height: 16px; padding: 2px 4px; gap: 2px; } .product-item-v2 .price-area, .product-item-v3 .price-area { padding: 0; } #prods.row > div[class*="col-"] { padding-left: 3px !important; padding-right: 3px !important; margin-bottom: 6px !important; } .ep-pagination-prev .btn-success, .ep-pagination-next .btn-success { padding: 5px 10px !important; font-size: 11px; } } /* --- Mobile & Tablet: Disable all hover effects (touch devices) --- */ @media (max-width: 991px) { /* Cat header: sadece masaüstünde göster */ .cat-header { display: none !important; } /* Remove image overlay and quick-view badge */ .product-item-v2 .img-wrapper::after, .product-item-v3 .img-wrapper::after, .product-item-v2 .img-wrapper::before, .product-item-v3 .img-wrapper::before { display: none !important; } /* Disable card hover lift/scale */ .product-item-v2:hover, .product-item-v3:hover { transform: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important; border-color: var(--ep-border) !important; } /* Disable image hover zoom */ .product-item-v2:hover .img-wrapper img, .product-item-v3:hover .img-wrapper img { transform: none !important; filter: none !important; } /* Disable badge hover effects */ .product-item-v2:hover .iade-garantisi, .product-item-v2:hover .sponsorlu, .product-item-v2:hover .storDahil, .product-item-v2:hover .genis-en-kumas, .product-item-v2:hover .next-day-cargo, .product-item-v2:hover .same-day-cargo, .product-item-v3:hover .iade-garantisi, .product-item-v3:hover .sponsorlu, .product-item-v3:hover .storDahil, .product-item-v3:hover .genis-en-kumas, .product-item-v3:hover .next-day-cargo, .product-item-v3:hover .same-day-cargo { transform: none !important; } /* Disable price rate hover */ .product-item-v2:hover .baloon-price-rate-row, .product-item-v3:hover .baloon-price-rate-row { transform: none !important; box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25) !important; } /* Always show fav button (no hover needed) */ .product-item-v2 .add-to-fav, .product-item-v3 .add-to-fav, .epv3-card .add-to-fav { opacity: 1 !important; transform: scale(1) !important; } /* Hide card top accent */ .product-item-v2::before, .product-item-v3::before { display: none !important; } /* Disable video button hover effect */ .video-izle:hover { transform: none !important; box-shadow: none !important; } /* Hide sponsorlu badge on mobile & tablet */ .sponsorlu { display: none !important; } /* Video button responsive on mobile */ .video-izle { top: 6px; right: 8px; padding: 4px 8px 4px 5px !important; font-size: 9px !important; gap: 4px; border-radius: 16px !important; } .video-izle i { width: 20px; height: 20px; font-size: 8px; } .video-izle span { font-size: 9px; } .cat-header__badges { flex-direction: column; gap: 4px; } .ep-active-filters { padding: 12px 14px; border-radius: var(--ep-radius-lg); } .ep-active-filters__header { margin-bottom: 8px; padding-bottom: 8px; } .ep-empty-state { padding: 40px 20px; } .ep-empty-state__icon { width: 60px; height: 60px; font-size: 22px; } .ep-empty-state__title { font-size: 17px; } /* Disable spring animations on mobile for performance */ .product-item-v2, .product-item-v3 { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } #prods.row > div[class*="col-"] { animation-duration: 0.3s; } } /* --- Tablet: Adjust overlay size --- */ @media (min-width: 768px) and (max-width: 991px) { .product-item-v2 .img-wrapper::before, .product-item-v3 .img-wrapper::before { width: 40px; height: 40px; font-size: 14px; } .cat-header__badges { flex-direction: column; gap: 4px; } /* Hide sponsorlu badge on tablet */ .sponsorlu { display: none !important; } } /* --- Small Mobile: Hide badges text --- */ @media (max-width: 480px) { .cat-header__badges { display: none; } .ep-active-filters__header span { font-size: 11px; } } /* --- Prefers Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Product Grid Full (Favs, RelProds, etc.) --- */ .ep-prod-grid-full > div[class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 16px !important; display: flex !important; flex-direction: column !important; } @media (min-width: 1600px) { .ep-prod-grid-full > div[class*="col-"] { width: 20% !important; flex: 0 0 20% !important; max-width: 20% !important; } } @media (min-width: 1920px) { .ep-prod-grid-full > div[class*="col-"] { width: 16.6666% !important; flex: 0 0 16.6666% !important; max-width: 16.6666% !important; } } @media (min-width: 2560px) { .ep-prod-grid-full > div[class*="col-"] { width: 14.2857% !important; flex: 0 0 14.2857% !important; max-width: 14.2857% !important; } } @media (min-width: 3840px) { .ep-prod-grid-full > div[class*="col-"] { width: 11.1111% !important; flex: 0 0 11.1111% !important; max-width: 11.1111% !important; } } /* ============================== MOBILE CATEGORY SCROLL BAR ============================== */ #mobile-cat-scroll { display: none; } @media (max-width: 991px) { #mobile-cat-scroll { display: block; position: sticky; top: calc(var(--ep-cat-scroll-top, 98px) - 1px); z-index: 1040; background: var(--ep-bg-white, #fff); margin-left: -12px; margin-right: -12px; margin-top: -5px; border-bottom: 2px solid var(--ep-border-light, #eee); } #mobile-cat-scroll .ep-cat-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px; gap: 0; } #mobile-cat-scroll .ep-cat-nav::-webkit-scrollbar { display: none; } #mobile-cat-scroll .ep-cat-nav .nav-item { flex-shrink: 0; } #mobile-cat-scroll .ep-cat-nav .nav-link { display: block; padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--ep-text-light, #555); white-space: nowrap; text-decoration: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; transition: color 0.2s ease, border-color 0.2s ease; } #mobile-cat-scroll .ep-cat-nav .nav-link:hover { color: var(--ep-primary, #ff6a00); border-bottom-color: rgba(255, 106, 0, 0.3); background: transparent; } #mobile-cat-scroll .ep-cat-nav .nav-link.active { color: var(--ep-primary, #ff6a00); font-weight: 600; border-bottom-color: var(--ep-primary, #ff6a00); background: transparent; } } /* ============================== MOBILE FILTER OFFCANVAS ============================== */ #mobile-filter-btn-wrapper { display: none; } @media (max-width: 991px) { #sitePath.breadcrumb { display: none !important; } #sort-row { display: none !important; } #mobile-filter-btn-wrapper { display: flex; justify-content: flex-end; margin-top: 8px; margin-bottom: 16px; } #btnMobileFilter { display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; background: #7B2CBF; color: #fff; border: none; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(123, 44, 191, 0.25); position: relative; } #btnMobileFilter:hover { background: #6A1B9A; box-shadow: 0 4px 16px rgba(123, 44, 191, 0.35); transform: translateY(-1px); } #btnMobileFilter:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(123, 44, 191, 0.2); } #btnMobileFilter i { font-size: 15px; } .mobile-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: #fff; color: #7B2CBF; border-radius: 50px; font-size: 11px; font-weight: 700; line-height: 1; } } .ep-filter-offcanvas { display: none; } @media (max-width: 991px) { .ep-filter-offcanvas { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1070; pointer-events: none; visibility: hidden; } .ep-filter-offcanvas--open { pointer-events: auto; visibility: visible; } .ep-filter-offcanvas__backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; } .ep-filter-offcanvas--open .ep-filter-offcanvas__backdrop { opacity: 1; } .ep-filter-offcanvas__panel { position: absolute; top: 0; left: 0; width: 85%; max-width: 380px; height: 100%; background: var(--ep-bg-white, #fff); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } .ep-filter-offcanvas--open .ep-filter-offcanvas__panel { transform: translateX(0); } .ep-filter-offcanvas__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ep-border, #e8e8e8); background: var(--ep-bg-white, #fff); flex-shrink: 0; } .ep-filter-offcanvas__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ep-text, #1a1a2e); } .ep-filter-offcanvas__title i { color: var(--ep-primary, #ff6a00); font-size: 18px; } .ep-filter-offcanvas__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--ep-bg, #f5f6f8); border-radius: 50%; color: var(--ep-text-light, #555); font-size: 16px; cursor: pointer; transition: all 0.2s ease; } .ep-filter-offcanvas__close:hover { background: var(--ep-border, #e8e8e8); color: var(--ep-text, #1a1a2e); } .ep-filter-offcanvas__sort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--ep-border, #e8e8e8); background: var(--ep-bg, #f5f6f8); flex-shrink: 0; } .ep-filter-offcanvas__sort .sort-row__options { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; } .ep-filter-offcanvas__sort .sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 50px; font-size: 12px; font-weight: 500; color: var(--ep-text-light, #555); text-decoration: none !important; background: var(--ep-bg-white, #fff); border: 1px solid var(--ep-border-light, #eee); transition: all 0.2s ease; white-space: nowrap; } .ep-filter-offcanvas__sort .sort-btn i { font-size: 11px; opacity: 0.6; } .ep-filter-offcanvas__sort .sort-btn:hover { border-color: var(--ep-primary, #ff6a00); color: var(--ep-primary, #ff6a00); } .ep-filter-offcanvas__sort .sort-btn.active { background: var(--ep-primary, #ff6a00); border-color: var(--ep-primary, #ff6a00); color: #fff; font-weight: 600; } .ep-filter-offcanvas__sort .sort-btn.active i { opacity: 1; color: #fff; } .ep-filter-offcanvas__sort .sort-row__page { display: none; } .ep-filter-offcanvas__body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; } .ep-filter-offcanvas__body::-webkit-scrollbar { width: 4px; } .ep-filter-offcanvas__body::-webkit-scrollbar-track { background: transparent; } .ep-filter-offcanvas__body::-webkit-scrollbar-thumb { background: var(--ep-border, #e8e8e8); border-radius: 4px; } .ep-filter-offcanvas__body .panel-group { margin-bottom: 0; } .ep-filter-offcanvas__body .panel { border-radius: var(--ep-radius, 8px); margin-bottom: 8px; border: 1px solid var(--ep-border-light, #f0f0f0); } .ep-filter-offcanvas__body .filter-panel { display: block !important; } } /* =========================== Category FAQ Section =========================== */ .cat-faq-row { margin-top: 2.5rem; margin-bottom: 0.5rem; } .cat-faq-section { background: #fff; border-radius: 14px; border: 1px solid #f0f0f0; padding: 1.5rem 1.75rem 0.75rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } /* Collapse wrap */ .cat-faq-collapse-wrap { position: relative; max-height: 220px; overflow: hidden; transition: max-height 0.4s ease; } .cat-faq-collapse-wrap.cat-faq--expanded { max-height: 5000px; } .cat-faq-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); pointer-events: none; transition: opacity 0.3s ease; } .cat-faq-collapse-wrap.cat-faq--expanded .cat-faq-gradient { opacity: 0; } .cat-faq-toggle-btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; border: none; background: transparent; color: #FF7F00; font-weight: 600; font-size: 0.88rem; padding: 0.6rem 0 0.4rem; cursor: pointer; transition: color 0.2s ease; } .cat-faq-toggle-btn:hover { color: #e06c00; } .cat-faq-toggle-btn i { transition: transform 0.3s ease; font-size: 0.75rem; } .cat-faq-toggle-btn.cat-faq--expanded i { transform: rotate(180deg); } .cat-faq-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; } .cat-faq-header-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 12px; background: linear-gradient(135deg, #FF7F00 0%, #ff9a33 100%); color: #fff; font-size: 1.15rem; } .cat-faq-title { font-size: 1.15rem; font-weight: 700; color: #1d1d1f; margin: 0; line-height: 1.3; } .cat-faq-subtitle { font-size: 0.82rem; color: #9ca3af; margin: 0.1rem 0 0; line-height: 1.3; } /* FAQ Search */ .cat-faq-search-wrap { position: relative; margin-bottom: 1rem; background: #f5f5f7; border-radius: 10px; overflow: hidden; } .cat-faq-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.85rem; pointer-events: none; } .cat-faq-search-input { width: 100%; border: none; outline: none; background: transparent; padding: 0.7rem 2.2rem 0.7rem 2.4rem; font-size: 0.9rem; color: #1d1d1f; } .cat-faq-search-input::placeholder { color: #9ca3af; } .cat-faq-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: #d1d5db; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; cursor: pointer; padding: 0; line-height: 1; transition: background 0.15s ease; } .cat-faq-search-clear:hover { background: #9ca3af; } /* FAQ Accordion */ .cat-faq-accordion { border: none; } .cat-faq-item { border: none !important; border-bottom: 1px solid #f0f0f0 !important; background: transparent; } .cat-faq-item:last-child { border-bottom: none !important; } .cat-faq-btn { background: transparent !important; box-shadow: none !important; padding: 1.1rem 0.5rem; font-weight: 600; font-size: 0.95rem; color: #1d1d1f; gap: 0.75rem; align-items: center; transition: color 0.2s ease; } .cat-faq-btn:not(.collapsed) { color: #FF7F00; } .cat-faq-btn::after { flex-shrink: 0; width: 1rem; height: 1rem; background-size: 1rem; transition: transform 0.25s ease; } .cat-faq-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: #f5f5f5; color: #6b7280; font-size: 0.78rem; font-weight: 700; transition: background 0.2s ease, color 0.2s ease; } .cat-faq-btn:not(.collapsed) .cat-faq-num { background: #FF7F00; color: #fff; } .cat-faq-answer { padding: 0 0.5rem 1.25rem 3.25rem; font-size: 0.9rem; line-height: 1.7; color: #4b5563; } .cat-faq-no-result { text-align: center; padding: 2rem 1rem; color: #9ca3af; font-size: 0.9rem; } .cat-faq-no-result i { display: block; font-size: 2rem; margin-bottom: 0.5rem; } @media (max-width: 767.98px) { .cat-faq-row { margin-top: 1.5rem; } .cat-faq-section { padding: 1rem 1rem 0.5rem; border-radius: 10px; } .cat-faq-collapse-wrap { max-height: 180px; } .cat-faq-header-icon { width: 36px; height: 36px; min-width: 36px; font-size: 1rem; border-radius: 10px; } .cat-faq-title { font-size: 1rem; } .cat-faq-btn { font-size: 0.88rem; padding: 0.9rem 0.3rem; } .cat-faq-answer { padding: 0 0.3rem 1rem 2.75rem; font-size: 0.85rem; } .cat-faq-num { width: 24px; height: 24px; min-width: 24px; font-size: 0.72rem; } } /* --- Print Styles --- */ @media print { .left-menu-container, #sort-row, .ep-pagination-wrapper, #sitePath.breadcrumb, .add-to-fav, #discountWrapperProdItemNew, .ep-active-filters { display: none !important; } .product-item-v2, .product-item-v3 { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd; } .epv3-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd; } } /* ====================================================================== PRODUCT CARD V3 - MODERN CLEAN DESIGN Tamamen bağımsız stiller - mevcut v2/v3 kartlara dokunmaz ====================================================================== */ .epv3-card { border-radius: 14px; border: 1px solid #f0f0f0; box-shadow: 0 1px 4px rgba(0,0,0,0.04); transition: box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); container-type: inline-size; } .epv3-card:hover { box-shadow: 0 4px 11px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06); } /* --- Link wrapper --- */ .epv3-link { color: #1a1a2e; } .epv3-link:hover { color: #1a1a2e; text-decoration: none !important; } /* --- Image area --- */ .epv3-img { aspect-ratio: 3 / 4; background: #f8f8f8; } .epv3-img__main { object-fit: cover; object-position: center; } /* Çoklu görsel: genel .ep-img-slider .ep-slide cover'ı ezer */ .epv3-img.ep-img-slider .ep-slide { object-fit: cover; object-position: center; } /* "Ürünü İncele" overlay */ .epv3-img::after { content: 'Ürünü İncele'; position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,0.55)); color: #fff; font-size: 0.82rem; font-weight: 600; text-align: center; letter-spacing: 0.5px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 3; } .epv3-card:hover .epv3-img::after { opacity: 0; } /* Slide dots inside image (reuse existing ep-slide-dots) */ .epv3-img .ep-slide-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) scale(0.8); z-index: 8; display: flex; gap: 4px; opacity: 1; transition: opacity 0.3s ease; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 20px; padding: 5px 10px; } /* --- Badges --- */ .epv3-badges { top: 8px; left: 8px; z-index: 5; } .epv3-badges-right { bottom: 8px; right: 8px; z-index: 5; } .epv3-badge { display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0.03em; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; } .epv3-card:hover .epv3-badge { transform: translateY(-1px) scale(1.03); } /* Eski kartlarla aynı: koyu yarı saydam rozet (turuncu değil) */ .epv3-badge--sponsor { background: rgba(0, 0, 0, 0.4) !important; color: rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; font-weight: 500 !important; } /* V3: Sponsorlu — görsel içinde sol alt; sadece adminden gelen etiket şeridi varken yukarı kayar */ .epv3-img > .sponsorlu.epv3-badge--sponsor { position: absolute !important; bottom: 4px !important; left: 4px !important; top: auto !important; right: auto !important; z-index: 8 !important; font-size: 7px !important; padding: 1px 4px !important; border-radius: 2px !important; letter-spacing: 0.02em; line-height: 1.3 !important; background: rgba(0, 0, 0, 0.4) !important; color: rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; font-weight: 500 !important; } /* Adminden gelen etiket şeridi (ProdTags) — artık body içinde, image dışı */ .epv3-badge--new { background: rgba(16,185,129,0.94); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.25); } .epv3-badge--info { background: rgba(14,165,233,0.94); color: #fff; box-shadow: 0 2px 8px rgba(14,165,233,0.25); } .epv3-badge--genis-en { background: rgba(124,58,237,0.94); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,0.25); } /* Sol üst: aynı gün kargo — ikon + metin */ .epv3-badge--same-day { background: rgba(37,99,235,0.94); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,0.25); font-size: 10px; padding: 5px 10px; max-width: calc(100% - 4px); } .epv3-badge--same-day i { font-size: 10px; flex-shrink: 0; } .epv3-badge--guarantee { background: rgba(22,163,74,0.94); color: #fff; box-shadow: 0 2px 10px rgba(22,163,74,0.25); } .epv3-badge--cargo { background: rgba(37,99,235,0.94); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,0.25); } /* --- Cargo bar (below price, shrink to content) --- */ .epv3-cargo-bar { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; width: auto; max-width: 100%; padding: 0 12px 0 10px; border-radius: 20px; line-height: 1; color: #fff; height: 28px; } .epv3-cargo-bar__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; color: #fff; opacity: 0.95; } .epv3-cargo-bar__label { white-space: nowrap; letter-spacing: 0.03em; } .epv3-cargo-bar--same { background: linear-gradient(135deg, #ff6d00, #ff8f00); } .epv3-cargo-bar--next { background: linear-gradient(135deg, #1565c0, #1976d2); } /* --- Custom Tags (above product name — full-width) --- */ .epv3-tags-overlay::before { content: '\00a0'; display: block; padding: 5px 10px; font-size: 0.68rem; line-height: 1.3; visibility: hidden; } .epv3-tags-overlay:has(.epv3-tag)::before { display: none; } .ep-card-tags-slider { position: relative; overflow: hidden; width: 100%; } .ep-card-tags-slider__track { position: relative; width: 100%; height: 100%; } .ep-card-tags-slider__item { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(110%); opacity: 0; will-change: transform, opacity; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1); } .ep-card-tags-slider__item--active { position: relative; transform: translateY(0); opacity: 1; } .ep-card-tags-slider__item--exit { position: absolute; transform: translateY(-110%); opacity: 0; } .epv3-tag { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border-radius: 0; font-size: 14px !important; line-height: 1.3; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); white-space: nowrap; letter-spacing: 0.03em; width: 100%; text-align: center; transition: opacity 0.2s ease; } .epv3-tags-overlay--single .epv3-tag { animation: ep-scaleIn 0.3s ease both; } /* --- Video button --- */ .epv3-img .video-izle--on-img { position: absolute !important; bottom: 8px !important; right: 8px !important; top: auto !important; left: auto !important; z-index: 6 !important; } /* --- Card body --- */ .epv3-body { padding: 8px 8px 4px; gap: 6px; } /* --- Product name --- */ .epv3-name { line-height: 1.35; color: #1a1a2e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.4em; transition: color 0.2s ease; } .epv3-card:hover .epv3-name { color: #ff6a00; } /* --- Color overlay (on image, bottom-right; above video when both) --- */ .epv3-color-overlay { position: absolute; bottom: 8px; right: 0; display: flex; flex-direction: row; align-items: center; background: #fff; padding: 5px 8px 5px 6px; border-radius: 20px 0 0 20px; box-shadow: -1px 1px 6px rgba(0,0,0,0.10); cursor: pointer; z-index: 8; } .epv3-img:has(> .video-izle--on-img) .epv3-color-overlay { bottom: 52px; } .epv3-color-overlay__dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); display: block; flex-shrink: 0; } .epv3-color-overlay__dot + .epv3-color-overlay__dot, .epv3-color-overlay__dot + .epv3-color-overlay__dot--rainbow, .epv3-color-overlay__dot--rainbow + .epv3-color-overlay__dot, .epv3-color-overlay__dot--rainbow + .epv3-color-overlay__dot--rainbow { margin-left: -10px; } .epv3-color-overlay__dot--rainbow { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); display: block; flex-shrink: 0; } .epv3-color-overlay__more { color: #555; line-height: 1; white-space: nowrap; margin-left: 3px; align-self: center; } /* --- Trust strip --- */ .epv3-trust { gap: 5px; padding: 8px 10px 10px; border-top: 1px solid rgba(0,0,0,0.06); background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.012) 100%); } .epv3-trust__item { color: #6b7280; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.7); white-space: nowrap; line-height: 1.3; flex-shrink: 0; font-size: 0.75rem; } @media (min-width: 576px) { .epv3-trust__item { font-size: 0.875rem; } } .epv3-trust__item i { color: #ff6a00; } .epv3-trust__item .fa-shield-check { color: #16a34a; } .epv3-trust__item--stars { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #92400e; border-color: rgba(217, 119, 6, 0.12); box-shadow: 0 1px 4px rgba(217, 119, 6, 0.08); } .epv3-trust__item--stars i { color: #ff6a00; } .epv3-trust__item--hl { color: #ff6a00; border-color: rgba(255, 106, 0, 0.18); background: rgba(255, 106, 0, 0.06); } .epv3-trust__item--hl i { color: #ff6a00; } /* --- Price area --- */ .epv3-price-area { padding-top: 8px; border-top: 1px solid #f3f3f3; position: relative; } .epv3-price { gap: 2px; } .epv3-price__label { color: #6b7280; line-height: 1.2; } .epv3-price__old { color: #9ca3af; text-decoration: line-through; } .epv3-price__value { color: #1a1a2e; letter-spacing: -0.3px; } .epv3-price__value--discount { color: #16a34a; } .epv3-price__kdv { color: #9ca3af; } .epv3-price--soldout .epv3-price__value { color: #dc3545; font-size: 0.9rem; } /* --- Deal (balloon + extra discount) --- */ /* epv3-deal layout handled by BS5 utility classes */ .epv3-deal__badge { color: #fff; background: linear-gradient(135deg, #ff6a00, #ee5a00); padding: 2px 7px; border-radius: 4px; line-height: 1.3; } .epv3-deal__old { color: #9ca3af; text-decoration: line-through; line-height: 1.2; } /* epv3-deal__body layout handled by BS5 utility classes */ .epv3-deal__body--double { gap: 2px; background: linear-gradient(135deg, rgba(22,163,74,0.04), rgba(22,163,74,0.08)); border: 1px solid rgba(22,163,74,0.12); padding: 5px 8px; } .epv3-deal__label { color: #1a1a2e; } .epv3-deal__label--unit { color: #111; } .epv3-deal__prev { color: #9ca3af; } .epv3-deal__prev del { color: #9ca3af; } .epv3-deal__final-row { gap: 5px; } .epv3-deal__final-badge { color: #fff; background: #16a34a; padding: 1px 5px; border-radius: 4px; line-height: 1.4; } .epv3-deal__final-price { color: #16a34a; letter-spacing: -0.3px; font-size: 1.125rem !important; } .epv3-deal__main-price { color: #16a34a; line-height: 1.3; letter-spacing: -0.3px; } .epv3-deal__kdv { color: #9ca3af; } /* --- Campaign --- */ /* epv3-campaign layout handled by BS5 utility classes */ .epv3-campaign__percent { color: #fff; background: #dc3545; padding: 4px 8px; border-radius: 8px; line-height: 1; } /* epv3-campaign__prices layout handled by BS5 utility classes */ .epv3-campaign__old { color: #9ca3af; text-decoration: line-through; } .epv3-campaign__new { color: #16a34a; } .epv3-campaign__timer { color: #dc3545; margin-top: 4px; } /* --- Additional product options --- */ .epv3-opts { padding: 4px 8px; background: #faf8f5; } .epv3-opts__icon { color: #ff6a00; flex-shrink: 0; } /* --- Reviews --- */ .epv3-reviews { display: flex; align-items: center; gap: 6px; min-height: 20px; } .epv3-reviews__rating { display: flex; align-items: center; gap: 6px; } .epv3-reviews__stars { font-size: 0.72rem; font-weight: 700; color: #f59e0b; display: inline-flex; align-items: center; gap: 2px; } .epv3-reviews__stars i { font-size: 0.68rem; } .epv3-reviews__link { font-size: 0.72rem; color: #6b7280; cursor: pointer; transition: color 0.2s ease; } .epv3-reviews__link:hover { color: #ff6a00; text-decoration: underline; } .epv3-reviews__seller { font-size: 0.72rem; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .epv3-reviews__seller:hover { color: #ff6a00; } .epv3-reviews__new { font-size: 0.72rem; color: #10b981; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; } /* --- Seller location --- */ .epv3-seller { font-size: 0.68rem; color: #9ca3af; display: flex; align-items: center; gap: 3px; } .epv3-seller i { font-size: 0.62rem; color: #d1d5db; } /* --- Brand logo --- */ .epv3-brand { position: absolute; top: 8px; right: 46px; z-index: 5; } .epv3-brand img { width: 60px; height: auto; opacity: 0.85; } /* --- Discount panel --- */ .epv3-discount-panel { background: linear-gradient(135deg, #fff5f5 0%, #fef2e8 100%); border-top: 1px solid #fde8e8; padding: 8px 14px; text-align: center; } .epv3-discount-panel__text { display: block; color: #dc3545; margin-bottom: 4px; } /* epv3-discount-panel__row layout handled by BS5 utility classes */ .epv3-discount-panel__badge { background: #dc3545; color: #fff; padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; } .epv3-discount-panel__info { color: #dc3545; line-height: 1.2; } .epv3-discount-panel__timer { color: #9ca3af; display: flex; align-items: center; gap: 3px; } /* --- Admin filter badges --- */ .epv3-admin-filter { padding: 2px 0; } .epv3-admin-filter--ok { color: #10b981; } .epv3-admin-filter--missing { color: #dc3545; } /* ── V3 Card Responsive ── */ @media (max-width: 575.98px) { .epv3-body { padding: 8px 8px 4px; gap: 4px; } .epv3-trust { flex-wrap: wrap; justify-content: center; row-gap: 6px; column-gap: 5px; padding: 6px 4px 8px; } .epv3-name { min-height: 2.1em; } .epv3-badge { padding: 3px 6px; } .epv3-badge--same-day { padding: 3px 6px; } .epv3-color-overlay__dot, .epv3-color-overlay__dot--rainbow { width: 14px; height: 14px; } .epv3-color-overlay { padding: 4px 5px; gap: 3px; } .epv3-img:has(> .video-izle--on-img) .epv3-color-overlay { bottom: 44px; } .epv3-img > .sponsorlu.epv3-badge--sponsor { font-size: 6px !important; padding: 1px 4px !important; } .epv3-tag { padding: 4px 6px; font-size: 11px !important; } .epv3-tags-overlay::before { padding: 4px 6px; font-size: 11px; } .epv3-cargo-bar { height: 22px; padding: 0 8px 0 8px; gap: 5px; } .epv3-cargo-bar__icon { width: 14px; } .epv3-card { border-radius: 10px; } } @media (min-width: 576px) { .epv3-tags-overlay::before { font-size: 0.75rem; } } @media (min-width: 1400px) { .epv3-body { padding: 8px 8px 4px; } .epv3-tags-overlay::before { font-size: 0.82rem; } } @media (min-width: 2000px) { .epv3-badge { padding: 5px 12px; } .epv3-tags-overlay::before { font-size: 0.88rem; } } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #ff6a00; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #ff6a00; border-color: #ff6a00; } /* ============================== EP-PAGER — Modern BS5 Pagination ============================== */ .ep-pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px 0 24px; padding: 0; } .ep-pager__list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; } .ep-pager__item { display: flex; } .ep-pager__link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 1; color: #374151; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; user-select: none; gap: 6px; } a.ep-pager__link:hover { color: #ff6a00; background: #fff7ed; border-color: #ff6a00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 106, 0, 0.15); } a.ep-pager__link:active { transform: translateY(0); box-shadow: none; } .ep-pager__item--active .ep-pager__link { color: #fff; background: linear-gradient(135deg, #ff6a00 0%, #e85d04 100%); border-color: #ff6a00; box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3); cursor: default; font-weight: 600; } .ep-pager__item--disabled .ep-pager__link { color: #c4c8cf; background: #f9fafb; border-color: #e5e7eb; cursor: not-allowed; pointer-events: none; box-shadow: none; } .ep-pager__item--ellipsis .ep-pager__link { border: none; background: transparent; cursor: default; min-width: 32px; padding: 0 4px; color: #9ca3af; font-weight: 700; letter-spacing: 2px; } .ep-pager__item--prev .ep-pager__link, .ep-pager__item--next .ep-pager__link { font-weight: 600; gap: 8px; padding: 0 16px; background: #f8f9fa; } a.ep-pager__item--prev .ep-pager__link:hover, a.ep-pager__item--next .ep-pager__link:hover, .ep-pager__item--prev a.ep-pager__link:hover, .ep-pager__item--next a.ep-pager__link:hover { background: #ff6a00; color: #fff; border-color: #ff6a00; } .ep-pager__info { font-size: 13px; color: #6b7280; font-weight: 400; } .ep-pager__info strong { color: #ff6a00; font-weight: 700; } /* Responsive: Tablet */ @media (max-width: 768px) { .ep-pager { margin: 24px 0 16px; gap: 10px; } .ep-pager__link { min-width: 36px; height: 36px; padding: 0 8px; font-size: 13px; border-radius: 8px; } .ep-pager__item--prev .ep-pager__link, .ep-pager__item--next .ep-pager__link { padding: 0 12px; } .ep-pager__prev-text, .ep-pager__next-text { display: none; } } /* Responsive: Mobile */ @media (max-width: 480px) { .ep-pager__link { min-width: 34px; height: 34px; font-size: 12px; border-radius: 8px; padding: 0 6px; } .ep-pager__list { gap: 3px; } .ep-pager__item--prev .ep-pager__link, .ep-pager__item--next .ep-pager__link { padding: 0 10px; } .ep-pager__info { font-size: 12px; } } @keyframes epLoaderSpin { to { transform: rotate(360deg); } } .ep-prod-loader-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid rgba(255, 127, 0, 0.25); border-top-color: #FF7F00; border-radius: 50%; animation: epLoaderSpin 0.75s linear infinite; vertical-align: middle; margin-bottom: 4px; } .wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 999; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: 13px; } @media (max-width: 500px) { .ribbon-wrapper-green { right: 2px; } } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; }