Hugging Face's logo

Spaces:
samirerty
/
anycoder-1bde1ad7
Running

App Files Community
samirerty commited on
Commit
d96e4d7
·
verified ·
1 Parent(s): a180330

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1504 -1596
index.html CHANGED
@@ -1,1599 +1,1507 @@
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>آنلاین شاپ | سید خوید</title>
7
- <link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9
- <style>
10
- :root {
11
- --bg: #0a0a0f;
12
- --bg-secondary: #12121a;
13
- --card: #1a1a24;
14
- --card-hover: #22222e;
15
- --border: #2a2a3a;
16
- --fg: #f0f0f5;
17
- --fg-muted: #8888a0;
18
- --accent: #ff6b35;
19
- --accent-glow: rgba(255, 107, 53, 0.4);
20
- --accent-secondary: #00d4aa;
21
- --danger: #ff4757;
22
- --success: #2ed573;
23
- --glass: rgba(26, 26, 36, 0.8);
24
- --radius-sm: 12px;
25
- --radius-md: 20px;
26
- --radius-lg: 28px;
27
- --radius-full: 9999px;
28
- }
29
-
30
- * {
31
- margin: 0;
32
- padding: 0;
33
- box-sizing: border-box;
34
- font-family: 'Vazir', sans-serif;
35
- }
36
-
37
- body {
38
- background: var(--bg);
39
- min-height: 100vh;
40
- color: var(--fg);
41
- overflow-x: hidden;
42
- position: relative;
43
- }
44
-
45
- /* Animated Background */
46
- .bg-pattern {
47
- position: fixed;
48
- top: 0;
49
- left: 0;
50
- width: 100%;
51
- height: 100%;
52
- pointer-events: none;
53
- z-index: 0;
54
- overflow: hidden;
55
- }
56
-
57
- .bg-pattern::before {
58
- content: '';
59
- position: absolute;
60
- top: -50%;
61
- left: -50%;
62
- width: 200%;
63
- height: 200%;
64
- background: radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
65
- radial-gradient(ellipse at 80% 80%, rgba(0, 212, 170, 0.06) 0%, transparent 50%),
66
- radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.04) 0%, transparent 70%);
67
- animation: bgPulse 15s ease-in-out infinite;
68
- }
69
-
70
- @keyframes bgPulse {
71
- 0%, 100% { transform: translate(0, 0) scale(1); }
72
- 50% { transform: translate(-5%, -5%) scale(1.1); }
73
- }
74
-
75
- .floating-orb {
76
- position: absolute;
77
- border-radius: 50%;
78
- filter: blur(60px);
79
- animation: float 20s ease-in-out infinite;
80
- }
81
-
82
- .orb-1 {
83
- width: 400px;
84
- height: 400px;
85
- background: rgba(255, 107, 53, 0.15);
86
- top: 10%;
87
- right: -10%;
88
- animation-delay: 0s;
89
- }
90
-
91
- .orb-2 {
92
- width: 300px;
93
- height: 300px;
94
- background: rgba(0, 212, 170, 0.1);
95
- bottom: 20%;
96
- left: -5%;
97
- animation-delay: -7s;
98
- }
99
-
100
- .orb-3 {
101
- width: 250px;
102
- height: 250px;
103
- background: rgba(255, 107, 53, 0.08);
104
- top: 50%;
105
- left: 30%;
106
- animation-delay: -14s;
107
- }
108
-
109
- @keyframes float {
110
- 0%, 100% { transform: translate(0, 0) rotate(0deg); }
111
- 25% { transform: translate(30px, -30px) rotate(5deg); }
112
- 50% { transform: translate(-20px, 20px) rotate(-5deg); }
113
- 75% { transform: translate(20px, 10px) rotate(3deg); }
114
- }
115
-
116
- /* Container */
117
- .container {
118
- max-width: 480px;
119
- width: 100%;
120
- margin: 0 auto;
121
- padding: 20px;
122
- position: relative;
123
- z-index: 1;
124
- }
125
-
126
- @media (min-width: 768px) {
127
- .container { max-width: 720px; }
128
- }
129
-
130
- @media (min-width: 1024px) {
131
- .container { max-width: 1000px; }
132
- }
133
-
134
- /* Branding Link */
135
- .branding-link {
136
- position: fixed;
137
- top: 16px;
138
- left: 16px;
139
- z-index: 1000;
140
- background: var(--glass);
141
- backdrop-filter: blur(20px);
142
- padding: 8px 16px;
143
- border-radius: var(--radius-full);
144
- border: 1px solid var(--border);
145
- color: var(--fg-muted);
146
- text-decoration: none;
147
- font-size: 12px;
148
- transition: all 0.3s ease;
149
- }
150
-
151
- .branding-link:hover {
152
- color: var(--accent);
153
- border-color: var(--accent);
154
- transform: translateY(-2px);
155
- }
156
-
157
- /* Profile Header */
158
- .profile-header {
159
- display: flex;
160
- flex-direction: column;
161
- align-items: center;
162
- text-align: center;
163
- padding: 32px 20px;
164
- background: linear-gradient(180deg, var(--card) 0%, transparent 100%);
165
- border-radius: var(--radius-lg);
166
- margin-bottom: 24px;
167
- position: relative;
168
- overflow: hidden;
169
- }
170
-
171
- .profile-header::before {
172
- content: '';
173
- position: absolute;
174
- top: 0;
175
- left: 0;
176
- right: 0;
177
- height: 3px;
178
- background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
179
- background-size: 200% 100%;
180
- animation: shimmer 3s linear infinite;
181
- }
182
-
183
- @keyframes shimmer {
184
- 0% { background-position: 200% 0; }
185
- 100% { background-position: -200% 0; }
186
- }
187
-
188
- .avatar-wrapper {
189
- position: relative;
190
- margin-bottom: 16px;
191
- }
192
-
193
- .avatar {
194
- width: 100px;
195
- height: 100px;
196
- border-radius: 50%;
197
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
198
- display: flex;
199
- align-items: center;
200
- justify-content: center;
201
- color: white;
202
- font-size: 44px;
203
- cursor: pointer;
204
- position: relative;
205
- transition: transform 0.3s ease;
206
- }
207
-
208
- .avatar:hover {
209
- transform: scale(1.05);
210
- }
211
-
212
- .avatar::before {
213
- content: '';
214
- position: absolute;
215
- inset: -4px;
216
- border-radius: 50%;
217
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
218
- z-index: -1;
219
- animation: rotate 4s linear infinite;
220
- }
221
-
222
- .avatar::after {
223
- content: '';
224
- position: absolute;
225
- inset: -2px;
226
- border-radius: 50%;
227
- background: var(--bg);
228
- z-index: -1;
229
- }
230
-
231
- @keyframes rotate {
232
- from { transform: rotate(0deg); }
233
- to { transform: rotate(360deg); }
234
- }
235
-
236
- .online-indicator {
237
- position: absolute;
238
- bottom: 4px;
239
- right: 4px;
240
- width: 20px;
241
- height: 20px;
242
- background: var(--success);
243
- border-radius: 50%;
244
- border: 3px solid var(--bg);
245
- animation: pulse 2s ease-in-out infinite;
246
- }
247
-
248
- @keyframes pulse {
249
- 0%, 100% { transform: scale(1); opacity: 1; }
250
- 50% { transform: scale(1.2); opacity: 0.7; }
251
- }
252
-
253
- .name {
254
- font-size: 26px;
255
- font-weight: 800;
256
- margin-bottom: 8px;
257
- background: linear-gradient(135deg, var(--fg), var(--fg-muted));
258
- -webkit-background-clip: text;
259
- -webkit-text-fill-color: transparent;
260
- background-clip: text;
261
- }
262
-
263
- .bio {
264
- font-size: 14px;
265
- color: var(--fg-muted);
266
- line-height: 1.6;
267
- max-width: 320px;
268
- margin-bottom: 20px;
269
- }
270
-
271
- .stats {
272
- display: flex;
273
- gap: 32px;
274
- justify-content: center;
275
- margin: 20px 0;
276
- }
277
-
278
- .stat-item {
279
- text-align: center;
280
- position: relative;
281
- }
282
-
283
- .stat-number {
284
- font-weight: 800;
285
- font-size: 20px;
286
- color: var(--fg);
287
- display: block;
288
- }
289
-
290
- .stat-label {
291
- font-size: 12px;
292
- color: var(--fg-muted);
293
- margin-top: 4px;
294
- }
295
-
296
- .stat-item::after {
297
- content: '';
298
- position: absolute;
299
- left: -16px;
300
- top: 50%;
301
- transform: translateY(-50%);
302
- width: 1px;
303
- height: 30px;
304
- background: var(--border);
305
- }
306
-
307
- .stat-item:first-child::after {
308
- display: none;
309
- }
310
-
311
- .instagram-row {
312
- display: flex;
313
- align-items: center;
314
- gap: 12px;
315
- background: var(--card);
316
- padding: 12px 20px;
317
- border-radius: var(--radius-full);
318
- border: 1px solid var(--border);
319
- transition: all 0.3s ease;
320
- }
321
-
322
- .instagram-row:hover {
323
- border-color: var(--accent);
324
- transform: translateY(-2px);
325
- }
326
-
327
- .instagram-row i {
328
- font-size: 22px;
329
- background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
330
- -webkit-background-clip: text;
331
- -webkit-text-fill-color: transparent;
332
- background-clip: text;
333
- }
334
-
335
- .instagram-row span {
336
- font-weight: 600;
337
- }
338
-
339
- .btn-primary {
340
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
341
- color: white;
342
- border: none;
343
- padding: 10px 28px;
344
- border-radius: var(--radius-full);
345
- font-weight: 700;
346
- cursor: pointer;
347
- transition: all 0.3s ease;
348
- position: relative;
349
- overflow: hidden;
350
- }
351
-
352
- .btn-primary::before {
353
- content: '';
354
- position: absolute;
355
- inset: 0;
356
- background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2), transparent);
357
- transform: translateX(-100%);
358
- transition: transform 0.5s ease;
359
- }
360
-
361
- .btn-primary:hover::before {
362
- transform: translateX(100%);
363
- }
364
-
365
- .btn-primary:hover {
366
- transform: scale(1.05);
367
- box-shadow: 0 8px 25px var(--accent-glow);
368
- }
369
-
370
- .btn-primary:active {
371
- transform: scale(0.98);
372
- }
373
-
374
- /* User Menu */
375
- .user-menu {
376
- position: absolute;
377
- top: 120px;
378
- left: 10px;
379
- background: var(--glass);
380
- backdrop-filter: blur(20px);
381
- border-radius: var(--radius-md);
382
- border: 1px solid var(--border);
383
- width: 220px;
384
- z-index: 100;
385
- opacity: 0;
386
- visibility: hidden;
387
- transform: translateY(-10px);
388
- transition: all 0.3s ease;
389
- }
390
-
391
- .user-menu.active {
392
- opacity: 1;
393
- visibility: visible;
394
- transform: translateY(0);
395
- }
396
-
397
- .user-menu-item {
398
- padding: 14px 18px;
399
- border-bottom: 1px solid var(--border);
400
- cursor: pointer;
401
- transition: all 0.2s ease;
402
- display: flex;
403
- align-items: center;
404
- gap: 12px;
405
- color: var(--fg);
406
- }
407
-
408
- .user-menu-item:last-child {
409
- border-bottom: none;
410
- }
411
-
412
- .user-menu-item:hover {
413
- background: var(--card-hover);
414
- padding-right: 24px;
415
- }
416
-
417
- .user-menu-item i {
418
- width: 20px;
419
- color: var(--accent);
420
- }
421
-
422
- /* Search Bar */
423
- .search-bar {
424
- display: flex;
425
- align-items: center;
426
- background: var(--card);
427
- border-radius: var(--radius-full);
428
- padding: 14px 20px;
429
- margin-bottom: 20px;
430
- border: 1px solid var(--border);
431
- transition: all 0.3s ease;
432
- }
433
-
434
- .search-bar:focus-within {
435
- border-color: var(--accent);
436
- box-shadow: 0 0 20px var(--accent-glow);
437
- }
438
-
439
- .search-bar i {
440
- color: var(--fg-muted);
441
- margin-left: 12px;
442
- transition: color 0.3s ease;
443
- }
444
-
445
- .search-bar:focus-within i {
446
- color: var(--accent);
447
- }
448
-
449
- .search-bar input {
450
- flex: 1;
451
- border: none;
452
- background: transparent;
453
- outline: none;
454
- font-size: 15px;
455
- color: var(--fg);
456
- }
457
-
458
- .search-bar input::placeholder {
459
- color: var(--fg-muted);
460
- }
461
-
462
- /* Filter Chips */
463
- .filter-chips {
464
- display: flex;
465
- gap: 10px;
466
- overflow-x: auto;
467
- padding: 8px 0;
468
- margin-bottom: 24px;
469
- scrollbar-width: none;
470
- }
471
-
472
- .filter-chips::-webkit-scrollbar {
473
- display: none;
474
- }
475
-
476
- .chip {
477
- background: var(--card);
478
- padding: 10px 20px;
479
- border-radius: var(--radius-full);
480
- font-size: 13px;
481
- white-space: nowrap;
482
- cursor: pointer;
483
- transition: all 0.3s ease;
484
- border: 1px solid var(--border);
485
- color: var(--fg-muted);
486
- font-weight: 500;
487
- }
488
-
489
- .chip:hover {
490
- border-color: var(--accent);
491
- color: var(--fg);
492
- }
493
-
494
- .chip.active {
495
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
496
- color: white;
497
- border-color: transparent;
498
- box-shadow: 0 4px 15px var(--accent-glow);
499
- }
500
-
501
- /* Highlights */
502
- .highlights {
503
- display: flex;
504
- overflow-x: auto;
505
- gap: 20px;
506
- padding: 12px 0;
507
- margin-bottom: 28px;
508
- scrollbar-width: none;
509
- }
510
-
511
- .highlights::-webkit-scrollbar {
512
- display: none;
513
- }
514
-
515
- .highlight-item {
516
- display: flex;
517
- flex-direction: column;
518
- align-items: center;
519
- min-width: 72px;
520
- cursor: pointer;
521
- }
522
-
523
- .highlight-circle {
524
- width: 72px;
525
- height: 72px;
526
- border-radius: 50%;
527
- background: var(--card);
528
- display: flex;
529
- align-items: center;
530
- justify-content: center;
531
- font-size: 26px;
532
- color: var(--accent);
533
- margin-bottom: 10px;
534
- border: 2px solid var(--border);
535
- transition: all 0.3s ease;
536
- position: relative;
537
- }
538
-
539
- .highlight-circle::before {
540
- content: '';
541
- position: absolute;
542
- inset: -3px;
543
- border-radius: 50%;
544
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
545
- z-index: -1;
546
- opacity: 0;
547
- transition: opacity 0.3s ease;
548
- }
549
-
550
- .highlight-item:hover .highlight-circle {
551
- transform: scale(1.1);
552
- border-color: transparent;
553
- }
554
-
555
- .highlight-item:hover .highlight-circle::before {
556
- opacity: 1;
557
- }
558
-
559
- .highlight-label {
560
- font-size: 11px;
561
- color: var(--fg-muted);
562
- text-align: center;
563
- font-weight: 500;
564
- }
565
-
566
- /* Category Section */
567
- .category-section {
568
- display: flex;
569
- justify-content: space-between;
570
- align-items: center;
571
- margin-bottom: 20px;
572
- }
573
-
574
- .category-title {
575
- font-weight: 800;
576
- font-size: 20px;
577
- color: var(--fg);
578
- }
579
-
580
- .category-link {
581
- color: var(--accent);
582
- font-size: 14px;
583
- cursor: pointer;
584
- font-weight: 600;
585
- transition: all 0.3s ease;
586
- }
587
-
588
- .category-link:hover {
589
- text-decoration: underline;
590
- }
591
-
592
- /* Products Grid */
593
- .products-grid {
594
- display: grid;
595
- grid-template-columns: repeat(2, 1fr);
596
- gap: 16px;
597
- margin-bottom: 40px;
598
- }
599
-
600
- @media (min-width: 768px) {
601
- .products-grid {
602
- grid-template-columns: repeat(3, 1fr);
603
- }
604
- }
605
-
606
- @media (min-width: 1024px) {
607
- .products-grid {
608
- grid-template-columns: repeat(4, 1fr);
609
- }
610
- }
611
-
612
- .product-card {
613
- background: var(--card);
614
- border-radius: var(--radius-md);
615
- border: 1px solid var(--border);
616
- overflow: hidden;
617
- transition: all 0.3s ease;
618
- cursor: pointer;
619
- position: relative;
620
- }
621
-
622
- .product-card:hover {
623
- transform: translateY(-6px);
624
- border-color: var(--accent);
625
- box-shadow: 0 12px 40px rgba(0,0,0,0.3);
626
- }
627
-
628
- .discount-badge {
629
- position: absolute;
630
- top: 12px;
631
- right: 12px;
632
- background: linear-gradient(135deg, var(--danger), #ff6b6b);
633
- color: white;
634
- padding: 6px 12px;
635
- border-radius: var(--radius-full);
636
- font-size: 11px;
637
- font-weight: 700;
638
- z-index: 2;
639
- box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
640
- }
641
-
642
- .product-image {
643
- width: 100%;
644
- height: 140px;
645
- background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
646
- display: flex;
647
- align-items: center;
648
- justify-content: center;
649
- color: var(--accent);
650
- font-size: 40px;
651
- position: relative;
652
- overflow: hidden;
653
- }
654
-
655
- .product-image::before {
656
- content: '';
657
- position: absolute;
658
- inset: 0;
659
- background: linear-gradient(135deg, transparent 40%, rgba(255, 107, 53, 0.1) 100%);
660
- }
661
-
662
- .product-info {
663
- padding: 14px;
664
- }
665
-
666
- .product-title {
667
- font-weight: 700;
668
- font-size: 14px;
669
- margin-bottom: 8px;
670
- color: var(--fg);
671
- }
672
-
673
- .product-rating {
674
- display: flex;
675
- align-items: center;
676
- gap: 6px;
677
- margin-bottom: 10px;
678
- font-size: 12px;
679
- }
680
-
681
- .product-rating .stars {
682
- color: #ffc107;
683
- }
684
-
685
- .product-rating span {
686
- color: var(--fg-muted);
687
- }
688
-
689
- .product-price-row {
690
- display: flex;
691
- align-items: center;
692
- flex-wrap: wrap;
693
- gap: 8px;
694
- margin-bottom: 12px;
695
- }
696
-
697
- .product-price {
698
- font-size: 15px;
699
- color: var(--accent);
700
- font-weight: 800;
701
- }
702
-
703
- .product-old-price {
704
- font-size: 11px;
705
- color: var(--fg-muted);
706
- text-decoration: line-through;
707
- }
708
-
709
- .product-actions {
710
- display: flex;
711
- justify-content: space-between;
712
- align-items: center;
713
- padding-top: 12px;
714
- border-top: 1px solid var(--border);
715
- }
716
-
717
- .action-btn {
718
- background: none;
719
- border: none;
720
- font-size: 16px;
721
- cursor: pointer;
722
- color: var(--fg-muted);
723
- transition: all 0.3s ease;
724
- width: 36px;
725
- height: 36px;
726
- border-radius: 50%;
727
- display: flex;
728
- align-items: center;
729
- justify-content: center;
730
- }
731
-
732
- .action-btn:hover {
733
- background: var(--card-hover);
734
- }
735
-
736
- .action-btn.liked {
737
- color: var(--danger);
738
- }
739
-
740
- .action-btn.saved {
741
- color: #ffc107;
742
- }
743
-
744
- .cart-btn {
745
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
746
- color: white !important;
747
- width: 36px;
748
- height: 36px;
749
- border-radius: 50%;
750
- display: flex;
751
- align-items: center;
752
- justify-content: center;
753
- }
754
-
755
- .cart-btn:hover {
756
- transform: scale(1.1);
757
- box-shadow: 0 4px 15px var(--accent-glow);
758
- }
759
-
760
- /* Videos Section */
761
- .videos-section {
762
- margin-bottom: 40px;
763
- }
764
-
765
- .section-title {
766
- font-size: 22px;
767
- font-weight: 800;
768
- margin-bottom: 20px;
769
- color: var(--fg);
770
- }
771
-
772
- .video-card {
773
- display: flex;
774
- gap: 16px;
775
- background: var(--card);
776
- border-radius: var(--radius-md);
777
- padding: 16px;
778
- margin-bottom: 16px;
779
- border: 1px solid var(--border);
780
- cursor: pointer;
781
- transition: all 0.3s ease;
782
- }
783
-
784
- .video-card:hover {
785
- border-color: var(--accent);
786
- transform: translateX(-4px);
787
- }
788
-
789
- .video-thumbnail {
790
- width: 90px;
791
- height: 90px;
792
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
793
- border-radius: var(--radius-sm);
794
- display: flex;
795
- align-items: center;
796
- justify-content: center;
797
- color: white;
798
- font-size: 28px;
799
- flex-shrink: 0;
800
- position: relative;
801
- overflow: hidden;
802
- }
803
-
804
- .video-thumbnail::before {
805
- content: '';
806
- position: absolute;
807
- inset: 0;
808
- background: rgba(0,0,0,0.2);
809
- }
810
-
811
- .video-thumbnail i {
812
- position: relative;
813
- z-index: 1;
814
- }
815
-
816
- .video-details {
817
- flex: 1;
818
- }
819
-
820
- .video-title {
821
- font-weight: 700;
822
- font-size: 15px;
823
- margin-bottom: 6px;
824
- color: var(--fg);
825
- }
826
-
827
- .video-subtitle {
828
- font-size: 13px;
829
- color: var(--fg-muted);
830
- margin-bottom: 10px;
831
- line-height: 1.5;
832
- }
833
-
834
- .video-stats {
835
- display: flex;
836
- gap: 16px;
837
- font-size: 12px;
838
- color: var(--fg-muted);
839
- align-items: center;
840
- flex-wrap: wrap;
841
- }
842
-
843
- .video-stats span {
844
- display: flex;
845
- align-items: center;
846
- gap: 6px;
847
- }
848
-
849
- .video-stats i {
850
- color: var(--accent);
851
- }
852
-
853
- .like-comment {
854
- display: flex;
855
- gap: 12px;
856
- margin-top: 12px;
857
- }
858
-
859
- .like-comment button {
860
- background: var(--bg-secondary);
861
- border: none;
862
- display: flex;
863
- align-items: center;
864
- gap: 6px;
865
- font-size: 12px;
866
- color: var(--fg-muted);
867
- cursor: pointer;
868
- padding: 8px 14px;
869
- border-radius: var(--radius-full);
870
- transition: all 0.3s ease;
871
- }
872
-
873
- .like-comment button:hover {
874
- background: var(--card-hover);
875
- color: var(--fg);
876
- }
877
-
878
- .like-comment button.liked {
879
- color: var(--danger);
880
- }
881
-
882
- .like-comment button.liked i {
883
- color: var(--danger);
884
- }
885
-
886
- /* Comments Section */
887
- .comments-section {
888
- margin-top: 32px;
889
- padding-top: 32px;
890
- border-top: 1px solid var(--border);
891
- }
892
-
893
- .comment-item {
894
- display: flex;
895
- gap: 14px;
896
- margin-bottom: 20px;
897
- background: var(--card);
898
- padding: 16px;
899
- border-radius: var(--radius-md);
900
- border: 1px solid var(--border);
901
- }
902
-
903
- .comment-avatar {
904
- width: 48px;
905
- height: 48px;
906
- border-radius: 50%;
907
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
908
- display: flex;
909
- align-items: center;
910
- justify-content: center;
911
- color: white;
912
- font-size: 20px;
913
- flex-shrink: 0;
914
- }
915
-
916
- .comment-content {
917
- flex: 1;
918
- }
919
-
920
- .comment-author {
921
- font-weight: 700;
922
- font-size: 14px;
923
- margin-bottom: 6px;
924
- color: var(--fg);
925
- }
926
-
927
- .comment-text {
928
- font-size: 13px;
929
- color: var(--fg-muted);
930
- line-height: 1.6;
931
- }
932
-
933
- .comment-actions {
934
- display: flex;
935
- gap: 16px;
936
- margin-top: 12px;
937
- font-size: 12px;
938
- }
939
-
940
- .comment-actions button {
941
- background: none;
942
- border: none;
943
- color: var(--fg-muted);
944
- cursor: pointer;
945
- display: flex;
946
- align-items: center;
947
- gap: 6px;
948
- transition: color 0.3s ease;
949
- }
950
-
951
- .comment-actions button:hover {
952
- color: var(--accent);
953
- }
954
-
955
- .comment-input {
956
- display: flex;
957
- gap: 12px;
958
- margin-top: 20px;
959
- }
960
-
961
- .comment-input input {
962
- flex: 1;
963
- padding: 14px 20px;
964
- border: 1px solid var(--border);
965
- border-radius: var(--radius-full);
966
- outline: none;
967
- font-size: 14px;
968
- background: var(--card);
969
- color: var(--fg);
970
- transition: all 0.3s ease;
971
- }
972
-
973
- .comment-input input:focus {
974
- border-color: var(--accent);
975
- }
976
-
977
- .comment-input input::placeholder {
978
- color: var(--fg-muted);
979
- }
980
-
981
- .comment-input button {
982
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
983
- color: white;
984
- border: none;
985
- padding: 14px 28px;
986
- border-radius: var(--radius-full);
987
- font-weight: 700;
988
- cursor: pointer;
989
- transition: all 0.3s ease;
990
- }
991
-
992
- .comment-input button:hover {
993
- transform: scale(1.05);
994
- box-shadow: 0 8px 25px var(--accent-glow);
995
- }
996
-
997
- /* Bottom Navigation */
998
- .bottom-nav {
999
- display: flex;
1000
- justify-content: space-around;
1001
- margin-top: 32px;
1002
- padding: 20px;
1003
- background: var(--glass);
1004
- backdrop-filter: blur(20px);
1005
- border-radius: var(--radius-lg);
1006
- border: 1px solid var(--border);
1007
- position: sticky;
1008
- bottom: 20px;
1009
- z-index: 100;
1010
- }
1011
-
1012
- .nav-item {
1013
- text-align: center;
1014
- color: var(--fg-muted);
1015
- font-size: 11px;
1016
- cursor: pointer;
1017
- transition: all 0.3s ease;
1018
- padding: 8px 12px;
1019
- border-radius: var(--radius-sm);
1020
- }
1021
-
1022
- .nav-item i {
1023
- font-size: 22px;
1024
- display: block;
1025
- margin-bottom: 6px;
1026
- }
1027
-
1028
- .nav-item:hover {
1029
- color: var(--fg);
1030
- background: var(--card-hover);
1031
- }
1032
-
1033
- .nav-item.active {
1034
- color: var(--accent);
1035
- }
1036
-
1037
- .nav-item.active i {
1038
- transform: scale(1.1);
1039
- }
1040
-
1041
- .cart-badge {
1042
- position: absolute;
1043
- top: -4px;
1044
- right: -4px;
1045
- background: linear-gradient(135deg, var(--danger), #ff6b6b);
1046
- color: white;
1047
- border-radius: 50%;
1048
- width: 20px;
1049
- height: 20px;
1050
- font-size: 11px;
1051
- font-weight: 700;
1052
- display: flex;
1053
- align-items: center;
1054
- justify-content: center;
1055
- animation: badgePop 0.3s ease;
1056
- }
1057
-
1058
- @keyframes badgePop {
1059
- 0% { transform: scale(0); }
1060
- 50% { transform: scale(1.2); }
1061
- 100% { transform: scale(1); }
1062
- }
1063
-
1064
- /* Modals */
1065
- .modal {
1066
- display: none;
1067
- position: fixed;
1068
- top: 0;
1069
- left: 0;
1070
- width: 100%;
1071
- height: 100%;
1072
- background: rgba(0, 0, 0, 0.85);
1073
- backdrop-filter: blur(10px);
1074
- z-index: 2000;
1075
- justify-content: center;
1076
- align-items: center;
1077
- padding: 20px;
1078
- opacity: 0;
1079
- transition: opacity 0.3s ease;
1080
- }
1081
-
1082
- .modal.active {
1083
- display: flex;
1084
- opacity: 1;
1085
- }
1086
-
1087
- .modal-content {
1088
- background: var(--card);
1089
- border-radius: var(--radius-lg);
1090
- max-width: 500px;
1091
- width: 100%;
1092
- max-height: 90vh;
1093
- overflow-y: auto;
1094
- padding: 28px;
1095
- position: relative;
1096
- border: 1px solid var(--border);
1097
- transform: scale(0.9);
1098
- transition: transform 0.3s ease;
1099
- }
1100
-
1101
- .modal.active .modal-content {
1102
- transform: scale(1);
1103
- }
1104
-
1105
- .modal-close {
1106
- position: absolute;
1107
- top: 16px;
1108
- left: 16px;
1109
- font-size: 28px;
1110
- cursor: pointer;
1111
- color: var(--fg-muted);
1112
- transition: all 0.3s ease;
1113
- width: 40px;
1114
- height: 40px;
1115
- border-radius: 50%;
1116
- display: flex;
1117
- align-items: center;
1118
- justify-content: center;
1119
- }
1120
-
1121
- .modal-close:hover {
1122
- color: var(--danger);
1123
- background: rgba(255, 71, 87, 0.1);
1124
- }
1125
-
1126
- /* Story Modal */
1127
- .story-modal {
1128
- background: black;
1129
- }
1130
-
1131
- .story-content {
1132
- width: 100%;
1133
- max-width: 400px;
1134
- background: #111;
1135
- border-radius: var(--radius-md);
1136
- overflow: hidden;
1137
- position: relative;
1138
- }
1139
-
1140
- .story-header {
1141
- display: flex;
1142
- align-items: center;
1143
- padding: 16px;
1144
- color: white;
1145
- background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
1146
- position: absolute;
1147
- top: 0;
1148
- left: 0;
1149
- right: 0;
1150
- z-index: 10;
1151
- }
1152
-
1153
- .story-avatar {
1154
- width: 36px;
1155
- height: 36px;
1156
- border-radius: 50%;
1157
- background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
1158
- display: flex;
1159
- align-items: center;
1160
- justify-content: center;
1161
- margin-left: 12px;
1162
- font-size: 14px;
1163
- }
1164
-
1165
- .story-username {
1166
- font-weight: 700;
1167
- flex: 1;
1168
- }
1169
-
1170
- .story-close {
1171
- background: none;
1172
- border: none;
1173
- color: white;
1174
- font-size: 28px;
1175
- cursor: pointer;
1176
- opacity: 0.8;
1177
- transition: opacity 0.3s ease;
1178
- }
1179
-
1180
- .story-close:hover {
1181
- opacity: 1;
1182
- }
1183
-
1184
- .story-image {
1185
- width: 100%;
1186
- aspect-ratio: 9/16;
1187
- background: linear-gradient(135deg, #1a1a24, #2a2a3a);
1188
- display: flex;
1189
- align-items: center;
1190
- justify-content: center;
1191
- color: var(--accent);
1192
- font-size: 64px;
1193
- }
1194
-
1195
- .story-progress-bar {
1196
- display: flex;
1197
- gap: 4px;
1198
- padding: 12px;
1199
- background: black;
1200
- }
1201
-
1202
- .story-progress {
1203
- height: 3px;
1204
- background: rgba(255,255,255,0.2);
1205
- flex: 1;
1206
- border-radius: 2px;
1207
- overflow: hidden;
1208
- }
1209
-
1210
- .story-progress-fill {
1211
- height: 100%;
1212
- width: 0%;
1213
- background: white;
1214
- transition: width 5s linear;
1215
- }
1216
-
1217
- /* Video Modal */
1218
- .video-modal-content {
1219
- background: black;
1220
- padding: 0;
1221
- }
1222
-
1223
- .video-player {
1224
- width: 100%;
1225
- aspect-ratio: 16/9;
1226
- background: linear-gradient(135deg, #1a1a24, #2a2a3a);
1227
- display: flex;
1228
- flex-direction: column;
1229
- align-items: center;
1230
- justify-content: center;
1231
- color: white;
1232
- font-size: 48px;
1233
- }
1234
-
1235
- .video-player p {
1236
- margin-top: 16px;
1237
- font-size: 16px;
1238
- color: var(--fg-muted);
1239
- }
1240
-
1241
- /* Product Detail */
1242
- .product-detail-image {
1243
- width: 100%;
1244
- height: 220px;
1245
- background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
1246
- display: flex;
1247
- align-items: center;
1248
- justify-content: center;
1249
- font-size: 80px;
1250
- color: var(--accent);
1251
- border-radius: var(--radius-md);
1252
- margin-bottom: 20px;
1253
- }
1254
-
1255
- .product-detail-title {
1256
- font-size: 26px;
1257
- font-weight: 800;
1258
- margin-bottom: 10px;
1259
- color: var(--fg);
1260
- }
1261
-
1262
- .product-detail-price {
1263
- font-size: 22px;
1264
- color: var(--accent);
1265
- font-weight: 800;
1266
- margin-bottom: 20px;
1267
- }
1268
-
1269
- .product-detail-description {
1270
- font-size: 14px;
1271
- color: var(--fg-muted);
1272
- margin-bottom: 24px;
1273
- line-height: 1.8;
1274
- }
1275
-
1276
- .product-detail-actions {
1277
- display: flex;
1278
- gap: 14px;
1279
- }
1280
-
1281
- .product-detail-actions button {
1282
- flex: 1;
1283
- padding: 16px;
1284
- border: none;
1285
- border-radius: var(--radius-full);
1286
- font-weight: 700;
1287
- cursor: pointer;
1288
- transition: all 0.3s ease;
1289
- }
1290
-
1291
- .add-to-cart-btn {
1292
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
1293
- color: white;
1294
- }
1295
-
1296
- .add-to-cart-btn:hover {
1297
- transform: scale(1.02);
1298
- box-shadow: 0 8px 25px var(--accent-glow);
1299
- }
1300
-
1301
- .buy-now-btn {
1302
- background: linear-gradient(135deg, var(--danger), #ff6b6b);
1303
- color: white;
1304
- }
1305
-
1306
- .buy-now-btn:hover {
1307
- transform: scale(1.02);
1308
- box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4);
1309
- }
1310
-
1311
- /* Cart Modal */
1312
- .cart-item {
1313
- display: flex;
1314
- align-items: center;
1315
- gap: 14px;
1316
- padding: 16px 0;
1317
- border-bottom: 1px solid var(--border);
1318
- }
1319
-
1320
- .cart-item-image {
1321
- width: 60px;
1322
- height: 60px;
1323
- background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
1324
- border-radius: var(--radius-sm);
1325
- display: flex;
1326
- align-items: center;
1327
- justify-content: center;
1328
- font-size: 24px;
1329
- color: var(--accent);
1330
- }
1331
-
1332
- .cart-item-details {
1333
- flex: 1;
1334
- }
1335
-
1336
- .cart-item-title {
1337
- font-weight: 700;
1338
- font-size: 14px;
1339
- color: var(--fg);
1340
- }
1341
-
1342
- .cart-item-price {
1343
- font-size: 13px;
1344
- color: var(--accent);
1345
- margin-top: 4px;
1346
- }
1347
-
1348
- .cart-item-quantity {
1349
- display: flex;
1350
- align-items: center;
1351
- gap: 10px;
1352
- margin-top: 8px;
1353
- }
1354
-
1355
- .cart-item-quantity button {
1356
- background: var(--bg-secondary);
1357
- border: none;
1358
- width: 28px;
1359
- height: 28px;
1360
- border-radius: 50%;
1361
- cursor: pointer;
1362
- font-weight: 700;
1363
- color: var(--fg);
1364
- transition: all 0.3s ease;
1365
- }
1366
-
1367
- .cart-item-quantity button:hover {
1368
- background: var(--accent);
1369
- color: white;
1370
- }
1371
-
1372
- .cart-item-remove {
1373
- color: var(--danger);
1374
- cursor: pointer;
1375
- padding: 8px;
1376
- transition: all 0.3s ease;
1377
- }
1378
-
1379
- .cart-item-remove:hover {
1380
- transform: scale(1.2);
1381
- }
1382
-
1383
- .cart-total {
1384
- display: flex;
1385
- justify-content: space-between;
1386
- font-weight: 800;
1387
- margin: 24px 0;
1388
- font-size: 18px;
1389
- color: var(--fg);
1390
- }
1391
-
1392
- .checkout-btn {
1393
- width: 100%;
1394
- padding: 18px;
1395
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
1396
- color: white;
1397
- border: none;
1398
- border-radius: var(--radius-full);
1399
- font-weight: 700;
1400
- cursor: pointer;
1401
- transition: all 0.3s ease;
1402
- font-size: 16px;
1403
- }
1404
-
1405
- .checkout-btn:hover {
1406
- transform: scale(1.02);
1407
- box-shadow: 0 8px 30px var(--accent-glow);
1408
- }
1409
-
1410
- /* Auth Modal */
1411
- .auth-tabs {
1412
- display: flex;
1413
- gap: 24px;
1414
- margin-bottom: 24px;
1415
- border-bottom: 2px solid var(--border);
1416
- }
1417
-
1418
- .auth-tab {
1419
- padding: 12px 0;
1420
- cursor: pointer;
1421
- color: var(--fg-muted);
1422
- font-weight: 700;
1423
- transition: all 0.3s ease;
1424
- position: relative;
1425
- }
1426
-
1427
- .auth-tab.active {
1428
- color: var(--accent);
1429
- }
1430
-
1431
- .auth-tab.active::after {
1432
- content: '';
1433
- position: absolute;
1434
- bottom: -2px;
1435
- left: 0;
1436
- right: 0;
1437
- height: 2px;
1438
- background: var(--accent);
1439
- }
1440
-
1441
- .auth-form input {
1442
- width: 100%;
1443
- padding: 16px 20px;
1444
- margin-bottom: 14px;
1445
- border: 1px solid var(--border);
1446
- border-radius: var(--radius-full);
1447
- outline: none;
1448
- font-size: 14px;
1449
- background: var(--bg-secondary);
1450
- color: var(--fg);
1451
- transition: all 0.3s ease;
1452
- }
1453
-
1454
- .auth-form input:focus {
1455
- border-color: var(--accent);
1456
- }
1457
-
1458
- .auth-form input::placeholder {
1459
- color: var(--fg-muted);
1460
- }
1461
-
1462
- .auth-form button {
1463
- width: 100%;
1464
- padding: 16px;
1465
- background: linear-gradient(135deg, var(--accent), #ff8c5a);
1466
- color: white;
1467
- border: none;
1468
- border-radius: var(--radius-full);
1469
- font-weight: 700;
1470
- cursor: pointer;
1471
- transition: all 0.3s ease;
1472
- font-size: 16px;
1473
- }
1474
-
1475
- .auth-form button:hover {
1476
- transform: scale(1.02);
1477
- box-shadow: 0 8px 25px var(--accent-glow);
1478
- }
1479
-
1480
- /* Orders Modal */
1481
- .order-item {
1482
- display: flex;
1483
- gap: 14px;
1484
- padding: 16px 0;
1485
- border-bottom: 1px solid var(--border);
1486
- }
1487
-
1488
- .order-item-image {
1489
- width: 60px;
1490
- height: 60px;
1491
- background: var(--bg-secondary);
1492
- border-radius: var(--radius-sm);
1493
- display: flex;
1494
- align-items: center;
1495
- justify-content: center;
1496
- color: var(--accent);
1497
- font-size: 24px;
1498
- }
1499
-
1500
- .order-item-details {
1501
- flex: 1;
1502
- }
1503
-
1504
- .order-status {
1505
- font-size: 12px;
1506
- color: var(--success);
1507
- margin-top: 6px;
1508
- font-weight: 600;
1509
- }
1510
-
1511
- /* Settings Modal */
1512
- .setting-item {
1513
- display: flex;
1514
- justify-content: space-between;
1515
- align-items: center;
1516
- padding: 16px 0;
1517
- border-bottom: 1px solid var(--border);
1518
- }
1519
-
1520
- .setting-item span {
1521
- color: var(--fg);
1522
- font-weight: 500;
1523
- }
1524
-
1525
- .dark-mode-toggle {
1526
- width: 56px;
1527
- height: 28px;
1528
- background: var(--border);
1529
- border-radius: var(--radius-full);
1530
- position: relative;
1531
- cursor: pointer;
1532
- transition: all 0.3s ease;
1533
- }
1534
-
1535
- .dark-mode-toggle.active {
1536
- background: var(--accent);
1537
- }
1538
-
1539
- .dark-mode-toggle .toggle-circle {
1540
- width: 22px;
1541
- height: 22px;
1542
- background: white;
1543
- border-radius: 50%;
1544
- position: absolute;
1545
- top: 3px;
1546
- right: 3px;
1547
- transition: all 0.3s ease;
1548
- }
1549
-
1550
- .dark-mode-toggle.active .toggle-circle {
1551
- right: 31px;
1552
- }
1553
-
1554
- /* Notification */
1555
- .notification {
1556
- position: fixed;
1557
- bottom: 100px;
1558
- left: 50%;
1559
- transform: translateX(-50%) translateY(100px);
1560
- background: var(--glass);
1561
- backdrop-filter: blur(20px);
1562
- color: var(--fg);
1563
- padding: 14px 28px;
1564
- border-radius: var(--radius-full);
1565
- z-index: 3000;
1566
- border: 1px solid var(--border);
1567
- opacity: 0;
1568
- transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1569
- font-weight: 500;
1570
- }
1571
-
1572
- .notification.show {
1573
- opacity: 1;
1574
- transform: translateX(-50%) translateY(0);
1575
- }
1576
-
1577
- /* Animations */
1578
- @keyframes fadeInUp {
1579
- from {
1580
- opacity: 0;
1581
- transform: translateY(20px);
1582
- }
1583
- to {
1584
- opacity: 1;
1585
- transform: translateY(0);
1586
- }
1587
- }
1588
-
1589
- .animate-in {
1590
- animation: fadeInUp 0.6s ease forwards;
1591
- }
1592
-
1593
- .delay-1 { animation-delay: 0.1s; opacity: 0; }
1594
- .delay-2 { animation-delay: 0.2s; opacity: 0; }
1595
- .delay-3 { animation-delay: 0.3s; opacity: 0; }
1596
- .delay-4 { animation-delay: 0.4s; opacity: 0; }
1597
-
1598
- /* Reduced Motion */
1599
- @
 
1
  <!DOCTYPE html>
2
  <html lang="fa" dir="rtl">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>آنلاین شاپ | سید خوید</title>
7
+ <link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --bg: #080810;
12
+ --bg-secondary: #0f0f18;
13
+ --card: #14141f;
14
+ --card-hover: #1c1c2a;
15
+ --border: #252535;
16
+ --fg: #f5f5fa;
17
+ --fg-muted: #7a7a95;
18
+ --accent: #ff5e3a;
19
+ --accent-hover: #ff7a5a;
20
+ --accent-glow: rgba(255, 94, 58, 0.35);
21
+ --accent-secondary: #00c9a7;
22
+ --accent-secondary-glow: rgba(0, 201, 167, 0.3);
23
+ --danger: #ff3b5c;
24
+ --success: #00d68f;
25
+ --warning: #ffaa00;
26
+ --glass: rgba(20, 20, 31, 0.85);
27
+ --radius-sm: 10px;
28
+ --radius-md: 16px;
29
+ --radius-lg: 24px;
30
+ --radius-xl: 32px;
31
+ --radius-full: 9999px;
32
+ --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
33
+ --shadow-md: 0 8px 24px rgba(0,0,0,0.25);
34
+ --shadow-lg: 0 16px 48px rgba(0,0,0,0.3);
35
+ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
36
+ --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
37
+ --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
38
+ }
39
+
40
+ * {
41
+ margin: 0;
42
+ padding: 0;
43
+ box-sizing: border-box;
44
+ font-family: 'Vazir', system-ui, sans-serif;
45
+ }
46
+
47
+ html {
48
+ scroll-behavior: smooth;
49
+ }
50
+
51
+ body {
52
+ background: var(--bg);
53
+ min-height: 100vh;
54
+ color: var(--fg);
55
+ overflow-x: hidden;
56
+ position: relative;
57
+ }
58
+
59
+ /* Animated Background */
60
+ .bg-canvas {
61
+ position: fixed;
62
+ top: 0;
63
+ left: 0;
64
+ width: 100%;
65
+ height: 100%;
66
+ pointer-events: none;
67
+ z-index: 0;
68
+ overflow: hidden;
69
+ }
70
+
71
+ .bg-gradient-layer {
72
+ position: absolute;
73
+ inset: 0;
74
+ background:
75
+ radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255, 94, 58, 0.12) 0%, transparent 50%),
76
+ radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0, 201, 167, 0.08) 0%, transparent 50%),
77
+ radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 94, 58, 0.05) 0%, transparent 60%);
78
+ animation: gradientShift 20s ease-in-out infinite;
79
+ }
80
+
81
+ @keyframes gradientShift {
82
+ 0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
83
+ 33% { transform: scale(1.1) translate(-3%, 2%); opacity: 0.9; }
84
+ 66% { transform: scale(0.95) translate(2%, -2%); opacity: 1; }
85
+ }
86
+
87
+ .floating-orb {
88
+ position: absolute;
89
+ border-radius: 50%;
90
+ filter: blur(80px);
91
+ opacity: 0.6;
92
+ animation: orbFloat 25s ease-in-out infinite;
93
+ }
94
+
95
+ .orb-1 {
96
+ width: 500px;
97
+ height: 500px;
98
+ background: linear-gradient(135deg, rgba(255, 94, 58, 0.2), rgba(255, 94, 58, 0.05));
99
+ top: -15%;
100
+ right: -10%;
101
+ animation-delay: 0s;
102
+ }
103
+
104
+ .orb-2 {
105
+ width: 400px;
106
+ height: 400px;
107
+ background: linear-gradient(135deg, rgba(0, 201, 167, 0.15), rgba(0, 201, 167, 0.03));
108
+ bottom: -10%;
109
+ left: -8%;
110
+ animation-delay: -8s;
111
+ }
112
+
113
+ .orb-3 {
114
+ width: 300px;
115
+ height: 300px;
116
+ background: linear-gradient(135deg, rgba(255, 94, 58, 0.1), transparent);
117
+ top: 40%;
118
+ left: 25%;
119
+ animation-delay: -16s;
120
+ }
121
+
122
+ @keyframes orbFloat {
123
+ 0%, 100% { transform: translate(0, 0) scale(1); }
124
+ 25% { transform: translate(40px, -30px) scale(1.05); }
125
+ 50% { transform: translate(-30px, 40px) scale(0.95); }
126
+ 75% { transform: translate(20px, 20px) scale(1.02); }
127
+ }
128
+
129
+ /* Grid Pattern */
130
+ .grid-pattern {
131
+ position: absolute;
132
+ inset: 0;
133
+ background-image:
134
+ linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
135
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
136
+ background-size: 60px 60px;
137
+ mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
138
+ }
139
+
140
+ /* Container */
141
+ .container {
142
+ max-width: 460px;
143
+ width: 100%;
144
+ margin: 0 auto;
145
+ padding: 20px;
146
+ position: relative;
147
+ z-index: 1;
148
+ }
149
+
150
+ @media (min-width: 768px) {
151
+ .container { max-width: 700px; }
152
+ }
153
+
154
+ @media (min-width: 1024px) {
155
+ .container { max-width: 960px; }
156
+ }
157
+
158
+ /* Branding Link */
159
+ .branding-link {
160
+ position: fixed;
161
+ top: 16px;
162
+ left: 16px;
163
+ z-index: 1000;
164
+ background: var(--glass);
165
+ backdrop-filter: blur(16px);
166
+ -webkit-backdrop-filter: blur(16px);
167
+ padding: 10px 18px;
168
+ border-radius: var(--radius-full);
169
+ border: 1px solid var(--border);
170
+ color: var(--fg-muted);
171
+ text-decoration: none;
172
+ font-size: 12px;
173
+ font-weight: 500;
174
+ transition: all var(--transition-smooth);
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 8px;
178
+ }
179
+
180
+ .branding-link:hover {
181
+ color: var(--accent);
182
+ border-color: var(--accent);
183
+ transform: translateY(-2px);
184
+ box-shadow: 0 8px 24px var(--accent-glow);
185
+ }
186
+
187
+ .branding-link::before {
188
+ content: '';
189
+ width: 6px;
190
+ height: 6px;
191
+ background: var(--accent);
192
+ border-radius: 50%;
193
+ animation: pulse 2s ease-in-out infinite;
194
+ }
195
+
196
+ /* Profile Header */
197
+ .profile-header {
198
+ display: flex;
199
+ flex-direction: column;
200
+ align-items: center;
201
+ text-align: center;
202
+ padding: 40px 24px 32px;
203
+ background: linear-gradient(180deg, var(--card) 0%, transparent 100%);
204
+ border-radius: var(--radius-xl);
205
+ margin-bottom: 24px;
206
+ position: relative;
207
+ overflow: hidden;
208
+ }
209
+
210
+ .profile-header::before {
211
+ content: '';
212
+ position: absolute;
213
+ top: 0;
214
+ left: 0;
215
+ right: 0;
216
+ height: 4px;
217
+ background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
218
+ background-size: 200% 100%;
219
+ animation: shimmer 4s linear infinite;
220
+ }
221
+
222
+ .profile-header::after {
223
+ content: '';
224
+ position: absolute;
225
+ top: 4px;
226
+ left: 50%;
227
+ transform: translateX(-50%);
228
+ width: 60%;
229
+ height: 1px;
230
+ background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
231
+ }
232
+
233
+ @keyframes shimmer {
234
+ 0% { background-position: 200% 0; }
235
+ 100% { background-position: -200% 0; }
236
+ }
237
+
238
+ .avatar-wrapper {
239
+ position: relative;
240
+ margin-bottom: 20px;
241
+ }
242
+
243
+ .avatar {
244
+ width: 110px;
245
+ height: 110px;
246
+ border-radius: 50%;
247
+ background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
248
+ display: flex;
249
+ align-items: center;
250
+ justify-content: center;
251
+ color: white;
252
+ font-size: 48px;
253
+ cursor: pointer;
254
+ position: relative;
255
+ transition: all var(--transition-smooth);
256
+ box-shadow: 0 8px 32px var(--accent-glow);
257
+ }
258
+
259
+ .avatar:hover {
260
+ transform: scale(1.05);
261
+ box-shadow: 0 12px 40px var(--accent-glow);
262
+ }
263
+
264
+ .avatar::before {
265
+ content: '';
266
+ position: absolute;
267
+ inset: -5px;
268
+ border-radius: 50%;
269
+ background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent));
270
+ z-index: -1;
271
+ animation: avatarRing 6s linear infinite;
272
+ }
273
+
274
+ .avatar::after {
275
+ content: '';
276
+ position: absolute;
277
+ inset: -3px;
278
+ border-radius: 50%;
279
+ background: var(--bg);
280
+ z-index: -1;
281
+ }
282
+
283
+ @keyframes avatarRing {
284
+ from { transform: rotate(0deg); }
285
+ to { transform: rotate(360deg); }
286
+ }
287
+
288
+ .online-indicator {
289
+ position: absolute;
290
+ bottom: 6px;
291
+ right: 6px;
292
+ width: 24px;
293
+ height: 24px;
294
+ background: var(--success);
295
+ border-radius: 50%;
296
+ border: 4px solid var(--bg);
297
+ animation: onlinePulse 2s ease-in-out infinite;
298
+ box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4);
299
+ }
300
+
301
+ @keyframes onlinePulse {
302
+ 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4); }
303
+ 50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 214, 143, 0); }
304
+ }
305
+
306
+ .name {
307
+ font-size: 28px;
308
+ font-weight: 800;
309
+ margin-bottom: 10px;
310
+ background: linear-gradient(135deg, var(--fg) 30%, var(--fg-muted));
311
+ -webkit-background-clip: text;
312
+ -webkit-text-fill-color: transparent;
313
+ background-clip: text;
314
+ letter-spacing: -0.5px;
315
+ }
316
+
317
+ .bio {
318
+ font-size: 14px;
319
+ color: var(--fg-muted);
320
+ line-height: 1.7;
321
+ max-width: 340px;
322
+ margin-bottom: 24px;
323
+ }
324
+
325
+ .stats {
326
+ display: flex;
327
+ gap: 40px;
328
+ justify-content: center;
329
+ margin: 24px 0;
330
+ }
331
+
332
+ .stat-item {
333
+ text-align: center;
334
+ position: relative;
335
+ cursor: pointer;
336
+ padding: 8px 16px;
337
+ border-radius: var(--radius-md);
338
+ transition: all var(--transition-fast);
339
+ }
340
+
341
+ .stat-item:hover {
342
+ background: var(--card-hover);
343
+ }
344
+
345
+ .stat-number {
346
+ font-weight: 800;
347
+ font-size: 22px;
348
+ color: var(--fg);
349
+ display: block;
350
+ transition: color var(--transition-fast);
351
+ }
352
+
353
+ .stat-item:hover .stat-number {
354
+ color: var(--accent);
355
+ }
356
+
357
+ .stat-label {
358
+ font-size: 12px;
359
+ color: var(--fg-muted);
360
+ margin-top: 4px;
361
+ }
362
+
363
+ .stat-item::after {
364
+ content: '';
365
+ position: absolute;
366
+ left: -20px;
367
+ top: 50%;
368
+ transform: translateY(-50%);
369
+ width: 1px;
370
+ height: 36px;
371
+ background: linear-gradient(180deg, transparent, var(--border), transparent);
372
+ }
373
+
374
+ .stat-item:first-child::after {
375
+ display: none;
376
+ }
377
+
378
+ .instagram-row {
379
+ display: flex;
380
+ align-items: center;
381
+ gap: 14px;
382
+ background: var(--card);
383
+ padding: 14px 24px;
384
+ border-radius: var(--radius-full);
385
+ border: 1px solid var(--border);
386
+ transition: all var(--transition-smooth);
387
+ }
388
+
389
+ .instagram-row:hover {
390
+ border-color: var(--accent);
391
+ transform: translateY(-2px);
392
+ box-shadow: var(--shadow-md);
393
+ }
394
+
395
+ .instagram-row i {
396
+ font-size: 24px;
397
+ background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
398
+ -webkit-background-clip: text;
399
+ -webkit-text-fill-color: transparent;
400
+ background-clip: text;
401
+ }
402
+
403
+ .instagram-row span {
404
+ font-weight: 600;
405
+ flex: 1;
406
+ }
407
+
408
+ .btn-primary {
409
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
410
+ color: white;
411
+ border: none;
412
+ padding: 12px 32px;
413
+ border-radius: var(--radius-full);
414
+ font-weight: 700;
415
+ cursor: pointer;
416
+ transition: all var(--transition-smooth);
417
+ position: relative;
418
+ overflow: hidden;
419
+ font-size: 14px;
420
+ }
421
+
422
+ .btn-primary::before {
423
+ content: '';
424
+ position: absolute;
425
+ inset: 0;
426
+ background: linear-gradient(135deg, transparent, rgba(255,255,255,0.25), transparent);
427
+ transform: translateX(-100%);
428
+ transition: transform 0.6s ease;
429
+ }
430
+
431
+ .btn-primary:hover::before {
432
+ transform: translateX(100%);
433
+ }
434
+
435
+ .btn-primary:hover {
436
+ transform: scale(1.05);
437
+ box-shadow: 0 8px 28px var(--accent-glow);
438
+ }
439
+
440
+ .btn-primary:active {
441
+ transform: scale(0.98);
442
+ }
443
+
444
+ .btn-primary.following {
445
+ background: var(--card-hover);
446
+ border: 1px solid var(--border);
447
+ }
448
+
449
+ /* User Menu */
450
+ .user-menu {
451
+ position: absolute;
452
+ top: 130px;
453
+ left: 10px;
454
+ background: var(--glass);
455
+ backdrop-filter: blur(20px);
456
+ -webkit-backdrop-filter: blur(20px);
457
+ border-radius: var(--radius-lg);
458
+ border: 1px solid var(--border);
459
+ width: 230px;
460
+ z-index: 100;
461
+ opacity: 0;
462
+ visibility: hidden;
463
+ transform: translateY(-10px) scale(0.95);
464
+ transition: all var(--transition-smooth);
465
+ box-shadow: var(--shadow-lg);
466
+ overflow: hidden;
467
+ }
468
+
469
+ .user-menu.active {
470
+ opacity: 1;
471
+ visibility: visible;
472
+ transform: translateY(0) scale(1);
473
+ }
474
+
475
+ .user-menu-item {
476
+ padding: 16px 20px;
477
+ border-bottom: 1px solid var(--border);
478
+ cursor: pointer;
479
+ transition: all var(--transition-fast);
480
+ display: flex;
481
+ align-items: center;
482
+ gap: 14px;
483
+ color: var(--fg);
484
+ font-weight: 500;
485
+ }
486
+
487
+ .user-menu-item:last-child {
488
+ border-bottom: none;
489
+ }
490
+
491
+ .user-menu-item:hover {
492
+ background: var(--card-hover);
493
+ padding-right: 28px;
494
+ }
495
+
496
+ .user-menu-item i {
497
+ width: 22px;
498
+ color: var(--accent);
499
+ font-size: 16px;
500
+ }
501
+
502
+ .user-menu-item.danger {
503
+ color: var(--danger);
504
+ }
505
+
506
+ .user-menu-item.danger i {
507
+ color: var(--danger);
508
+ }
509
+
510
+ /* Search Bar */
511
+ .search-bar {
512
+ display: flex;
513
+ align-items: center;
514
+ background: var(--card);
515
+ border-radius: var(--radius-full);
516
+ padding: 16px 22px;
517
+ margin-bottom: 20px;
518
+ border: 1px solid var(--border);
519
+ transition: all var(--transition-smooth);
520
+ }
521
+
522
+ .search-bar:focus-within {
523
+ border-color: var(--accent);
524
+ box-shadow: 0 0 0 4px var(--accent-glow);
525
+ background: var(--card-hover);
526
+ }
527
+
528
+ .search-bar i {
529
+ color: var(--fg-muted);
530
+ margin-left: 14px;
531
+ transition: color var(--transition-fast);
532
+ font-size: 16px;
533
+ }
534
+
535
+ .search-bar:focus-within i {
536
+ color: var(--accent);
537
+ }
538
+
539
+ .search-bar input {
540
+ flex: 1;
541
+ border: none;
542
+ background: transparent;
543
+ outline: none;
544
+ font-size: 15px;
545
+ color: var(--fg);
546
+ }
547
+
548
+ .search-bar input::placeholder {
549
+ color: var(--fg-muted);
550
+ }
551
+
552
+ /* Filter Chips */
553
+ .filter-chips {
554
+ display: flex;
555
+ gap: 10px;
556
+ overflow-x: auto;
557
+ padding: 8px 0;
558
+ margin-bottom: 24px;
559
+ scrollbar-width: none;
560
+ }
561
+
562
+ .filter-chips::-webkit-scrollbar {
563
+ display: none;
564
+ }
565
+
566
+ .chip {
567
+ background: var(--card);
568
+ padding: 12px 22px;
569
+ border-radius: var(--radius-full);
570
+ font-size: 13px;
571
+ white-space: nowrap;
572
+ cursor: pointer;
573
+ transition: all var(--transition-smooth);
574
+ border: 1px solid var(--border);
575
+ color: var(--fg-muted);
576
+ font-weight: 600;
577
+ }
578
+
579
+ .chip:hover {
580
+ border-color: var(--accent);
581
+ color: var(--fg);
582
+ background: var(--card-hover);
583
+ }
584
+
585
+ .chip.active {
586
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
587
+ color: white;
588
+ border-color: transparent;
589
+ box-shadow: 0 4px 20px var(--accent-glow);
590
+ }
591
+
592
+ /* Highlights */
593
+ .highlights {
594
+ display: flex;
595
+ overflow-x: auto;
596
+ gap: 20px;
597
+ padding: 12px 0;
598
+ margin-bottom: 32px;
599
+ scrollbar-width: none;
600
+ }
601
+
602
+ .highlights::-webkit-scrollbar {
603
+ display: none;
604
+ }
605
+
606
+ .highlight-item {
607
+ display: flex;
608
+ flex-direction: column;
609
+ align-items: center;
610
+ min-width: 80px;
611
+ cursor: pointer;
612
+ }
613
+
614
+ .highlight-circle {
615
+ width: 78px;
616
+ height: 78px;
617
+ border-radius: 50%;
618
+ background: var(--card);
619
+ display: flex;
620
+ align-items: center;
621
+ justify-content: center;
622
+ font-size: 28px;
623
+ color: var(--accent);
624
+ margin-bottom: 12px;
625
+ border: 2px solid var(--border);
626
+ transition: all var(--transition-smooth);
627
+ position: relative;
628
+ }
629
+
630
+ .highlight-circle::before {
631
+ content: '';
632
+ position: absolute;
633
+ inset: -4px;
634
+ border-radius: 50%;
635
+ background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent));
636
+ z-index: -1;
637
+ opacity: 0;
638
+ transition: opacity var(--transition-smooth);
639
+ }
640
+
641
+ .highlight-circle::after {
642
+ content: '';
643
+ position: absolute;
644
+ inset: -2px;
645
+ border-radius: 50%;
646
+ background: var(--bg);
647
+ z-index: -1;
648
+ }
649
+
650
+ .highlight-item:hover .highlight-circle {
651
+ transform: scale(1.1);
652
+ border-color: transparent;
653
+ }
654
+
655
+ .highlight-item:hover .highlight-circle::before {
656
+ opacity: 1;
657
+ animation: highlightRing 3s linear infinite;
658
+ }
659
+
660
+ @keyframes highlightRing {
661
+ from { transform: rotate(0deg); }
662
+ to { transform: rotate(360deg); }
663
+ }
664
+
665
+ .highlight-label {
666
+ font-size: 11px;
667
+ color: var(--fg-muted);
668
+ text-align: center;
669
+ font-weight: 500;
670
+ max-width: 80px;
671
+ overflow: hidden;
672
+ text-overflow: ellipsis;
673
+ white-space: nowrap;
674
+ }
675
+
676
+ /* Category Section */
677
+ .category-section {
678
+ display: flex;
679
+ justify-content: space-between;
680
+ align-items: center;
681
+ margin-bottom: 20px;
682
+ }
683
+
684
+ .category-title {
685
+ font-weight: 800;
686
+ font-size: 22px;
687
+ color: var(--fg);
688
+ }
689
+
690
+ .category-link {
691
+ color: var(--accent);
692
+ font-size: 14px;
693
+ cursor: pointer;
694
+ font-weight: 600;
695
+ transition: all var(--transition-fast);
696
+ padding: 6px 12px;
697
+ border-radius: var(--radius-sm);
698
+ }
699
+
700
+ .category-link:hover {
701
+ background: var(--card);
702
+ }
703
+
704
+ /* Products Grid */
705
+ .products-grid {
706
+ display: grid;
707
+ grid-template-columns: repeat(2, 1fr);
708
+ gap: 16px;
709
+ margin-bottom: 48px;
710
+ }
711
+
712
+ @media (min-width: 768px) {
713
+ .products-grid { grid-template-columns: repeat(3, 1fr); }
714
+ }
715
+
716
+ @media (min-width: 1024px) {
717
+ .products-grid { grid-template-columns: repeat(4, 1fr); }
718
+ }
719
+
720
+ .product-card {
721
+ background: var(--card);
722
+ border-radius: var(--radius-lg);
723
+ border: 1px solid var(--border);
724
+ overflow: hidden;
725
+ transition: all var(--transition-smooth);
726
+ cursor: pointer;
727
+ position: relative;
728
+ }
729
+
730
+ .product-card:hover {
731
+ transform: translateY(-8px);
732
+ border-color: var(--accent);
733
+ box-shadow: 0 16px 48px rgba(0,0,0,0.35);
734
+ }
735
+
736
+ .discount-badge {
737
+ position: absolute;
738
+ top: 14px;
739
+ right: 14px;
740
+ background: linear-gradient(135deg, var(--danger), #ff5a6e);
741
+ color: white;
742
+ padding: 6px 14px;
743
+ border-radius: var(--radius-full);
744
+ font-size: 11px;
745
+ font-weight: 700;
746
+ z-index: 2;
747
+ box-shadow: 0 4px 16px rgba(255, 59, 92, 0.4);
748
+ }
749
+
750
+ .product-image {
751
+ width: 100%;
752
+ height: 150px;
753
+ background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
754
+ display: flex;
755
+ align-items: center;
756
+ justify-content: center;
757
+ color: var(--accent);
758
+ font-size: 44px;
759
+ position: relative;
760
+ overflow: hidden;
761
+ }
762
+
763
+ .product-image::before {
764
+ content: '';
765
+ position: absolute;
766
+ inset: 0;
767
+ background: linear-gradient(135deg, transparent 30%, rgba(255, 94, 58, 0.08) 100%);
768
+ }
769
+
770
+ .product-image::after {
771
+ content: '';
772
+ position: absolute;
773
+ top: 0;
774
+ left: -100%;
775
+ width: 50%;
776
+ height: 100%;
777
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
778
+ transition: left 0.5s ease;
779
+ }
780
+
781
+ .product-card:hover .product-image::after {
782
+ left: 100%;
783
+ }
784
+
785
+ .product-info {
786
+ padding: 16px;
787
+ }
788
+
789
+ .product-title {
790
+ font-weight: 700;
791
+ font-size: 14px;
792
+ margin-bottom: 8px;
793
+ color: var(--fg);
794
+ }
795
+
796
+ .product-rating {
797
+ display: flex;
798
+ align-items: center;
799
+ gap: 6px;
800
+ margin-bottom: 12px;
801
+ font-size: 12px;
802
+ }
803
+
804
+ .product-rating .stars {
805
+ color: var(--warning);
806
+ }
807
+
808
+ .product-rating span {
809
+ color: var(--fg-muted);
810
+ }
811
+
812
+ .product-price-row {
813
+ display: flex;
814
+ align-items: center;
815
+ flex-wrap: wrap;
816
+ gap: 8px;
817
+ margin-bottom: 14px;
818
+ }
819
+
820
+ .product-price {
821
+ font-size: 16px;
822
+ color: var(--accent);
823
+ font-weight: 800;
824
+ }
825
+
826
+ .product-old-price {
827
+ font-size: 11px;
828
+ color: var(--fg-muted);
829
+ text-decoration: line-through;
830
+ }
831
+
832
+ .product-actions {
833
+ display: flex;
834
+ justify-content: space-between;
835
+ align-items: center;
836
+ padding-top: 14px;
837
+ border-top: 1px solid var(--border);
838
+ }
839
+
840
+ .action-btn {
841
+ background: none;
842
+ border: none;
843
+ font-size: 16px;
844
+ cursor: pointer;
845
+ color: var(--fg-muted);
846
+ transition: all var(--transition-fast);
847
+ width: 38px;
848
+ height: 38px;
849
+ border-radius: 50%;
850
+ display: flex;
851
+ align-items: center;
852
+ justify-content: center;
853
+ }
854
+
855
+ .action-btn:hover {
856
+ background: var(--card-hover);
857
+ color: var(--fg);
858
+ }
859
+
860
+ .action-btn.liked {
861
+ color: var(--danger);
862
+ }
863
+
864
+ .action-btn.liked i {
865
+ animation: heartBeat 0.4s ease;
866
+ }
867
+
868
+ @keyframes heartBeat {
869
+ 0%, 100% { transform: scale(1); }
870
+ 50% { transform: scale(1.3); }
871
+ }
872
+
873
+ .action-btn.saved {
874
+ color: var(--warning);
875
+ }
876
+
877
+ .cart-btn {
878
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
879
+ color: white !important;
880
+ width: 38px;
881
+ height: 38px;
882
+ border-radius: 50%;
883
+ display: flex;
884
+ align-items: center;
885
+ justify-content: center;
886
+ border: none;
887
+ cursor: pointer;
888
+ transition: all var(--transition-smooth);
889
+ }
890
+
891
+ .cart-btn:hover {
892
+ transform: scale(1.15);
893
+ box-shadow: 0 6px 20px var(--accent-glow);
894
+ }
895
+
896
+ .cart-btn:active {
897
+ transform: scale(0.95);
898
+ }
899
+
900
+ /* Videos Section */
901
+ .videos-section {
902
+ margin-bottom: 48px;
903
+ }
904
+
905
+ .section-title {
906
+ font-size: 24px;
907
+ font-weight: 800;
908
+ margin-bottom: 24px;
909
+ color: var(--fg);
910
+ }
911
+
912
+ .video-card {
913
+ display: flex;
914
+ gap: 18px;
915
+ background: var(--card);
916
+ border-radius: var(--radius-lg);
917
+ padding: 18px;
918
+ margin-bottom: 16px;
919
+ border: 1px solid var(--border);
920
+ cursor: pointer;
921
+ transition: all var(--transition-smooth);
922
+ }
923
+
924
+ .video-card:hover {
925
+ border-color: var(--accent);
926
+ transform: translateX(-6px);
927
+ box-shadow: var(--shadow-md);
928
+ }
929
+
930
+ .video-thumbnail {
931
+ width: 100px;
932
+ height: 100px;
933
+ background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
934
+ border-radius: var(--radius-md);
935
+ display: flex;
936
+ align-items: center;
937
+ justify-content: center;
938
+ color: white;
939
+ font-size: 32px;
940
+ flex-shrink: 0;
941
+ position: relative;
942
+ overflow: hidden;
943
+ }
944
+
945
+ .video-thumbnail::before {
946
+ content: '';
947
+ position: absolute;
948
+ inset: 0;
949
+ background: rgba(0,0,0,0.25);
950
+ }
951
+
952
+ .video-thumbnail i {
953
+ position: relative;
954
+ z-index: 1;
955
+ transition: transform var(--transition-fast);
956
+ }
957
+
958
+ .video-card:hover .video-thumbnail i {
959
+ transform: scale(1.2);
960
+ }
961
+
962
+ .video-details {
963
+ flex: 1;
964
+ }
965
+
966
+ .video-title {
967
+ font-weight: 700;
968
+ font-size: 16px;
969
+ margin-bottom: 8px;
970
+ color: var(--fg);
971
+ }
972
+
973
+ .video-subtitle {
974
+ font-size: 13px;
975
+ color: var(--fg-muted);
976
+ margin-bottom: 12px;
977
+ line-height: 1.6;
978
+ }
979
+
980
+ .video-stats {
981
+ display: flex;
982
+ gap: 18px;
983
+ font-size: 12px;
984
+ color: var(--fg-muted);
985
+ align-items: center;
986
+ flex-wrap: wrap;
987
+ }
988
+
989
+ .video-stats span {
990
+ display: flex;
991
+ align-items: center;
992
+ gap: 6px;
993
+ }
994
+
995
+ .video-stats i {
996
+ color: var(--accent);
997
+ }
998
+
999
+ .like-comment {
1000
+ display: flex;
1001
+ gap: 12px;
1002
+ margin-top: 14px;
1003
+ }
1004
+
1005
+ .like-comment button {
1006
+ background: var(--bg-secondary);
1007
+ border: none;
1008
+ display: flex;
1009
+ align-items: center;
1010
+ gap: 8px;
1011
+ font-size: 12px;
1012
+ color: var(--fg-muted);
1013
+ cursor: pointer;
1014
+ padding: 10px 16px;
1015
+ border-radius: var(--radius-full);
1016
+ transition: all var(--transition-fast);
1017
+ }
1018
+
1019
+ .like-comment button:hover {
1020
+ background: var(--card-hover);
1021
+ color: var(--fg);
1022
+ }
1023
+
1024
+ .like-comment button.liked {
1025
+ color: var(--danger);
1026
+ background: rgba(255, 59, 92, 0.1);
1027
+ }
1028
+
1029
+ .like-comment button.liked i {
1030
+ color: var(--danger);
1031
+ }
1032
+
1033
+ /* Comments Section */
1034
+ .comments-section {
1035
+ margin-top: 40px;
1036
+ padding-top: 40px;
1037
+ border-top: 1px solid var(--border);
1038
+ }
1039
+
1040
+ .comment-item {
1041
+ display: flex;
1042
+ gap: 16px;
1043
+ margin-bottom: 20px;
1044
+ background: var(--card);
1045
+ padding: 18px;
1046
+ border-radius: var(--radius-lg);
1047
+ border: 1px solid var(--border);
1048
+ transition: all var(--transition-fast);
1049
+ }
1050
+
1051
+ .comment-item:hover {
1052
+ border-color: var(--accent);
1053
+ }
1054
+
1055
+ .comment-avatar {
1056
+ width: 52px;
1057
+ height: 52px;
1058
+ border-radius: 50%;
1059
+ background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
1060
+ display: flex;
1061
+ align-items: center;
1062
+ justify-content: center;
1063
+ color: white;
1064
+ font-size: 22px;
1065
+ flex-shrink: 0;
1066
+ }
1067
+
1068
+ .comment-content {
1069
+ flex: 1;
1070
+ }
1071
+
1072
+ .comment-author {
1073
+ font-weight: 700;
1074
+ font-size: 15px;
1075
+ margin-bottom: 8px;
1076
+ color: var(--fg);
1077
+ }
1078
+
1079
+ .comment-text {
1080
+ font-size: 13px;
1081
+ color: var(--fg-muted);
1082
+ line-height: 1.7;
1083
+ }
1084
+
1085
+ .comment-actions {
1086
+ display: flex;
1087
+ gap: 18px;
1088
+ margin-top: 14px;
1089
+ font-size: 12px;
1090
+ }
1091
+
1092
+ .comment-actions button {
1093
+ background: none;
1094
+ border: none;
1095
+ color: var(--fg-muted);
1096
+ cursor: pointer;
1097
+ display: flex;
1098
+ align-items: center;
1099
+ gap: 6px;
1100
+ transition: color var(--transition-fast);
1101
+ font-family: inherit;
1102
+ }
1103
+
1104
+ .comment-actions button:hover {
1105
+ color: var(--accent);
1106
+ }
1107
+
1108
+ .comment-input {
1109
+ display: flex;
1110
+ gap: 14px;
1111
+ margin-top: 24px;
1112
+ }
1113
+
1114
+ .comment-input input {
1115
+ flex: 1;
1116
+ padding: 16px 22px;
1117
+ border: 1px solid var(--border);
1118
+ border-radius: var(--radius-full);
1119
+ outline: none;
1120
+ font-size: 14px;
1121
+ background: var(--card);
1122
+ color: var(--fg);
1123
+ transition: all var(--transition-fast);
1124
+ }
1125
+
1126
+ .comment-input input:focus {
1127
+ border-color: var(--accent);
1128
+ box-shadow: 0 0 0 4px var(--accent-glow);
1129
+ }
1130
+
1131
+ .comment-input input::placeholder {
1132
+ color: var(--fg-muted);
1133
+ }
1134
+
1135
+ .comment-input button {
1136
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
1137
+ color: white;
1138
+ border: none;
1139
+ padding: 16px 32px;
1140
+ border-radius: var(--radius-full);
1141
+ font-weight: 700;
1142
+ cursor: pointer;
1143
+ transition: all var(--transition-smooth);
1144
+ font-family: inherit;
1145
+ }
1146
+
1147
+ .comment-input button:hover {
1148
+ transform: scale(1.05);
1149
+ box-shadow: 0 8px 28px var(--accent-glow);
1150
+ }
1151
+
1152
+ /* Bottom Navigation */
1153
+ .bottom-nav {
1154
+ display: flex;
1155
+ justify-content: space-around;
1156
+ margin-top: 40px;
1157
+ padding: 18px 12px;
1158
+ background: var(--glass);
1159
+ backdrop-filter: blur(20px);
1160
+ -webkit-backdrop-filter: blur(20px);
1161
+ border-radius: var(--radius-xl);
1162
+ border: 1px solid var(--border);
1163
+ position: sticky;
1164
+ bottom: 20px;
1165
+ z-index: 100;
1166
+ box-shadow: var(--shadow-lg);
1167
+ }
1168
+
1169
+ .nav-item {
1170
+ text-align: center;
1171
+ color: var(--fg-muted);
1172
+ font-size: 10px;
1173
+ cursor: pointer;
1174
+ transition: all var(--transition-fast);
1175
+ padding: 10px 16px;
1176
+ border-radius: var(--radius-md);
1177
+ position: relative;
1178
+ }
1179
+
1180
+ .nav-item i {
1181
+ font-size: 22px;
1182
+ display: block;
1183
+ margin-bottom: 6px;
1184
+ transition: transform var(--transition-bounce);
1185
+ }
1186
+
1187
+ .nav-item:hover {
1188
+ color: var(--fg);
1189
+ background: var(--card-hover);
1190
+ }
1191
+
1192
+ .nav-item.active {
1193
+ color: var(--accent);
1194
+ }
1195
+
1196
+ .nav-item.active i {
1197
+ transform: scale(1.15);
1198
+ }
1199
+
1200
+ .nav-item.active::after {
1201
+ content: '';
1202
+ position: absolute;
1203
+ bottom: 0;
1204
+ left: 50%;
1205
+ transform: translateX(-50%);
1206
+ width: 4px;
1207
+ height: 4px;
1208
+ background: var(--accent);
1209
+ border-radius: 50%;
1210
+ }
1211
+
1212
+ .cart-badge {
1213
+ position: absolute;
1214
+ top: -4px;
1215
+ right: -4px;
1216
+ background: linear-gradient(135deg, var(--danger), #ff5a6e);
1217
+ color: white;
1218
+ border-radius: 50%;
1219
+ width: 22px;
1220
+ height: 22px;
1221
+ font-size: 11px;
1222
+ font-weight: 700;
1223
+ display: flex;
1224
+ align-items: center;
1225
+ justify-content: center;
1226
+ animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
1227
+ box-shadow: 0 2px 8px rgba(255, 59, 92, 0.4);
1228
+ }
1229
+
1230
+ @keyframes badgePop {
1231
+ 0% { transform: scale(0) rotate(-180deg); }
1232
+ 100% { transform: scale(1) rotate(0deg); }
1233
+ }
1234
+
1235
+ /* Modals */
1236
+ .modal {
1237
+ display: none;
1238
+ position: fixed;
1239
+ top: 0;
1240
+ left: 0;
1241
+ width: 100%;
1242
+ height: 100%;
1243
+ background: rgba(0,0,0,0.9);
1244
+ backdrop-filter: blur(12px);
1245
+ -webkit-backdrop-filter: blur(12px);
1246
+ z-index: 2000;
1247
+ justify-content: center;
1248
+ align-items: center;
1249
+ padding: 20px;
1250
+ opacity: 0;
1251
+ transition: opacity var(--transition-smooth);
1252
+ }
1253
+
1254
+ .modal.active {
1255
+ display: flex;
1256
+ opacity: 1;
1257
+ }
1258
+
1259
+ .modal-content {
1260
+ background: var(--card);
1261
+ border-radius: var(--radius-xl);
1262
+ max-width: 520px;
1263
+ width: 100%;
1264
+ max-height: 90vh;
1265
+ overflow-y: auto;
1266
+ padding: 32px;
1267
+ position: relative;
1268
+ border: 1px solid var(--border);
1269
+ transform: scale(0.9) translateY(20px);
1270
+ transition: transform var(--transition-bounce);
1271
+ box-shadow: var(--shadow-lg);
1272
+ }
1273
+
1274
+ .modal.active .modal-content {
1275
+ transform: scale(1) translateY(0);
1276
+ }
1277
+
1278
+ .modal-close {
1279
+ position: absolute;
1280
+ top: 18px;
1281
+ left: 18px;
1282
+ font-size: 28px;
1283
+ cursor: pointer;
1284
+ color: var(--fg-muted);
1285
+ transition: all var(--transition-fast);
1286
+ width: 44px;
1287
+ height: 44px;
1288
+ border-radius: 50%;
1289
+ display: flex;
1290
+ align-items: center;
1291
+ justify-content: center;
1292
+ background: transparent;
1293
+ border: none;
1294
+ }
1295
+
1296
+ .modal-close:hover {
1297
+ color: var(--danger);
1298
+ background: rgba(255, 59, 92, 0.1);
1299
+ transform: rotate(90deg);
1300
+ }
1301
+
1302
+ /* Story Modal */
1303
+ .story-modal {
1304
+ background: black;
1305
+ }
1306
+
1307
+ .story-content {
1308
+ width: 100%;
1309
+ max-width: 420px;
1310
+ background: #0a0a0f;
1311
+ border-radius: var(--radius-lg);
1312
+ overflow: hidden;
1313
+ position: relative;
1314
+ }
1315
+
1316
+ .story-header {
1317
+ display: flex;
1318
+ align-items: center;
1319
+ padding: 18px;
1320
+ color: white;
1321
+ background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
1322
+ position: absolute;
1323
+ top: 0;
1324
+ left: 0;
1325
+ right: 0;
1326
+ z-index: 10;
1327
+ }
1328
+
1329
+ .story-avatar {
1330
+ width: 40px;
1331
+ height: 40px;
1332
+ border-radius: 50%;
1333
+ background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
1334
+ display: flex;
1335
+ align-items: center;
1336
+ justify-content: center;
1337
+ margin-left: 14px;
1338
+ font-size: 16px;
1339
+ }
1340
+
1341
+ .story-username {
1342
+ font-weight: 700;
1343
+ flex: 1;
1344
+ }
1345
+
1346
+ .story-close {
1347
+ background: none;
1348
+ border: none;
1349
+ color: white;
1350
+ font-size: 32px;
1351
+ cursor: pointer;
1352
+ opacity: 0.8;
1353
+ transition: opacity var(--transition-fast);
1354
+ }
1355
+
1356
+ .story-close:hover {
1357
+ opacity: 1;
1358
+ }
1359
+
1360
+ .story-image {
1361
+ width: 100%;
1362
+ aspect-ratio: 9/16;
1363
+ background: linear-gradient(135deg, #14141f, #1c1c2a);
1364
+ display: flex;
1365
+ align-items: center;
1366
+ justify-content: center;
1367
+ color: var(--accent);
1368
+ font-size: 72px;
1369
+ }
1370
+
1371
+ .story-progress-bar {
1372
+ display: flex;
1373
+ gap: 4px;
1374
+ padding: 14px;
1375
+ background: black;
1376
+ }
1377
+
1378
+ .story-progress {
1379
+ height: 3px;
1380
+ background: rgba(255,255,255,0.2);
1381
+ flex: 1;
1382
+ border-radius: 2px;
1383
+ overflow: hidden;
1384
+ }
1385
+
1386
+ .story-progress-fill {
1387
+ height: 100%;
1388
+ width: 0%;
1389
+ background: white;
1390
+ transition: width 5s linear;
1391
+ }
1392
+
1393
+ /* Video Modal */
1394
+ .video-modal-content {
1395
+ background: black;
1396
+ padding: 0;
1397
+ border-radius: var(--radius-lg);
1398
+ overflow: hidden;
1399
+ }
1400
+
1401
+ .video-player {
1402
+ width: 100%;
1403
+ aspect-ratio: 16/9;
1404
+ background: linear-gradient(135deg, #14141f, #1c1c2a);
1405
+ display: flex;
1406
+ flex-direction: column;
1407
+ align-items: center;
1408
+ justify-content: center;
1409
+ color: white;
1410
+ font-size: 56px;
1411
+ }
1412
+
1413
+ .video-player p {
1414
+ margin-top: 18px;
1415
+ font-size: 16px;
1416
+ color: var(--fg-muted);
1417
+ }
1418
+
1419
+ /* Product Detail */
1420
+ .product-detail-image {
1421
+ width: 100%;
1422
+ height: 240px;
1423
+ background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary));
1424
+ display: flex;
1425
+ align-items: center;
1426
+ justify-content: center;
1427
+ font-size: 88px;
1428
+ color: var(--accent);
1429
+ border-radius: var(--radius-lg);
1430
+ margin-bottom: 24px;
1431
+ position: relative;
1432
+ overflow: hidden;
1433
+ }
1434
+
1435
+ .product-detail-image::before {
1436
+ content: '';
1437
+ position: absolute;
1438
+ inset: 0;
1439
+ background: linear-gradient(135deg, transparent 40%, rgba(255, 94, 58, 0.1) 100%);
1440
+ }
1441
+
1442
+ .product-detail-title {
1443
+ font-size: 28px;
1444
+ font-weight: 800;
1445
+ margin-bottom: 12px;
1446
+ color: var(--fg);
1447
+ }
1448
+
1449
+ .product-detail-price {
1450
+ font-size: 24px;
1451
+ color: var(--accent);
1452
+ font-weight: 800;
1453
+ margin-bottom: 24px;
1454
+ }
1455
+
1456
+ .product-detail-description {
1457
+ font-size: 14px;
1458
+ color: var(--fg-muted);
1459
+ margin-bottom: 28px;
1460
+ line-height: 1.9;
1461
+ }
1462
+
1463
+ .product-detail-actions {
1464
+ display: flex;
1465
+ gap: 16px;
1466
+ }
1467
+
1468
+ .product-detail-actions button {
1469
+ flex: 1;
1470
+ padding: 18px;
1471
+ border: none;
1472
+ border-radius: var(--radius-full);
1473
+ font-weight: 700;
1474
+ cursor: pointer;
1475
+ transition: all var(--transition-smooth);
1476
+ font-family: inherit;
1477
+ font-size: 15px;
1478
+ }
1479
+
1480
+ .add-to-cart-btn {
1481
+ background: linear-gradient(135deg, var(--accent), var(--accent-hover));
1482
+ color: white;
1483
+ }
1484
+
1485
+ .add-to-cart-btn:hover {
1486
+ transform: scale(1.02);
1487
+ box-shadow: 0 8px 28px var(--accent-glow);
1488
+ }
1489
+
1490
+ .buy-now-btn {
1491
+ background: linear-gradient(135deg, var(--danger), #ff5a6e);
1492
+ color: white;
1493
+ }
1494
+
1495
+ .buy-now-btn:hover {
1496
+ transform: scale(1.02);
1497
+ box-shadow: 0 8px 28px rgba(255, 59, 92, 0.4);
1498
+ }
1499
+
1500
+ /* Cart Modal */
1501
+ .cart-item {
1502
+ display: flex;
1503
+ align-items: center;
1504
+ gap: 16px;
1505
+ padding: 18px 0;
1506
+ border-bottom: 1px solid var(--border);
1507
+ }