Overlay va Background modifikatorlari

// ═══════════════════════════════════════
//  ODDIY OVERLAY
// ═══════════════════════════════════════
Image(systemName: "bell.fill")
    .font(.title)
    .overlay(alignment: .topTrailing) {
        // Badge — o'ng yuqori burchakda
        Text("3")
            .font(.caption2.bold())
            .foregroundStyle(.white)
            .padding(5)
            .background(.red)
            .clipShape(Circle())
            .offset(x: 10, y: -10)
    }


// ═══════════════════════════════════════
//  MURAKKAB OVERLAY — progress bar
// ═══════════════════════════════════════
struct YuklanishKartasi: View {
    let foiz: Double  // 0...1

    var body: some View {
        RoundedRectangle(cornerRadius: 16)
            .fill(.blue.gradient)
            .frame(height: 100)
            .overlay(alignment: .bottom) {
                // Progress bar — pastda
                GeometryReader { geo in
                    RoundedRectangle(cornerRadius: 4)
                        .fill(.white.opacity(0.3))
                        .frame(width: geo.size.width * foiz, height: 6)
                }
                .frame(height: 6)
                .padding(.horizontal, 12)
                .padding(.bottom, 12)
            }
            .overlay {
                // Matn — markazda
                Text("\(Int(foiz * 100))%")
                    .font(.title.bold())
                    .foregroundStyle(.white)
            }
    }
}

// ═══════════════════════════════════════
//  BACKGROUND — turli variantlar
// ═══════════════════════════════════════

// Oddiy rang
Text("Salom")
    .padding()
    .background(.blue)
    .foregroundStyle(.white)
    .clipShape(RoundedRectangle(cornerRadius: 10))

// Gradient fon
Text("Gradient")
    .padding()
    .background(
        LinearGradient(colors: [.purple, .pink],
                      startPoint: .leading, endPoint: .trailing)
    )
    .clipShape(Capsule())

// Murakkab background
Text("Murakkab")
    .padding()
    .background {
        RoundedRectangle(cornerRadius: 12)
            .fill(.ultraThinMaterial)
            .shadow(color: .black.opacity(0.1), radius: 10, y: 5)
    }

// Shape ichida background (iOS 15+)
Text("Shape")
    .padding()
    .background(.blue, in: RoundedRectangle(cornerRadius: 12))

// ═══════════════════════════════════════
//  KARTA DIZAYNI — overlay + background
// ═══════════════════════════════════════
struct MahsulotKartasi: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("iPhone 15 Pro")
                .font(.headline)
            Text("$999")
                .font(.title2.bold())
                .foregroundStyle(.blue)
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        // Fon — gradient + soya
        .background {
            RoundedRectangle(cornerRadius: 16)
                .fill(.background)
                .shadow(color: .black.opacity(0.08), radius: 12, y: 4)
        }
        // Ustida — "Yangi" badge
        .overlay(alignment: .topTrailing) {
            Text("YANGI")
                .font(.caption2.bold())
                .foregroundStyle(.white)
                .padding(.horizontal, 8)
                .padding(.vertical, 4)
                .background(.green, in: Capsule())
                .padding(8)
        }
        // Ustida — chegara
        .overlay {
            RoundedRectangle(cornerRadius: 16)
                .strokeBorder(.gray.opacity(0.2), lineWidth: 1)
        }
    }
}